解构赋值

​ 解构赋值就是将一个集合中的元素或者说是属性 一个一个的取出来赋给一个或者是多个变量

​ 每一个数据解构的解构赋值都是不同的 数组的数据解构和对象的数据解构不同 解构方式也不同

​ 数组的解构赋值 按照顺序进行解构 字符串和数组的数据解构相同 都是有序的 所以和数组保持一致

​ 对象的解构赋值 按照键名进行解构

1.数组的解构赋值

​ 数组的解构赋值是按照数组的方式 使用数组进行解构 按照下标的顺序 变量的名字自定义

1.数组的完全解构

​ 完全解构就是将数组中所有的值全部取出 赋给所有的变量 变量的数量和数组元素的数量相等

/*
    数组的解构赋值
    1.使用数组解构数组   中括号
    2.数组的解构按照下标的顺序
    3.变量可以自定义
*/

// let a,b,c,d,e = arr;
// console.log(a);
// console.log(e);
let [a,b,c,d,e] = arr;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);

2.数组解构的缺省情况

​ 缺省情况有两种 变量大于数组元素数量 数组元素数量大于变量

​ 但是缺省情况都不会报错 只是对数组的不完全解构

/*
    缺省情况
        数组元素的数量大于变量的数量
        这种情况  不错报错  只是不完全解构  还是按照数组的下标进行解构

        数组元素的数量小于变量的数量
        这种情况  也不会报错  但是多余的变量会被赋值为undefined

*/
// let [a,b] = arr;
// console.log(a);
// console.log(b);

let [a,b,c,d,e,f] = arr;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);  //undefined

3.解构默认值

​ 在解构赋值的时候 如果说变量的数量多余数组元素 那么可以给变量设定默认值

// 数组解构
let arr = [22,66,88];

// 默认值从后往前设定默认值
let [a = 33,b = 55,c = 77,d = 99] = arr;
console.log(a);
console.log(b);
console.log(c);
console.log(d);

4.占位符解构

​ 主要的目的是尽量少的使用栈空间的内存

// 占位符解构
let arr = [11,33,55,666,88,99];

let [,,,num] = arr;
console.log(num);

2.字符串解构赋值

​ 字符串的数据解构和数组是完全相同的 每一个字符都有自己的下标

​ 都是有序的数据结构 可以迭代

// 字符串解构赋值
let str = "YES";
// console.log(str[0]);

// 完全解构
// let [a,b,c] = str;
// console.log(a);
// console.log(b);
// console.log(c);

// 不完全解构
// let [a,b,c,d] = str;
// console.log(a);
// console.log(b);
// console.log(c);
// console.log(d);

// 默认值
// let [a,b,c,d = 'M'] = str;
// console.log(a);
// console.log(b);
// console.log(c);
// console.log(d);

let [,a] = str;
console.log(a);

3.对象解构赋值

​ 对象解构赋值 因为对象是无序的 所以说对象不能按照顺序进行解构 但是对象有键名

​ 所以说 我们可以按照键名进行解构赋值 解构的时候 和数组不同

​ 1.使用对象解构对象 使用大括号{}

​ 2.按照键名解构赋值

​ 3.可以不按照顺序进行解构

let obj = {
    name : 'Eric',
    age : 18,
    sex : '男'
};

// console.log(obj);
// 如果说解构对象的时候   按照键名  不按照顺序

// let {name : uname,sex : usex,age : uage} = obj;
// console.log(uname);
// console.log(usex);
// console.log(uage);

// 缺省情况
// let {name : uname,age : uage} = obj;
// console.log(uname);
// console.log(uage);

// let {name : uname,sex : usex,age : uage,address : addr} = obj;
// console.log(uname);
// console.log(usex);
// console.log(uage);
// console.log(addr);

// 默认值解构
let {name : uname,sex : usex,age : uage,address : addr = '吉林长春'} = obj;
console.log(uname);
console.log(usex);
console.log(uage);
console.log(addr);

​ 特殊的对象解构赋值

// 特殊的解构赋值方式
let {name,sex,age} = obj;
console.log(name);
console.log(age);
console.log(sex);

4.函数参数解构赋值

// 函数参数解构赋值  参数是数组得情况下
function fn1([a,b,c] = array) {
    // console.log(array);
    console.log(a);
    console.log(b);
    console.log(c);
}

// 定义一个数组  作为实参
let arr = [11,33,88];
fn1(arr)

// 参数是对象的情况下
let obj = {name : 'Eric',age : 18};

