什么是解构赋值并在 JavaScript 中简要解释一下？

ECMAScript 2015 (ES6)中引入的解构赋值是一种 JavaScript 表达式，它提供了一种简写语法，可以使用一行代码将对象的数组元素或属性提取或解压缩为不同的变量。它使代码更短，更易读。

语法：表达式的左侧包含不同的变量，这些变量定义要从源变量中解包的属性/值，右侧指定相应的对象或数组（源变量）。

// array destructuring
[variable1, variable2, .... , variableN] = array_variable;

// object destructuring
{property1, property2, .... , propertyN} = object_variable;

示例 1：以下示例展示了使用数组解构将所需的数组元素提取到不同变量中的用法，还将帮助您了解如何使用解构来编写简洁明了的代码。

Javascript

//array destructuring
let rainbow = ["Violet", "Indigo", "Blue", "Green", 
               "Yellow", "Orange","Red"];
let [V,I,B] = rainbow;
console.log(V,I,B);

Javascript

let rainbow = ["Violet", "Indigo", "Blue", 
    "Green", "Yellow", "Orange","Red"];
  
// Skipping alternate colors from the rainbow array
let [V,,B,,Y,,R] = rainbow;
  
// Violet Blue Yellow Red
console.log(V,B,Y,R);</code></pre></div><br><hr><h5 class="code">Javascript</h5><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace"><script>
// Object destructuring
let address = { state: 'Punjab', city: 'Mohali', sector: 61 };
  
// Assign the address object directly as well
let {city, sector} = address;
console.log("City: " + city + ", Sector: " + sector);
  
// city = address.city
// sector = address.sector

输出：

Violet Indigo Blue

示例 2：展开运算符也用于解包数组元素，但数组解构和展开运算符的主要区别在于展开操作符解包所有数组元素，并且不允许我们根据需要跳过或选择元素。使用数组解构，我们可以使用“逗号分隔符”跳过不需要的元素。

Javascript

let rainbow = ["Violet", "Indigo", "Blue", 
    "Green", "Yellow", "Orange","Red"];
  
// Skipping alternate colors from the rainbow array
let [V,,B,,Y,,R] = rainbow;
  
// Violet Blue Yellow Red
console.log(V,B,Y,R);
</code></pre></div></div></div></div><p><strong>输出：</strong> </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">Violet Blue Yellow Red</code></pre></div><p style="text-align:justify"><strong>示例 3：</strong>在以下示例中，<i>地址</i>对象被解构以仅获取<i>城市</i>和<i>部门</i>属性并在控制台上显示输出。</p><p style="text-align:justify">对象解构是 Javascript 的一个重要特性，当只使用对象的某些属性并且不需要完整的对象时，它非常有用。 ES6的这个特性在Javascript框架中很常用，它的主要应用是参数解构，即传入函数参数的对象可以在使用前根据函数需求进行解构。</p><div class="noIdeBtnDiv"><div class="responsive-tabs"><h2 class="tabtitle"> Javascript </h2><div class="tabcontent"><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace"><script>
// Object destructuring
let address = { state: 'Punjab', city: 'Mohali', sector: 61 };
  
// Assign the address object directly as well
let {city, sector} = address;
console.log("City: " + city + ", Sector: " + sector);
  
// city = address.city
// sector = address.sector

输出：

City: Mohali, Sector: 61

示例 4：也可以使用不同的变量名（别名）提取对象属性 除了源对象中定义的属性名称。以下示例使用别名从地址对象中提取state和city属性的值。

Javascript

// Using an alias for extracting object properties
let address = { state: 'Punjab', city: 'Mohali', sector: 61 };
let {state: stateName, city: cityName, sector} = address;    
console.log("State: " + stateName + ", City: " 
    + cityName + ", Sector: " + sector);    
// stateName ->  alias for address.state
// cityName  ->  alias for address.city

输出：

State: Punjab, City: Mohali, Sector: 61

示例 5：嵌套对象（即源对象中的对象）也可以使用与对象解构相同的语法进行解构，以仅访问所需的属性。下面的示例包含一个具有嵌套对象pin的地址对象，该对象被解构以仅提取地址的 Pincode。

Javascript

// Nested object destructuring
let address = { 
    state: 'Punjab', 
    city: 'Mohali', 
    pin: {sector: 61, pincode: '160062'} 
};
  
// Accessing only the 'pincode' property
// from address.pin (nested object)
//pincode = address.pin.pincode
let { state, city, pin: {pincode} } = address;
console.log("State: " + state + ", City: "
    + city + ", Pincode: " + pincode);

输出：

State: Punjab, City: Mohali, Pincode: 160062