ES6-变量的解构赋值

ES6-变量的解构赋值

概述：

解构赋值：

• 左右两边必须一样；右边得是个东西
• 必须定义和赋值同步完成

  <script>
    let { a, b };

    { a, b } = { a: 12, b: 5 };// 错误写法

    alert(a + ',' + b);
  </script>

什么是解构赋值

ES6 中允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（destructuring）

**解构： **解开目标的整体结构
**赋值： **将目标中的数据 赋值到我们定义的变量中

自动解构

数组的解构赋值语法

var [a,b,c]=[1,2,3];
按照对应的顺序解构

        var y = 1;
        var x = 2;
        var [x,y] = [y,x];
        console.log(x,y);

对象的解构赋值语法

var {foo,bar}={foo:‘aaa’,bar:‘bbb’};
变量名必须和属性名一致

对象的结构往往用在函数的形参列表中，调用函数的时候，传的对象（实参）就能够自动解构。

function People({name,age,sex,yuwen,shuxue,yingyu}){
	this.name = name;
	this.age = age;
	this.sex = sex;
	this.yuwen = yuwen;
	this.shuxue = shuxue;
	this.yingyu = yingyu;
}
var xiaoming = new People({
	"name" : "小明",
	"age" : 12,
	"sex" : "男",
	"yuwen" : 34,
	"shuxue" : 44,
	"yingyu" : 66
});

console.log(xiaoming);

字符串的解构赋值

和数组一致
变量名的存储顺序和字符串存储的顺序一致

    let str = "abc";
    let [d,f] = str;
    console.log(d,f);

解构赋值的作用

函数只能返回一个值，如果要返回多个值，只能将它们放在数组中或对象里返回。有了解构赋值，取出这些值就非常方便。

剩余参数

左边迎接的人群，比来宾少，有些来宾就接不到：

var [a,b,c] = [1,2,3,4,5,6,7];
console.log(a);  //1
console.log(b);  //2
console.log(c);  //3

我们可以在c变量之前加上**…运算符**，表示c现在接受所有剩余的参数。

var [a,b,...c] = [1,2,3,4,5,6,7];
console.log(a);
console.log(b);
console.log(c);  //[3,4,5,6,7]

**
需要注意的事情是：…只能出现在最后一项。****

var [a,...b,c] = [1,2,3,4,5,6,7];
console.log(a);
console.log(b);  //报错！
console.log(c);

强制解构

在数组前面加上…运算符，表示强制解构。这个数组将变为零散量。
**
如同每个量之间隔了空格输出了。

var arr = [1,2,3];
console.log(...arr);// 1 2 3
console.log(1,2,3);// 1 2 3

…运算符也可以作用于对象，通常用于一个情况：创建obj1的副本，仅仅改变obj1的某一（些）个属性。

var obj1 = {
	"a" : 1,
	"b" : 2,
	"c" : 3
};

var obj2 = {
	...obj1 ,
	"b" : 8
};

console.log(obj2);// { a:1, b:8, c:3 }

强制解构还可以用于类数组对象，可以将类数组对象变为真的数组：

const fun = function(){
	//下面的语句是最快的将类数组对象变为数组的方法
	var arr = [...arguments];
	console.log(arr);		// [ 1, 2, 3, 4, 5, 6, 7, 8 ]
	console.log(Array.isArray(arr)); // true
  }
fun(1,2,3,4,5,6,7,8);