// 对象的解构赋值和外面有点不一样
function fn2({name,age} = {name : 'Mary',age : 16}) {
    // console.log(object);
    console.log(name);
    console.log(age);
}
fn2();
fn2(obj);

本文我们介绍ES6中解构赋值。ES6的解构赋值语法是一种JS表达式。解构赋值语法是一种JS表达式，通过解构赋值，可以将属性/值从对象/数组中取出，赋值给其他变量。

下面我们具体来看看解构赋值是什么？以及是如何使用的？

下面是简单的屏幕分享，不爱看文字的同道中人可以看视频。-_-

一、获取对象属性值

在JS中如何去获取对象的属性值呢？我们还是先看ES6之前的代码是如何实现的。无非是通过点(.)语法或者下标([])的方式来获取对象的属性值，代码分别如下。

通过点语法(.)获取对象的属性值。

const user = {
    userName: "光脚丫思考",
    blog: "https://blog.csdn.net/gjysk"
}
console.info(user.userName);
console.info(user.blog);

控制台输出的内容如下图所示：

通过下标([])方式获取对象属性值的代码如下：

const user = {
    userName: "光脚丫思考",
    blog: "https://blog.csdn.net/gjysk"
}
console.info(user["userName"]);
console.info(user["blog"]);

可以看到，下标中的字符串，实际上就是属性的名称。这种语法更适合于我们不清楚具体的属性名，或者属性名是动态的情况下。如果属性名本身已经很明确了，还是点语法更简洁些。

当然了，如果与ES6语法比较起来，上面两种玩法都还是显的就没有那么简洁了。接下来，我们看看ES6是如何来获取对象的属性值的？

const user = {
    userName: "光脚丫思考",
    blog: "https://blog.csdn.net/gjysk"
}
const {userName, blog} = user;
console.info(userName);
console.info(blog);

上述代码演示了如何通过ES6语法的解构赋值来快速地获取属性值。示例中创建与对象属性名同名的变量，并将对象中同名的属性值分配给新创建的同名变量，大大地减少了许多重复的代码。

至此，我们大概演示了解构赋值最基本的用法：获取对象的属性值。是不是让代码变地更加的简洁，更加的优雅了。

二、获取嵌套对象的属性值

前面我们所看到的示例代码都只是从一个简单的对象中获取属性值，那如果属性值本身就是一个对象，而这个对象的属性值要如何获取呢？解构赋值能做到吗？如何编写代码呢？

const user = {
    userName: "光脚丫思考",
    blog: "https://blog.csdn.net/gjysk",
    details: {
        nickName: "光脚丫思考",
        address: "中国北京",
        signature: "勿以善小而不为，勿以恶小而为之"
    }
}
const { userName, blog, details: { signature } } = user;
console.info(userName);
console.info(blog);
console.info(signature);

输出的结果如下图所示：

上面的示例还是比较简单了些，如果是更深入的对象嵌套怎么办呢？上面的方法还能有效果吗？我们试一试。

const user = {
    userName: "光脚丫思考",
    blog: "https://blog.csdn.net/gjysk",
    details: {
        nickName: "光脚丫思考",
        address: {
            domicileAddress: "户籍地",
            abodePlace: "居住地"
        },
        signature: "勿以善小而不为，勿以恶小而为之"
    }
}
const { userName, blog, details: { signature, address: { domicileAddress, abodePlace } } } = user;
console.info(userName);
console.info(blog);
console.info(signature);
console.info(domicileAddress);
console.info(abodePlace);

输出结果如下图所示：

可以看到，深层次的嵌套的对象也是可以通过解构赋值来获取属性值的，再深层次的也是可以正常获取的，有兴趣小伙伴们可以自己动手尝试下。

三、设置默认值

如果我们预期某个属性是会包含属性值的，但是由于某种原因最后没有包含属性值，比如某些状态值为空的情况下，解构赋值是否可以设置一个默认值呢？答案是肯定的。示例如下：

const user = {
    userName: "光脚丫思考",
    blog: "https://blog.csdn.net/gjysk",
    status: "online"
}
const { userName, blog, status } = user;
console.info(userName);
console.info(blog);
console.info(status);

如上的代码所示，按照我们的预期，正常情况下status会返回一个值，表示当前用户的登录状态，代码输出结果如下：

输出的内容一切如常。但是，在某种特殊或意外的情况下，比如后端写接口的大侠忘记返回这个状态的值了，除了让后端的大侠正确的补充上这个状态值以外，我们还可以给它设置一个默认值，比如默认值离线状态offline。代码如下：

