前端系统课程 - 25. JavaScript 数组

标准库

  • 在 JavaScript 内部预先内置的属性和方法，也就是内置 API，称为标准库。

  • 在 3 个基本数据类型对应的全局方法前加 new 操作符和不加的区别是：加了会把参数里的数据转换成对象，不加的话只进行相应的转换；至于函数和数组，加不加无所谓。

数组

  • 数组和对象的区别，根本在于它们的公共属性不同，也就是 __proto__ 的原型链不同。

  • 用对象可以模拟数组存储数据的方式，但由于原型链中没有 Array.prototype 这一链，所以它没有数组的特性，那么这种貌似数组的“数组”就是“伪数组”；典型的伪数组是函数参数列表 arguments 对象以及 DOM API 返回的元素集合。

  • 使用 forEach() 方法可以遍历调用它的数组，它的参数必需接收一个函数（另一个参数是可选的），这个函数接收三个参数，第一个参数是必需的，代表数组的每一项数据，第二个是数据对应的下标，第三个是数据对应的数组。

  • forEach() 循环的数组，是调用它的数组，是用 this 操作符实现的；然后在内部循环这个数组，分别将其每项数据和下标返回以供使用。

  • 数组的排序方法 sort() 默认将数组内数据按字符编码顺序排序，这个排序会改变原数组；如果要按其他标准排序，可以传入一个比较函数；该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

    • 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。

    • 若 a 等于 b，则返回 0。

    • 若 a 大于 b，则返回一个大于 0 的值。

  • join() 方法可以使用指定字符串连接数组各项后，将数组转换为一个字符串后返回这个字符串，原数组不受影响。

  • concat() 方法可以将多个数组拼合成一个新数组后返回这个新数组，原数组不受影响；还可以利用它返回一个新数组的特性，来完全复制一个数组。

  • map() 方法和 forEach() 方法遍历数组的功能完全一样，但区别在于：

    • map() 可以将原数组的每个元素在调用函数处理后的值，返回为一个新数组；也可以利用这些返回值组成任意想要的值来返回；map() 不会检测空数组。

    • forEach() 本身没有返回值，但是它会忽略空数组。

  • filter() 方法可以按照指定的条件，过滤掉数组中不符合这个条件的数组元素，并将符合条件的元素作为一个新数组返回；它接收一个函数作为参数，这个函数接收三个参数，可以参考 forEach() 方法内的函数参数。

  • reduce() 方法的第一个参数是一个函数，此函数称为“累加器”，数组中的每个值从左到右开始缩减，最终计算称为一个值并返回；除了累加器，reduce() 的另一个参数是一个传递给参数的初始值，也就是说，以这个初始值为基数进行计算；累加器的参数有四个，第一个是必需值，表示初始值或者每次计算后的返回值，它会参与到下一次计算；第二个也是必须值，表示数组中的当前元素；剩下的两个一个是当前元素的索引，另一个则是当前元素所属的数组，这两个非必须值。例子：

    1
    2
    3
    4
    5
    var arr = [2, 4, 6, 8];
    var total = arr.reduce(function (previousValue, currentValue) {
        return previousValue + currentValue;
    }, 10);
    console.log(total); // 30

  • 使用 reduce() 方法可以模拟 map() 和 filter() 方法，示例代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    // map方法
    var mapArr = arr.map(function (value) {
        return value * 2;
    });
    console.log(mapArr.join()); // 2, 4, 6, 8, 10, 12, 14, 16, 18, 20

    // 模拟map方法
    var mapArrRe = arr.reduce(function (previousValue, currentValue) {
        previousValue.push(currentValue * 2);
        return previousValue;
    }, []);
    console.log(mapArrRe.join()); // 2, 4, 6, 8, 10, 12, 14, 16, 18, 20

    // filter方法
    var filterArr = arr.filter(function (value) {
        return value % 2 === 0;
    });
    console.log(filterArr.join()); // 2, 4, 6, 8, 10

    // 模拟filter方法
    var filterArrRe = arr.reduce(function (previousValue, currentValue) {
        if (currentValue % 2 === 0) {
            previousValue.push(currentValue);
        }
        return previousValue;
    }, []);
    console.log(filterArrRe.join()); // 2, 4, 6, 8, 10