解构赋值

解构赋值

说到解构赋值，首先要说到函数的封装。

1
2
3
4
5
6
7

function age(age) {
    console.log(我的年龄是`${age}`岁);
}

age(11); // 我的年龄是11岁

如上，我们封装了一个简单的函数，只要我们我们在调用的时候，输入年龄age的参数，就可以得到预定的结果。但是，实际情况中，往往我们的函数场景不会如此的简单，比如下面，我们会有多个参数。

1
2
3
4
5

function open(age,name) {
    console.log(`我的年龄${age}岁`,`我的名字叫${age}`)
}

函数只有一个参数的时候，我们就不需要考虑太多，但当有多个参数，就比较难以准确定位到形参的对应关系。Es6 新增了一个解构赋值的写法，可以很方便的帮助我们解决这个问题.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

 function pathwayLenth({ctx,x1,y1,width,height}) {
        //投标
        ctx.fillStyle = 'rgb(255,255,255)';
        ctx.fillRect(x1,y1,width,height);
        ctx.fill();
      },

pathwayLenth({
    ctx:ctx,
    x1:0,
    y1:100,
    width:300,
    height:500
});

// 这样不仅层次更清晰，顺序也可以不必那么严格，而且有再多的参数也不怕了.

解构数组

解构赋值还可以解构数组。

1
2
3
4
5
6
let arr,one,two,three;
  arr = ['one','two','three'];
  [one,two,three] = arr;
     console.log(one,two,three);  // 'one','two','three'

March 1, 2019

Javascript