const user = {
    userName: "光脚丫思考",
    blog: "https://blog.csdn.net/gjysk",
    status: undefined
}
const { userName, blog, status = "offline" } = user;
console.info(userName);
console.info(blog);
console.info(status);

请留意user.status属性值是undefined了，我们假定后端返回的结果出现了这样的情况，但是在我们解构赋值的代码中增加了一个offline的默认值，控制台上的输出结果如下：

可以看到，在没有获取到相应属性值的情况下，使用了解构赋值中的默认值。

另外一种情况就是直接就没有这个属性，缺少这个属性，设置默认值的办法同样好使，示例代码如下：

const user = {
    userName: "光脚丫思考",
    blog: "https://blog.csdn.net/gjysk",
}
const { userName, blog, status = "offline" } = user;
console.info(userName);
console.info(blog);
console.info(status);

请注意上面的user已经没有包含status属性了，输出的结果仍然包含了解构赋值中设定的默认值。

漂亮！无论是返回的属性值为undefined，还是直接把这个属性值干没了，解构赋值设置的默认值都很好使，具体的使用场景大家自行挖掘和体会。

在使用默认值的时候，应该注意区分undefined和null，只要undefined的时候才会使用设置的默认值，null是不会使用默认值的。如下代码所示：

const user = {
    userName: "光脚丫思考",
    blog: "https://blog.csdn.net/gjysk",
    address: undefined,
    signature: null,
}
const { userName, blog, address = "中国北京", signature = "默认签名信息" } = user;
console.info(`userName=${userName}`);
console.info(`blog=${blog}`);
console.info(`address=${address}`);
console.info(`signature=${signature}`);

请留意address属性值为undefined，而signature则为null，输出的结果如下图所示：

可以看到address使用的是设置的默认值，而signature的值则继续保留为null了。

四、使用别名

另外一个使用解构赋值必须得面临的一个问题：变量命名冲突的问题，该如何解决呢？

前面的那些示例代码中，解构赋值中的变量名和对象中的属性名是完全一致的，如果已经定义了同名的变量该怎么办呢？岂不是会发生命名冲突的情况。此时，使用别名就能很好的解决这个问题了。示例代码如下：

const user = {
    userName: "光脚丫思考",
    blog: "https://blog.csdn.net/gjysk",
}
const { userName: name, blog: url } = user;
console.info(name);
console.info(url);

在上面的代码中，我们将user.userName的属性值赋值给了name变量，将user.blog的属性值赋值给了url变量。通过别名的方式，就不需要强制要求解构赋值中的变量名和对象中的属性名

完全一致了，这就大大地增加了灵活性，也能很好的解决命名冲突的问题。

五、定义新变量

解构赋值还可以基于对象的属性值创建新的变量，还是先来看一个示例：

const user = {
    userName: "光脚丫思考",
    blog: "https://blog.csdn.net/gjysk",
}
const { userName, blog, message = `我是${userName}，我的博客地址是：${blog}` } = user;
console.info(userName);
console.info(blog);
console.info(message);

请留意上面的代码，解构赋值中的message变量并非user对象的某个属性名称，而是由变量userName和blog拼接到一起的字符串变量。

这里使用到了ES6的字符串的方式拼接的字符串，如果还不太了解这个技术的，可以移步到我的另外一篇博文《03-ES6语法：模板字面量(Template Literals)》。

上述代码的输出结果如下图所示：

需要特别强调一点的是，新定义的变量message中使用到的userName和blog并非user中的属性名，而是解构赋值中定义的userName和blog，这2个变量接收了user对象中同名的属性值。

因此，如果我们把解构赋值中的userName和blog移除掉的话，代码就废掉了。

const user = {
    userName: "光脚丫思考",
    blog: "https://blog.csdn.net/gjysk",
}
const { message = `我是${userName}，我的博客地址是：${blog}` } = user;
console.info(message);

上述代码在控制台中直接报错了，错误如下：

如果使用别名的方式就能更加说明这一点了。

const user = {
    userName: "光脚丫思考",
    blog: "https://blog.csdn.net/gjysk",
}
const { userName: name, blog: url, message = `我是${name}，我的博客地址是：${url}` } = user;
console.info(name);
console.info(url);
console.info(message);

上述的代码中，新定义的变量message中拼接的变量名称就是别名，而并非user对象中的属性名，表明它所使用的是解构赋值中定义的变量名，而并非对象中的属性名。

六、动态名称属性

