JavaScript(四)

一、JavaScript变量

在 JavaScript 中,你可以使用几种不同的方式来声明变量。以下是主要的几种方式:

  1. 使用 var 关键字

    在 ES5 (ECMAScript 5) 及之前的版本中,var 是最常用的声明变量的方式。但是,var 有一个问题,那就是它会将变量提升到其所在函数或全局作用域的顶部(也称为变量提升)。这有时会导致意外的行为,尤其是在复杂的代码中。

javascript 复制代码
var x = 10; // 声明一个变量 x 并赋值为 10  
console.log(x); // 输出 10

2.使用 let 关键字

在 ES6 (ECMAScript 2015) 中引入了 let 关键字,它允许你声明一个块级作用域的局部变量,这意味着变量只在其声明的块(例如 {...})或函数体内是可见的。let 不会进行变量提升,因此在声明之前访问它会抛出一个错误。

javascript 复制代码
{  
    let y = 20; // 声明一个块级作用域的变量 y 并赋值为 20  
    console.log(y); // 输出 20  
}  
console.log(y); // ReferenceError: y is not defined(因为 y 是在块级作用域内声明的)

3.使用 const 关键字
const 用于声明一个常量,其值在初始化后不能被重新赋值。但是,如果常量是一个对象或数组,你可以修改其属性或元素,但不能重新分配一个新的对象或数组给该常量。

javascript 复制代码
const z = 30; // 声明一个常量 z 并赋值为 30  
console.log(z); // 输出 30  
z = 40; // TypeError: Assignment to constant variable.(尝试修改常量的值会抛出错误)  

const obj = { a: 1 }; // 声明一个常量对象  
obj.a = 2; // 可以修改对象的属性  
console.log(obj.a); // 输出 2  
obj = { a: 3 }; // TypeError: Assignment to constant variable.(尝试重新分配一个新的对象给常量会抛出错误)

4.函数声明 (虽然不是真正的变量声明,但也是一种声明):

在 JavaScript 中,函数也可以被视为一种特殊的变量,因为它们可以被赋值给变量、作为参数传递,或者从其他函数返回。

javascript 复制代码
function greet() {  
    console.log("Hello, world!");  
}  
  
const greetWorld = greet; // 将函数 greet 赋值给变量 greetWorld  
greetWorld(); // 输出 "Hello, world!"

在选择使用哪种方式声明变量时,你应该考虑作用域、是否需要重新赋值以及代码的可读性和可维护性。在现代 JavaScript 开发中,通常推荐使用 letconst 来声明变量,因为它们提供了更清晰的作用域和更好的错误处理。

二、变量赋值

在 JavaScript 中,变量赋值是将一个值或表达式的结果存储到变量中的过程。你可以将各种类型的数据赋值给变量,包括数字、字符串、布尔值、对象、数组、函数等。赋值操作使用单个等号 =

以下是一些变量赋值的示例:

javascript 复制代码
// 数字赋值  
let number = 42;  
  
// 字符串赋值  
let text = "Hello, world!";  
  
// 布尔值赋值  
let isTrue = true;  
  
// 对象赋值  
let person = {  
  name: "Alice",  
  age: 30  
};  
  
// 数组赋值  
let colors = ["red", "green", "blue"];  
  
// 函数赋值  
let greet = function() {  
  console.log("Hello!");  
};  
  
// 表达式赋值  
let sum = 2 + 3; // sum 的值是 5  
  
// 将一个变量的值赋给另一个变量  
let anotherNumber = number; // anotherNumber 的值也是 42

在 JavaScript 中,变量赋值是通过引用进行的,这意味着对象、数组和函数等复杂类型的赋值实际上是传递引用(内存地址),而不是复制值本身。因此,如果你将一个对象赋值给另一个变量,这两个变量将引用同一个对象。

javascript 复制代码
let obj1 = { value: 10 };  
let obj2 = obj1; // obj2 和 obj1 引用同一个对象  
obj2.value = 20; // 修改 obj2 的属性也会影响到 obj1,因为它们引用同一个对象  
console.log(obj1.value); // 输出 20

此外,如果你使用 const 声明了一个变量,你不能给这个变量重新赋值(指向新的内存地址),但是你可以修改它的属性(如果它是一个对象或数组的话)

javascript 复制代码
const constantObject = { property: "initial" };  
constantObject.property = "changed"; // 可以修改对象的属性  
console.log(constantObject.property); // 输出 "changed"  
  
// constantObject = { property: "new" }; // 这会抛出错误,因为不能重新赋值给 const 声明的变量

