ES 基础知识之Array 系列二

113 阅读3分钟

这是Array系列二,我们接着往下看,如果有兴趣的朋友可以去看一下第一期。

1,Array.prototype.push()

push()方法将指定的元素添加到数组的末尾,并返回新的数组长度。

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// Expected output: 4
console.log(animals);
// Expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// Expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

2,Array.prototype.pop()

pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法会更改数组的长度。

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// Expected output: "tomato"

console.log(plants);
// Expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);
// Expected output: Array ["broccoli", "cauliflower", "cabbage"]

3,Array.prototype.every()

every()方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。全部通过返回true,有一个不通过就返回false

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// Expected output: true

4, Array.prototype.some()

some()方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true,则返回 true;否则返回 false。它不会修改数组。

const array = [1, 2, 3, 4, 5];

// Checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// Expected output: true

5,Array.prototype.find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

  • 如果需要在数组中找到对应元素的索引,请使用 findIndex()
  • 如果需要查找某个值的索引,请使用 Array.prototype.indexOf()。(它类似于 findIndex(),但只是检查每个元素是否与值相等,而不是使用测试函数。)
  • 如果需要查找数组中是否存在某个值,请使用 Array.prototype.includes()。同样,它检查每个元素是否与值相等,而不是使用测试函数。
  • 如果需要查找是否有元素满足所提供的测试函数,请使用 Array.prototype.some()
const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// Expected output: 12

6,Array.prototype.findIndex()

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。

另请参阅 find() 方法,它返回满足测试函数的第一个元素(而不是它的索引)。

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// Expected output: 3

7,Array.prototype.indexOf()

indexOf()方法返回数组中第一次出现给定元素的下标,如果不存在则返回 -1。

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// Expected output: 1

// Start from index 2
console.log(beasts.indexOf('bison', 2));
// Expected output: 4

console.log(beasts.indexOf('giraffe'));
// Expected output: -1

8,Array.prototype.findLast()

findLast() 方法反向迭代数组,并返回满足提供的测试函数的第一个元素的值。如果没有找到对应元素,则返回 undefined

如果你需要找到:

  • 第一个匹配的元素,使用 find()
  • 数组中最后一个匹配元素的索引,使用 findLastIndex()
  • 某个值的索引,使用 indexOf()。(它类似于 findIndex(),但是会检查每个元素是否与值相等,而不是使用一个测试函数。)
  • 该数组中是否存在一个值,使用 includes()。同样地,它检查每个元素是否和值相等,而不是使用一个测试函数。
  • 是否有任意一个元素满足提供的测试函数,使用 some()
const array1 = [5, 12, 50, 130, 44];

const found = array1.findLast((element) => element > 45);

console.log(found);
// Expected output: 130

9, Array.prototype.findLastIndex()

findLastIndex() 方法反向迭代数组,并返回满足所提供的测试函数的第一个元素的索引。若没有找到对应元素,则返回 -1。

另请参见 findLast() 方法,该方法返回最后一个满足测试函数的元素的值(而不是它的索引)。

const array1 = [5, 12, 50, 130, 44];

const isLargeNumber = (element) => element > 45;

console.log(array1.findLastIndex(isLargeNumber));
// Expected output: 3
// Index of element with value: 130

10,Array.prototype.lastIndexOf()

lastIndexOf()方法返回数组中给定元素最后一次出现的索引,如果不存在则返回 -1。该方法从fromIndex开始向前搜索数组。

const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];

console.log(animals.lastIndexOf('Dodo'));
// Expected output: 3

console.log(animals.lastIndexOf('Tiger'));
// Expected output: 1

11,总结

这一节主要介绍ES数组的通用查找方式,从前开始查找元素,从后开始查找元素,查找元素的下标等方法,后续还有遍历,过滤等方法。