JavaScript 数组

JavaScript 数组

使用 JavaScript 在编程的时候,我们有很大一部分时间都是在与数组打交道,因此对数组常见的方法做到灵活的运用至关重要。本文整理了和 JavaScript 数组相关的,日常经常需要的功能和使用技巧,供大家参阅。

从数组中移除指定元素

查阅 JavaScript 的数组 API,发现其并没有提供一个像 remove(obj)removeAll(obj) 此类的方法,供我们方便的删除对象,因此我们需要通过使用其它的 API 来达到我们移出元素的目的。

(1) 使用 splice 方法

splice 方法可以从指定索引处,向数组中添加元素或者删除元素,其会直接在原数组上改变,因此通过此方法可以达到我们的目的。但是在移除元素之前,我们必须首先通过 indexOf 方法找到我们的元素在数组中处于的索引位置

const array = [2, 5, 9];
const index = array.indexOf(5);
if (index > -1) {
    array.splice(index, 1); // 1 代表删除 1 个元素
}
console.log(array)

当然,如果你不想使用 indexOf 的话,也可以直接从后向前遍历整个数组,对每个符合要求的元素都使用 splice 方法:

const array = [2, 5, 9];
for (var i = array.length; i--; ) {
    if (array[i] === 5) {
        array.splice(i, 1)
    }
}

console.log(array)

之所以需要从后向前移除,是因为在移除过程中,数组的 lengthindex 索引都是会改变的。

(2) 使用 filter 方法

在 ES6 中,你可以使用 filter 函数遍历数组,对不符合元素值的对象进行过滤。filter 方法会返回一个新的数组,并不会直接在原数组上进行操作。

let value = 3;
let array = [1, 2, 3, 4, 5, 3];

console.log(array.filter(item => item !== value))

如何遍历数组元素

JavaScript 数组提供了非常多的方法,这些方法都可以用来遍历数组:

(1) 使用 forEach 方法

var a = ["a", "b", "c"];
a.forEach(function(entry) {
    console.log(entry)
})

(2) 使用 for 遍历

var a = ["a", "b", "c"];
for (var index = 0; index < a.length; ++index) {
    console.log(a[index])
}

(3) 使用 for 反向遍历

for (var i = array.length; i--; ) {
    // ...
}

上述反向遍历的原理是:i-- 是属于测试条件的一部分,在每一次开始执行方法体之前,i 的值已经提前执行-- 这个操作了。当最后一次迭代,发现 i 等于 0 的时候,这个循环自然会停下来。

(4) 使用 for-of 遍历

ES6 添加了迭代器的概念,当你使用 for-of 遍历的时候,其实已经隐形的在使用迭代器了:

var a = ["a", "b", "c"];
for (const val of a) {
    console.log(val);
}

(5) 不要使用 for-in 遍历

你或许听到过一些其它人的观点告诉你,使用 for-in 同样可以做到遍历数组。但是 for-in 是为了遍历对象用的,它并不保证按照数组的索引顺序来一一地遍历元素。所以在遍历数组的时候不推荐使用这种做法。

for (key in obj) {
    if (obj.hasOwnProperty(key)) {
        // ...
    }
}

如何清空数组

(1) 直接赋值一个空数组

如果你确实不在使用这个数组的话,也能保证其它地方没有引用这个数组,那么完全可以通过为其赋上一个新的空数组,从而置位空。

arr = []

(2) 将长度置为 0

arr.length = 0

(3) 使用 splice 方法

arr.splice(0, arr.length)

(4) 使用 pop 方法

一一将元素 pop 出去,可能是最慢的一个方法了。

while (arr.length) {
    arr.pop();
}

从头部插入元素

(1) 使用 unshift 方法

  • unshift 方法从头部插入一个元素到数组中
  • shift 方法从头部删除一个元素
  • push 方法从尾部插入一个元素到数组中
  • pop 方法从尾部删除一个元素

Array 插入或删除元素

JavaScript 提供的从头部删除元素的方法名叫做 unshift,而不是叫做 insertAtHead 之类的,的确是在用到的时候不太容易想到这个名称。之所以这样命名,是因为 JavaScript 的数组的命名方式参考了 C 语言的的命名方式:

  • array_unshift()
  • array_shift()
  • array_push()
  • array_pop()

(2) 使用 concat 方法

concat() 方法可以用来连接两个数组:

var arr = [1, 2, 3, 4, 5, 6, 7];
console.log([0].concat(arr));

(3) 使用 Spread 操作符

在 ES6 中,可以使用 Spread 操作符 … 来新增元素:

var arr = [23, 45, 12, 67];
arr = [34, ...arr];

提前 break 数组循环

(1) 使用 Exception

对于 forEach 而言,使用 break 是不管用的,需要抛出异常强制终止循环,最好的建议是如果你需要 break 循环,在这种情况下就不要使用 forEach 来循环数组了:

var BreakException = {};

try {
  [1, 2, 3].forEach(function(el) {
    console.log(el);
    if (el === 2) throw BreakException;
  });
} catch (e) {
  if (e !== BreakException) throw e;
}

(2) 使用 for-of

for (const [index, el] of arr.entries()) {
    if ( index === 5 ) break;
}

(3) 使用普通的循环

var array = [1, 2, 3];
for (var i = 0; i < array.length; i++) {
  if (array[i] === 1){
    break;
  }
}

数组去重

(1) 使用 filter 方法

var myArray = ['a', 1, 'a', 2, '1'];
var unique = myArray.filter((value, index, arr) => arr.indexOf(value) === index); 

(2) 使用 Set 构造器

var myArray = ['a', 1, 'a', 2, '1'];

// unique = Array.from(new Set(myArray))
let unique = [...new Set(myArray)];

参考

扫描下面二维码,在手机端阅读: