解构赋值常见的应用场景

239 阅读2分钟

1、交换变量的值

let a = 1;

let b = 2;

[a,b] = [b,a];//提示:a,b已经声明了,这里就不用再添加let等关键字声明了。

console.log(a,b);

交换后 × 的值为 2,y 的值为 1,这样的写法不仅简洁,而且易读,语义非常清晰,参考结果如下:

1.png

2、从函数返回多个值

  函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回,可以使用解构赋值,非常方便的取出这些值。

  1)返回一个数组

function f() {

      return [1, 2, 3];

    }

let [a, b, c] = f();

console.log(a, b, c) // 1 2 3

函数返回结果一个数组,对该数组进行解构,获取里面的每个值,参考结果如下:

2.png

2)返回一个对象

 function f() {

    return {

      foo1,

      bar2

    };

  }

let { foo,bar} = f();

console.log(foo, bar) // 1 2

函数返回结果一个对象,对该对象进行解构,获取里面的每个值,参考结果如下:

3.png

3、从函数返回多个值

可以方便地将一组参数与变量名对应起来

1)参数是一组有次序的值

function f([x, y, z]) {

    console.log(x, y, z)

}

f([1, 2, 3])  //1,2,3

传入函数的参数是数组时,可以对参数进行解构,获取数组中每一项的值,参考结果如下:

4.png

2)参数是一组无次序的值

function f({x,y,z}) {

    console.log(x, y, z)

  }

f({z1,x2,y3}) //2,3,1

传入函数的参数是对象时,可以对参数进行解构,获取对象中对应的属性值,参考结果如下:

5.png

4、指定函数参数的默认值

指定参数的默认值,就避免了在函数体内部再去判断传入的参数是否有值了

function f({ x, y = 8 }) {

    console.log(x, y);

  }
f({}) // undefined 8

f({ x1 }) // 1 8

f({ x1, y2 }) // 1 2

6.png

5、遍历Map解构

解构赋值,获取键名和键值就非常方便

var map = new Map();

map.set('李红', '10');

map.set('张三', '30');

for (let [key, value] of map) {

   console.log(`${key}今年${value}岁`);

}

7.png

6、加载模块

这里也是用到了解构,可以让你引入的部分更加明确

import {a,b} from 'xxx';

7、提取JSON数据

解构赋值可以快速提取JSON数据的值

var messageData = {

    "name""小金",

    "age""12",

    "data": [one, two, three, four],

    "status""OK"

}

let {

    name,

    age,

    data,

    status

} = messageData;

console.log(name, age, data, status);

今日寄语: 不要为了别人而改变自己。做你自己,那个对的人会喜欢那个真正的你。