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

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

扫描二维码关注公众号，回复： 12934634 查看本文章