JavaScript 什么是解构赋值，简要解释一下

解构赋值（Destructuring assignment） 是 JavaScript ECMAScript 2015（ES6）版本中引入的重要技术，它提供了一种简洁的语法，可以使用一行代码将数组元素或对象的属性解构或拆分成不同的变量。换句话说，这个赋值操作帮助我们将任何可迭代或非可迭代对象的数据进行分离，然后在需要时单独使用这些分离的数据。它让代码更短、更可读。

让我们来看一下下面提到的解构赋值的语法，它将帮助我们减少代码量，使其更可读和可扩展。

语法： 解构赋值表达式的左边是定义要从源变量（或数组或对象）解构或拆分的属性/值的不同变量，而右边指定要从中提取数据的对象或数组（源变量可以是任何可迭代或非可迭代对象）。

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

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

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

JavaScript

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

输出：

Violet Indigo Blue

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

JavaScript

<script>
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);

输出：

Violet Blue Yellow Red

示例 3: 在下面的示例中，一个地址对象被解构以仅获取城市和区域属性，并将输出显示在控制台上。

对象解构是JavaScript的一个重要特性，当只需要使用对象的特定属性时非常有用，而不需要整个对象或不考虑整个对象。ES6的这个特性通常在JavaScript框架中使用，它的主要应用是参数解构，即在使用前，函数参数中传递的对象可以被解构，根据函数的要求进行使用。

Javascript

<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
</script>

输出： 输出：

City: Mohali, Sector: 61

注意： 在JavaScript中实现对象解构时，名称的顺序并不重要。

例如，在上面的示例中，如果我们改变从源对象解构特定对象属性的名称顺序，我们的任务和结果也将保持不变。让我们通过以下代码片段来实现这个说明的事实：

Javascript

let address = { state: "Punjab", city: "Mohali", sector: 61 };
 
let { city, state, sector } = address;
 
console.log(
  `An employee lives in the state of {state} and his city name is{city}`
);
 
// This code is contributed by Aman Singla...

输出:

An employee lives in the state of Punjab and his city name is Mohali

示例4： 对象属性也可以使用与源对象中定义的属性名称不同的变量名称（别名）来提取。以下示例使用 **** 别名来提取 address 对象中 state 和 city 属性的值。

javascript

<script>
// 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
</script>

输出：

State: Punjab, City: Mohali, Sector: 61

示例5： 嵌套对象，即源对象内的对象，也可以使用对象解构的相同语法进行解构，以仅访问所需的属性。下面的例子包含一个地址对象，其中包含一个嵌套对象pin，该对象将被解构以仅提取地址的邮政编码。

JavaScript

<script>
// 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);
</script>

输出:

State: Punjab, City: Mohali, Pincode: 160062

示例-6： 在此示例中，我们将尝试理解如何实际设置函数参数的默认值任务。换句话说，使用下面提到的代码片段，我们将尝试理解如何设置函数参数的默认值。

Javascript

let drawing_begins = ({
  size = "BIG",
  coordinates = { x: 0, y: 0 },
  radius = 25,
}) => {
  console.log(
    `Th drawing made so far is of the {size} size, having the coordinates of ({coordinates.x} , {coordinates.y}) and with the radius value of{radius}`
  );
};
 
drawing_begins({
  coordinates: { x: 18, y: 30 },
  radius: 30,
});
 
// This code is contributed by Aman Singla...

输出：

Th drawing made so far is of the BIG size, having the coordinates of (18 , 30) and with the radius value of 30