理解 JavaScript 的赋值行为和引用机制对于编写正确且高效的代码至关重要。特别是在处理复杂数据类型和函数时,要特别注意变量的引用和值的传递。

三、其他相关知识点

关于JavaScript变量的相关知识点和需要注意的地方,有以下几点:

  1. 变量的声明
    • 在JavaScript中,你可以使用varletconst来声明变量。
    • var是最早的关键字,但在ES6(ECMAScript 2015)之后,推荐使用letconst
    • let用于定义块级作用域的变量,即变量只在其所在的代码块(例如,大括号{}内部)中有效。
    • const用于定义不可变的变量,即常量。一旦赋值,就不能再更改其值(但如果是对象或数组,可以更改其内部属性或元素)。
  2. 变量的命名
    • 变量名可以包含字母、数字、下划线和美元符号$
    • 变量名是区分大小写的,所以myVarmyvar是两个不同的变量。
    • 通常,变量名应简洁明了,并尽可能描述其用途。如果变量名由多个单词组成,通常使用驼峰命名法(camelCase),即第一个单词的首字母小写,后续单词的首字母大写。
    • 避免使用JavaScript保留字作为变量名。
  3. 变量的赋值
    • 赋值操作使用单个等号=
    • 可以将一个值或表达式的结果赋值给变量。
    • 如果只声明变量而不赋值,则该变量的值为undefined
  4. 变量的作用域和生命周期
    • 使用var声明的变量具有函数作用域或全局作用域(如果它们在函数外部声明)。
    • 使用letconst声明的变量具有块级作用域(即,它们只在它们被声明的代码块中有效)。
    • 变量的生命周期取决于其作用域。全局变量在整个脚本的生命周期内都可用,而局部变量只在其所在的函数或代码块执行期间可用。
  5. 常量(使用const声明的变量)
    • 常量的值在声明后不能更改。但是,如果常量是一个对象或数组,你可以更改其内部属性或元素。
    • 尽量避免重新声明已经存在的常量,这会导致错误。
  6. 变量提升(Variable Hoisting)
    • 在JavaScript中,使用var声明的变量存在变量提升现象。这意味着变量可以在声明之前就被访问(尽管此时它的值为undefined)。但是,这种行为可能会导致混淆和错误,因此建议使用letconst来避免这种情况。
  7. 使用有意义的变量名
    • 为了提高代码的可读性和可维护性,应使用有意义的变量名。避免使用如abc等无意义的变量名。
  8. 避免全局变量
    • 过度使用全局变量可能会导致代码难以管理和维护。尽量将变量限制在其需要的最小作用域内。
  9. 使用严格模式(Strict Mode)
    • 在严格模式下,JavaScript对代码执行更严格的检查,这有助于捕获一些常见的编码错误。可以在脚本或函数的开头添加'use strict';来启用严格模式。
  10. 注意变量类型
    • JavaScript是一种弱类型语言,这意味着变量的类型可以根据所赋值的类型自动更改。但是,了解变量的类型仍然很重要,因为不同类型的变量具有不同的行为。例如,将字符串和数字相加会导致字符串连接,而不是算术加法。

11.在JavaScript中,你可以在一行中同时定义多个变量。这通常通过使用逗号分隔不同的变量声明来实现。下面是一个例子:

javascript 复制代码
let variable1 = "Hello", variable2 = 42, variable3 = true;

在上面的代码中,我们同时定义了三个变量:variable1是一个字符串,variable2是一个数字,variable3是一个布尔值。每个变量之间使用逗号,分隔,并且每个变量都有自己的赋值表达式。

这种做法可以简化代码,让你在更少的行中定义多个变量。然而,出于可读性和维护性的考虑,有些开发者可能更倾向于为每个变量单独写一行代码,尤其是在变量名和赋值逻辑较为复杂的情况下。

javascript 复制代码
	let variable1 = "Hello"; 

	let variable2 = 42; 

	let variable3 = true;

这种做法使得每个变量的声明和赋值更加清晰,也更容易追踪变量的来源和用途。

四、JavaScript基本数据类型

