自我学习之es6(4)

╰半橙微兮° 2022-06-01 11:58 125阅读 0赞

来看下es6的新特性变量的解构赋值是如何来方便打印出变量的

先举个例子，看下之前es5是怎么做的，先申明一个对象

let obj={
    	firstName:'Mike',
    	lastName:'Hurley'
    }
    
    let f=obj.firstName,
        l=obj.lastName;
    
    console.log(`${f} ${l}`);

我们用f和l两个变量去接收obj对象的两个属性，这个是es5的写法，es6的写法当使用解构赋值后，申明的后面不再直接接上两个变量名字，而是一个花括号，解构这个对象的时候就是使用花括号

let obj={
    	firstName:'Mike',
    	lastName:'Hurley'
    }
    let{firstName:f,lastName:l}=obj;
    
    console.log(`${f} ${l}`);

在花括号里写上firstName，就能自动找到firstName对应的属性值并把它赋给f，lastName也是同理

如果出现另外一种情况，不想把firstName和lastName赋给另一个新的变量，只想firstName就是firstName，lastName就是lastName，那么如果按照之前的做法是

let obj={
    	firstName:'Mike',
    	lastName:'Hurley'
    }
    
    
    let firstName=obj.firstName,
        lastName=obj.lastName;
    console.log(`${firstName} ${lastName}`);

但是如果用解构赋值的话，这个做法会更加简单

let obj={
    	firstName:'Mike',
    	lastName:'Hurley'
    }
    let{firstName,lastName}=obj;
    console.log(`${firstName} ${lastName}`);

用解构赋值，在花括号里直接写firstName和lastName就可以把obj的firstName和lastName取出来，而变量名就是firstName和lastName

关于变量解构赋值的另一方面就是嵌套式的结构，如果obj这个对象里又嵌套了一个对象hj，我们想从hj里取出a和b，嵌套的时候怎么取出变量的值呢，首先我们先取出hj，hj这个变量的值就是这个对象

let obj={
    	firstName:'Mike',
    	lastName:'Hurley',
    	hj:{
    		a:1,
    		b:2
    	}
    };
    
    let{hj}=obj;
    console.log(hj);

如果我们想直接取出a和b

let obj={
    	firstName:'Mike',
    	lastName:'Hurley',
    	hj:{
    		a:1,
    		b:2
    	}
    };
    
    let{hj: {a,b} }=obj;
    console.log(hj);
    console.log(a,b);

这时我们的作用域里就出现了a和b，但这时会发现报错了，说hj找不到了，这里的let\{hj:\{a,b\}\}里的hj是匹配模式，它匹配到一个属性后就得到一个值然后赋给一个变量的时候直接解构这个变量得到a和b，但这个时候作用域里就没有hj了，如果还想要hj的话，可以这样写

let obj={
    	firstName:'Mike',
    	lastName:'Hurley',
    	hj:{
    		a:1,
    		b:2
    	}
    };
    
    let{hj: {a,b},hj:hj }=obj;
    
    console.log(a,b,hj);

也可以这么写

let obj={
    	firstName:'Mike',
    	lastName:'Hurley',
    	hj:{
    		a:1,
    		b:2
    	}
    };
    
    let{hj: {a,b},hj}=obj;
    
    console.log(a,b,hj);

这里的变量名就是hj，解构赋值还可以用在其他方面，比如

function logNames(obj){
    	console.log(`${obj.firstName} ${obj.lastName}`);
    }
    
    logNames({firstName:'a',lastName:'b'})

这里建立了一个logNames的函数，参数是obj这个对象，而这个对象可以直接解构出来

function logNames({firstName,lastName}){
    	console.log(`${firstName} ${lastName}`);
    }
    
    logNames({firstName:'a',lastName:'b'})

在函数的参数里面可以直接解构，当然后面还可以继续传变量

function logNames({firstName,lastName},n){
    	console.log(`${firstName} ${lastName} ${n}`);
    }
    
    logNames({firstName:'ahjk',lastName:'b'},889)