解构赋值是ES6里面比较不错的特性。解构是Javascript表达式，使其无法从数组里面解包，或者从对象里面获取属性，让它变成清晰的变量，也就是说我们可以从数组和对象里面提取数据并赋值到变量。
为什么有这个必要呢？
试想下，我们要从数组提取数据，以前，我们是这样做的：
let introduction = ["Hello", "I" , "am", "Sarah"];
let greeting = introduction[0];
let name = introduction[3];
console.log(greeting);//"Hello"
console.log(name);//"Sarah"
如果我们想提取同样的数据，那么我们就得做同样的事。首先，我们来谈谈如何用数组来解构和赋值，然后再谈对象。
基本的数组解构
如果我们要从数组提取数据，其实是非常简单的。让我们来看看第一个例子，相比较上面的重复性的操作，我们可以这样做：
let introduction = ["Hello", "I" , "am", "Sarah"];
let [greeting, pronoun] = introduction;
console.log(greeting);//"Hello"
console.log(pronoun);//"I"
进而，我们可以这样做：
let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"];
console.log(greeting);//"Hello"
console.log(pronoun);//"I"
只要顺序一样就可以了。
如果我们要跳过一个元素如何做呢？
只要中间用逗号隔开就行了，看下例子：
let [greeting,,,name] = ["Hello", "I" , "am", "Sarah"];
console.log(greeting);//"Hello"
console.log(name);//"Sarah"
我们要的是第一个和最后一个元素的值。
如果我们要第二个和最后一个的话怎么做呢？
let [,pronoun,,name] = ["Hello", "I" , "am", "Sarah"];
console.log(pronoun);//"I"
console.log(name);//"Sarah"
分割赋值成两个部分
如果我们想第一个赋值一个变量，然后把其余的赋值成一个数组，怎么做呢？
看下例子就知道了。
let [greeting,...intro] = ["Hello", "I" , "am", "Sarah"];
console.log(greeting);//"Hello"
console.log(intro);//["I", "am", "Sarah"]
用点点点来替代每个元素就可以了。
如何用函数赋值
如果函数返回的是数组，那么我们可以这样做了：
function getArray() {
return ["Hello", "I" , "am", "Sarah"];
}
let [greeting,pronoun] = getArray();
console.log(greeting);//"Hello"
console.log(pronoun);//"I"
利用默认值
如果数组元素不存在也就是undefined的话应该怎么赋值呢？
let [greeting = "hi",name = "Sarah"] = ["hello"];
console.log(greeting);//"Hello"
console.log(name);//"Sarah"
利用赋值来互换值
let a = 3;
let b = 6;
[a,b] = [b,a];
console.log(a);//6
console.log(b);//3
在变量名称不变的情况下重新赋值。
对象的解构赋值
之前，如果我们要把对象成员赋值给另外一个变量的话是这样做的：
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let name = person.name;
let country = person.country;
let job = person.job;
console.log(name);//"Sarah"
console.log(country);//"Nigeria"
console.log(job);//Developer"
我们就这样机械化地重复做这个事情，但是在ES6里面就简单了。
基本的对象解构
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let {name, country, job} = person;
console.log(name);//"Sarah"
console.log(country);//"Nigeria"
console.log(job);//Developer"
我们可以看到把对象成员的KEY拿出来做变量名称就行了。当然也可以直接声明并赋值：
let {name, country, job} = {name: "Sarah", country: "Nigeria", job: "Developer"};
console.log(name);//"Sarah"
console.log(country);//"Nigeria"
console.log(job);//Developer"
变量声明并被赋值
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let name, country, job;
({name, country, job} = person);
console.log(name);//"Sarah"
console.log(job);//"Developer"
我们可以看到多了一个( ), 这个是必须的，因为左边带有{ }会被认为是一个整体而不是对象，所以不要忘了这个。
而且还有一个重要的点是在( )后还有一个; 号。
要注意的是在对象里面的变量名称和右边的对象里面的属性key是一样的，否则就会出现undefined这种错误。
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let {name, friends, job} = person;
console.log(name);//"Sarah"
console.log(friends);//undefined
当然，如果你想用新的变量名称也是可以的，看下面：
利用新的变量名赋值
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let {name: foo, job: bar} = person;
console.log(foo);//"Sarah"
console.log(bar);//"Developer"
我们可以看到name变成了foo, job变成了bar。
如何用默认值
为了避免undefined这种事的出现，我们可以用默认值来替代：
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let {name = "myName", friend = "Annie"} = person;
console.log(name);//"Sarah"
console.log(friend);//"Annie"
因为friend这个属性不存在，所以用了默认值。
当然我们也可以改变变量名称的同时设置默认值：
let person = {name: "Sarah", country: "Nigeria", job: "Developer"};
let {name:foo = "myName", friend: bar = "Annie"} = person;
console.log(foo);//"Sarah"
console.log(bar);//"Annie"
计算属性名称
你可以把属性名称事先声明下，然后放在[]括号里，方括号就是表明已经声明赋值过，当然值要和属性的key一样。
let prop = "name";
let {[prop] : foo} = {name: "Sarah", country: "Nigeria", job: "Developer"};
console.log(foo);//"Sarah"
如果解构对象的属性是数组，也是一样的
let person = {name: "Sarah", country: "Nigeria", friends: ["Annie", "Becky"]};
let {name:foo, friends: bar} = person;
console.log(foo);//"Sarah"
console.log(bar);//["Annie", "Becky"]
对象嵌套格式
let person = {
name: "Sarah",
place: {
country: "Nigeria",
city: "Lagos" },
friends : ["Annie", "Becky"]
};
let {name:foo,
place: {
country : bar,
city : x}
} = person;
console.log(foo);//"Sarah"
console.log(bar);//"Nigeria"
其余的用...替代赋值
let person = {name: "Sarah", country: "Nigeria", job: "Developer" friends: ["Annie", "Becky"]};
let {name, friends, ...others} = person;
console.log(name);//"Sarah"
console.log(friends);//["Annie", "Becky"]
console.log(others);// {country: "Nigeria", job: "Developer"}
我们可以看到others替代了其余的三个属性，当然others你可以设置任何一个属性名称。
对象解构在函数中的应用
function person({name: x, job: y} = {}) {
console.log(x);
}
person({name: "Michelle"});//"Michelle"
person();//undefined
person(friend);//Error : friend is not defined
注意右手边的{}, 这样使得我们用空值来引用这个函数，不用传入任何变量。这样我们就有Undefined.
我们也可以传入默认变量值：
function person({name: x = "Sarah", job: y = "Developer"} = {}) {
console.log(x);
}
person({name});//"Sarah"
有什么问题的话大家可以留言。
网友评论