es6变量解构赋值的用途

Posted 2020-10-01

这里是我觉得es6解构赋值,在平时我们写js的时候非常有用,而且经常用到的地方,能简化我们的代码,让写代码简介优雅易读;

用途

1.交换变量的值,太方便了这逼,写法不仅简介而且一看就明白

let [x,y]=[1,2];
[x,y]=[y,x];
console.log(x);//输出2
console.log(y);//输出1

2.从函数返回多个值

函数只能返回一个值,如果要返回多个值,只能将它们放在数组或者对象里面返回.有了解构赋值,取出这些值那是非常的方便,最关键是易读

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

function obj2(){
    return {
        name:"张三",
        age:18
    }
}
let {name,age}=obj2();
console.log(name);//张三
console.log(age);//18

3.函数参数的定义

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

//参数是一组有次序的值
function f([x,y,z]){...}
f([1,2,3]);

//参数可以无次序传参
function f({x,y,z}){...}
f({y:2,x:1,z:3})

4.提取json对象数据

解构赋值对提取json对象中的数据,尤其有用

let jsonData={
    id:42,
    name:"张三",
    score:[99,100,99]
}

let {id,name,score}=jsonData;
console.log(id,name,score);//42 ‘张三‘ [99,100,99]