JavaScript数组浅析

161 阅读9分钟

JavaScript数组是一种用于存储有序集合的全局对象。在Web开发中,数组用于存储用户列表、商品信息等数据集合。JavaScript中的数组是动态类型和大小的,这意味着它们可以随时存储任何类型的数据,并且可以动态增长和缩小。

创建和初始化数组

数组可以通过多种方式创建和初始化:

  1. 字面量语法:

    let fruits = ['apple', 'banana', 'cherry'];
    
  2. Array构造函数:

    let fruits = new Array('apple', 'banana', 'cherry');
    
  3. 静态方法:

    let fruits = Array.of('apple', 'banana', 'cherry');
    
  4. Array.from方法 (ES6):

    let fruits = Array.from(['apple', 'banana', 'cherry']);
    

核心方法和属性

属性

Array[@@species]

  • 描述: 返回Array构造函数。

  • 示例:

    class MyArray extends Array {
      // 自定义数组类
    }
    ​
    console.log(MyArray[Symbol.species] === MyArray); // true
    console.log(MyArray[Symbol.species] === Array); // false
    
  • 使用场景: 当你在继承Array并希望方法返回父Array对象而非子类对象时。

Array.prototype[@@unscopables]

  • 描述: 包含了那些不会被with环境绑定的属性名称。

  • 示例:

    console.log(Array.prototype[Symbol.unscopables]);
    
  • 使用场景: 了解哪些数组方法不能在with语句中被使用。

Array.length

  • 描述: 该属性的值是1,表示Array构造函数接受一个参数。

  • 示例:

    console.log([0].length); // 1
    
  • 使用场景: 在使用Function.length属性来获取期望参数个数的场景中。

方法

修改器方法

Array.prototype.copyWithin()

  • 描述: 在数组内部将一系列元素从一个位置复制到另一个位置。

  • 示例:

    console.log([1, 2, 3, 4, 5].copyWithin(0, 3)); // [4, 5, 3, 4, 5]
    
  • 使用场景: 当你需要在数组内部重排元素时。

Array.prototype.fill()

  • 描述: 用一个固定值填充数组中从起始索引到终止索引内的全部元素。

  • 示例:

    console.log([1, 2, 3].fill(4)); // [4, 4, 4]
    
  • 使用场景: 创建一个具有固定值的数组或替换数组中的某些元素。

Array.prototype.pop()

  • 描述: 移除数组的最后一个元素并返回该元素。

  • 示例:

    let myArray = [1, 2, 3];
    console.log(myArray.pop()); // 3
    console.log(myArray); // [1, 2]
    
  • 使用场景: 当你需要移除并获取数组的最后一个元素时。

Array.prototype.push()

  • 描述: 添加一个或多个元素到数组的末尾,并返回新数组的长度。

  • 示例:

    let myArray = [1, 2];
    console.log(myArray.push(3)); // 3
    console.log(myArray); // [1, 2, 3]
    
  • 使用场景: 当你需要向数组末尾添加元素时。

Array.prototype.reverse()

  • 描述: 颠倒数组中元素的排列顺序。

  • 示例:

    console.log([1, 2, 3].reverse()); // [3, 2, 1]
    
  • 使用场景: 当你需要反转数组元素的顺序时。

Array.prototype.shift()

  • 描述: 移除数组的第一个元素并返回该元素。

  • 示例:

    let myArray = [1, 2, 3];
    console.log(myArray.shift()); // 1
    console.log(myArray); // [2, 3]
    
  • 使用场景: 当你需要移除并获取数组的第一个元素时。

Array.prototype.sort()

  • 描述: 对数组元素进行就地排序,并返回数组。

  • 示例:

    console.log([3, 1, 2].sort()); // [1, 2, 3]
    
  • 使用场景: 当你需要对数组进行排序时。需要注意的是,默认排序是根据字符串Unicode码点进行的。

Array.prototype.splice()

  • 描述: 通过删除或替换现有元素或者原地添加新的元素来修改数组。

  • 示例:

    let myArray = [1, 2, 3];
    myArray.splice(1, 0, 'a');
    console.log(myArray); // [1, 'a', 2, 3]
    
  • 使用场景: 当你需要在数组中插入、删除或替换元素时。

