ES6新特性-解构赋值
Spread / Rest 操作符
Spread / Rest 操作符 :Spread / Rest 操作符指的是 '...'
,具体是 Spread 还是 Rest 需要看上下文语境。
(1)当被用于迭代器中时,它是一个 Spread 操作符:迭代器 (Iterator)是按照一定的顺序对一个或多个容器中的元素行进遍历的一种机制。
spread运算符常常用于数组的解析与构造
:
function foo(x,y,z) {
console.log(x,y,z);
}
let arr = [1,2,3];
foo(...arr); // 1 2 3
(2)当被用于函数传参时,是一个 Rest 操作符:当被用于函数传参时,是一个 Rest 操作符:
function foo(...args) {
console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]
数组的解构
(1)在ES5标准中赋值多个变量采用的方法是:
var a = 10;
var b = 20;
var c = 30;
ES6提供了更简洁的解构赋值来实现上述变量的定义:
let [a,b,c] = [10,20,30];
console.log(a);
console.log(b);
console.log(c);
等号右边的值会按照顺序依次赋值给左边的变量。
(2)非一一对应关系的赋值
let [a,b] = [10,20,30]
console.log(a,b); //输出10,20
let [a,b,c] = [10,20]
console.log(a); //10
console.log(b); //20
console.log(c); //undefined
(3)也可以通过"…"把特定的元素放在变量里
let [a,...arr] = [10,20,30]
console.log(a); //10
console.log(arr); //20,30
(4)在ES6中可以通过解构赋值来互换变量
let a = 10;
let b = 20;
[a,b] = [b,a];
console.log(a,b)
对象的解构
(1)对象解构的写法与数组解构类似
let obj = {
name: '张三',
age: 20,
height: '178com'
}
let { name,age,height } = obj; //变量的名称必须和对象的属性名相同
console.log(name,age,height);
(2)也可以解构多层对象
let person = {
name: '张三',
age: 20,
family: {
father: '张武',
mother: '李燕'
}
}
let { name,age,family: {father,mother }} = person
console.log(name,father)
(3)在解构对象时也可以自定义变量名称:
let obj = {
name: '张三',
ge: 20
}
let { name:myname,age:myage } = obj;
console.log(myname,myage);
默认值和参数的解构
(1)不管是数组的解构赋值,还是对象的解构赋值都可以添加默认参数。
let obj = {
name: '李四',
age: 20
}
let { name,age,height="178com" } = obj;
console.log(height); //178com
(2)在函数参数中使用解构,参数解构也可以给默认参数
function fun({name,age,height="178com"} = {}){
console.log(name,age); //张三,20
}
let obj = {
name: '张三',
age: 20
}
fun(obj)