当前位置

网站首页> 程序设计 > 开源项目 > 程序开发 > 浏览文章

ES6特性2—变量解构赋值

作者:小梦 来源: 网络 时间: 2024-05-07 阅读:

一、数组的解构赋值

 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");