- 解构运算符、扩展运算符和 rest 运算符可以通过减少赋值语句的使用，或者减少通过下标访问数组或对象的方式，使代码更加简洁优雅可读性更佳
解构赋值
- 作用：快速取得数组或者对象中的元素或属性，无需使用 arr[index] obj[key] 这种传统的方式进行赋值
数组解构
const numbers = [ 'one', 'two', 'three', 'four' ];
const [one, , three, , five = 'have no five'] = numbers; // 相对应位置的值 默认值写法同对象一样用=
console.log(one, three, five); // one three have no five
// for 循环解构
var arr = [[11, 12], [21, 22], [31, 32]];
for (let [a, b] of arr) {
console.log(a);
console.log(b);
}
let a = 10, b = 20;
[a, b] = [b, a];
console.log(a, b); // 20 10
var arr = [[11, 12], [21, 22], [31, 32]];
for (let [a, b] of arr) {
console.log(a);
console.log(b);
}
var arr = ['this is a string', 2, 3];
function fn1([a, b, c]) {
console.log(a);
console.log(b);
console.log(c);
}
fn1(arr);
对象解构
const Tom = {
name: 'Tom Jones',
age: 25,
work: null
}
const name = 'Deny'
const { name: n, age, hobby = 'play', work } = Tom;
console.log(name); // Deny
console.log(n); // Tom 由于提前声明name了所以要重命名
console.log(age); // 25
console.log(hobby); // play 属性不存在的默认值写法(null 0 false 视为存在)
console.log(work); // null
var obj = {
name: 'chris',
sex: 'male',
age: 26,
son: {
sonname: '大熊',
sonsex: 'male',
sonage: 1
}
};
function fn2({sex, age, name}) {
console.log(name + ' ' + sex + ' ' + age);
}
fn2(obj);
var obj = {
name: 'chris',
sex: 'male',
age: 26
};
var {name: nickname, age: howold} = obj;
console.log(nickname + ' ' + howold); //chris 26
var obj = {
name: 'chris',
sex: 'male',
age: 26,
son: {
sonname: '大熊',
sonsex: 'male',
sonage: 1
}
};
var {name, sex, age, son: {sonname, sonsex, sonage}} = obj;
console.log(sonname + ' ' + sonsex + ' ' + sonage);
var arr = [{name: 'chris', age: 26}, {name: 'jack', age: 27}, {name: 'peter',age: 28}];
for (let {age, name} of arr) {
console.log(name + ' ' + age);
}
字符串解构
var str = 'love';
var [a, b, c, d] = str;
console.log(a);//l
console.log(b);//o
console.log(c);//v
console.log(d);//e
扩展运算符
- 用 ... 表示，功能是把数组或类数组对象展开成一系列的用逗号隔开的值
- 函数传参
var foo = function(a, b, c) {
console.log(a);
console.log(b);
console.log(c);
}
var arr = [1, 2, 3];
//传统写法
foo(arr[0], arr[1], arr[2]);
//使用扩展运算符
foo(...arr);
var arr2 = arr;
var arr3 = [...arr];
console.log(arr===arr2); //true, 说明arr和arr2指向同一个数组
console.log(arr===arr3); //false, 说明arr3和arr指向不同数组
var arr4 = [...arr, 4, 5, 6];
console.log(arr4);//[1, 2, 3, 4, 5, 6]
var str = 'love';
var arr5 = [...str];
console.log(arr5);//[ 'l', 'o', 'v', 'e' ]
rest 运算符
- 也是 ... 来表示，不过功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组
var bar = function(...args) {
for (let el of args) {
console.log(el);
}
}
bar(1, 2, 3, 4);
bar = function(a, ...args) {
console.log(a);
console.log(args);
}
bar(1, 2, 3, 4);
var [a, ...rest] = [1, 2, 3, 4];
console.log(a);//1
console.log(rest);//[2, 3, 4]
总结
- 等号表达式是典型的赋值形式，函数传参和 for 循环的变量是特殊形式的赋值
- 解构的原理是赋值的两边具有相同的结构，省去了下标逐个赋值的麻烦
- ... 放在形参或者等号的左边则为 rest 运算符，放在实参或者等号右边则为 spread 运算符。说白了就是放在被赋值一方为 rest 运算符，放在赋值一方则为 spread 运算符
- 在等号或者 for 循环中如果需要从数组或对象中取值，尽量使用解构赋值
- 在自定义函数的时候如果调用者传过来的参数是数组或者对象，形参我们尽量使用解构方式，优先对象解构其次数组解构，提高代码的可读性
- 在调用第三方函数的时候，如果函数接收多个参数并且要传入的为数组，则使用扩展运算符
- rest 运算符主要处理不定数量参数，可以避免 arguments 对象的使用