在实际的开发过程中，我们通常会通过接口API来获取数据，而这些数据不仅仅内容是动态的，甚至对象的属性键名也是动态的，再或者我们一开始连属性的名称都可能不知道。这样的属性值要如何获取呢？如果不使用解构赋值，可以通过下标[]的方式来获取属性值，那解构赋值又是如何做到的呢？请看示例。

const user = {
    userName: "光脚丫思考",
    blog: "https://blog.csdn.net/gjysk",
};
function getValue(data, key) {
    const { [key]: value } = data;
    return value;
}
let userName = getValue(user, "userName");
let blog = getValue(user, "blog");
console.info(userName);
console.info(blog);

重点放到getValue(data,key) 函数上，其中最为重要的代码如下：

const { [key]: value } = data;

可以看到，解构赋值代码也是通过下标[]的方式来获取对象的属性值的，下标中key的内容就是属性的名称。

有了这项技术，基本上属性的名称可以成为动态的，可以通过参数来传递，无论是明确的属性名，还是后续动态传递过来的属性名，都能轻松的从特定对象中获取该属性的属性值。

七、函数中的解构赋值

1、解构赋值传参

使用对象解构赋值将属性值作为参数传递给函数。

const user = {
    userName: "光脚丫思考",
    blog: "https://blog.csdn.net/gjysk",
};
function display({userName, blog}) {
    let message = `大家好，我是${userName}，我的博客地址是：${blog}`;
    console.info(message);
}
display(user);

请特别留意函数的参数定义，使用的就是解构赋值的语法，而在调用的时候，直接传递对象就行。输出的结果如下图所示：

2、解构赋值返回结果

如果函数返回一个对象，可以将属性值直接解构为变量，如下代码所示：

function getUSer() {
    const user = {
        userName: "光脚丫思考",
        blog: "https://blog.csdn.net/gjysk",
    };
    return user;
}
const { userName, blog } = getUSer();
let message = `大家好，我是${userName}，我的博客地址是：${blog}`;
console.info(message);

其实这种使用方法也不难理解，本质上来说仍然是从对象中解构赋值，因为，函数返回的就是一个对象，这和我们在函数外面创建的对象没什么不同。

上述代码的输出结果如下图所示：

八、循环中的解构赋值

接下来我们再看看在循环中如何使用解构赋值。示例代码如下：

let users = [
    {
        userName: "光脚丫思考1",
        blog: "https://blog.csdn.net/gjysk",
    },
    {
        userName: "光脚丫思考2",
        blog: "https://blog.csdn.net/gjysk",
    },
    {
        userName: "光脚丫思考3",
        blog: "https://blog.csdn.net/gjysk",
    },
];
for (user of users) {
    const { userName, blog } = user;
    let message = `大家好，我是${userName}，我的博客地址是：${blog}`;
    console.info(message);
}

上面的代码中，我们在for循环的内部使用了解构赋值语法，成功的从每个user对象中获取到了userName和blog的数据。输出结果如下所示：

也算是最基本的玩法了，下面的方式则更加的简洁一些。

for ({ userName, blog } of users) {
    let message = `大家好，我是${userName}，我的博客地址是：${blog}`;
    console.info(message);
}

在for循环的{}中不包含解构赋值的代码，而是直接放到了()中，输出的结果和前面的代码是一样的。

九、数组解构

先来看一个简单的数组解构赋值的代码，如下：

let [a, b] = [1, 2];
console.info(a);
console.info(b);

上面代码在控制台的输出结果如下图所示：

就像上面的示例一样，数组解构赋值的过程中，只要把每个解构的部分一一对应起来，就可以层层解构赋值。比如下面的代码：

let [a, [b], d] = [1, [2, 3], 4];
console.info(a);
console.info(b);
console.info(d);

请留意[b]这个语句，它对应的是实际数组中的[2,3]，因此这个语法解析的便是[2,3]中的元素，因此获得的应该是2这个数值，如下图所示：

我们把上述的代码稍微做点改变，输出的结果就会大不一样。代码如下：

let [a, b, d] = [1, [2, 3], 4];
console.info(a);
console.info(b);
console.info(d);

输出的结果则如下图所示：

可以看到这次的变量b输出的就是[2,3]这个数组了。

十、字符串解构

字符串本身也是一个对象，可以作为对象进行解构赋值。比如下面的代码：

let { length } = 'Welcome you!';
console.info(length);

上述代码实际上解构赋值的是字符串的length属性。

字符串可以当成一个数组解构赋值。如下代码：

