乐趣区

关于javascript:ES6-解构赋值

jiezi

解构赋值是对赋值运算符的扩大。是一种针对数组或者对象进行模式匹配，而后对其中的变量进行赋值。

数组的解构赋值

ES6 中能够从数组中提取值，对变量进行赋值，这种过程称为解构。

示例：

例如上面这个例子，从数组中提取值，依照对应地位，对变量赋值：

let [x, k, d] = [1, 2, 3];

console.log(x);  // 输入：1
console.log(k);  // 输入：2
console.log(d);  // 输入：3

这种写法属于模式匹配，只有等号两边的模式雷同，就会将左边的值赋给右边的变量。

嵌套数组解构

在 ES6 中嵌套数组也能够进行解构。

示例：
let [x, [[k], d]] = [1, [[20], 3]]; 

console.log(x);  // 输入：1
console.log(k);  // 输入：20
console.log(d);  // 输入：3

不齐全解构

在解构数组时咱们能够疏忽某个值。例如上面这个例子中，左边有三个值，如果咱们只想要将第二个值赋给指定变量，其余值不进行赋值，能够像上面这个写：

let [, x,] = [1, 2, 3]; 
console.log(x);  // 输入：2

残余运算符，例如上面这个例子，变量 a 被赋值为 1，其余的值都被赋给了 ...b：

let [a, ...b] = [1, 2, 3, 4, 5]; 
console.log(a);  // 输入：1
console.log(b);  // 输入：[2, 3, 4, 5]

字符串解构赋值

字符串的解构能够了解为一维数组的解构，这在解决符串的时候特地不便。

示例：
let [a, b, c] ='123'
console.log(a, b, c);   // 输入：1 2 3
console.log(typeof a);  // 输入：string

字符串对象也有一个 length 属性，因为咱们能够对这个属性解构赋值。

let {length : len} = 'hello, xkd';
console.log(len);  // 输入：10

数值和布尔值的解构赋值

在解构赋值时，如果等号左边的值时数值或布尔类型，会先转换为对象，而后再进行赋值。

示例：
let {toString: a} = 100;
console.log(a === Number.prototype.toString);  // 输入：true

let {toString: b} = true;
console.log(b === Boolean.prototype.toString); // 输入：true

对象的解构赋值

对象的解构与数组有一个重要的不同，数组的元素是按秩序排列的，变量的取值由它的地位决定。而对象的属性没有秩序，变量必须与属性同名，能力取到正确的值。

示例：
let {a, b, c} = {a: 1, b: 2};
console.log(a, b, c);  // 输入：1 2 undefined

上述代码中，等号右边的前两个变量 a、b 与左边的对象属性名雷同，所以胜利取到对应的值。而变量 c 没有对应的同名属性，导致取不到值，最初后果为 undefined。

如果变量名与属性名不统一，还有一种办法可能胜利取到值，例如像上面这个：

let {first: f, second: s} = {first:100, second:200};
// 输入变量的值
console.log(f);  // 输入：100
console.log(s);  // 输入：200

上述代码中，first 和 second 是匹配的模式，f 和 s 才是变量，真正被赋值的是变量 f 和 s。

和数组一样的是，解构也能够用于嵌套构造的对象。

示例：

例如上面这个例子：

let obj = {
    stu: [
      'xkd',
      {age: 18}
    ]
};
  
let {stu: [name, { age}] } = obj;
console.log(name, age);  // 输入：xkd 18

留神这时 stu 是模式，不是变量，因而不会被赋值。如果 stu 也要作为变量赋值，能够写成上面这样。

let obj = {
    stu: [
      'xkd',
      {age: 18}
    ]
  };
  
let {stu, stu: [key, { age}] } = obj;
console.log(stu);  // 输入：['xkd', { age: 18} ]
console.log(key);  // 输入：xkd
console.log(age);  // 输入：18

函数参数的解构赋值

除了数组、字符串、对象等数据类型，在 ES6 中函数的参数也能够应用解构赋值。

示例：

例如上面这个例子：

function add([x, y]){console.log(x + y);
  }
  
add([3, 7]); // 输入：10

上述代码中，函数 add 的参数外表上是一个数组，但在传入参数的那一刻，数组参数就被解形成变量 x 和 y。对于函数外部的代码来说，它们能感触到的参数就是 x 和 y。

默认值

解构赋值容许指定默认值。有一点须要留神的是，即便设置了默认值，在进行解构赋值时，依旧会先赋值，如果没有赋值胜利，则会应用默认值。如果没有默认值后果为 undefined。

示例：
let [a=1, b=2, c=3, d] = [100, 200];
console.log(a, b, c, d);  
// 输入：100 200 3 undefined

上述代码中，a、b、c 都指定了默认值，然而只有 a、b 被胜利赋值为 100、200，c 没有被赋值，那么 c 会应用指定的默认值。而 d 既没有被赋值，也没有默认值，所以后果为 undefined。

链接：https://www.9xkd.com/

退出移动版