(三) 变量的解构赋值

本节知识点

• 解构

概述

在ECMA6中允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，被称为解构。解构赋值在实际开发中可以大量减少我们的代码量，并且让我们的程序解构更清晰

(一) 数组的解构

• 简单的数组解构
  以前我们为变量赋值，我们只能直接指定值，比如

let a = 3;
let b = 1;
let c = 2;

而现在我们可以直接用数组解构的方式来进行赋值

 let [a,b,c] = [1,2,3];
    console.log(a+"||"+b+"||"+c);
    console.log(typeof (a));

上面的代码表示可以从数组中取出值，按照位置的对象关系进行对变量赋值,类型完全对的上

• 数组模式和赋值模式统一

let [a,[b,c],d] = [1,[2,3],3];
console.log(a+"||"+b+"||"+c+"||"+d);
console.log(typeof (b));

简单理解为左边和等号右边的形式要统一，要是不统一则解构失败。
要是等号两边的形式不一样。则可能获得undefined或者解构失败

• 解构的默认值

let [a=true] = [];
console.log(a);

这样解构前我在前面就给a 赋值了true这样输出的结果就是true，因为他是空

• 上边的例子数组中只有一个值，下面是多个值得

let [a,b="ab初始值"] = ["a的初始值"];
console.log(a+"||"+b);

这个意思就是变量 a,b的初始值都是"ab的初始值",然后我在后面更改了a的初始值变成了a的初始值,而b的初始值没有变
这样输出结果就是

a的初始值|| ab初始值

• 下面要注意的就是undefined和null的区别

let [a,b="初始化"] = ["a1",undefined];
console.log(a+"||"+b);  //控制台输出的就是a1||初始化,要是不写undefined他也会选取默认值

但是null不一样

let [a,b="初始化"] = ["a1",null];
console.log(a+"||"+b); /*控制台输出的结果就是a1|| null

null 相当于有值，但值为null 所以b并没有取默认值，而是解析为null

(二) 对象的解构

let {a,b} = {a:"a1",b:"b1"};
console.log(a+"||"+b); /*输出结果就是a1||b1

这里千万注意的就是对象与数组不一样。数组的元素是按照次序来排列的，变量的取值由位置来确定。而对象的属性没有次序，变量必须要同名才能取到正确的值

• 圆括号的使用

当我们在解构之前就定义了变量，这个时候你在解构就会出现问题，下面是错误代码会报错误

let foo
{foo} = {foo:"哈哈"};
console.log(foo);

要想使用不报错误可以在外面加个圆括号

let a;
({a} = {a:"haha"});
console.log(a);

(三) 字符串的解构

因为字符串被转换成了一个类似数组的解构

let [a,b,c,d] = "天气真好";
console.log(a);
console.log(b);
console.log(c);
console.log(d);