解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

数组 匹配解构

变量声明并赋值时的解构

  1. let [one, two, three] = ["one", "two", "three"];
  2. console.log(one,two,three); // "one","two","three"

变量先声明后赋值时的解构

  1. let a, b;
  2. [a, b] = [1, 2];
  3. console.log(a); // 1

默认值

  1. let a, b;
  2. [a=5, b=7] = [1];
  3. console.log(a); // 1

交换变量

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

解析一个从函数返回的数组

  1. function f() {
  2. return [1, 2];
  3. }
  4. let a, b;
  5. [a, b] = f();
  6. console.log(a); // 1

忽略某些返回值

  1. function f() {
  2. return [1, 2, 3];
  3. }
  4. let [a, , b] = f();
  5. console.log(a); // 1
  6. console.log(b); // 3

将剩余数组赋值给一个变量

  1. let [a, ...b] = [1, 2, 3];
  2. console.log(a); // 1
  3. console.log(b); // [2, 3]

对象 匹配解构

基本赋值

  1. var o = {p: 42, q: true};
  2. var {p, q} = o;
  3. console.log(p); // 42
  4. console.log(q); // true

无声明赋值

  1. let a, b;
  2. ( {a, b} = {a: 1, b: 2} );
  3. // 圆括号一定要加上
  4. // 否则 {a, b} = {a: 1, b: 2} 不是有效的独立语法,因为左边的 {a, b} 被认为是一个块而不是对象字面量。

给新的变量名赋值

  1. var o = {p: 42, q: true};
  2. var {p: foo, q: bar} = o;
  3. console.log(foo); // 42
  4. console.log(bar); // true

默认值

  • 变量可以先赋予默认值。当要提取的对象没有对应的属性,变量就被赋予默认值。 ```javascript var {a = 10, b = 5} = {a: 3};

console.log(a); // 3 console.log(b); // 5

  1. <a name="5gaQJ"></a>
  2. ### 给新的变量命名并提供默认值
  3. - 一个属性可以同时 1)从一个对象解构,并分配给一个不同名称的变量 2)分配一个默认值,以防未解构的值是 undefined。
  4. ```javascript
  5. var {a:aa = 10, b:bb = 5} = {a: 3};
  6. console.log(aa); // 3
  7. console.log(bb); // 5

参数 匹配解构

  1. let user = {
  2. id: 42,
  3. displayName: "jdoe",
  4. fullName: {
  5. firstName: "John",
  6. lastName: "Doe"
  7. }
  8. };
  9. function userId({id}) {
  10. return id;
  11. }
  12. function whois({displayName: displayName, fullName: {firstName: name}}){
  13. console.log(displayName + " is " + name);
  14. }
  15. console.log("userId: " + userId(user)); // "userId: 42"
  16. whois(user); // "jdoe is John"

字符串 解构赋值

因为字符串可以像数组进行遍历,但同时也有length属性,所以,数组和对象的解构赋值都可以对字符串进行使用。

  1. var str = 'hello';
  2. 1. 使用对象的解构赋值
  3. let {length} = str;
  4. console.log(length);//5
  5. 2. 使用数组的解构赋值
  6. let [ch1,ch2,...ch3] =str;//['h','e','l','l','o']
  7. console.log(ch1,ch2,ch3); 'h' 'e' ['llo']