在 JavaScript 中向数组添加元素

Question

JavaScript 数组有 3 种向数组添加元素的方法：

• push()添加到数组的末尾
• unshift()添加到数组的开头
• splice()添加到数组的中间

下面是使用示例 push()、unshift() 和 splice()。

const arr = ['a', 'b', 'c'];

arr.push('d');
arr; // ['a', 'b', 'c', 'd']

arr.push('e', 'f');
arr; // ['a', 'b', 'c', 'd', 'e', 'f']

const arr = ['d', 'e', 'f'];

arr.unshift('c');
arr; // ['c', 'd', 'e', 'f']

arr.unshift('a', 'b');
arr; // ['a', 'b', 'c', 'd', 'e', 'f']

const arr = ['a', 'b', 'd'];

let start = 2;
let deleteCount = 0;
arr.splice(start, deleteCount, 'c');

arr; // ['a', 'b', 'c', 'd'];

这些方法会修改原来的数组，这意味着它们修改 arr 而不是创建一个 副本 arr，您还可以使用 扩展运算符 和其他 不可变方法 创建新数组并离开的 arr 未修改。

let arr = ['c'];

arr = arr.concat(['d', 'e']);
arr; // ['c', 'd', 'e']

// You can also use `concat()` to add to the beginning of
// the array, just make sure you call `concat()` on an array
// containing the elements you want to add to the beginning.
arr = ['a', 'b'].concat(arr);
arr; // ['a', 'b', 'c', 'd', 'e']

直接设置索引

如果要将元素添加到数组的末尾，则不一定必须使用 push()，您只需设置数组索引，JavaScript 就会为您更新数组的长度。

let arr = ['a', 'b'];

arr[2] = 'c';

arr.length; // 3
arr; // ['a', 'b', 'c']

如果您设置越界数组索引， JavaScript 不会 抛出 错误。 例如，如果您的数组长度为 3 并且您设置了索引 4，JavaScript 只会通过在数组中添加一个 洞来增加数组 。

const arr = ['a', 'b', 'c'];

arr[4] = 'e';

arr.length; // 5
arr; // [ 'a', 'b', 'c', <1 empty item>, 'e' ]

arr[3]; // undefined

在上面的例子中， arr[3] 是数组中的一个洞。 这意味着 arr[3] === undefined，所以如果您设置的数组索引超出范围，请务必小心。

避免重复

避免向数组添加重复项的最简单方法是 检查数组是否包含给定值，在添加之前

const arr = ['a', 'b', 'c'];

addWithoutDuplicates(arr, 'a'); // ['a', 'b', 'c']
addWithoutDuplicates(arr, 'd'); // ['a', 'b', 'c', 'd']

function addWithoutDuplicates(arr, el) {
  if (arr.includes(el)) {
    return arr;
  }
  arr.push(el);
  return arr;
}

使用 includes() 有效，但可能会导致性能问题，因为 includes() 每次调用它时都会扫描整个数组。 所以下面的循环是 O(n^2).

const arrWithoutDuplicates = [];
for (let i = 0; i < arr.length; ++i) {
  if (arrWithoutDuplicates.includes(arr[i])) {
    continue;
  }
  arrWithoutDuplicates.push(arr[i]);
}

相反，我们建议使用 JavaScript set 来表示对象集合，其中每个元素都应该是唯一的。

const set = new Set(['a', 'b', 'c']);

set.add('a');
set; // Set(3) { 'a', 'b', 'c' }

set.add('d');
set; // Set(4) { 'a', 'b', 'c', 'd' }