ES6----变量的解构赋值(Destructruing)

ES6—-变量的解构赋值


1 什么叫解构赋值?
2.数组的解构赋值。
3.对象的解构赋值
4.字符串的解构赋值
5.数值和布尔值的解构赋值
6.函数参数的解构赋值

7.用途

1.什么叫解构赋值

ES6允许按照一定的模式,从数组和对象中取值,对变量进行赋值,这被称为解构(Destructuring) . –阮一峰
在ES5中,为变量赋值,只能采用直接指定值的方式。例如

    var a = 1;
    var b = 2;
    var c = 3;

在ES6中允许这样写

 let [a,b,c] = [1,2,3];

这样写的意思是,可以从数组中提取值,按照相应的位置,对变量赋值
模式匹配是这种写法的本质:只要等号两边的模式相同,两边对应的值也就相同。

    let [a,[[b],c]] = [1,[[2],3]];

只要两边的模式相同,对应位置的值也是对应变量的值。

    let [head, ...tail] = [1, 2, 3, 4]; 
    head // 1 
    tail // [2, 3, 4]

2.对象的解构赋值

对象的解构和数组的解构不同之处: **数组是按照相对应的次序来排列取值的;数组的取值由它的位置决定;
对象的属性没有次序,变量必须与属性同名,才能取到正确的值**。

    let {b,a} = {
        a : '111',
        b : '222'
    }
    a // 111   b // 222

变量名要和属性名一致
如果变量名和属性名没有一致,就必须写成下面这样子:

    let {a:foo,b:bar} = {
        a : '111'
        b : '222'
    }
    foo // 111  bar // 222
    let obj = { first: 'hello', last: 'world' }; 
    let { first: f, last: l } = obj; 
    f // 'hello' l // 'world'

这说明了对象的解构赋值是一下形式的缩写:

 let  { a: foo} = { a : '111'}

3.字符串的解构赋值

    const [a,b,c,d,e] = 'hello';
    a//h
    b//e
    c//l
    d//l
    e//o

4.数值和布尔值的解构赋值

不懂

5.函数参数的解构赋值

function add([x,y]){
    return x + y;
}
add([1,2]);//3

6.用途

(1)交换变量的值

    let x = 1;
    let y = 2;
    [x,y] = [y,x];

(2) 函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。

    function demo(){
        return [1,2,3];
    }  
    //返回三个,就用三个值接收 
    let [a,b,c] = demo();
    function demo2(){
        return {
            foo:1,
            bar:3
        }
    }
    //返回一个对象,用一个对象来接收
    let {a,b} = demo2();

(3)提取JSON数据
解构对json对象中 的数据,特别有用。

//解构赋值对JSON对象,提取数据特别有用。
    let jsonData = {
        id:42,
        status:'ok',
        data:[874,234]
    }
    let {id,status,data:number} = jsonData;
    console.log(id,status,number);
    // 42,ok [874,234],
    //使用解构赋值可以快速的提取JSON数据的值

猜你喜欢

转载自blog.csdn.net/yufanhui/article/details/81949514