欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6学习(三):数组的扩展

程序员文章站 2022-04-14 18:56:26
chapter08 数组的扩展 8.1 扩展运算符 8.1.1 扩展运算符的含义 如同rest运算符的逆运算,将一个数组转换为用逗号分隔的参数序列。 8.1.2 代替数组的apply方法 apply方法可以将数组转为函数的参数 8.1.3 扩展运算符的应用 合并数组 与解构赋值相结合 注意:如果扩展 ......

chapter08 数组的扩展

8.1 扩展运算符

8.1.1 扩展运算符的含义

...

如同rest运算符的逆运算,将一个数组转换为用逗号分隔的参数序列。

    console.log(...[1, 2, 3])  // 1, 2, 3
    // 用于函数调用
    function add (x, y) {
        return x + y;
    }
    
    add(...[1, 2]); // 3

8.1.2 代替数组的apply方法

apply方法可以将数组转为函数的参数

    // es5的写法
    function f (x, y ,z) {
        // todo
    }
    let args = [1, 2, 3];
    f.apply(null, args);
    // es6的写法
    function f (x, y ,z) {
        // todo
    }
    let args = [1, 2, 3];
    f(...args);

8.1.3 扩展运算符的应用

  • 合并数组

    // es5
    [1, 2].concat(more);
    // es6
    [1, 2, ...more]
  • 与解构赋值相结合

    // es5
    a = list[0]
    rest = list.slice(1);
    // es6
    [a, ...rest] = list;
    
    const [first, ...rest] = [1, 2, 3, 4, 5];
    first // 1
    rest  // [2, 3, 4 ,5]

    注意:如果扩展运算符用于解构赋值,只能将其放置在参数的最后一位

  • 处理函数的返回值

    函数返回了一个可枚举的数据类型,则可以对其使用扩展运算符处理。

  • 字符串

    [...'hello'] // ['h', 'e', 'l', 'l', 'o']

    这种写法的好处是可以正确识别32位的unicode
    javascript function length (str) { return ...str.length; }
    以上函数可以正确返回字符串的长度

  • iterator接口

    扩展运算符可以作用在任何实现了iterator接口的数据类型上(map, set, generator等)。

8.2 array.from()

array.from()用于将两类对象转换为真正的数组:类似数组的对象和可遍历的对象(包括es6新增的set和map)。

    let arraylike = {
        '0': 'a',
        '1': 'b',
        '2': 'c',
        length: 3
    };

    // es5的写法
    let arr1 = [].slice.call(arraylike); // ['a', 'b', 'c']

    // es6的写法
    let arr2 = array.from(arraylike);

常见的类数组对象:dom操作返回的nodelist对象和arguments对象。

所谓类数组,本质特征只有一点:必须具有length属性。任何有有length属性的对象,都可以通过array.from方法转为数组。

...扩展运算符也可以将某些数据结构转换成数组,但是其原理是通过iterator接口转换。

    array.from({ length: 2});
    // [undefined, undefined]

array.from()还可以接受第二个参数,作用类似于数组的map方法,用于对每一个数组元素进行处理,并且将处理后的值放入返回的数组。

如果map函数里面用到了this,还可以指定第三个参数用来绑定this。

    array.from({ length: 2 }, () => 'jack');
    // ['jack', 'jack']

    function countsymbol (string) {
        return array.from(string).length;
    }

8.3 array.of()

将一组值转换为一个数组,主要是用来解决array构造函数的怪异。

8.4 数组实例.copywithin()

在数组内部进行复制,参数(target, start, end)

  • target (可选)开始进行复制的下标
  • start (可选)开始被复制的下标
  • end (可选)要被复制的范围,不包括

8.5 array.find() & array.findindex()

作用就和名称一致。
参数:

  • fn (value, index, arr) {}

    筛选函数,最多接受三个参数

  • this

    筛选函数的this对象

8.6 array.fill()

填充数组

扩展版本:array.fill(str2fill, start, end)

指定填充的区间 [ start, end )

8.7 数组实例的enties() keys() values()

分别返回三种迭代器,可以使用 for/of 或者 next() 方法进行迭代。

8.8 数组实例的includes() 方法

见名知义
includes()和find()方法可以找到nan

8.9 数组的空位

es6将空位视为undefined

空位处理的规则并不统一,所以建议尽量不要出现空位。