解构赋值

一、使用解构赋值

function fn(){
  let a = 1
  let b =  2
  return {
    a,b
  }
}

//没有解构赋值
let obj = fn()
console.log(obj.a)
console.log(obj.b)

//使用了解构赋值
let {a,b} = fn()
console.log(a)
console.log(b)

//等同于下面的代码，在es6里面，对象的key和value相同时，可以省略后面的冒号和value
let {a:a,b:b} = fn()
console.log(a)
console.log(b)

//结构赋值命名
let {a:x,b:y} = fn()
console.log(x)
console.log(y)

[!cogs]

%accordion% es5与es6写法 %accordion%

//es5
var obj = {
    name: "张三",
    age: 18
}
console.log(obj.name); //张三
console.log(obj.age); //18

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

%/accordion%

二、数组解构赋值

//数组解构
let [a,b,c] = [1,2,3,4,5]
console.log(a)
console.log(b)
console.log(c)

//默认值
let [a=1,b,c] = ["x",2,3,4,5]
console.log(a)
console.log(b)
console.log(c)

//克隆
let a = [1,2,3,4,5]
// let b = Object.assign([],a) 浅克隆
// let b = JSON.parse(JSON.stringify(a)) 深克隆
let b = [...a]//es6
b.push(6)
console.log(a)//[1,2,3,4,5]
console.log(b)//[1,2,3,4,5,6]

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

[!cogs]

%accordion% 数组解构赋值 %accordion%

let [a, b, c] = ["张三", "李四", "老王"]
console.log(a); //张三
console.log(b); //李四
console.log(c); //老王

%/accordion%

%accordion% 默认 %accordion%

let [a, b, c = "张三"] = ["李四", "老王", "赵四"]
console.log(a); //李四
console.log(b); //老王
console.log(c); //赵四

%/accordion%

%accordion% 浅克隆 %accordion%

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

let a = [1, 2, 3]
let b = [...a]
b[0] = 'x'
console.log(b);//["x", 2, 3]

let a = [
    {
        name: "张三",
        obj: {
            name: "李四"
        }
    }
]
let b = [...a]
b[0].obj.name = "老王"
console.log(a);//{name: "张三", obj: {…}}
console.log(b);//{name: "张三", obj: {…}}


let a = [1, 2, 3]
let b = a
b[0] = "x"
console.log(a);//["x", 2, 3]
console.log(b);//["x", 2, 3]


let a = [1, 2, 3]
let b = [...a]
b[0] = "x"
console.log(a); //[1, 2, 3]
console.log(b); //["x", 2, 3]

%/accordion%

三、对象解构

//对象解构
let {name,age} = {name:"swr",age:28}
console.log(name) // 'swr'
console.log(age) // 28

//对象解构-命名
let { name:Name,age } = { name:'swr',age:28 }
console.log(Name) // 'swr'
console.log(age) // 28

//默认值
let {name="swr",age} = {age:28}
console.log(name) // 'swr'
console.log(age) // 28

//解构函数参数
function fn({name,age}){
  console.log(name)
  console.log(age)
}
fn({name:"小明",age:18})

//数组对象解构
let [,{name}] = [{name:'小明',age:18},{name:'小红',age:19}]
console.log(name)//小红

[!cogs]

%accordion% 对象解构%accordion%

//对象解构-命名
let {
    name: a
} = {
    name: "张三"
}
console.log(a); //张三

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

%/accordion%

%accordion% 解构函数参数 %accordion%

function fn({
    name,
    age
}) {
    console.log(name); //张三
    console.log(age); //18
}
fn({
    name: "张三",
    age: 18
})

%/accordion%

%accordion% 解构函数参数 %accordion%

//打印第一个
let [{ name, age }] = [{ name: '张三', age: 18 }, { name: '李四', age: 19 }]
console.log(name)//张三
console.log(age)//18


//打印第二个
let [, {
    name,
    age
}] = [{
    name: '张三',
    age: 18
}, {
    name: '李四',
    age: 19
}]
console.log(name) //李四
console.log(age) //19


//打印二个
let [{
    name: aName,
    age: aAge
}, {
    name: bName,
    age: bAge
}] = [{
    name: '张三',
    age: 18
}, {
    name: '李四',
    age: 19
}]
console.log(aName) //张三
console.log(aAge) //18
console.log(bName) //李四
console.log(bAge) //19

%/accordion%