对象解构，数组解构

对象解构、数组解构

ES6允许按照一定的模式，从对象中提取值，对变量进行赋值，这被称为解构(Destructuring);

例如在以下的例子当中:

const Tom = { name: "Tom Cat", age: 18, family: { mother: "Tom ma", father: "Tom fa", brother: "Tom bro" } }

如果没有使用ES6之前，想要用一个变量存储属性的值，我们需要这么做。

const name = Tom.name; const age = Tom.age; 可以看到，我们重复的书写了Tom这代码。 使用ES6的对象解构，我们可以这么写；

const {name, age} = Tom;

console.log(name);/Tom Cat; console.log(age);/18 需要注意的是，对象解构完成以下两件事。

声明一个变量； 赋值这个变量； 所以，如果该变量被提前声明了。

let name;

({name, age} = Tom);

解构时指定变量名 那么，如果变量名之前被占用了。现在不想被覆盖怎么办？

const name = "用户名";

let {name: Tname,age} = Tom;

如果原来的变量被占用，我们指定一个需要声明的变量。

解构时的默认值 在我们使用第三方库的时候，经常能够碰到的一个场景就是，哪怕我们没有传参数，这个第三方库总会有一个默认值为我们去完成默认的配置。然后当我们传了配置之后，又会使用我们的用户配置。

function appendDiv(options = {}){ const {parent = "body", width = "100px", height = "200px",backgroundColor = "pink"} = options;

const div = document.createElement("div");
div.style.width = width;
div.style.height = height;
div.style.backgroundColor = backgroundColor;

document.querySelector(parent).appendChild(div);
复制代码

}

上面的例子可以看到，假设用户传入一个配置对象，那么，该函数将会使用用户的设置，如果没有传入，则为默认配置。

注意点：

只有当用户传入的数据为明确的undefined的时候。才回去使用默认值，如果不是的话，依旧会使用用户的设置。 数组解构 有对象解构，当然少不了我们的数组解构。使用方式如下:

const arr = ["one", "two", "three"];

const [one, two] = arr; console.log(one, two); //one, two 数组解构比较典型的用法是交换两个数的值。

那么，在过去，我们去交换两个变量的值的时候。这样写

var a = 10; var b = 20;

var temp = a; a=b; b=temp; 如果使用数组解构，我们可以直接一行代码搞定。

[b,a] = [a,b]; 当然，和对象解构一样，数组解构也接受默认值的写法。

const [one,two,three, four="我是第四项"] =arr;

转载于:https://juejin.im/post/5c6e9e70f265da2dc006559a