let [a, b, c] = "Welcome you!";
console.info(a);
console.info(b);
console.info(c);

输出的结果如下图所示：

 十一、解构规则

ES6的解构赋值遵循一个规则：要左右两边的模式相同，就可以进行合法赋值。如下面的示例代码：

let [a, b, c] = [1, 2, 3];
let [d, [[e], f]] = [1, [[2], 3]];

如果解构不成功，变量值等于undefined，比如下面的代码：

let [a, b] = [1];
console.info(a);
console.info(b);

上述代码输出的结果如下图所示：

十二、其他解构

通过解构赋值，我们可以很容易的把对象的方法赋值给变量。比如下面的代码：

const { log } = console;
log('Welcome you!');

上面的代码中，我们将console.log()函数解构赋值给了log变量，然后就可以直接通过log变量来调用console.log()了。

定义别名的语法在这种情况下同样的适用。代码如下：

const { log:mylog } = console;
mylog('Welcome you!');

上面的代码也能成功被执行，并且在控制台输出对应的内容，如下图：

Javascript ES6 有 许多特性其实是为了简化代码。解构运算符，扩展运算符，和rest运算符就是其中很好的特性，它们可以通过减少赋值语句的使用，或者减少通过下标访问数组或对象的方式，使代码更加简洁优雅，可读性更佳。

*1.解构作用

**
可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者obj[key]等传统方式进行赋值

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

let arr = [1, 2, 3];

//传统方式
let a = arr[0],
    b = arr[1],
    c = arr[2];

//解构赋值，是不是简洁很多？
let [a, b, c] = arr

console.log(a);//1
console.log(b);//2
console.log(c);//3

本质上，这种写法属于模式匹配，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

let [foo, [[bar], baz]] = [1, [[2], 3]]
foo // 1
bar // 2
baz // 3

//不取的，可以用逗号跳过
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

//不取的，可以用逗号跳过
let [x, , y] = [1, 2, 3]
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4]
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a']
x // "a"
y // undefined
z // []

不完全解构：即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

let [x, y] = [1, 2, 3]
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4]
a // 1
b // 2
d // 4

默认值
解构赋值允许指定默认值。

let [foo = true] = []
// foo=true
let [a=1,b=2] = []
//a=1
//b=2

let [x, y = 'b'] = ['a'] // x='a', y='b'

//注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。
//所以，只有当一个数组成员严格等于undefined，默认值才会生效。
let [x, y = 'b'] = ['a', undefined] 
// x='a'
// y='b'

//数组成员是null，默认值就不会生效，因为null不严格等于undefined。
let [x, y = 'b'] = ['a', null] 
// x='a'
// y=null

let [x,y] = [] 
// x:undefined
// y:undefined

变量互换

var x = 1,
    y = 2;
var [x, y] = [y, x];

console.log(x); //2
console.log(y); //1

默认值表达式

. // 3.默认值表达式.
//.如果默认值是表达式，默认值表达式是惰性求值的
const func = (name) => {
	console. log( ${name}被执行了");
	return 2;
};
const [x1 = func('x1')] = [1];
const [x2 = func('x2')] = [];

console.log(x1);
console.log(x2);
x2被执行了

元素节点

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <title>常见的类数组的解构赋值</title>
</head>
 
<body>
    <p>123</p>
    <p>321</p>
    <p>34567</p>
    <script>
        // NodeList
        console.log(document.querySelectorAll('p'));
        const [p1, p2, p3] = document.querySelectorAll('p');
        console.log(p1, p2, p3);
        //p1: <p>123</p>
        //p2: <p>321</p>
        //p3: <p>34567</p>
    </script>
</body>

函数参数的解构赋值

const array = [1, 1];
const add1 = arr => arr[0] + arr[1];
console.log(add1(array));
const add2 = ([x, y]) =>x+ y;
console.log(add2(array));
2
2

1.2 对象解构赋值

解构不仅可以用于数组，还可以用于对象。

//缩写版
let { foo, bar } = { foo: 'aaa', bar: 'bbb' }
foo // "aaa"
bar // "bbb"

//完整版
let { foo:foo, bar:bar } = { foo: 'aaa', bar: 'bbb' }
foo // "aaa"
bar // "bbb"

//取别名版
let { foo:f, bar:b } = { foo: 'aaa', bar: 'bbb' }
f// "aaa"
b// "bbb"

let obj = {
    name: '小红',
    sex: '女',
    age: 26,
    son: {
      sonname: 'panda',
      sonsex: '男',
      sonage: 2
    }
  }

  const {name, sex, age, son} = obj
  console.log(name + ' ' + sex + ' ' + age) //小红 女 26
  console.log(son)  // { sonname: 'panda', sonsex: '男', sonage: 2 }

};

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

