JavaScript

JavaScript 中在数组中查找元素

Posted by cl9000 on January 25, 2021

人只有献身于社会，才能找出那短暂而有风险的生命的意义。 ——<阿尔伯特·爱因斯坦>

作者：Ashish Lahoti
译者：cl9000
来源：https://codingnconcepts.com/javascript/how-to-search-array-in-javascript/

在本教程中，我们将学习如何使用 JavaScript 中的不同Array方法在Array中搜索元素。

1. Array.filter()

Array.filter()方法将条件作为函数，并返回满足该条件的元素数组。

例子1

1
2
3
4
5
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const allEvenNumbers  =  array.filter(n => n%2==0);  // [2, 4, 6, 8, 10]
const allOddNumbers   =  array.filter(n => n%2==1);  // [1, 3, 5, 7, 9]
const greaterThanNine =  array.filter(n => n>9);     // [10]

例子2

1
2
3
4
5
6
7
8
9
10
11
const fruits = [
  { name: "mango",  color: "yellow", calories: 135},
  { name: "banana", color: "yellow", calories: 60 },
  { name: "apple",  color: "red",    calories: 65 },
  { name: "orange", color: "orange", calories: 50 },
  { name: "kiwi",   color: "green",  calories: 46 },
];

const yellowFruits = fruits.filter(fruit => fruit.color == "yellow").map(fruit => fruit.name); // ["mango", "banana"]

const lowCalories  = fruits.filter(fruit => fruit.calories <=50).map(fruit => fruit.name); // ["orange", "kiwi"]

2. Array.find()

Array.find() 方法将条件作为函数，并返回满足该条件的第一个元素。

例子1

1
2
3
4
5
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const allEvenNumbers  =  array.find(n => n%2==0);  // 2
const allOddNumbers   =  array.find(n => n%2==1);  // 1
const greaterThanNine =  array.find(n => n>9);     // 10

例子2

1
2
3
4
5
6
7
8
9
10
11
12
13
const fruits = [
  { name: "mango",  color: "yellow", calories: 135},
  { name: "banana", color: "yellow", calories: 60 },
  { name: "apple",  color: "red",    calories: 65 },
  { name: "orange", color: "orange", calories: 50 },
  { name: "kiwi",   color: "green",  calories: 46 },
];

const yellowFruits = fruits.find(fruit => fruit.color == "yellow"); 
console.log(yellowFruits); // prints {name: "mango", color: "yellow", calories: 135}

const lowCalories  = fruits.find(fruit => fruit.calories <=50); 
console.log(lowCalories); // prints {name: "orange", color: "orange", calories: 50}

3. Array.includes()

Array.includes()方法寻找给定值，并返回true，如果在数组中查找，否则返回false。

例子1

1
2
3
4
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const includesTen    = array.includes(10);  // true
const includesTwenty = array.includes(20);  // false

例子2

1
2
3
4
5
6
7
8
9
10
const fruits = [
  { name: "mango",  color: "yellow", calories: 135},
  { name: "banana", color: "yellow", calories: 60 },
  { name: "apple",  color: "red",    calories: 65 },
  { name: "orange", color: "orange", calories: 50 },
  { name: "kiwi",   color: "green",  calories: 46 },
];

const includesMango = fruits.map(fruit => fruit.name).includes("mango"); // true
const includesBlue  = fruits.map(fruit => fruit.color).includes("blue"); // false

例子3

计算给定字符串中的元音数量：

1
2
3
4
const vowels = ['a', 'e', 'i', 'o', 'u'];
const string = "codingnconcepts";
const countVowels = word.split("").map(char => vowels.includes(char) ? 1 : 0).reduce((a, b) => a + b);
console.log(countVowels); // prints "4"

4. Array.indexOf()

Array.indexOf() 方法查找给定值，如果在数组中找到，则返回索引，否则返回-1。

例子1

1
2
3
4
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const indexOfTen    = array.indexOf(10);  // 9
const indexOfTwenty = array.indexOf(20);  // -1

例子2

1
2
3
4
5
6
7
8
9
10
const fruits = [
  { name: "mango",  color: "yellow", calories: 135},
  { name: "banana", color: "yellow", calories: 60 },
  { name: "apple",  color: "red",    calories: 65 },
  { name: "orange", color: "orange", calories: 50 },
  { name: "kiwi",   color: "green",  calories: 46 },
];

const indexOfMango = fruits.map(fruit => fruit.name).indexOf("mango"); // 0
const indexOfBlue  = fruits.map(fruit => fruit.color).indexOf("blue"); // -1

参考

关注【公众号】，了解更多。


赏 支付宝打赏 微信打赏

赞赏一下 坚持原创技术分享，您的支持将鼓励我继续创作！



FEATURED TAGS
JavaScript
FRIENDS