JavaScript 解构赋值

一. 解构赋值

1. 定义：解构赋值：是一种JavaScript表达式。可以通过解构赋值，将属性或值从数组或对象中取出，赋值给其他变量。
   二. 解构数组

2. 声明变量并赋值：
   var foo = [“one”, “two”, “three”]
   var [one, two, three] = foo;
   console.log(one); // “one”
   console.log(two); // “two”
   console.log(three); // “three”

3. 变量先声明后赋值时的解构：
   var a, b;
   [a, b] = [1, 2];
   console.log(a); // 1
   console.log(b); // 2

4. 默认值：
   var a, b;
   [a=5, b=7] = [1];
   console.log(a); // 1
   console.log(b); // 7

5. 交换变量：交换两个变量的值
   var a = 1;
   var b = 3;
   [a, b] = [b, a];
   console.log(a); // 3
   console.log(b); // 1

6. 解析一个从函数返回的数组：
   function f() {
   return [1, 2];
   }
   var a, b;
   [a, b] = f();
   console.log(a); // 1
   console.log(b); // 2

7. 忽略某些返回值：
   function f() {
   return [1, 2, 3];
   }
   var [a, , b] = f();
   console.log(a); // 1
   console.log(b); // 3
   也可以忽略所有返回值：
   [,] = f();

8. 剩余运算符解构： ‘ … ’ ：是扩展运算符，剩余元素必须是数组最后的元素
   var [a, …b] = [1, 2, 3];
   console.log(a); // 1
   console.log(b); // [2, 3]

9. 用正则表达式匹配提取值：用正则表达式的 exec() 方法匹配字符串会返回一个数组，该数组第一个值是完全匹配正则表达式的字符串，然后的值是匹配正则表达式括号内内容部分。解构赋值允许你轻易地提取出需要的部分，忽略完全匹配的字符串——如果不需要的话。
   function parseProtocol(url) {
   var parsedURL = /^(\w+)😕/([/]+)/(.*)$/.exec(url);
   if (!parsedURL) {
   return false;
   }
   console.log(parsedURL); // [“https://developer.mozilla.org/en-US/Web/JavaScript”, “https”, “developer.mozilla.org”, “en-US/Web/JavaScript”]

       var [, protocol, fullhost, fullpath] = parsedURL;
       return protocol;
     }
     
     console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"
   

三. 解构对象

1. 基本赋值：
   let { foo, bar } = { foo: ‘aaa’, bar: ‘bbb’ };
   // foo = ‘aaa’
   // bar = ‘bbb’

   let { baz : foo } = { baz : 'ddd' };
   // foo = 'ddd'
   

2. 无声明赋值：赋值语句周围的圆括号 ( … ) 在使用对象字面量无声明解构赋值时是必须的。{a, b} = {a: 1, b: 2} 不是有效的独立语法，因为左边的 {a, b} 被认为是一个块而不是对象字面量。然而，({a, b} = {a: 1, b: 2}) 是有效的，正如 var {a, b} = {a: 1, b: 2}。你的 ( … ) 表达式之前需要有一个分号，否则它可能会被当成上一行中的函数执行。
   var a, b;

   ({a, b} = {a: 1, b: 2});
   

3. 给新的变量名赋值：
   var o = {p: 42, q: true};
   var {p: foo, q: bar} = o;

   console.log(foo); // 42
   console.log(bar); // true 
   

4. 默认值：
   let {a = 10, b = 5} = {a: 3};
   // a = 3; b = 5;
   let {a: aa = 10, b: bb = 5} = {a: 3};
   // aa = 3; bb = 5;

5. 嵌套对象和数组：
   let obj = {p: [‘hello’, {y: ‘world’}] };
   let {p: [x, { y }] } = obj;
   // x = ‘hello’
   // y = ‘world’
   let obj = {p: [‘hello’, {y: ‘world’}] };
   let {p: [x, { }] } = obj;
   // x = ‘hello’

6. For of迭代和解构:
   var people = [
   {
   name: ‘Mike Smith’,
   family: {
   mother: ‘Jane Smith’,
   father: ‘Harry Smith’,
   sister: ‘Samantha Smith’
   },
   age: 35
   },
   {
   name: ‘Tom Jones’,
   family: {
   mother: ‘Norah Jones’,
   father: ‘Richard Jones’,
   brother: ‘Howard Jones’
   },
   age: 25
   }
   ];

     for (var {name: n, family: {father: f}} of people) {
       console.log('Name: ' + n + ', Father: ' + f);
     }
     
     // "Name: Mike Smith, Father: Harry Smith"
     // "Name: Tom Jones, Father: Richard Jones"
   
   7.	剩余运算符:
   let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
   // a = 10
   // b = 20
   // rest = {c: 30, d: 40}
   

7. 从作为函数实参的对象中提取数据:
   function userId({id}) {
   return id;
   }

     function whois({displayName: displayName, fullName: {firstName: name}}){
       console.log(displayName + " is " + name);
     }
     
     var user = {
       id: 42,
       displayName: "jdoe",
       fullName: {
           firstName: "John",
           lastName: "Doe"
       }
     };
     
     console.log("userId: " + userId(user)); // "userId: 42"
     whois(user); // "jdoe is John"a
   

8. 解构对象时会查找原型链（如果属性不在对象自身，将从原型链中查找）:
   // 声明对象 和 自身 self 属性
   var obj = {self: ‘123’};
   // 在原型链中定义一个属性 prot
   obj.proto.prot = ‘456’;
   // test
   const {self, prot} = obj;
   // self “123”
   // prot “456”（访问到了原型链）