// 等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响
let { bar, foo } = { foo: 'aaa', bar: 'bbb' }
foo // "aaa"
bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' }
baz // undefined，变量没有对应的同名属性，导致取不到值

对象解构赋值的默认值

const { userName = '小红'，age=18 } = {userName:'小明'}
//userName:小明
//age:18

将一个已经声明的变量用于解构赋值，需要括号包着，成一个整体代码块

//一个已经声明的变量用于解构赋值,需要括号包着
let x= 2
( {x} = {x:1} )
//x:1

{x} = {x:1}
//undefined

解构赋值允许等号左边的模式之中，不放置任何变量名。因此，可以写出非常古怪的赋值表达式。
表达式虽然毫无意义，但是语法是合法的，可以执行

对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量

// 例一
let { log, sin, cos } = Math;

// 例二
const { log } = console;
log('hello') // hello

如果变量名与属性名不一致，必须写成下面这样。

//注意：对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。
//真正被赋值的是后者，而不是前者。
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo //error: foo is not defined

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

函数参数的解构赋值

const  func1 = (user)=>{
	console.log(user.name,user.age)
}
//等同于
const  func2 = ({name,age})=>{
	console.log(name,age)
}
func1({name:'小红'，age：18})
func2({name:'小红'，age：18})

由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

//数组arr的0键对应的值是1，[arr.length - 1]就是2键，对应的值是3。
//方括号这种写法，属于“属性名表达式”。
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

字符串的解构赋值

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

let {length : len} = 'hello';
len // 5

1.4数值和布尔值的解构赋值
解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

1.5 函数参数的解构赋值
函数的参数也可以使用解构赋值。

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。

下面是另一个例子。

[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]

函数参数的解构也可以使用默认值。

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

注意，下面的写法会得到不一样的结果。

function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

上面代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。

undefined就会触发函数参数的默认值。

[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]

1.6 for循环解构：

var arr = [[11, 12], [21, 22], [31, 32]];
for (let [a, b] of arr) {
    console.log(a);
    console.log(b);
}
//11
//12
//21
//22
//31
//32

2.扩展运算符
扩展运算符（spread运算符）用三个点号（…）表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值。

let foo = function(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}

let arr = [1, 2, 3];
//传统写法
foo(arr[0], arr[1], arr[2]);

//使用扩展运算符
foo(...arr);
//1
//2
//3

特殊应用场景：

数组深拷贝-数组中的元素为基本类型，若为object，依然会拷贝引用地址

var arr = [1, 2, 3];
var arr2 = arr;
var arr3 = [...arr];
console.log(arr===arr2); //true, 说明arr和arr2指向同一个数组的引用地址
console.log(arr===arr3); //false, 说明arr3和arr指向不同数组引用，在堆内存中为arr3另外分配了内存空间

把一个数组插入另一个数组字面量

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' ]

函数调用

 function push(array, ...items) {
    array.push(...items)
  }

  function add(x, y) {
    return x + y
  }

  const numbers = [4, 38]
  add(...numbers) // 42

替代数组的 apply 方法
由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。

// ES5 的写法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f.apply(null, args);

// ES6 的写法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f(...args);

另一个例子是通过push函数，将一个数组添加到另一个数组的尾部。

// ES5 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

// ES6 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2)

3.rest运算符

rest运算符也是三个点号，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组。

//主要用于不定参数，所以ES6开始可以不再使用arguments对象
var bar = function(...args) {
    for (let el of args) {
        console.log(el);
    }
}

bar(1, 2, 3, 4);
//1
//2
//3
//4

bar = function(a, ...args) {
    console.log(a);
    console.log(args);
}

bar(1, 2, 3, 4);
//1
//[ 2, 3, 4 ]

rest运算符配合解构使用：

// 数组
const [a, ...rest] = [1, 2, 3, 4];
console.log(a);//1
console.log(rest);//[2, 3, 4]

// 对象配合
const {age, ...rest} = {name: 'qxj', age: 24, hobby: 'write code'};
console.log(age);					//24
console.log(rest);					//{ name: 'qxj', hobby: 'write code' }

rest运算符和spread运算符的区别：

spread运算符：放在赋值一方，即放在实参或者等号右边
rest运算符：放在被赋值一方，即放在形参或者等号左边