JavaScript中的基本数据类型(也称为原始数据类型)包括以下几种:

  1. Number :用于表示数值,包括整数和浮点数。JavaScript中的所有数字都是以64位浮点数形式存储的,即使它们看起来是整数。特殊的数值包括Infinity(正无穷大)、-Infinity(负无穷大)和NaN(非数字,表示一个计算结果是未定义或不可表示的值)。

  2. String:用于表示文本数据,即一系列字符。字符串是不可变的,这意味着你不能改变一个字符串中的某个字符,但你可以创建新的字符串。

  3. Boolean :有两个可能的值:truefalse。通常用于条件判断。

  4. Null :表示一个空值或"无"的值。nullnull类型的唯一值,它表示一个空引用或没有对象。

  5. Undefined :当变量被声明了,但没有赋值时,它的值就是undefinedundefined是一个类型,并且undefined是这个类型的唯一值。

  6. Symbol (ES6新增):表示一个唯一的、不可变的原始值,通常用作对象的属性键。每个Symbol值都是唯一的,不会与其他任何Symbol值相等。

  7. BigInt (ES2020新增):可以表示任意大的整数。当数值超过Number.MAX_SAFE_INTEGER或小于Number.MIN_SAFE_INTEGER时,可以使用BigInt

这些基本数据类型在JavaScript中是不可变的,这意味着你不能直接改变一个基本数据类型的值。当你尝试"改变"一个基本数据类型的值时,实际上是在内存中创建了一个新的值,并将变量指向这个新的值。

请注意,除了这些基本数据类型之外,JavaScript还有一个复杂数据类型,即Object。对象是一种复合数据类型,可以包含多种值,包括其他对象。数组、函数、日期、正则表达式等都是对象的具体实例。

以下是JavaScript中基本数据类型的详细讲解:

  1. Number

    • 用于表示数值,包括整数和浮点数。
    • 在JavaScript中,数字以64位浮点数形式存储,即使它们被声明为整数。
    • 特殊的数值有Infinity(正无穷大)、-Infinity(负无穷大)和NaN(非数字,表示一个计算结果是未定义或不可表示的值)。
    • 你可以使用各种数学运算符和函数对数字进行运算和转换。
  2. String

    • 用于表示文本数据,即一系列字符。
    • 字符串是不可变的,你不能改变字符串中的某个字符,但你可以创建新的字符串。
    • 字符串可以使用单引号、双引号或反引号来定义。
    • 字符串提供了许多方法来操作和格式化文本,如concat()substring()toUpperCase()等。
    • 模板字符串(使用反引号)允许你在字符串中嵌入表达式,并通过${}语法进行求值。
  3. Boolean

    • 有两个可能的值:truefalse
    • 通常用于条件判断、逻辑运算等。
    • JavaScript中的比较语句(如=====<>等)通常返回布尔值。
    • 在JavaScript中,许多值都可以被转换为布尔值(称为"真值"或"假值")。例如,0NaNnullundefined和空字符串''都被视为假值,而其他所有值都被视为真值。
  4. Null

    • 表示一个空值或"无"的值。
    • nullnull类型的唯一值,它表示一个空引用或没有对象。
    • 使用null来初始化一个变量,可以表示该变量将来会引用一个对象,但当前还没有引用任何对象。
    • 注意:虽然null在逻辑上表示"无"或"空",但在类型检测时(使用typeof操作符),null会被视为一个对象(返回"object")。这是因为历史原因,但在现代JavaScript中,这可能会引发混淆。
  5. Undefined

    • 当变量被声明了,但没有赋值时,它的值就是undefined
    • undefined是一个类型,并且undefined是这个类型的唯一值。
    • 在JavaScript中,未初始化的变量、不存在的对象属性、未定义的函数返回值等都会返回undefined
    • undefinednull在逻辑上都是表示"无"或"空",但它们在类型上是不同的。使用==操作符比较nullundefined时,会返回true,但使用===操作符(严格相等比较)时,会返回false
  6. Symbol(ES6新增):

    • 表示一个唯一的、不可变的原始值。
    • 每个Symbol值都是唯一的,不会与其他任何Symbol值相等。
    • Symbol类型常用于对象的属性键,以避免属性名冲突。
    • 你可以使用Symbol()函数来创建一个新的Symbol值。例如:let mySymbol = Symbol('mySymbol');
    • 由于Symbol类型的值是唯一的,因此它们也可以用于对象的方法或属性的私有封装。

这些就是JavaScript中的基本数据类型。它们在JavaScript编程中扮演着重要的角色,并提供了各种方法和操作来处理和转换这些数据类型。

五、String类型的对象一系列方法讲解及例子

String 类型是 JavaScript 中用于表示文本数据的基础数据类型。尽管 String 是原始数据类型,但 JavaScript 为其提供了一系列的方法和属性,使得字符串的操作变得非常灵活和方便。以下是一些常用的 String 类型对象的方法,并带有相应的例子来解释它们是如何工作的。

1. charAt(index)

返回指定索引位置的字符。