Array.prototype.unshift()

  • 描述: 添加一个或多个元素到数组的开头,并返回新数组的长度。

  • 示例:

    let myArray = [2, 3];
    console.log(myArray.unshift(1)); // 3
    console.log(myArray); // [1, 2, 3]
    
  • 使用场景: 当你需要在数组开头添加元素时。

访问方法

Array.prototype.at()

  • 描述: 接受一个整数值并返回该索引处的元素,允许正数和负数作为索引。

  • 示例:

    console.log([1, 2, 3].at(-1)); // 3
    
  • 使用场景: 当你需要获取数组中的某个特定位置的元素,特别是从末尾开始时。

Array.prototype.concat()

  • 描述: 合并两个或多个数组并返回一个新数组。

  • 示例:

    console.log([1, 2].concat([3, 4])); // [1, 2, 3, 4]
    
  • 使用场景: 当你需要合并多个数组而不改变原数组时。

Array.prototype.includes()

  • 描述: 判断一个数组是否包含一个指定的值。

  • 示例:

    console.log([1, 2, 3].includes(2)); // true
    
  • 使用场景: 当你需要检查数组中是否存在某个值时。

Array.prototype.indexOf()

  • 描述: 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

  • 示例:

    console.log([1, 2, 3].indexOf(2)); // 1
    
  • 使用场景: 当你需要找到某个元素在数组中的第一个索引时。

Array.prototype.join()

  • 描述: 将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。

  • 示例:

    console.log([1, 2, 3].join('-')); // '1-2-3'
    
  • 使用场景: 当你需要将数组元素拼接成字符串时。

Array.prototype.lastIndexOf()

  • 描述: 返回指定元素在数组中的最后一个的索引,如果不存在则返回-1。

  • 示例:

    console.log([1, 2, 3, 2].lastIndexOf(2)); // 3
    
  • 使用场景: 当你需要找到某个元素在数组中的最后一个索引时。

Array.prototype.slice()

  • 描述: 返回一个新的数组对象,这一对象是一个由begin和end决定的原数组的浅拷贝(包括begin,不包括end)。

  • 示例:

    console.log([1, 2, 3].slice(1, 2)); // [2]
    
  • 使用场景: 当你需要复制数组的一部分到新数组时。

Array.prototype.toLocaleString()

  • 描述: 返回一个字符串表示数组中的元素。

  • 示例:

    console.log([1, 'a', new Date('21 Dec 1997 14:12:00 UTC')].toLocaleString('en', { timeZone: 'UTC' }));
    
  • 使用场景: 当你需要将数组转换为本地化的字符串表示时。

Array.prototype.toString()

  • 描述: 返回一个字符串表示指定的数组及其元素。

  • 示例:

    console.log([1, 2, 3].toString()); // '1,2,3'
    
  • 使用场景: 当你需要将数组转换为字符串表示时。

迭代方法

Array.prototype.entries()

  • 描述: 返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。

  • 示例:

    console.log([...[1, 2, 3].entries()]); // [[0, 1], [1, 2], [2, 3]]
    
  • 使用场景: 当你需要遍历数组的索引和元素时。

Array.prototype.every()

  • 描述: 测试数组的所有元素是否都通过了指定函数的测试。

  • 示例:

    console.log([1, 2, 3].every(x => x < 4)); // true
    
  • 使用场景: 当你需要确认数组中每个元素都满足某个条件时。

Array.prototype.filter()

  • 描述: 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

  • 示例:

    console.log([1, 2, 3].filter(x => x > 1)); // [2, 3]
    
  • 使用场景: 当你需要从数组中筛选出符合条件的元素时。

Array.prototype.find()

  • 描述: 返回数组中满足提供的测试函数的第一个元素的值,否则返回undefined。

  • 示例:

    console.log([1, 2, 3].find(x => x > 1)); // 2
    
  • 使用场景: 当你需要找到数组中第一个符合条件的元素时。

Array.prototype.findIndex()

  • 描述: 返回数组中满足提供的测试函数的第一个元素的索引,否则返回-1。

  • 示例:

    console.log([1, 2, 3].findIndex(x => x > 1)); // 1
    
  • 使用场景: 当你需要找到数组中第一个符合条件的元素的索引时。

