ES6---解构赋值（数组，对象，函数）使⽤详解
解构赋值
JavaScript 中最常⽤的两种数据结构是 Object 和 Array。
对象让我们能够创建通过键来存储数据项的单个实体。
数组则让我们能够将数据收集到⼀个有序的集合中。
但是，当我们把它们传递给函数时，函数可能不需要整个对象/数组。它可能只需要对象/数组的⼀部分。
解构赋值 是⼀种特殊的语法，它使我们可以将数组或对象“拆包”⾄⼀系列变量中，因为有时这样更⽅便。
解构操作对那些具有很多参数和默认值等的函数也很奏效。我们马上会看到类似的例⼦。
数组解构
下⾯是⼀个将数组解构到变量中的例⼦：
// 我们有⼀个存放了名字和姓⽒的数组
let arr =["John","Smith"]
// 解构赋值
// sets firstName = arr[0]
// and surname = arr[1]
let[firstName, surname]= arr;
alert(firstName);// John
alert(surname);// Smith
现在我们就可以针对这些变量进⾏操作，⽽不是针对原来的数组元素。
当与 split 函数（或其他返回值是数组的函数）结合使⽤时，看起来就更优雅了：
let[firstName, surname]="John Smith".split(' ');
alert(firstName);// John
alert(surname);// Smith
正如我们所看到的，语法很简单。但是有⼏个需要注意的细节。让我们通过更多的例⼦来加深理解。
“解构”并不意味着“破坏”
这种语法叫做“解构赋值”，因为它通过将结构中的各元素复制到变量中来达到“解构”的⽬的。但数组本⾝是没有被修改的。
这只是下⾯这些代码的更精简的写法⽽已：
// let [firstName, surname] = arr;
let firstName = arr[0];
let surname = arr[1];
忽略使⽤逗号的元素
数组中不想要的元素也可以通过添加额外的逗号来把它丢弃：
// 不需要第⼆个元素
let[firstName,, title]=["Julius","Caesar","Consul","of the Roman Republic"];
alert( title );// Consul
在上⾯的代码中，数组的第⼆个元素被跳过了，第三个元素被赋值给了 title 变量，数组中剩下的元素也都被跳过了（因为在这没有对应给它们的变量）。
等号右侧可以是任何可迭代对象
……实际上，我们可以将其与任何可迭代对象⼀起使⽤，⽽不仅限于数组：
let[a, b, c]="abc";// ["a", "b", "c"]
let[one, two, three]=new Set([1,2,3]);
这⾏得通，因为在内部，结构赋值是通过迭代右侧的值来完成⼯作的。这是⼀种⽤于对在 = 右侧的值上调⽤ f 并进⾏赋值的操作的语法糖。
赋值给等号左侧的任何内容
我们可以在等号左侧使⽤任何“可以被赋值的”东西。
例如，⼀个对象的属性：
let user ={};
[user.name, user.surname]="John Smith".split(' ');
alert(user.name);// John
alert(user.surname);// Smith
与 .entries() ⽅法进⾏循环操作
在前⾯的章节中我们已经见过了 ⽅法。
我们可以将 .entries() ⽅法与解构语法⼀同使⽤，来遍历⼀个对象的“键—值”对：
let user ={
name:"John",
age:30
};
// 循环遍历键—值对
for(let[key, value]ies(user)){
alert(`${key}:${value}`);// name:John, then age:30
}
⽤于 Map 的类似的代码更简单，因为它是可迭代的：
let user =new Map();
user.set("name","John");
user.set("age","30");
// Map 是以 [key, value] 对的形式进⾏迭代的，⾮常便于解构
for(let[key, value]of user){
alert(`${key}:${value}`);// name:John, then age:30
}
交换变量值的技巧
有⼀个著名的使⽤结构赋值来交换两个变量的值的技巧：
let guest ="Jane";
let admin ="Pete";
// 让我们来交换变量的值：使得 guest = Pete，admin = Jane
[guest, admin]=[admin, guest];
alert(`${guest}${admin}`);// Pete Jane（成功交换！）
这⾥我们创建了⼀个由两个变量组成的临时数组，并且⽴即以交换了的顺序对其进⾏了解构。
我们可以⽤这种⽅式交换两个以上的变量。
其余的 ‘…’
通常，如果数组⽐左边的列表长，那么“其余”的数组项会被省略。
例如，这⾥只取了两项，其余的就被忽略了：
let[name1, name2]=["Julius","Caesar","Consul","of the Roman Republic"];
alert(name1);// Julius
alert(name2);// Caesar
// 其余数组项未被分配到任何地⽅
如果我们还想收集其余的数组项 —— 我们可以使⽤三个点 "..." 来再加⼀个参数以获取“其余”数组项：
let[name1, name2,...rest]=["Julius","Caesar","Consul","of the Roman Republic"];
// rest 是包含从第三项开始的其余数组项的数组
alert(rest[0]);// Consul
alert(rest[1]);// of the Roman Republic
alert(rest.length);// 2
rest 的值就是数组中剩下的元素组成的数组。
不⼀定要使⽤变量名 rest，我们也可以使⽤任何其他的变量名，只要确保它前⾯有三个点，并且在解构赋值的最后⼀个参数位置上就⾏了。
let[name1, name2,...titles]=["Julius","Caesar","Consul","of the Roman Republic"];
// 现在 titles = ["Consul", "of the Roman Republic"]
默认值
如果数组⽐左边的变量列表短，这⾥也不会出现报错。缺少的值被认为是 undefined：
let[firstName, surname]=[];
alert(firstName);// undefined
alert(surname);// undefined
如果我们想要⼀个“默认”值给未赋值的变量，我们可以使⽤ = 来提供：
// 默认值
let[name ="Guest", surname ="Anonymous"]=["Julius"];
alert(name);// Julius（来⾃数组的值）
alert(surname);// Anonymous（默认值被使⽤了）
默认值可以是更加复杂的表达式甚⾄可以是函数调⽤，这些表达式或函数只会在这个变量未被赋值的时候才会被计算。
举个例⼦，我们使⽤了 prompt 函数来提供两个默认值：
// 只会提⽰输⼊姓⽒
let[name =prompt('name?'), surname =prompt('surname?')]=["Julius"];
alert(name);// Julius（来⾃数组）
alert(surname);// 你输⼊的值
请注意：prompt 将仅针对缺失值（surname）运⾏。
对象解构
解构赋值同样适⽤于对象。
基本语法是：
let{var1, var2}={var1:…, var2:…}
在等号右侧应该有⼀个已经存在的对象，我们想把它拆分到变量中。等号左侧包含了对象相应属性的⼀个类对象“模式（pattern）”。在最简单的情况下，等号左侧的就是 {...} 中的变量名列表。
举个例⼦：
let options ={
title:"Menu",
width:100,
height:200
};
let{title, width, height}= options;
alert(title);// Menu
alert(width);// 100
alert(height);// 200
属性 options.title、options.width 和 options.height 值被赋给了对应的变量。
变量的顺序并不重要，下⾯这个代码也奏效：
怎么给数组赋值
// 改变 let {...} 中元素的顺序
let{height, width, title}={ title:"Menu", height:200, width:100}
等号左侧的模式（pattern）可以更加复杂，并且指定了属性和变量之间的映射关系。
如果我们想把⼀个属性赋值给另⼀个名字的变量，⽐如把 options.width 属性赋值给名为 w 的变量，那么我们可以使⽤冒号来设置变量名称：
let options ={
title:"Menu",
width:100,
height:200
};
// { sourceProperty: targetVariable }
let{width: w, height: h, title}= options;
// width -> w
// height -> h
// title -> title
alert(title);// Menu
alert(w);// 100
alert(h);// 200
冒号表⽰“什么值：赋值给谁”。上⾯的例⼦中，属性 width 被赋值给了 w，属性 height 被赋值给了 h，属性 title 被赋值给了同名变量。
对于可能缺失的属性，我们可以使⽤ "=" 设置默认值，如下所⽰：
let options ={
title:"Menu"
};
let{width =100, height =200, title}= options;
alert(title);// Menu
alert(width);// 100
alert(height);// 200
就像数组或函数参数⼀样，默认值可以是任意表达式甚⾄可以是函数调⽤。它们只会在未提供对应的值时才会被计算/调⽤。
在下⾯的代码中，prompt 提⽰输⼊ width 值，但不会提⽰输⼊ title 值：
let options ={
title:"Menu"
};
let{width =prompt("width?"), title =prompt("title?")}= options;
alert(title);// Menu
alert(width);// (prompt 的返回值)
我们还可以将冒号和等号结合起来：
let options ={
title:"Menu"
};
let{width: w =100, height: h =200, title}= options;
alert(title);// Menu
alert(w);// 100
alert(h);// 200
如果我们有⼀个具有很多属性的复杂对象，那么我们可以只提取所需的内容：
let options ={
title:"Menu",
width:100,
height:200
};
/
/ 仅提取 title 作为变量
let{ title }= options;
alert(title);// Menu
剩余模式（pattern）"…"
如果对象拥有的属性数量⽐我们提供的变量数量还多，该怎么办？我们可以只取其中的某⼀些属性，然后把“剩余的”赋值到其他地⽅吗？
我们可以使⽤剩余模式（pattern），就像我们对数组那样。⼀些较旧的浏览器不⽀持此功能（例如，使⽤ Babel 对其进⾏填充），但可以在现代浏览器中使⽤。
看起来就像这样：
let options ={
title:"Menu",
height:200,
width:100
};
// title = 名为 title 的属性
// rest = 存有剩余属性的对象
let{title,...rest}= options;
// 现在 title="Menu", rest={height: 200, width: 100}
alert(rest.height);// 200
alert(rest.width);// 100

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。