持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第16天，点击查看活动详情
变量
1. 交换两个变量的值
let a = 'a';
let b = 'b';
[a, b] = [b, a];
console.log(a, b); // b a
2. 交换多个变量的值可以达到排序的效果
let num1 = 3
let num2 = 1
let num3 = 2
[num1, num2, num3] = [num2, num3, num1]
console.log(`First:${num1}, Second:${num2}, Third:${num3}`)
// First:1, Second:2, Third:3
数组
3. 从前向后依次取元素
const arr = [1, 2, 3, 4, 5, 6];
[num1, num2, num3] = arr;
console.log(`${num1}, ${num2}, ${num3}`); // 1, 2, 3
4. 使用...处理剩余参数
const arr = [1, 2, 3, 4, 5, 6];
const [num1, num2, num3, ...restNum] = arr;
console.log(`${num1}, ${num2}, ${num3}, ${restNum}`); // 1, 2, 3, 4,5,6
5. 复制数组
const arr = [1, 2, 3, 4, 5, 6];
const [...copyArr] = arr;
console.log(copyArr); // [1, 2, 3, 4, 5, 6]
6. 用逗号进行占位，取指定位置的元素
const arr = [1, 2, 3, 4, 5, 6];
[, , num3, , num5] = arr;
console.log(`${num3}, ${num5}`); // 3, 5
7. 以属性的形式指定元素序号
const arr = [1, 2, 3, 4, 5, 6];
const { 2: num3, 4: num5 } = arr;
console.log(`${num3},${num5}`); //3, 5
8. 处理空数组或不存在的元素
如果元素不存在，设置默认值
const arr = [1, 2, 3, 4, 5, 6];
const { 2: num3, 4: num5, num7 = 7 } = arr;
console.log(`${num3}, ${num5}, ${num7}`); //3, 5, 7
如果数组为空，就显示指定内容；如果不为空，就被覆盖
const arr = [1, 2, 3, 4, 5, 6];
const [notExist = 'arr is empty'] = arr;
console.log(notExist); // 1
对象
9. 根据对象的属性名来匹配
const obj = {
id: '1',
name: '小明',
age: 18,
gender: '男',
email: 'xiaoming@666.com',
};
const { name, email } = obj;
console.log(name, email); // 小明 xiaoming@666.com
10. 根据自定义变量名来匹配
const obj = {
id: '1',
name: '小明',
age: 18,
gender: '男',
email: 'xiaoming@666.com',
};
const { name: getName, email: getEmail } = obj;
console.log(getName, getEmail); // 小明 xiaoming@666.com
11. 使用...删除不要的属性
const obj = {
id: '1',
name: '小明',
age: 18,
gender: '男',
email: 'xiaoming@666.com',
};
const { id, age, ...restObj } = obj;
console.log(restObj); // { name: '小明', gender: '男', email: 'xiaoming@666.com' }
12. 访问嵌套对象
const obj = {
name: '小明',
skills: {
cook: {
main: '西红柿炒蛋',
},
program: {
frontEnd: 'JavaScript',
backEnd: 'Java',
},
},
};
let { skills: { cook } } = obj;
console.log(cook); // { main: '西红柿炒蛋' }
let { skills: { program: { frontEnd } } } = obj;
console.log(frontEnd); // JavaScript
13. 遍历数组中的对象
在Array.prototype.forEach()的item位置使用花括号，填上需要获取的属性名
const arr = [
{ name: 'xiaoming', age: 18 },
{ name: 'xiaohong', age: 28 },
{ name: 'xiaogang', age: 38 },
];
arr.forEach(({ age }) => {
console.log(`年龄:${age}`);
});
// 年龄:18
// 年龄:28
// 年龄:38
