逍遥阁

JavaScript展开语法和剩余参数

关键词: javascript

JavaScript展开语法和剩余参数

###展开语法

展开语法只能用在可以迭代的对象上，比如数组，语法如下:

```
...变量
```

在没有展开语法的时候一般的写法如下:

```
function test(x, y, z){
    /*code*/
}
var data = [1, 2, 3];
test.apply(null, data);
```

如果用展开语法就会变成:

```
function test(x, y, z){
    /*code*/
}
var data = [1, 2, 3];
test(...data);
```

展开语法就是将变量迭代出每一个元素后用逗号`,`展开

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

一些常见的写法

```
函数名(...变量);
函数名(1, ...变量, 2, ...[3]);
[...变量, 4, 5, 6];
var data = ['a', ...变量, 'b', 'c'];
var data = [...变量];
var data = [...变量1, ...变量2];
```

需要注意的是展开语法`...变量`和剩余参数语法`...变量`有点类似，区分的方法如下:

1.在调用函数时是展开语法，上面有例子

2.在定义函数时是剩余参数语法

```
function test(...变量){
    /**/
}
```

3.在定义变量时是剩余参数语法

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

###剩余参数

剩余参数的语法是`...变量`，和展开语法有点类似，就是把逗号`,`分隔开的剩余的元素组成一个数组赋值给剩余变量，是展开语法的反操作

```
function test(a, ...other){
    console.log(a);
    /*
    1
    */
    console.log(other);
    /*
    [2, 3, 4, 5]
    */
    console.log(other.length);
    /*
    4
    */
    console.log(typeof(other));
    /*
    object
    */
}
test(1,2,3,4,5);
```

剩余参数必须是函数的最后一个参数

剩余参数就是一个数组，如果参数不够，剩余参数就是一个空数组

下面是自己实现剩余参数的例子，可见比较复杂

```
function test(a, b){
    var other = Array.prototype.slice.call(arguments, test.length);
}

/*等同于*/

function test(a, b, ...other){
    /*code*/
}
```

剩余参数可以被解构

```
function test(...[a, b, c]){
    return a + b + c;
}
test(1);/*NaN*/
test(1, 2, 3);/*6*/
test(1, 2, 3, 4);/*6*/
```

解构时也可以用剩余参数

```
let [a, ...b] = [1, 2, 3, 4];
```

admin
2017-02-21 22:29:22
javascript

文章分类

文章标签

文章归档

友情链接

JavaScript展开语法和剩余参数