法国巴农，薰衣草田【摘自微软Bing】

解构：所谓解构就是将声明的一组变量于相同的解构的数组或对象的元素数值 一一对应

1、数组解构

我们看看下面代码，一起来了解数组解构

传统写法：

let  numbers= [1,2,3];

let a = numbers [0];

let b = numbers [1];

let c = numbers [2];

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

解构写法:

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

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

是不是简洁很多，这就是数组解构最基本的写法

A、当声明的参数多于赋值的参数时

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

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

B、当声明的参数少于赋值的参数时

let [a, ,b] = [1,2,3];

console.log(a, b);  // 1, 3

C、在数组解构赋初始值

let  [a, b, c = 4, d = 'hello'] = [1, 2, 3];

console.log(a, b, c, d);   // 1, 2, 3, "Hello"

2、对象解构

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

let {name,age} = {name:"小文",age:"20岁"};

console.log(name,age);

注意：对象解构和数组解构不同的是,对象解构的声明变量部分必须和赋值的属性名一一对应才能取到对应的值，数组解构可以通过索引下标取值

我们来看看对象解构的原理？

其实对象的解构赋值的内部机制，是先找到对象同名属性，然后在赋对应的值，真正被赋值的是后者，而不是前者

一起看看代码：

let {a:b} = {a:"aaa", b:'bbb' };

console.log(a); // a is not defined

console.log(b); // aaa

a是匹配的模式，b才是变量，真正被赋值的是b (b <=”bbb”)，复制到控制台打印试试

3、函数传参的解构

function add([x, y]){

return x + y;

}

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

4、rest运算符和扩展运算符

应用场景：主要用于不定参数，所以ES6开始可以不再使用arguments对象

(1)、rest运算符

rest 参数叫做不定（剩余）参数, 用三个点+加数组值表示(…arr),把逗号隔开的值转换成数组

function hello(...arr){

console.log(arr);

}

hello(1,2,3,4,5,);//输出 [1, 2, 3, 4, 5]

注意：rest运算符只能用在最后一个参数

看看代码：

a.放rest运算符放后面

b.放rest运算符放前面

(2)、扩展运算符

也是用三个点+加数组值表示，是把数组或类数组对象转换程一系列用逗号隔开的值，跟rest相反

let arr = [1,2,3,4,5];

console.log(...arr); //输出1 2 3 4 5

5、rest运算符配合解构使用

let [a, ...rest] = [1, 2, 3, 4];

console.log(a);//1

console.log(rest);//[2, 3, 4];

以上就是解构的相关内容

个人学习心得，大神路过 ，不喜勿喷😊  ，如果你觉得不错，欢迎点赞，订阅，分享出去给需要的人，笔者将非常感谢

<完>

如果你是喜欢看书的朋友，不妨点击【有惊喜】这是我在亚马逊买的电子书，都非常珍贵。希望你能喜欢

作者：小处成就大事

简介：一个喜欢分享和学习的前端开发程序猿，平时喜欢看看书，游泳，爬山，户外骑行等，期待与志同道合的你成为朋友，一起交流、一起进步。

初衷：闲时喜欢写一些文章分享，记录丰富自己。可能没有别人写得好，但是我写的每一篇都非常用心和投入。真心希望来到这里对你有所收获，我将非常开心很欣慰。

博客：小处成就大事_新浪博客

如果有志同道合的朋友不妨加微信一起交流和学习，期待你的到来