JavaScript 解构用法解析
<div class="lake-content"><h1 id="q0Dru"><span class="ne-text">一. 基本概念</span></h1>
<p id="ua364a1d9" class="ne-p"><span class="ne-text">ES6（ES2015）的发布，给JavaScript 提供了一种更方便快捷的方式来处理对象或数组的属性。该机制称为<span class="ne-text">Destructuring<span class="ne-text">（也称为解构赋值）。</span></span></span></p>
<p id="ud642bb3b" class="ne-p"><span class="ne-text">下面就来看看什么是解构赋值。MDN 中对解构赋值的描述：</span></p>
<div class="ne-quote">
<p id="u930e5ccd" class="ne-p"> </p>
<p id="ude79c7eb" class="ne-p"><span class="ne-text">解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性值从对象/数组中取出,赋值给其他变</span></p>
<p id="u2358cf3d" class="ne-p"><span class="ne-text">量。</span></p>
<p id="u387c1310" class="ne-p"> </p>
</div>
<p id="u93d7ab3c" class="ne-p"><span class="ne-text">实际上，结构赋值就是将复杂的结构分解为简单的部分。解构赋值语法可以用于变量声明或者变量赋值。除此之外，还可以使用嵌套的解构赋值语法来处理嵌套结构。</span></p>
<h2 id="YiTXI"><span class="ne-text">二. 解构分类</span></h2>
<div class="ne-quote">
<p id="u6eda752d" class="ne-p"> </p>
<p id="u874b24c6" class="ne-p"><span class="ne-text">根据MDN对解构赋值的定义，我们可以将解构赋值分为两大类：</span></p>
<ol class="ne-ol">
<li id="ued71adfe"><strong><span class="ne-text">对象解构</span></strong></li>
<li id="udafcab12"><strong><span class="ne-text">数组解构</span></strong></li>
</ol></div>
<p id="u2e4bcde9" class="ne-p"> </p>
<h1 id="PxSkJ"><span class="ne-text">三. 对象的<span class="ne-text">解构<span class="ne-text">赋值</span></span></span></h1>
<h2 id="M6dK8"><span class="ne-text">1.对象中获取值</span></h2>
<p id="u586a833f" class="ne-p"><span class="ne-text">对象解构又称为对象属性分配模式，它允许我们将对象的属性值分配给相应的变量。它有两种写法：</span></p>
<pre class="ne-codeblock language-javascript" data-language="javascript">let obj ={x: 1, y: 2, z: 3};
let {x, y, z} = obj;
console.log(x, y, z)
let {x: a, y: b, z: c} = obj;// 别名
console.log(a, b, c)</pre>
<p id="ua259f407" class="ne-p"><span class="ne-text">第1种 是对象解构的简写形式，对象的属性与要分配的属性一致时可以使用这种形式；</span></p>
<p id="ua1bf2477" class="ne-p"><span class="ne-text">第2种 是对象解构的完整形式，对象的每个属性都将被分配一个变量，其中冒号前面的是源对象中的属性，冒号后面的是要赋值属性（其实类似于是用别名）。</span></p>
<h2 id="twEN3"><span class="ne-text">2. 默认值与新变量</span></h2>
<p id="ud49d49ef" class="ne-p"><span class="ne-text">当然我们在日常开发的过程中，可能会遇到很多极端的情况，例如后端传过来的对象，可能会缺失某些字段：</span></p>
<pre class="ne-codeblock language-javascript" data-language="javascript">const person = {
name: 'ZhangSan',
height: 180,
age: undefined, // 只有undefined可以 null 0 都不行
};
const { name, height, age = 25,gender = '男'} = person;
console.log(name, height, age, gender);// ZhangSan 180 25 男</pre>
<p id="u70d61614" class="ne-p"><span class="ne-text">这里我们给age分配了一个默认值，当对源对象上不存在age属性时，age就会被赋上默认值25，而不是undefined。</span></p>
<p id="u220206dd" class="ne-p"><span class="ne-text">如果分配的对象属性为undefined，那么就会使用默认值</span></p>
<pre class="ne-codeblock language-javascript" data-language="javascript">const {x = 2} = {x: undefined};
console.log(x); // 2</pre>
<h1 id="bxn5X"><span class="ne-text">四. 数组的<span class="ne-text">解构<span class="ne-text">赋值</span></span></span></h1>
<p id="u38362bb0" class="ne-p"><span class="ne-text">在使用数组解构时，实际上会使用迭代器将所需要的值与结构源分开。因此，我们可以对<span class="ne-text">可迭代值<span class="ne-text">使用数组结构，包括字符串、数组、集合、函数映射、DOM元素。我们还可以将解构赋值与扩展运算符结合使用。</span></span></span></p>
<h2 id="PHzIP"><span class="ne-text">1.字符串</span></h2>
<pre class="ne-codeblock language-javascript" data-language="javascript">let message = 'Hello';
let = message;
let = message;
console.log(a, b); // H e
console.log(x, y, z); // H e ['l', 'l', 'o']</pre>
<h2 id="bdmdA"><span class="ne-text">2.数组</span></h2>
<pre class="ne-codeblock language-javascript" data-language="javascript">let numbers = ;
let = numbers;
console.log(x, y, z); // 1 2 3</pre>
<h2 id="vzwMk"><span class="ne-text">3.集合</span></h2>
<pre class="ne-codeblock language-javascript" data-language="javascript">let set = new Set().add('foo').add('bar');
let = set;
console.log(a, b); // foo bar</pre>
<h2 id="iUvda"><span class="ne-text">4.Map</span></h2>
<pre class="ne-codeblock language-javascript" data-language="javascript">let map = new Map().set('a', 1).set('b', 2);
let = map;
console.log(x, y); // ["a", 1] ["b", 2]</pre>
<h2 id="o7Cwm"><span class="ne-text">5.Tips</span></h2>
<p id="u823c1b8a" class="ne-p"><span class="ne-text">在数组的解构中，存储变量的数组中的每个变量都会映射到解构数组上相同索引处的相应项。</span></p>
<p id="u9a99ac06" class="ne-p"><span class="ne-text">如果解构中某一项不需要，可以使用逗号操作符进行分隔：</span></p>
<pre class="ne-codeblock language-javascript" data-language="javascript">const rgb = ;
const [,, blue] = rgb;
console.log(blue); // 100</pre>
<p id="u07c72bd6" class="ne-p"><span class="ne-text">与对象解构一样，可以使用数组解构为局部变量设置默认值</span></p>
<pre class="ne-codeblock language-javascript" data-language="javascript">const rgb = ;
const = rgb;
console.log(`R: ${red}, G: ${green}, B: ${blue}`);</pre>
<p id="u98abde90" class="ne-p"><span class="ne-text">如果变量已经存在，就可以这么写：</span></p>
<pre class="ne-codeblock language-javascript" data-language="javascript">let red = 100, green = 200, blue = 50;
const rgb = ;
= rgb;
console.log(`R: ${red}, G: ${green}, B: ${blue}`);</pre>
<p id="uce912943" class="ne-p"><span class="ne-text">对象解构不同的是，这里不需要括号将数组括起来。</span></p>
<p id="u3b404dc8" class="ne-p"><span class="ne-text">如果给变量分配的值是undefined，那么就会使用默认值：</span></p>
<pre class="ne-codeblock language-javascript" data-language="javascript">const = ;
console.log(x); // 1</pre>
<p id="u95fe9f2c" class="ne-p"><span class="ne-text">这里的默认值并不一定是一个固定值，它可以是一个计算属性：</span></p>
<pre class="ne-codeblock language-javascript" data-language="javascript">function foo() {
return 1;
}
let obj1 = {x: 2};
let obj2 = {x: undefined};
let {x=foo()} = obj1;
console.log(x); // 2
let {x=foo()} = obj2;
console.log(x); // 1</pre>
<p id="u752ba4b0" class="ne-p"><span class="ne-text">如果我们想将数组中的一些元素分配给变量，而将数组中的其余项分配给特定的变量就可以这样做：</span></p>
<pre class="ne-codeblock language-javascript" data-language="javascript">let = ["Hello", "I" , "am", "CUGGZ"];
console.log(greeting);// "Hello"
console.log(intro); // ["I", "am", "CUGGZ"]</pre>
<hr id="PTsv0" class="ne-hr">
<h1 id="dWpH3"><span class="ne-text">五. 嵌套解构</span></h1>
<p id="u06cb3c00" class="ne-p"><span class="ne-text">实际上，解构赋值可以用于嵌套数组和嵌套对象</span></p>
<h2 id="smZ42"><span class="ne-text">1.解构嵌套对象</span></h2>
<pre class="ne-codeblock language-javascript" data-language="javascript">const student = {
name: 'ZhangSan',
age: 18,
scores: {
math: 19,
english: 85,
chinese: 100
}
};
const { name, scores: {math, english, chinese} } = student; </pre>
<h2 id="GrJpQ"><span class="ne-text">2.解构嵌套数组</span></h2>
<pre class="ne-codeblock language-javascript" data-language="javascript">let numbers = , 5];
let , e] = numbers;
console.log(a, b, c, d, e); // 1 2 3 4 5</pre>
<h1 id="zBmzL"><span class="ne-text">六. 使用技巧</span></h1>
<h2 id="BFNPh"><span class="ne-text">1.函数解构</span></h2>
<h3 id="cqxW0"><span class="ne-text">（1）解构函数传参</span></h3>
<p id="u1d0e888d" class="ne-p"><span class="ne-text">使用对象解构将属性值作为参数传递给函数。</span></p>
<pre class="ne-codeblock language-javascript" data-language="javascript">function foo() {
console.log(a + b);
}
foo(); // 3
function bar({x, y}) {
console.log(x, y);
}
foo({x: 1, y: 2}); // 1 2</pre>
<h3 id="dOLHH"><span class="ne-text">（2）解构函数对象返回值</span></h3>
<p id="udc4c9dd9" class="ne-p"><span class="ne-text">对象解构函数还有另一种用法。如果函数返回一个对象，您可以将值直接解构为变量。让我们创建一个返回对象的函数</span></p>
<pre class="ne-codeblock language-javascript" data-language="javascript">function getStudentInfo() {
return {
name: 'ZhangSan',
age: 18,
scores: {
math: 19,
english: 85,
chinese: 100
}
};
}
const { name, scores: {math, english, chinese} } = getStudentInfo();
console.log(name, math, english, chinese);</pre>
<h2 id="iBILj"><span class="ne-text">2.循环中解构</span></h2>
<p id="u7bb2e30c" class="ne-p"><span class="ne-text">我们想要遍历数组并想要使用每个员工对象的属性值</span></p>
<pre class="ne-codeblock language-javascript" data-language="javascript">const User= [
{
'name': '路人甲',
'age': 16
},
{
'name': '路人乙',
'age': 18
},
{
'name': '路人丙',
'age': 20
}
];</pre>
<p id="u84de41ee" class="ne-p"><span class="ne-text">您可以使用<span class="ne-text">for-of<span class="ne-text">循环遍历<span class="ne-text">User<span class="ne-text">对象，然后使用对象解构赋值语法来检索详细信息。</span></span></span></span></span></p>
<pre class="ne-codeblock language-javascript" data-language="javascript">for(let {name, age} of User) {
console.log(`${name} 今年${age}岁!!!`);
}
// 路人甲 今年16岁!!!
// 路人乙 今年18岁!!!
// 路人丙 今年20岁!!!</pre>
<h2 id="TBYN7"><span class="ne-text">3.动态属性解构</span></h2>
<p id="u23544386" class="ne-p"><span class="ne-text">很多时候我们不知道对象属性的key，只有运行时才知道。比如有一个方法getStudentInfo，它以一个key为参数，并返回相应的属性值：</span></p>
<pre class="ne-codeblock language-javascript" data-language="javascript">getStudentInfo('name');
getStudentInfo('age'); </pre>
<p id="u27fee0a5" class="ne-p"><span class="ne-text">这里传递给getStudentInfo方法的参数是动态的，因此可以这样写：</span></p>
<pre class="ne-codeblock language-javascript" data-language="javascript">const getStudentInfo = key => {
const {: value} = student;
return value;
}</pre>
<p id="uff0a9721" class="ne-p"><span class="ne-text">需要注意，包裹key的方括号不能少，否则会出现undefined值。</span></p>
<h2 id="M6ec1"><span class="ne-text">4.交换变量</span></h2>
<p id="u0af6fd99" class="ne-p"><span class="ne-text">数组结构一个很实用的功能就是实现交换局部变量。通常，我们会借助临时变量来实现变量的交换</span></p>
<pre class="ne-codeblock language-javascript" data-language="javascript">let width = 300;
let height = 400;
let temp = width;
width = height;
height = temp;
console.log(width, height)</pre>
<p id="u8c24109e" class="ne-p"><span class="ne-text">如果使用数组的解构赋值，就会变得很简单：</span></p>
<pre class="ne-codeblock language-javascript" data-language="javascript">let width = 300;
let height = 400;
= ;
console.log(width, height)</pre>
<h2 id="NdXyT"><span class="ne-text">5.数组拷贝</span></h2>
<p id="u0d5cb9d7" class="ne-p"><span class="ne-text">可以使用解构赋值和rest运算符来实现数组的拷贝：</span></p>
<pre class="ne-codeblock language-javascript" data-language="javascript">const rgb = ;
const [...newRgb] = rgb;
// 等同于 const newRgb = [...rgb]
console.log(newRgb)</pre>
</div><br><br>
来源：https://www.cnblogs.com/whw666/p/16112677.html
頁:
[1]