ES6特性2—变量解构赋值

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ES6特性2—变量解构赋值脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

一、数组解构赋值

 VAR [a, b, c] = [1, 2, 3];
 本质为“模式匹配”,只要等号两边模式相同,左边变量会被赋予对应的值。
 let[, , third] = ['foo', 'bar', 'baz'];
 third // "baz"

 let[head, ...tail] = [1, 2, 3, 4];
 head //1
 tail //[2,3,4]
 
 不完全解构:
 let[x,y] = [1,2,3];
 x //1
 y //2

 let[a, [b], d] = [1, [2,3], 4];
 a //1
 b //2
 d //4

如果等号右边不是数组。(严格说,不是可遍历的解构),则报错

 let [foo] = 1;
 let [foo] = false;
 let [foo] = NaN;
 let [foo] = undefined;
 let [foo] = null;
 都会报错

解构赋值允许指定默认值( 默认值生效的条件是,对象的属性值严格等于undefined。)

 [x, y='b'] = ['a'] //x='a', y='b'
 [x, y='b'] = ['a', undefined] //x='a', y='b'

二、对象的解构赋值

var {foo, bar} = {foo: "aaa", bar: "bbb"};
foo // "aaa"
bar // "bbb"

对象解构跟数组解构不同。数据结构按位置取值,对象解构按属性名取值;

var {bar, foo} = {foo: "aaa", bar: "bbb"};
foo // "aaa"
bar // "bbb"

var {taz} = {foo: "aaa", bar: "bbb"};
baz //undefined

如果变量名与属性名不一致,必须写成这样

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

解构也可以用于嵌套解构对象

var obj = {
 p: [
     "Hello",
      {y: "World"} 
 ]
};
var { p: [x,{y}] } = obj;
x // "Hello"
y // "World"

如果解构失败,变量值等于undefined

三、字符串解构赋值

const[a, b] = 'hi';
a //"h"
b //"i"

可以对数据长度属性解构赋值

let{length: len} = 'hello';
len //5

四、函数参数解构赋值

function add([x, y]){
 return x + y;
}
add([1,2]);

函数add参数不是数组,而是通过解构得到变量x和y。

函数参数解构可以使用默认值

function move({x = 0, y = 0} = {}){
 return [x,y];
}
move({x: 3, y: 8}); //[3, 8]
move({x: 3}); //[3, 0]

五、括号问题
解构解析对编译器来说并不容易,尽量少用圆括号。

六、用途
1、交换变量值

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

2、从函数返回多个之=值

 (1)返回一个数组
      function example(){
          return [1, 2, 3] ;
      }
      var [a,b,c] = example();

 (2)返回一个对象
      function example(){
           return {
               foo: 1,
               bar: 2 
           }
      }
      var {foo , bar } = example;

3、函数参数定义,上面有

4、提取json数据

var jsonData = {
 id: 42,
 status: 'ok',
 data: [867,5309]
}

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

console.LOG(id, status, number)
//42, ok, [867, 5309]

5、函数参数默认值,具体见上面

6、遍历Map解构

var map = new Map();
map.set('First': 'hello');
map.set('second': 'world');

for( let [key, value] of map ){
 console.log(key + 'id' + value);
}
// first is hello
// second is world

如果只获取键名或者只获取键值
//获取键名

for(let [key] of map){
 // ...
}

//获取键值

for(let [,value] of map){
 // ...
}

7、输入模块的指定方法

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

脚本宝典总结

以上是脚本宝典为你收集整理的ES6特性2—变量解构赋值全部内容,希望文章能够帮你解决ES6特性2—变量解构赋值所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。