ES6 解构赋值

376 阅读3分钟

什么是解构赋值?

解构赋值主要分为对象的解构和数组的解构,在没有解构赋值的时候,我们赋值是这样的

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

这样的话,我们会发现这个结构很散, 当然我们也可以这样:

    let arr = [1,2,3];
    console.log(arr[0],arr[1],aarr[2]);//1,2,3

但是,解构赋值可以更方便快捷的让我们提取到对象或者数组里面的属性或值;

数组结构赋值

    //普通
    let arr = [1,2,3];
    console.log(arr[0],arr[1],aarr[2]);//1,2,3
    //解构赋值
    let [a,b,c] = [1,2,3];
    console.log(a,b,c);//1,2,3
    //这就是解构赋值
    

解释:在解构赋值时,右边的为值,左边为解析数据,我们可以这样理解,我把你右边的值分别取了一个别名然后我可以通过别名来获取到你的值,但是要注意左右两边的结构和格式要保持一致;

二维数组或多维解构

    [1,[2,3],4];

如果我们遇得到这样或者类似的情况的时候,可以这样,我们上面说过,左右两边的结构格式要保持一致所以,可以这样写

    let [a,[b,c],d] = [1,[2,3],4];
    console.log(a,[b,c],d)//1,(2)[2,3],4

在后台给我们数据的时候很大可能会出现,一个JSON中包一个数组数组里包一个JSON等等等...很多情况,我们只需要将他的数据什么结构你的数据什么结构的解析出来就可以了;

对象解构

    //我们可以这样取值
    let Obj = {
        name:'Kirito',
        age:18,
        job:'小白中的小白'
    }
    console.log(Obj.name,Obj.age,Obj.job)
    // Kirito 18 小白中的小白
    
    现在对上面的Obj进行解构,就像数组一样
    let {name,age,job} = Obj;
    //Kirito 18 小白中的小白

有一点要注意的是,我不知道是不是,可能是不支持这样写,就是我在解构对象的时候左边不能大写,也就是说,要和右边大小写一致,这是我刚测试的结果,反正就是注意一下就好。

变量名或属性名

有一种情况是,在你使用后台数据的时候,可能你不太喜欢他定义的属性名,或者变量名之类的吧; 这个时候我们可以自己自定义一个;

    let Obj = {
		name: 'Kirito',
		age: 18,
		job: '小白中的小白'
	}
	let {name,age,job:a} = Obj;

这时候在当你在使用这个job的时候就要使用你定义的a来使用这个对象的属性,反之报错;

默认值

有时候后台可能会给我们传一个undefined.这时候我们想要c是一个默认值,也就是说当这个值是undefined或者没有的时候c默认是什么;

    let [a,b,c] = [1,2]
    console.log(a,b,c)//1 2 undefined
    
    let [a,b,c=3] = [1,2]
    console.log(a,b,c)//1 2 3
    

但是 有一点要注意的是,当这值为nudefined和null/''的时候是有差别的;

    //为undefined
    [a,b,c='暂无...'] = [1,2,undefined]
    console.log(a,b,c)//1 2 暂无...
    //为null
    const [a,b,c='暂无...'] = [1,2,null]
    console.log(a,b,c)//1 2 null

当为null的时候回把它解析成有值,就已经代表它有值了但是,是一个空; 这时候可以用判断来进行区分赋值;

    let [a,b,c] = [1,2,null]
    console.log(a,b,c == null?'c对应值为null':3);

函数传参

    function show({a,b}){
        console.log(a,b)//1 2
    }
    show({
        a:1,
        b:2
        })
        

默认值

function show({a,b="默认"}){
    console.log(a,b)
}
show({a:1})

就不一一举例了,

本文章仅以自己防止忘记而记录,不管是我还是其他人,当你看到这篇文章的时候说明你还在从事前端工作,或者在学习前端,所以不管以后遇到什么问题,和挫折,都不要忘记你敲代码的初衷