let和const
共同作用
- 声明变量
- 块级作用域内使用，只在代码块中可以使用
- 不存在变量提升（使用变量后再声明，在let和const中会报错）
- 在不存在变量提升的基础上，在声明变量前，会存在暂时性死区
- 相同作用域内禁止重复声明
- 声明的变量，不属于顶层对象（window）的属性
const 使用方法
- 声明之后的值不可进行改变
结构赋值
数组的解构赋值
数组的解构赋值是一种简洁的语法，允许你将数组中的值赋给变量。通过解构赋值，你可以从数组中提取值并将其分配给独立的变量，或者直接操作数组中的部分元素。
基本用法
你可以将数组的元素直接解构赋值给变量：
const nums = [10, 20, 30];
// 将数组中的元素分别赋给 a, b, c
const [a, b, c] = nums;
console.log(a); // 输出 10
console.log(b); // 输出 20
console.log(c); // 输出 30
跳过元素
使用逗号 , 来跳过数组中的某些元素：
const nums = [10, 20, 30, 40, 50];
// 只解构第一个和第三个元素
const [first, , third] = nums;
console.log(first); // 输出 10
console.log(third); // 输出 30
剩余元素
使用 rest 参数（...）来收集数组中剩余的元素：
const nums = [10, 20, 30, 40, 50];
// 解构前两个元素，其余的放在一个新数组中
const [first, second, ...rest] = nums;
console.log(first); // 输出 10
console.log(second); // 输出 20
console.log(rest); // 输出 [30, 40, 50]
默认值
你可以为解构赋值的变量提供默认值，以防数组中没有足够的元素：
const nums = [10];
// 为解构赋值提供默认值
const [a = 0, b = 0, c = 0] = nums;
console.log(a); // 输出 10
console.log(b); // 输出 0
console.log(c); // 输出 0
嵌套数组解构
如果数组中包含嵌套数组，你可以通过嵌套解构来提取值：
const nums = [10, [20, 30], 40];
// 嵌套解构
const [a, [b, c], d] = nums;
console.log(a); // 输出 10
console.log(b); // 输出 20
console.log(c); // 输出 30
console.log(d); // 输出 40
从数组的特定索引开始解构
要从数组的特定索引开始解构，可以结合使用 slice() 方法：
const nums = [10, 20, 30, 40, 50];
// 从索引 2 开始解构
const [a, b, c] = nums.slice(2);
console.log(a); // 输出 30
console.log(b); // 输出 40
console.log(c); // 输出 50
总结
- 基础用法：从数组中提取值，赋给独立变量。
- 跳过元素：用逗号跳过不需要的元素。
- 剩余参数：用
...rest收集剩余元素。 - 默认值：处理数组长度不足的情况。
- 嵌套解构：提取嵌套数组中的值。
这些特性使得数组解构赋值在处理数组数据时非常方便和强大。
对象的解构赋值
对象的解构赋值是一种简洁的语法，用于从对象中提取属性值并将其赋值给变量。这种方式不仅可以提高代码的可读性，还可以方便地处理对象中的数据。
基本用法
对象解构赋值允许你从对象中提取属性值并将其赋给变量。变量名必须与对象中的属性名相同。
const person = {
name: 'Alice',
age: 25,
city: 'New York'
};
// 解构赋值
const { name, age, city } = person;
console.log(name); // 输出 'Alice'
console.log(age); // 输出 25
console.log(city); // 输出 'New York'
更改变量名
你可以为解构出来的变量指定一个新的名称，而不是使用属性名作为变量名。
const person = {
name: 'Alice',
age: 25
};
// 更改变量名
const { name: personName, age: personAge } = person;
console.log(personName); // 输出 'Alice'
console.log(personAge); // 输出 25
默认值
如果对象中没有某个属性，解构赋值时可以为变量提供一个默认值。
const person = {
name: 'Alice',
age: 25
};
// 使用默认值
const { name, age, city = 'Unknown' } = person;
console.log(name); // 输出 'Alice'
console.log(age); // 输出 25
console.log(city); // 输出 'Unknown'
嵌套对象解构
如果对象中包含嵌套对象，可以通过嵌套解构来提取其中的属性。
const person = {
name: 'Alice',
address: {
city: 'New York',
zipcode: '10001'
}
};
// 嵌套对象解构
const { name, address: { city, zipcode } } = person;
console.log(name); // 输出 'Alice'
console.log(city); // 输出 'New York'
console.log(zipcode); // 输出 '10001'
剩余参数
你可以使用 rest 参数 (...) 来获取对象中剩余的属性。
const person = {
name: 'Alice',
age: 25,
city: 'New York'
};
// 剩余参数
const { name, ...otherInfo } = person;
console.log(name); // 输出 'Alice'
console.log(otherInfo); // 输出 { age: 25, city: 'New York' }
在函数参数中使用解构
解构赋值可以直接在函数参数中使用，这在处理带有多个属性的对象参数时非常有用。
function greet({ name, age }) {
console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}
const person = {
name: 'Alice',
age: 25
};
greet(person); // 输出 'Hello, my name is Alice and I am 25 years old.'
深度嵌套解构
你可以在解构时直接对深层嵌套的对象进行解构。
const person = {
name: 'Alice',
address: {
city: 'New York',
zip: {
code: '10001',
extended: '1234'
}
}
};
// 深度嵌套解构
const { address: { zip: { code, extended } } } = person;
console.log(code); // 输出 '10001'
console.log(extended); // 输出 '1234'
解构并使用默认值
可以结合使用嵌套解构和默认值，以处理可能缺失的属性。
const person = {
name: 'Alice',
address: {
city: 'New York'
}
};
// 解构并使用默认值
const { address: { city, zipcode = '00000' } } = person;
console.log(city); // 输出 'New York'
console.log(zipcode); // 输出 '00000'
总结
- 基本用法：从对象中提取属性值并赋给变量。
- 更改变量名：通过
属性名: 变量名语法改变变量名称。 - 默认值：为解构时不存在的属性设置默认值。
- 嵌套解构：解构嵌套对象中的属性。
- 剩余参数：使用
...操作符获取剩余的属性。 - 函数参数解构：在函数参数中直接进行对象解构。
- 深度嵌套解构：处理深层嵌套对象的解构。
这些特性使得对象解构赋值在处理复杂对象数据时非常强大且灵活。
其它解构赋值还有，字符串解构赋值，数值和布尔值的解构赋值
结构赋值的用途
- 交换变量的值
- 从函数返回多个值
- 提取JSON数据
- 获取指定的模块