Array.prototype.findLast()

  • 描述: 返回数组中最后一个满足提供的测试函数的元素的值,否则返回undefined。

  • 示例:

    console.log([1, 2, 3, 2].findLast(x => x > 1)); // 2
    
  • 使用场景: 当你需要找到数组中最后一个符合条件的元素时。

Array.prototype.findLastIndex()

  • 描述: 返回数组中最后一个满足提供的测试函数的元素的索引,否则返回-1。

  • 示例:

    console.log([1, 2, 3, 2].findLastIndex(x => x > 1)); // 3
    
  • 使用场景: 当你需要找到数组中最后一个符合条件的元素的索引时。

Array.prototype.flat()

  • 描述: 根据指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

  • 示例:

    console.log([1, [2, [3]]].flat(2)); // [1, 2, 3]
    
  • 使用场景: 当你需要将多层嵌套数组展平到指定的深度时。

Array.prototype.flatMap()

  • 描述: 先使用映射函数映射每个元素,然后将结果压缩成一个新数组。

  • 示例:

    console.log([1, 2, 3].flatMap(x => [x, x * 2])); // [1, 2, 2, 4, 3, 6]
    
  • 使用场景: 当你需要映射并展平数组时。

Array.prototype.forEach()

  • 描述: 对数组的每个元素执行一次给定的函数。

  • 示例:

    [1, 2, 3].forEach(x => console.log(x)); // 打印 1 2 3
    
  • 使用场景: 当你需要对数组的每个元素执行某个操作时。

Array.from()

  • 描述: 从一个类似数组或可迭代对象中创建一个新的数组实例。

  • 示例:

    console.log(Array.from('123')); // ['1', '2', '3']
    
  • 使用场景: 当你需要将类数组对象(如argumentsNodeList)或可迭代对象(如SetMap)转换为数组时。

Array.fromAsync()

  • 描述: 异步从一个类似数组或可迭代对象中创建一个新的数组实例。

  • 示例:

    // 假设有异步迭代器
    // Array.fromAsync(asyncIterable).then(array => console.log(array));
    
  • 使用场景: 当你需要从异步迭代器或者异步生成的数据创建数组时。

Array.prototype.keys()

  • 描述: 返回一个包含数组中每个索引键的Array Iterator对象。

  • 示例:

    console.log([...[1, 2, 3].keys()]); // [0, 1, 2]
    
  • 使用场景: 当你需要遍历数组的键时。

Array.prototype.map()

  • 描述: 创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

  • 示例:

    console.log([1, 2, 3].map(x => x * 2)); // [2, 4, 6]
    
  • 使用场景: 当你需要将数组中的每个元素映射到一个新的元素时。

Array.of()

  • 描述: 根据一组参数来创建新的数组实例,支持任意的参数数量和类型。

  • 示例:

    console.log(Array.of(1, 2, 3)); // [1, 2, 3]
    
  • 使用场景: 当你需要创建一个具有可变数量元素的新数组时。

Array.prototype.reduce()

  • 描述: 对累加器和数组中的每个元素(从左到右)应用一个函数,以将其减少为单个返回值。

  • 示例:

    console.log([1, 2, 3].reduce((acc, x) => acc + x, 0)); // 6
    
  • 使用场景: 当你需要将数组元素累加或者基于数组元素计算出一个单一的结果时。

Array.prototype.reduceRight()

  • 描述: 接受一个函数作为累加器(accumulator),数组中的每个值(从右到左)开始缩减,最终计算为一个值。

  • 示例:

    console.log([1, 2, 3].reduceRight((acc, x) => acc - x, 0)); // -6
    
  • 使用场景: 当你需要从右至左将数组元素缩减为一个单一的结果时。

Array.prototype.some()

  • 描述: 测试数组中是不是至少有1个元素通过了被提供的函数测试。

  • 示例:

    console.log([1, 2, 3].some(x => x > 2)); // true
    
  • 使用场景: 当你需要检查数组中是否至少有一个元素满足条件时。

Array.prototype.values()

  • 描述: 返回一个新的Array Iterator对象,该对象包含数组每个索引的值。

  • 示例:

    console.log([...[1, 2, 3].values()]); // [1, 2, 3]
    
  • 使用场景: 当你需要遍历数组的值时。

其他

Array.prototype.with()

  • 描述: 返回一个新的Array实例,它的指定索引位置的元素值