Javascript中的解构赋值语法详解

这篇文章主要给大家介绍了关于Javascript中解构赋值语法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来

这篇文章主要给大家介绍了关于Javascript中解构赋值语法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

首先在 ES6中引入的“解构赋值语法”允许把数组和对象中的值插入到不同的变量中。虽然看上去可能很难，但实际上很容易学习和使用。

解构赋值语法是一种 JS表达式。ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

在ES6解构赋值出现之前，我们需要为变量赋值的时候，只能直接指定值。

比如：

				?

									let a = 1;

									let b = 2;

									let c = 3;

									let d = 4;

									let e = 5;

数组解构非常简单。你所要做的就是为数组中的每个值声明一个变量。你可以定义更少的变量，而不是数组中的索引（即，如果你只想解处理前几个值），请跳过某些索引或甚至使用 REST 模式将所有剩余的值放到新数组中。

				?

									const nums = [ 3, 6, 9, 12, 15 ];

									const [

									 k,    // k = 3

									 l,    // l = 6

									 ,    // Skip a value (12)

									 ...n   // n = [12, 15]

									] = nums;

对象解构

对象解构与数组解构非常相似，主要区别是可以按名称引用对象中的每个key，从而创建一个有相同名称的变量。此外还可以将键解构为新的变量名，只解构所需的 key，然后用 rest 模式将剩余的 key 解构为新对象。

				?

									const obj = { a: 1, b: 2, c: 3, d: 4 };

									const {

									 a,       // a = 1

									 c: d,      // d = 3

									 ...rest     // rest = { b: 2, d: 4 }

									} = obj;

嵌套解构

嵌套对象和数组可以通过相同的规则来进行解构。区别在于可以将嵌套 key 或值直接解构为变量，而不必将父对象存储在变量本身中。

				?

									const nested = { a: { b: 1, c: 2 }, d: [1, 2]};

									const {

									 a: {

									  b: f,     // f = 1

									  ...g     // g = { c: 2 }

									 },

									 ...h      // h = { d: [1, 2]}

									} = nested;

高级解构

由于数组的行为与对象相似，所以可以通过使用索引作为对象解构分配中的 key，用解构分配语法从数组中获取特定值。用这种方法还可以得到数组的其他属性（例如数组的 length）。最后，如果解构后的值是 undefined，则还可以为解构过程中的变量定义默认值。

				?

									const arr = [ 5, 'b', 4, 'd', 'e', 'f', 2 ];

									const {

									 6: x,      // x = 2

									 0: y,      // y = 5

									 2: z,      // z = 4

									 length: count, // count = 7

									 name = 'array', // name = 'array' (not present in arr)

									 ...restData   // restData = { '1': 'b', '3': 'd', '4': 'e', '5': 'f' }

									} = arr;