【Javscript】解构赋值

解构赋值

数组解构赋值

    //通过数组对变量进行赋值
    let [a,b,c] = [1,2,3]
    console.log(a)
    console.log(b)
    console.log(c)

模式匹配

等号两边的模式完全相同，左边的变量就会被赋予对应的值

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

不完全解构

    let [x,y] = [1,2,3,4]
    console.log(x) //1
    console.log(y) //2
	let[,,z] =[1,2,3]
	console.log(z) //3

指定默认值

	let [f = true] = []
    console.log(f) //true
    let [a,b="y"] = ["a"]
    console.log(b) //y
    
    let [x = 1] = [null]
    let [y=1] =[null]
    let [z=2] = [undefined]
    console.log(x) // null
    console.log(y) // null
    console.log(z)  // 2

注：ES6内部使用===判断是否是undefined，如果是undefined，默认值才会生效

惰性求值

    function f(){
        return 'fff'
    }
    // let [x = f()] =[1]
    let [x = f()] =[]
    console.log(x) //fff

默认值可以引用其他声明过的变量

    let[x=1, y=x] =[]
    console.log(x) //1
    console.log(y) //1

    let[c=d, d=1] =[]  //Cannot access 'd' before initialization

多维数组解构

    const items = [
        ['name', '张飞'],
        ['title', '长坂坡一声吼']
    ]

    items.forEach(([key, value]) => (console.log(key, value)))

对象解构赋值

与数组不同，它与顺序无关；解构不成功会返回undefined；它真正被赋值的是后者，会先找到同名属性，赋值给后者变量。

    let person = {
        name :'tom',
        age: 6
    }

    let {age,name} = person
    console.log(age) //6
    console.log(name) //tom

    let {sex} = person
    console.log(sex)

    let {name:name1} = person
    console.log(name1) //tom

可以取到继承的属性

	const obj1 = {};
    const obj2 = {name:'tom'}
    Object.setPrototypeOf(obj1, obj2)  // =>  obj1.__proto__ = obj2
    const {name} = obj1
    console.log(name)  //tom

指定默认值

默认值的生效条件 对象属性的值 严格 === undefined

    const {x=1} = {x:undefined}
    const {y=3} ={y:null}

    console.log(x) //1
    console.log(y) // null