ES6解构赋值+字符串的扩展

Posted 2020-08-19 雨中伞

详解一下之前的解构赋值

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

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

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

即：

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

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

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

技巧：　如果你不确定该结构是否能够解构赋值，判断其是否有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// 5
//   fibs是一个Generator函数，原生具有Iterator接口。解构赋值会依次从这个接口获取值。

 

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

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

let [a = 4] = [] 
a //4

　　(解构赋值的匹配模式是===)注：如果解构赋值不严格等于 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");