js基础知识回顾(5)--解构赋值

解构赋值

老生常谈的解构赋值

// 我们有一个存放了名字和姓氏的数组 
let arr = ["Ilya", "Kantor"] *// 解构赋值 
// sets firstName = arr[0] 
// and surname = arr[1] 
let [firstName, surname] = arr;
alert(firstName); // Ilya 
alert(surname); // Kantor

针对这些变量进行操作，而不是针对原来的数组元素。

当与 split 函数（或其他返回值是数组的函数）结合使用时，看起来就更优雅了：

let [firstName, surname] = "Ilya Kantor".split(' ');

• 数组中不想要的元素也可以通过添加额外的逗号来把它丢弃：

// 不需要第二个元素 
let [firstName, , title] = ["Julius", "Caesar", "Consul", " Roman Republic"];
alert( title ); // Consul

在上面的代码中，数组的第二个元素被跳过了，第三个元素被赋值给了 title 变量，数组中剩下的元素也都被跳过了（因为在这没有对应给它们的变量）。

• 等号右侧可以是任何可迭代对象 实际上，我们可以将其与任何可迭代对象一起使用，而不仅限于数组：

let [a, b, c] = "abc"; // ["a", "b", "c"] 
let [one, two, three] = new Set([1, 2, 3]);

• 赋值给等号左侧的任何内容

let user = {};
[user.name, user.surname] = "Ilya Kantor".split(' '); 
alert(user.name); // Ilya

• 与 .entries() 方法进行循环操作 可以将 .entries() 方法与解构语法一同使用，来遍历一个对象的“键—值”对：

let user = { name: "John", age: 30 }; // 循环遍历键—值对 
for (let [key, value] of Object.entries(user)) {
    alert(`${key}:${value}`); // name:John, then age:30 
}

对于 map 对象也类似

• 交换变量值的技巧

let guest = "Jane";
let admin = "Pete"; // 交换值：让 guest=Pete, admin=Jane 
[guest, admin] = [admin, guest]; 
alert(`${guest} ${admin}`); // Pete Jane（成功交换！）

剩余的...

如果我们不只是要获得第一个值，还要将后续的所有元素都收集起来 — 我们可以使用三个点 "..." 来再加一个参数来接收“剩余的”元素：

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic" ]; alert(name1); // Julius
alert(name2); // Caesar 
// 请注意，`rest` 的类型是数组 
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic 
alert(rest.length); // 2*

rest 的值就是数组中剩下的元素组成的数组。不一定要使用变量名 rest，我们也可以使用其他的变量名，只要确保它前面有三个点，并且在解构赋值的最后一个参数位置上就行了。

默认值

变量的数量多于数组中实际元素的数量，赋值不会报错。未赋值的变量被认为是 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); // 你输入的值

对象结构

解构赋值同样适用于对象。 let {var1, var2} = {var1:…, var2:…} 在等号右侧有一个已经存在的对象，我们想把它拆开到变量中。等号左侧包含了对象相应属性的一个“模式（pattern）”。

// 改变 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

就像数组或函数参数一样，默认值可以是任意表达式甚至可以是函数调用。它们只会在未提供对应的值时才会被计算/调用。

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

剩余模式（pattern）...

如果对象拥有的属性数量比我们提供的变量数量还多,我们可以只取其中的某一些属性，然后把“剩余的”赋值到其他地方

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

• 不使用 let 时的陷阱

  在上面的示例中，变量都是在赋值中通过正确方式声明的：let {…} = {…}。当然，我们也可以使用已有的变量，而不用 let，但这里有一个陷阱。

  以下代码无法正常运行：

let title, width, height;
// 这一行发生了错误 
{title, width, height} = {title: "Menu", width: 200, height: 100};

问题在于 JavaScript 把主代码流（即不在其他表达式中）的 {...} 当做一个代码块。这样的代码块可以用于对语句分组，如下所示：

{ 
    // 一个代码块\
    let message = "Hello"; 
    // ... 
    alert( message ); 
}

因此，这里 JavaScript 假定我们有一个代码块，这就是报错的原因。我们需要解构它。

为了告诉 JavaScript 这不是一个代码块，我们可以把整个赋值表达式用括号 (...) 包起来：

let title, width, height; 
// 现在就可以了 
( {title, width, height} = {title: "Menu", width: 200, height: 100} ) ;
alert( title ); // Menu

嵌套结构

如果一个对象或数组嵌套了其他的对象和数组，我们可以在等号左侧使用更复杂的模式（pattern）来提取更深层的数据。

let options = {
    size: { 
        width: 100, 
        height: 200 
    }, 
    items: ["Cake", "Donut"], 
    extra: true 
};
// 为了清晰起见，解构赋值语句被写成多行的形式 
let { 
    size: { 
        // 把 size 赋值到这里 
        width, 
        height 
    },
    items: [item1, item2], 
    // 把 items 赋值到这里 
    title = "Menu" // 在对象中不存在（使用默认值） 
} = options;
alert(title); // Menu 
alert(width); // 100 
alert(height); // 200 
alert(item1); // Cake 
alert(item2); // Donut

最终，我们得到了 width、height、item1、item2 和具有默认值的 title 变量。

注意 size 和 items 没有对应的变量，因为我们取的是它们的内容。

智能函数传参

一个函数有很多参数，其中大部分的参数都是可选的。我们可以把所有参数当作一个对象来传递，然后函数马上把这个对象解构成多个变量：

// 我们传递一个对象给函数 
let options = { title: "My menu", items: ["Item1", "Item2"] }; 
// ……然后函数马上把对象展开成变量 
function showMenu( {title = "Untitled", width = 200, height = 100, items = []} ) { 
    // title, items – 提取于 options， 
    // width, height – 使用默认值 
    alert( `${title} ${width} ${height}` ); // My Menu 200 100 
    alert( items ); // Item1, Item2 
}
showMenu(options);

我们同样可以使用带有嵌套对象和冒号映射的更加复杂的解构：

let options = { 
    title: "My menu", 
    items: ["Item1", "Item2"] 
}; 
function showMenu({ 
        title = "Untitled", 
        width: w = 100, // width goes to w 
        height: h = 200, // height goes to h 
        items: [item1, item2] // items first element goes to item1, second to item2 
    }) {
    alert( `${title} ${w} ${h}` ); // My Menu 100 200 
    alert( item1 ); // Item1 alert( item2 ); // Item2 
} 
showMenu(options);

请注意，这种解构假定了 showMenu() 函数确实存在参数。如果我们想让所有的参数都使用默认值，那我们应该传递一个空对象：直接调用showMenu()会报错

我们可以通过指定空对象 {} 为整个参数对象的默认值来解决这个问题：

function showMenu({ title = "Menu", width = 100, height = 200 } = {} ) {
    alert( `${title} ${width} ${height}` ); 
} 
showMenu(); // Menu 100 200

在上面的代码中，整个参数对象的默认是 {}，因此总会有内容可以用来解构。

素材资料来自 现代 JavaScript教程 ，感兴趣的各位可以移步观看。