ECMAScript 6（13）函数的扩展（2）——...运算符

ゞ浴缸里的玫瑰 2022-06-15 00:54 151阅读 0赞

# 函数的扩展2 #

### 写在前面的话 ###

感觉之前的博客写的有点太细了，导致我学习进度过于缓慢。

因此，建议学习者以[阮一峰博客][Link 1]为主，以本博客为补充。

我这里主要写一些示例和补充，帮助理解的更为全面

## 0、一句话总结 ##

1.  rest参数前面可以有其他参数，后面不能有
2.  …运算符可以将数组、字符串等展开，对函数传参来说很方便

## 1、【见函数的扩展1】 ##

## 2、rest参数 ##

### 2.1、该风格表示什么 ###

如代码

function rest1(x, ...y) { 
        console.log(x, y);
    }
    function rest2(...y) { 
        console.log(y);
    }
    rest1(1, 2, 3); //1 [2, 3]
    rest2(1, 2, 3); //[1, 2, 3]

不允许的写法，rest风格的参数后面不允许还有参数。

function rest3(...y, z) { 
        console.log(y, z);
    }
    //Uncaught SyntaxError: Rest parameter must be last formal parameter

### 2.2、rest参数的类型 ###

和arguments不同。一个是\[object Arguments\]，另外一个是Array数组

function rest(...y) { 
        console.log(Object.prototype.toString.call(arguments)); //[object Arguments]
        console.log(Object.prototype.toString.call(y)); //[object Array]
    }

### 3、扩展运算符（三个点） ###

#### 3.1、是什么？ ####

> … 三个英文句号

效果是将数组转为非数组（数组的展开），但有很多需要注意的地方。

个人认为，虽然他可以将数组转为非数组，但仍然需要在外面套一个数组，或类似的东西，来接受转换后的数组的元素。

如代码：

...[1,2];    //Uncaught SyntaxError: Unexpected number
    console.log(...[1,2]);    //1 2
    console.log(1,2);    //1 2，结果和上面一样
    [1, ...[2, 3, 4], 5];   //[1,2,3,4,5]

#### 3.2、利用数组的合并 ####

可以方便的将一个数组合并到另外一个数组的指定位置：

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

#### 3.3、对arguments也有效 ####

由于console.log可以接受这种运算（见上面第二行代码），而她实际上一个函数，所以函数调用参数的时候也可以使用这个运算符。

function add(a, b) { 
        console.log(a + b);
        console.log(...arguments);
    }
    var data = [1, 2];
    add(...data);
    //3
    //1 2，对arguments也生效，虽然他实际上不是数组，但这点的表现是相同的

#### 3.4、可以方便的将全部参数传递给另外一个函数 ####

可以用来方便的将函数的参数，全部传递给函数内部的另外一个函数，使其调用

function minus(a, b) { 
        console.log(a - b);
    }
    function add(a, b) { 
        console.log(a + b);
        minus(...arguments);
    }
    var data = [1, 2];
    add(...data);
    //3
    //-1

#### 3.5、es5和es6的写法 ####

如代码：

function test() {
        console.log(this);
        console.log(arguments);
    }
    //es6写法
    test(...[1, 2]);    //Window和[1,2]
    //es5写法
    test.apply(null, [1, 2]);
    //Window和[1,2]，这里第一个参数指的是this指向目标，但null或者undefined时，this都是Window

#### 3.5、典型用法是调用函数时，将数组作为函数的参数 ####

比如要求数组第一个元素的第二个元素次方

var arr = [3, 2];
    Math.pow(...arr);    //9

#### 3.6、对字符串有效 ####

console.log(..."abc");    //a b c

也对不止一个字符的unicode字符有效；

附一个利用…运算符展开字符串，获取字符串不包括空白符，但正确计算了unicode字符的正确长度的函数：

凡是涉及到对unicode字符的处理，都可以考虑使用这个运算符，比用正则要简单一些。

#### 3.7、对类数组的对象都生效 ####

上面说了arguments，也可以是NodeList，或者HTMLCollection（即利用document.getElementsByTagName之类获取的dom），都可以通过它转为真正的数组。

但是注意，对Arraylike无效（还记得之前提的数组的扩展中，对Arraylike有效的情况么？这个可不同）

据说是对有Iterator接口的都有效，等我看了Iterator再说吧。