javascript 复制代码
let str = "Hello";  
console.log(str.charAt(0)); // 输出 "H"

2. charCodeAt(index)

返回指定索引位置的字符的 Unicode 编码。

javascript 复制代码
let str = "Hello";  
console.log(str.charCodeAt(0)); // 输出 72,即 "H" 的 Unicode 编码

3. concat(str1, str2, ..., strN)

连接两个或多个字符串,并返回新的字符串。

javascript 复制代码
let str1 = "Hello";  
let str2 = "World";  
let result = str1.concat(" ", str2);  
console.log(result); // 输出 "Hello World"

4. indexOf(searchValue[, fromIndex])

返回某个指定的字符串值在字符串中首次出现的位置。

javascript 复制代码
let str = "Hello World";  
console.log(str.indexOf("World")); // 输出 6

5. lastIndexOf(searchValue[, fromIndex])

返回某个指定的字符串值在字符串中最后出现的位置。

javascript 复制代码
let str = "Hello World, hello everyone";  
console.log(str.lastIndexOf("hello")); // 输出 13

6. slice(startIndex[, endIndex])

提取字符串的某个部分,并在新的字符串中返回被提取的部分。

javascript 复制代码
let str = "Hello World";  
console.log(str.slice(0, 5)); // 输出 "Hello"

7. substring(startIndex[, endIndex])

提取字符串中介于两个指定的下标之间的字符。

javascript 复制代码
let str = "Hello World";  
console.log(str.substring(0, 5)); // 输出 "Hello"

8. substr(startIndex[, length])

从起始索引号提取字符串中指定数目的字符。

javascript 复制代码
let str = "Hello World";  
console.log(str.substr(0, 5)); // 输出 "Hello"

9. toUpperCase()

把字符串转换为大写。

javascript 复制代码
let str = "hello";  
console.log(str.toUpperCase()); // 输出 "HELLO"

10. toLowerCase()

把字符串转换为小写。

javascript 复制代码
let str = "HELLO";  
console.log(str.toLowerCase()); // 输出 "hello"

11. trim()

去除字符串两端的空白符。

javascript 复制代码
let str = "   Hello World   ";  
console.log(str.trim()); // 输出 "Hello World"

12. replace(regexp|substr, newSubStr|function)

在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

javascript 复制代码
let str = "Hello World";  
console.log(str.replace("World", "Universe")); // 输出 "Hello Universe"

13. split(separator[, limit])

把字符串分割为字符串数组。

javascript 复制代码
let str = "apple,banana,cherry";  
console.log(str.split(",")); // 输出 ["apple", "banana", "cherry"]

14. search(regexp)

执行正则表达式匹配查找,并返回第一个匹配的索引。

javascript 复制代码
let str = "Hello World";  
console.log(str.search("World")); // 输出 6

15. match(regexp)

可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。

javascript 复制代码
let str = "Hello123World456";  
let matches = str.match(/\d+/g);  
console.log(matches); // 输出 ["123", "456"]

16. localeCompare(targetString[, locales[, options]])

用本地特定的顺序来比较两个字符串。

javascript 复制代码
let str1 = "apple";  
let str2 = "Banana";  
  
// 使用 localeCompare 方法比较两个字符串  
let result = str1.localeCompare(str2);  
  
// 输出比较结果  
console.log(result);

在这个例子中,localeCompare() 方法将比较 str1str2。由于 JavaScript 的 localeCompare() 方法默认使用当前环境的区域设置(locale)来执行比较,并且默认情况下,字符串的比较是区分大小写的,所以 "apple" 会被视为在 "Banana" 之前(在大多数区域设置中)。因此,result 的值将会是负数(具体取决于具体的实现和区域设置,但通常会是 - 开头的数字)。

相关推荐
景天科技苑5 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
chnming198711 分钟前
STL关联式容器之map
开发语言·c++
进击的六角龙12 分钟前
深入浅出:使用Python调用API实现智能天气预报
开发语言·python
檀越剑指大厂12 分钟前
【Python系列】浅析 Python 中的字典更新与应用场景
开发语言·python
石小石Orz14 分钟前
Three.js + AI:AI 算法生成 3D 萤火虫飞舞效果~
javascript·人工智能·算法
小行星12516 分钟前
前端预览pdf文件流
前端·javascript·vue.js
join818 分钟前
解决vue-pdf的签章不显示问题
javascript·vue.js·pdf
湫ccc20 分钟前
Python简介以及解释器安装(保姆级教学)
开发语言·python
小行星12523 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
程序伍六七24 分钟前
day16
开发语言·c++