前言
JavaScript 是一门非常灵活的语言，它在语法和特性方面非常灵活，让开发者可以根据不同的需求灵活地选择不同的写法来完成同一个任务。不过，灵活性也意味着代码的可读性和可维护性可能较低。为了解决这个问题，ECMAScript 6 (ES6) 引入了许多新特性和语法糖，其中就包括解构赋值和结构赋值、循环嵌套等。这些新特性让 JavaScript 的代码变得更加简洁、清晰、易于维护。
解构赋值
解构赋值是一种新的变量声明方式，它可以从数组和对象中提取值，然后将这些值赋给新的变量。这种语法糖可以让我们用更少的代码完成一些常见任务，并且目的清晰易懂。
数组解构赋值
数组解构赋值是指将数组中的值提取到对应的变量中，比如：
const arr = [1, 2, 3]; const [a, b, c] = arr; console.log(a, b, c); // 1 2 3
在这个例子中，我们用 const [a, b, c] = arr; 将 arr 数组中的 1、2、3 这三个值提取出来，分别赋值给 a、b、c 这三个新的变量。这样，我们就可以用更少的代码完成数组的赋值操作，提高了代码的可读性和简洁性。
另外，数组解构赋值还支持嵌套的写法，比如：
const arr = [1, [2, 3], 4]; const [a, [b, c], d] = arr; console.log(a, b, c, d); // 1 2 3 4
这个例子中，我们声明了一个 arr 数组，其中第二个元素是一个嵌套数组 [2, 3]，我们可以使用 [b, c] 的形式对这个嵌套数组进行解构赋值，提取出它的两个值，分别赋值给 b、c 两个新变量。
对象解构赋值
对象解构赋值与数组解构赋值类似，也是用来提取对象的属性值，然后用新的变量存储这些值。比如：
const obj = {a: 1, b: 2, c: 3};
const {a, b, c} = obj;
console.log(a, b, c); // 1 2 3在这个例子中，我们将 obj 对象的属性 a、b、c 的值分别赋值给了三个新变量。
另外，对象解构赋值也支持默认值的写法，在一些复杂的对象结构中，这种写法可以让我们更加灵活地进行取值。比如：
const obj = {a: 1, b: {x: 2, y: 3}};
const {a, b: {x, y, z = 4}} = obj;
console.log(a, x, y, z); // 1 2 3 4在这个例子中，我们将 obj 对象的 a 属性的值赋值给变量 a，将 b.x 和 b.y 两个属性的值赋值给变量 x、y，并且通过 z = 4 的写法为 z 变量设置了默认值 4。这样即使 obj 对象中没有 b.z 属性，我们也不会出现赋值错误的情况。
结构赋值
除了解构赋值，ES6 还引入了另一种语法糖叫做“结构赋值”，它可以让我们将一个对象或数组整体赋值给一个变量，然后用这个变量来访问对象或数组中的属性或元素。
对象结构赋值
对象结构赋值的写法类似于对象字面量，比如：
const obj = {a: 1, b: 2, c: 3};
const obj2 = {...obj};
console.log(obj2); // {a: 1, b: 2, c: 3}在这个例子中，我们使用 {...obj} 的写法将整个 obj 对象结构赋值给了 obj2 变量，然后输出 obj2 的值，发现它与 obj 的值完全一致。
数组结构赋值
数组结构赋值的语法类似于数组字面量，比如：
const arr = [1, 2, 3]; const arr2 = [...arr]; console.log(arr2); // [1, 2, 3]
在这个例子中，我们使用 [...arr] 的写法将整个 arr 数组结构赋值给了 arr2 变量，然后输出 arr2 的值，发现它与 arr 的值完全一致。
循环嵌套
循环嵌套是一种常见的编程技巧，它可以让我们在一定的条件下将多次循环的过程合并起来，从而简化代码的编写。ES6 中的解构赋值和结构赋值应用得当，可以让循环嵌套的写法更加灵活、高效。
对象嵌套数组的循环嵌套
在一些场景中，我们需要遍历一个对象中的所有属性，然后再遍历这些属性所对应的数组。这种需求可以通过解构赋值实现，比如：
-- -------------------- ---- -------
----- --- - -
-- --- -- ---
-- --- -- ---
--
--- ------ ----- ------ -- -------------------- -
-----------------
--- ------ ---- -- ------ -
------------------
-
-在这个例子中，我们使用 Object.entries() 方法将 obj 对象的属性和值以 [key, value] 数组的形式输出，然后再使用 for...of 循环遍历每一个值 value 中的元素，输出所有元素。
数组嵌套对象的循环嵌套
同样地，如果需要遍历一个数组中的所有元素，然后再遍历这些元素所对应的对象的属性，也可以使用解构赋值实现，比如：
-- -------------------- ---- ------- ----- --- - - --- -- -- --- --- -- -- --- --- -- -- --- -- --- ------ --- -- -- ---- - -------------- --- -
在这个例子中，我们使用 {a, b} 的写法将每个数组元素中的属性 a、b 的值赋值给了新变量 a、b，从而实现了对每个数组元素的遍历。注意到这里的代码还使用了 for...of 循环，这是一个非常好的 JavaScript 循环嵌套技巧，可以让程序的逻辑结构更加清晰易懂。
总结
ES6 中的解构赋值和结构赋值、循环嵌套等语法糖可以让 JavaScript 的代码更加简洁、清晰、易于维护，提高开发效率。在实际编码中，我们应该根据实际情况灵活选择不同的语法糖，避免出现过于复杂或不必要的代码结构。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647e88af48841e9894e3b937