ES6-3 变量的解构赋值

1.数组的解构赋值

数组的解构赋值其实是=左右进行“模式匹配”。

❗️❗️❗️=右侧是具体的数值，不是变量！，=左侧的是变量！如果右侧是变量形式，需要先计算出具体的数值！！

let [a,[b],c] = [1,[2],3]; // a=1;b=2;c=3
let [a, ...tail] = [1,2,3,4,5]; // a = 1, tail = [2,3,4,5]
let [a,b,c] = [1]; // a=1 b=undefined c=undefined

=有侧不能是非数组，非数组会自动转为包装对象。{}不行，因为对象不含iterator接口。但是Set可以，Set有iterator接口。

let [a,b,c] = new Set([1,2,3]) // a=1, b= 2, c= 3

只要数据结构有iterator接口就可以使用数组结构。用Generator函数生成的iterator对象也可以解构。

function* fibs() {
    let a = 0;
    let b = 1;
    while (true) {
      yield a;
      [a, b] = [b, a + b]; // ⚠️ 千万不要理解成a=b;b=b+a;
      // 解构赋值会先计算=右侧的值。所以会先计算出[b,a+b]的值，然后再进行解构
      // 如第一次是[1,1]
    }
  };
  const a = fibs();
  a.next();// { value: 0, done: false } // a=1,b=1
  a.next();// { value: 1, done: false } // a=1,b=2
  a.next();// { value: 1, done: false } // a=2,b=3
  a.next();// { value: 2, done: false } // a=3,b=5
  a.next();// { value: 3, done: false } 
  a.next();// { value: 5, done: false } 
  let [first,second,third,four,five,six] = fibs();
  console.log(first,second,third,four,five,six) // 0,1,1,2,3,5

数组解构允许设置默认值,=右侧的值为undefined时，左侧使用默认值

let [a=5,b=6, c=7] = [undefined,null,];
// a = 5, b=null, c=7

2.对象的解构赋值

对象解构的=右侧要求必须是对象，null或者undefined不能被解构，会报错！

对象的解构赋值其实本质上也是“模式匹配”。

let {foo, bar} = { foo: 'aaa', bar: 'bbb' }

因为对象可以简写，其实应该是下面的形式

let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };

解构赋值的变量其实是：后面的变量名，：前端的值相当于匹配的模式

let { hello: h, world: w } = { hello: 'hello', world: 'world'}
// h='hello' w = 'world'

对于对象的扩展运算符（ES2018）用于对象解构赋值

let { x, y, ...z } = { x:1, y:2, z:3, k:4}
// x = 1 y=2 z={z:3, k:4}
// ⚠️对于解构赋值来说，扩展运算符位于=左侧的时候只能用于最后一个元算，对于变量扩展来说...是剩余元素运算符。同理，作为函数参数的时候是参数对象的解构赋值，也只能用于最后一个参数

对于嵌套解构，普通属性可以在左侧变量声明中解构；但是扩展运算符...解构，不能用于嵌套解构。

let obj = {
  web: {
    js: {
      nodejs: 'node',
      reactjs: 'react'
    }
  }
}
const { web, web: {js}, web: {js: {nodejs, reactjs}}} = obj;
// web= { js: { nodejs: 'node', reactjs: 'react' } }
// js = { nodejs: 'node', reactjs: 'react' }
// nodejs = 'node'
// reactjs = 'react'

普通解构可以取到继承的原型对象上的属性；但是扩展运算符解构取不到原型对象上的属性。

let obj1 = { a:1, b:2, c:3, d:4 };
let obj2 = Object.create(obj1);
obj2.x = 5;

let { a, ...y} = obj2;
// 其中a是正常解构，可以取到原型对象上的属性；y是扩展解构，只能解构自身的属性
// a = 1, y = {x:5}

对象解构允许设置默认值

let { x: y = 1, z = 5, k: m=8} = { x:5, z:6 }
// y=5, z=6, m=8

⚠️1）先声明，再解构的情况

let x;
({x} = {}) // 必须有小括号，否则js引擎将{x}作为代码块处理
// x = undefined

2）数组是特殊对象，允许对数组进行对象解构赋值

const arr = [1,4,2,3];
let {0: first, [arr.length-1]: last, length} = arr;
console.log(first,last,length) // 1,3,4

3. 字符串解构赋值

对字符串使用解构赋值时，js引擎将字符串转为类数组对象String()，类数组都有length属性

let str = 'hello';
let [a,b,c,d,e] = str;// 数组解构 'h' 'e' 'l' 'l' 'o'
let { length } = str; // 对象解构 5

4. 数值和布尔值解构赋值

数值和布尔值进行赋值操作时，右侧的数值和布尔值会自动转为包装对象Number(),Boolean()

let { toString: s } = 124;
//s === Number.prototype.toString

5.函数参数解构赋值

函数参数的解构赋值类似数组，对象的解构赋值

[[1, 2], [3, 4]].map(([a, b]) => a + b);

对于参数的对象解构，注意默认值的赋值位置

function move1({a=0,b=0} = {}) { // 相当于给参数a,b赋初值
  return [a,b]
}
function move2({a,b} = {a:0, b:0}) { // 相当于默认传参a = 0, b= 0，即不传参时的默认值
  return [a,b]
}
console.log(move1());  // [0,0]
console.log(move2());  // [0,0]
console.log(move1({}));// [0,0]
console.log(move2({}));// [undefined,undefined]
console.log(move1({a: 3})); // [3,0]
console.log(move2({a: 3})); // [3,undefined]

6.小括号的使用

避免使用小括号。（?️：1）声明解构时 2）参数解构 3）模式括起来）

7.解构实际应用

1）json对象解构并赋初值

2）函数参数赋初值

3）函数参数解构赋初值（*effects）

4) 交换变量的值

let x = 1;
let y = 2;
[x,y] = [y,x];
console.log(x,y); //2,1

5)遍历Map对象

const map = new Map();
map.set('a', 1);
map.set('b', 2);
for (let [key,value] of map) {
  console.log(key,value); 
  // a 1
  // b 2
}

6)指定模块的导入方法

import { Component } from 'react'

 

转载于:https://www.cnblogs.com/lyraLee/p/11532834.html