ES6变量的解构赋值-ES6连载3

• 基本用法

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

• 关于给变量赋值，传统的变量赋值是这样的：

var arr = [100,200,300];//把数组的值分别赋给下面的变量；
var a = arr[0];
var b = arr[1];
var c = arr[2];

console.log(a);//a的值为100
console.log(b);//b的值为200
console.log(c);//c的值为300

//将数组的元素值100，200，300分别赋值给变量a，b，c，结果也是如我们所愿，赋值成功，这是一种传统的赋值方式。

• 变量的解构赋值（ES6 允许写成这样的形式）：

var [a,b,c] = [100,200,300]; //把数组的值分别赋给下面的变量；
console.log(a);//a的值为100
console.log(b);//b的值为200
console.log(c);//c的值为300

//赋值的代码大大减少了，不需要分别把变量a，b，c分别声明定义和赋值，只需要将变量a，b，c作为一个数组的元素，然后将数组[100,200,300]赋值给数组[a,b,c]即可，变量a，b，c即可分别得到对应的值。

数组的解构赋值

• 结构赋值可以嵌套的

var [ a,b,[ c1,c2 ] ] = [ 100,200,[ 310,320 ] ];
console.log(c1);//结果：c1的值为310
console.log(c2);//结果：c2的值为320

• 不完全解构

var [a,b,c] = [100,200];
console.log(a);//结果：a的值为100
console.log(b);//结果：b的值为200
//当左边的模式（你可以理解为格式）与右边不完全一样的时候，那么赋值过程中，只会给模式匹配成功的部分的变量赋值

• 赋值不成功，变量的值为undefined

var [a,b,c] = [100,200];
console.log(a);//结果：a的值为100
console.log(b);//结果：b的值为200
console.log(c);//结果：c的值为undefined
//解构不成功，变量的值就等于undefined

• 允许设定默认值

var [a,b,c=300] = [100,200];
console.log(a);//结果:a的值为100
console.log(b);//结果:b的值为200
console.log(c);//结果:c的值为300
//变量c已经指定默认值为300，即使右侧没有与之对应的值赋给它也没关系，它都可以成功赋值为300，如果你想覆盖默认值300，只需赋一个有效的值即可

var [a,b,c=3] =[100,200,400];
console.log(a);//结果:a的值为100
console.log(b);//结果:b的值为200
console.log(c);//结果:c的值为400
//这个时候默认值3会被新的值400覆盖，c的值为400；注意：当新的值为undefined的时候，是不会覆盖默认值的。

对象的解构赋值

• 对象的解构赋值跟数组的解构赋值很类似

var { a,b,c} = {"a":1,"b":2,"c":3};
console.log(a);//结果：a的值为1    
console.log(b);//结果：b的值为2
console.log(c);//结果：c的值为3
//跟数组的解构赋值很相似，只不过是数组换成了对象。但是两者有一个不同的地方

var { a,b,c } = {"a":1,"c":3,"b":2};
console.log(a);//结果：a的值为1
console.log(b);//结果：b的值为2
console.log(c);//结果：c的值为3
//对象的解构赋值不会受到属性的排列次序影响（数组则会受影响），它是跟属性名关联起来的，变量名要和属性名一致，才会成功赋值。

• 如果变量找不到与其名字相同的属性，就会赋值不成功

var { a } = {"b":2};
console.log(a);//结果：a的值为undefine

• 如果你想给一个变量名与属性名不一样的变量解构赋值\

var { b:a,} = {"b":2};
console.log(a);//结果：a的值为2
//这样变量a同样可以赋值成功，a的值最终为2

• 对象解构赋值也可以嵌套

var {a:{b}} = {"a":{"b":1}};
console.log(b);//结果：b的值为1

• 可以指定默认值

var {a,b=2} = {"a":1};
console.log(b);//结果：b的值为默认值2

字符串的解构赋值

var [a,b,c,d,e] = "我是大帅哥";
console.log(a);//我
console.log(b);//是
console.log(c);//大
console.log(d);//帅
console.log(e);//哥
//这是因为在解构赋值的过程中，字符串被转换成了一个类似数组的对象。变量a，b，c，d，e都分别赋上了对应的值。

解构赋值的用途

• 交换变量的值

//传统做法最常用的是引入第三个变量来临时存放
var x = 1;
var y = 2;
var z = x;//第三个变量临时存放x的值
x = y;  //把y的值赋给x；
y = z;  //把z的值赋值给y；
console.log(x); //结果：x为2
console.log(y); //结果：y为1

//解构赋值，想交换两个变量的值就简单多了
var x = 1;
var y = 2;
[x,y] = [y,x];

• 提取函数返回的多个值

//函数只能返回一个值，我们可以将多个值装在一个数组或者对象中，再用解构赋值快速提取其中的值。
function demo(){
  return {"name":"张三","age":21}
}
var {name,age} = demo();
console.log(name);//结果：张三
console.log(age);//结果：21

• 定义函数参数

function demo({a,b,c}){
  console.log("姓名："+ a);
  console.log("身高："+ b);
  console.log("体重："+ c);
}
demo({a:"张三",b:"1.72m",c:"50kg",d:"8000"});
//通过这种写法， 很方便就能提取JSON对象中想要的参数，例如案例中，我们只需要获取实参中的：a，b，c，而不需要关其他的参数，比如：d或者其他更多的参数。

• 函数参数的默认值

//传统的参数默认值的实现方式是，先判断该参数是否为undefined，如果是代表没传，需要手动给它赋一个值
function demo(a){
  var name;
  if(a === undefined){//判断参数书否是否传值
    name= "张三"; //没传，赋默认值
  }else{
    name= a;
  }
  console.log(name);
}

//但是有了解构赋值，一切都变得简单很多！

function demo({name="张三"}){
  console.log("姓名："+name);//结果：姓名：张三
}
demo({});

//通过解构赋值设定函数参数的默认值，简洁地代码即可实现。函数调用的时候没有传入对应的name参数，此时name就会使用默认值：“张三”

更多资深讲师相关课程资料、学习笔记请入群后向管理员免费获取，更有专业知识答疑解惑。入群即送价值499元在线课程一份。
QQ群号：560819979
敲门砖（验证信息）：阳光三叠