ES6 解构

最新推荐文章于 2024-09-14 15:05:11 发布

原创最新推荐文章于 2024-09-14 15:05:11 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了ES6中新增的解构赋值特性，包括数组和对象的解构方式，展示了如何简化变量赋值过程，并探讨了解构赋值在函数参数中的应用。

ES6引入了一个新的语法特性，名为解构，把这个功能看作是一个结构话赋值方法，可能会容易理解一些

以下代码就展示了手动的解构赋值

数组的解构

function foo() {
    return [1,2,3];
}

var tmp = foo(),
    a = tmp[0], b = tmp[1], c = tmp[2];

console.lof( a, b, c ); //  1,2,3

对象的解构

function bar() {
    return {
        x: 4,
        y: 5,
        z: 6
    };
}

var tmp = bar(), x = tmp.x, y = tmp.y, z = tmp.z;

console.log( x, y, z);

ES6为结构新增了一个专门的语法，专用与数组结构和对象解构。

var [ a, b, c ] = foo();

对象的解构赋值是 target: source 模式

var { x: x, y: y, z: z} = bar();

如果target 和 source 名字可以直接省略前的 target：只写 source就行

解构甚至可以直接算出表达式的值

var which = "x",
    o = {};

({ [which]: o[which] } = bar() );

console.log( o.x );  //4

重复赋值

var { a: X, a: Y } = { a: 1 };

X;  //1
y;  //1

var { a: { x: X, x: Y }, a } = { a: { x: 1} };

X;   //1
Y;   //1
a;    // { x: 1 }

( { a: X, a: Y, a: [Z] } = { a: [ 1 ] } );
x.push( 2 );
Y[0] = 10;

X; //[10,2]   
Y; //[10,2]
Z; // 1

上面的例子其实我觉得有些疑惑，最开始X[0] = 1, Y[0] = 1, X.push(2)之后Y也会Y.push(2),Y[0] = 10的时候，x[0] = 10;

那么说明 X，Y实际上应该是引用的形式，两个都会改变原来的值，并与赋值对象保证一致性

解构赋值表达式组成链

var  o = { a:1, b:2, c:3}, p ={4,5,6},a,b,c,x,y,z;

( {a} = {b,c} = o );
[x,y] = [z] = p;

console.log( a, b, c);  //1,2,3
console.log( x, y, z);     // 4 5 4

解构参数

1.解构默认值 + 参数默认值

function f6( { x = 10 } = {}, { y } = { y: 10} ) {
    console.log( x, y );
}

f6();      // 10 10
f6( undefined, undefined );   // 10 10
f6( {}, undefined );    // 10 10

f6( {}, {} );     //10,undefined
f6( undefined, {} ); // 10, undefined
f6( { x: 2}, { y: 3 } );  // 2,3