JavaScript(四) - 技术栈

一、JavaScript变量

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

使用 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 开发中，通常推荐使用 let 和 const 来声明变量，因为它们提供了更清晰的作用域和更好的错误处理。

二、变量赋值

在 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变量的相关知识点和需要注意的地方，有以下几点：

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

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

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

Boolean ：有两个可能的值：true和false。通常用于条件判断。

Null ：表示一个空值或"无"的值。null是null类型的唯一值，它表示一个空引用或没有对象。

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

Symbol （ES6新增）：表示一个唯一的、不可变的原始值，通常用作对象的属性键。每个Symbol值都是唯一的，不会与其他任何Symbol值相等。

BigInt （ES2020新增）：可以表示任意大的整数。当数值超过Number.MAX_SAFE_INTEGER或小于Number.MIN_SAFE_INTEGER时，可以使用BigInt。

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

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

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

Number：

用于表示数值，包括整数和浮点数。

在JavaScript中，数字以64位浮点数形式存储，即使它们被声明为整数。

特殊的数值有Infinity（正无穷大）、-Infinity（负无穷大）和NaN（非数字，表示一个计算结果是未定义或不可表示的值）。

你可以使用各种数学运算符和函数对数字进行运算和转换。

String：

用于表示文本数据，即一系列字符。

字符串是不可变的，你不能改变字符串中的某个字符，但你可以创建新的字符串。

字符串可以使用单引号、双引号或反引号来定义。

字符串提供了许多方法来操作和格式化文本，如concat()、substring()、toUpperCase()等。

模板字符串（使用反引号）允许你在字符串中嵌入表达式，并通过${}语法进行求值。

Boolean：

有两个可能的值：true和false。

通常用于条件判断、逻辑运算等。

JavaScript中的比较语句（如==、===、<、>等）通常返回布尔值。

在JavaScript中，许多值都可以被转换为布尔值（称为"真值"或"假值"）。例如，0、NaN、null、undefined和空字符串''都被视为假值，而其他所有值都被视为真值。

Null：

表示一个空值或"无"的值。

null是null类型的唯一值，它表示一个空引用或没有对象。

使用null来初始化一个变量，可以表示该变量将来会引用一个对象，但当前还没有引用任何对象。

注意：虽然null在逻辑上表示"无"或"空"，但在类型检测时（使用typeof操作符），null会被视为一个对象（返回"object"）。这是因为历史原因，但在现代JavaScript中，这可能会引发混淆。

Undefined：

当变量被声明了，但没有赋值时，它的值就是undefined。

undefined是一个类型，并且undefined是这个类型的唯一值。

在JavaScript中，未初始化的变量、不存在的对象属性、未定义的函数返回值等都会返回undefined。

undefined和null在逻辑上都是表示"无"或"空"，但它们在类型上是不同的。使用==操作符比较null和undefined时，会返回true，但使用===操作符（严格相等比较）时，会返回false。

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