es6中的解构赋值

在解构中，有下面两部分参与：

解构源，解构赋值表达式的右边部分。

解构目标，解构赋值表达式的左边部分。

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

1、对象的解构赋值

function fn(){
    let obj={id:1,name:"李白"};
    let id=obj.id;
    let name=obj.name;
    console,log(id,name);//1,李白
}

function fm(){
    let obj={id:1,name:"李白"};
    let {id,name}=obj;
    console,log(id,name);//1,李白
}
fn();
fm();

function fn1({id,name}){
    
    console,log(id,name);//1,李白
}
fn1({id:100,name:"杜甫"})

对象解构要注意：

let x;
{x} = {x:6}//报错，因为{}在js中会认为是一个块级作用域。

//解决方案
let x;
({x} = {x:6})//告诉浏览器这里不是一个块级作用域

2、数组的解构赋值

function fn1() {
Let arr = [100， 200， 300] ;
Let a = arr[0];//100
Let b = arr[1];//200
Let C = arr[2];//300

console.1og(a, b，C);
}


function fn2() {
Let list = [100， 200，300] ;
Let[a, b,c]= list;

console.log(a, b，C);

fn1();
fn2();

function fm1() {
Let list = [100， 200，300] ;
Let [a, b，c] = list;

console.1og(a，b，c);
}
fm1();

function fm2(list) {
Let [a，b，c] = list;

console.1og(a, b, c);
}
fm2([100, 200, 300])

3、字符串的解构

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'world';
a // "w"
b // "o"
c // "r"
d // "l"
e // "d"

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

let {length : len} = 'hello';
len // 5