变量解构赋值的7大用途总结

   日期:2020-11-06     浏览:147    评论:0    
核心提示:1:交换两个变量的值 let a = 12; let b = 32; [a,b] = [b,a]; console.log(a,b)在ES6之前我们交换两个变量的值的时候往往需要声明一个中间变量,在ES6中可以通过解构赋值来实现,这种写法:简洁、易读、语义清晰2:函数返回多个值返回一个数组:function exampleArr() { return [1,2,3];}var [a,b,c] = exampleArr();console.log([a,b,c]);返回一个

1:交换两个变量的值

 let a = 12;
 let b = 32;
 [a,b] = [b,a];
 console.log(a,b)

在ES6之前我们交换两个变量的值的时候往往需要声明一个中间变量,在ES6中可以通过解构赋值来实现,这种写法:简洁、易读、语义清晰

2:函数返回多个值

返回一个数组:

function exampleArr() { 
    return [1,2,3];
}
var [a,b,c] = exampleArr();
console.log([a,b,c]);

返回一个对象:

function exampleObj() { 
    return { 
        foo : 1,
        bar : 2,
        baz : 3
    }
}
var { foo ,bar ,baz} = exampleObj();
console.log(foo,bar,baz);

本质上,函数只能返回一个值,但是可以把其放在数组或者对象中,来返回多个值

3:函数参数的定义:

有序的参数:

function f([x,y,z]){ 
    console.log([x,y,z])
}
f([1,2,3]);

无序的参数:

function f({ x,y,z}){ 
    console.log({ x,z,y})
}
f({ z:3,x:22,y:31});

原理在于解构赋值可以将一组参数与变量名对应起来

4:提取JSON数据

 var jsonData = { 
     id:404,
     name:"tianqin",
     data : [13134,15331],
     status :'OK'
 }
 let { id, status, data:number, name} = jsonData
console.log(id,status,number,name);

5:指定函数参数的默认值

function foo({ x, y = 5}) { 
    console.log(x, y);
  }
  
  foo({ }) // undefined 5
  foo({ x: 1}) // 1 5
  foo({ x: 1, y: 2}) // 1 2
  foo() // TypeError: Cannot read property 'x' of undefined

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

获取键名和键值非常方便

7:输入模块的指定方法

const { first,second} = require('xxx');

加载模块时,需要指定输入那些方法,解构赋值可以使得输入语句非常清晰

参考文献:

[1] 阮一峰 .《ES6标准入门(第2版)》[M].北京.电子工业出版社.2015:26-28

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服