ES6（二）解构赋值详解

时间：2022-01-20 04:10:25

详解一下之前的解构赋值

　　①解构赋值中的“...”

let [a,...b]= [1];     
b   // []     ...代表变量b去匹配剩余的所有元素返回一个数组 ，匹配不到时返回[]  
//注意："...b"只能放在最后

　　②解构赋值的等号两边的数据类型必须一样

即：

let [] = [] 或者 let {} = {}

但是：Set结构也允许使用数组进行解构赋值　

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

a  //

b  //

技巧：　如果你不确定该结构是否能够解构赋值，判断其是否有Iterator接口就可以啦！判断方法如下：

function* fibs() {

  var x= 0;

  var y= 1;

  while (true) {

    yield x;

    [x, y] = [y, x+ y];

  }

}

var [a, b, c, d, e, f] = fibs();

f//

//   fibs是一个Generator函数，原生具有Iterator接口。解构赋值会依次从这个接口获取值。

　　③解构赋值不仅适用于 let / const也适用于var指令

　　④解构赋值允许添加默认值

let [a = 4] = []

a //

　　(解构赋值的匹配模式是===)注：如果解构赋值不严格等于 undefined 的话默认值不会生效

let [a = 4]=[undefined]

a //4
let [b = 4]=[null]

b//null

　　⑤我自己犯过的错

let [x = y, y = 1] = [];     //报错  因为x=y时y还没有被声明    不会被提升！！！ 牢记
var [a = b, b = 1] = [];      // a===undefined  b === 1

对象的解构赋值

　　①对象不像数组那样有顺序所以，对象的解构赋值是按照‘键’的方式匹配的

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };

baz //  'aaa'      foo是匹配模式  baz是变量

　　②对象和数组的嵌套    如果看明白一下例子也就差不多了

var obj = {

  p: [

    'Hello',

    { y: 'World' }

  ]

};

var { p: [x, { y }] } = obj;      //p是匹配模式  [x , { y }]是值   然后再看数组中的每一项
x // "Hello" 
y // "World"

　　③不像数组那样不存在时返回undefined  对象是会报错的

字符串的解构赋值

const [a, b, c, d, e] = 'hello';

a  // h

b  // e

c  // l

let {length : len} = 'hello';

len // 5      匹配的是字符串的length属性

干货：用途

（1）交换变量的值　

[a,b]=[b,a]

（2）从函数返回多个值

function example() {

  return [1, 2, 3];

}

var [a, b, c] = example();

（3）函数参数的定义

function f([x, y, z]) { ... }

f([1, 2, 3]);

（4）提取JSON数据

var jsonData = {

  id: 42,

  status: "OK",

  data: [867, 5309]

};

let { id, status, data: number } = jsonData;

（5）函数参数的默认值

function f([x = 1, y = 2 , z]) { ... }

（6）遍历Map结构

var map = new Map();

map.set('first', 'hello');

map.set('second', 'world');

for (let [key, value] of map) {

  console.log(key + " is " + value);

}

// first is hello

// second is world

// 获取键名

for (let [key] of map) {

  // ...

}

// 获取键值

for (let [,value] of map) {

  // ...

}
 

（7）输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");

　　

相关文章