es6-解构

前言

最近在想,不知不觉23了,还是没有什么成就，就觉得自己压力好大，吃成了缓解压力的良药，最终导致自己又胖了不少，身边的人都开始结婚生孩子了，我还是孤单一人，身边的人开始买房了，我都还在租房子，挣得钱也只够自己花。过年其实想回去又不想回去，算了，敲代码吧。
博客地址 ：http://www.aymfx.cn/

引子

js最常用的数据结构是对象和数组字面量，es6提供了更方便的操作这种结构的方法，就是解构，解构是一种打破数据结构，将其拆分成更小的部分的过程，话不多说，开始吧。

对象解构

//es5,我们这么提取对象的属性数据

var person = {
    name:'ly',
    age:'18',
}

var name = person.name,age = person.age;

console.log(name); //ly
console.log(age);   //18


//数据一多就很烦了,es6可以这么用,直接赋值到左边的字面量对象里面

const person = {
    name:'ly',
    age:'18',
}

let {name,age} = person;

console.log(name); //ly
console.log(age);   //18

解构赋值,必须有括号包裹，否则会被识别成代码块，代码块不能存在在赋值的左侧，加括号可以转换成表达式

let  person = {
    name:'ly',
    age:'18',
},
name = 'zm',
age = '18';


({name,age} = person);

console.log(name); //ly
console.log(age);   //18

//左侧表达式的值与右侧表达式相等,
let  person = {
    name:'ly',
    age:'18',
},
name = 'zm',
age = '18';

function cp(obj){
    console.log(obj === person); //true
}


cp({name,age} = person);
console.log(name); //ly
console.log(age);   //18

//右侧不能是null 和undefined

let {a} = null; // Cannot destructure property `a` of 'undefined' or 'null'
let a = '12';
let {a} = undefined; //Cannot destructure property `a` of 'undefined' or 'null'.

默认值

当右侧值不存在时，左侧多余的值会转换成undefind

const person = {
    name:'ly',
    age:'18',
}

let {name,age,sex} = person;

console.log(name); //ly
console.log(age);   //18
console.log(sex);   //undefined

我们可以使用默认值来为不存在的属性附上初始值

const person = {
    name:'ly',
    age:'18',
}

let {name,age,sex='male'} = person;

console.log(name); //ly
console.log(age);   //18
console.log(sex);   //male

为非同名局部变量赋值

左边的名字不需要和右边一样，我们需要使用以下方式

const person = {
    name:'ly',
    age:'18',
}

let {name:fullName,age,sex='male',id:idCard=123455} = person;


console.log(fullName); //ly
console.log(name); //ly
console.log(age);   //18
console.log(sex);   //male
console.log(idCard);   //123455
console.log(id);   //id is not defined

高深点，嵌套的解构方式

const person = {
    name:'ly',
    age:'18',
    id:{
        carId:125,
        otherid:{
            bankId:1222
        }
    }
}

let {id:{otherid:jiansheBankId}} = person;

console.log(jiansheBankId.bankId); //1222

id:代表检索的位置,冒号右边如果是花括号代表是嵌套的更深一层的对象，最终值在所有括号都结束的一边,别疑惑，看下面的栗子

const person = {
    name:'ly',
    age:'18',
    id:{
        carId:125,
        otherid:{
            bankId:1222
        }
    }
}

let {id:{}} = person;

//这条语句是合法的，但是他什么都不会做，左边的id标识的他要找的位置，找完就停止了，因为没有绑定任何值，id在这只是检索的位置哈

数组解构

这个应该是蛮简单的哈，我们可以看看

let colors = ['red','blue','green','pink'];


let [firstColor,secondColor] = colors;

console.log(firstColor); //red
console.log(secondColor); //blue


//可以省略值，直接取第三个

let colors = ['red','blue','green','pink'];

let [,,thirdColor] = colors;

console.log(thirdColor); //green

数组解构赋值

let colors = ['red','blue','green','pink'],
    firstColor = 'white',
    secondColor = 'black';


[firstColor,secondColor] = colors;

console.log(firstColor); //red
console.log(secondColor); //blue

特殊用法

let a=1,b=2;

[b,a] = [a,b];


console.log(a); //2
console.log(b); //1

//如果右侧是null或者undefined会报错,但是说的不是这样

[a,b] = [null,undefined]

//是这样

[a] = null //null is not iterable

默认值，这个和对象解构一样

let colors = ['red','blue'],
[firstColor,secondColor,thirdColor='green'] = colors;

console.log(firstColor); //red
console.log(secondColor); //blue
console.log(thirdColor); //green

嵌套数组解构

let colors = ['red',['blue','lightgreen'],'blue'];

//我们来获取三个值

let [first,[,second],third] = colors;

console.log(first,second,third); //red lightgreen blue

不定元素

这种相当于之前的不定参数，我们看看怎么用就知道了

let colors = ['red','blue','green','pink'];

let [first,...smallColors] = colors;

console.log(first,smallColors[0],smallColors[1]); //red blue green

混合解构

let node = {
     type:'node',
     loc:{
         start:{
             el:'ly'
         }
     },
     arr:['color','pen']
},{loc:{start},arr:[wtf]}  = node;

console.log(start.el,wtf)  //ly color

解构参数

解构参数必须提供参数，否则会报错

function setCookie(name,age,{secure,path}){}

//上面的是必填的了，那是不对的,因为不填，会报错

setCookie('ly','18') //Cannot destructure property `secure` of 'undefined' or 'null'.

//我们可以这么解决，加默认参数

function setCookie(name,age,{secure,path}={}){}

//上面的不会报错了

//我们可以添加默认参数的默认值

var options = {
    secure:false,
    path:'example.com'
}

function setCookie(name,age,{secure=options.secure,path=optionsath}=options){}