JS 获取数组下标|极客教程

JS 获取数组下标

在 JavaScript 中，数组是一种常用的数据结构，它可以存储多个值。当我们需要操作数组中的元素时，有时候需要获取元素在数组中的下标。本文将详细介绍如何在 JavaScript 中获取数组下标。

1. 遍历数组

遍历数组是最常见的获取数组下标的方式。我们可以使用 for 循环或 forEach 方法来遍历数组，并在遍历过程中获取元素的下标。

使用 for 循环：

let arr = ["apple", "banana", "orange", "grape"];

for(let i = 0; i < arr.length; i++){
    console.log(`元素  ${arr[i]} 的下标为$ {i}`);
}

输出：

元素 apple 的下标为 0
元素 banana 的下标为 1
元素 orange 的下标为 2
元素 grape 的下标为 3

使用 forEach 方法：

let arr = ["apple", "banana", "orange", "grape"];

arr.forEach(function(element, index){
    console.log(`元素  ${element} 的下标为$ {index}`);
});

输出：

元素 apple 的下标为 0
元素 banana 的下标为 1
元素 orange 的下标为 2
元素 grape 的下标为 3

通过遍历数组，我们可以获取到每个元素在数组中的下标，并进行相应的操作。

2. 使用数组的索引方法 `indexOf` 和 `lastIndexOf`

JavaScript 数组提供了 indexOf 和 lastIndexOf 两个方法，可以用来获取指定元素在数组中的下标。

使用 indexOf 方法：

let arr = ["apple", "banana", "orange", "grape"];
let index = arr.indexOf("banana");

console.log(`元素 "banana" 的下标为 ${index}`);

输出：

元素 "banana" 的下标为 1

使用 lastIndexOf 方法：

let arr = ["apple", "banana", "orange", "grape", "banana"];
let lastIndex = arr.lastIndexOf("banana");

console.log(`元素 "banana" 的最后一个下标为 ${lastIndex}`);

输出：

元素 "banana" 的最后一个下标为 4

通过使用 indexOf 方法，我们可以获取指定元素在数组中第一次出现的下标；而使用 lastIndexOf 方法，则可以获取指定元素在数组中最后一次出现的下标。

3. 使用 ES6 的 `findIndex` 方法

在 ES6 中，JavaScript 数组增加了一个新的方法 findIndex，用于查找满足指定条件的第一个元素，并返回该元素在数组中的下标。

let arr = [
    { name: "apple", color: "red" },
    { name: "banana", color: "yellow" },
    { name: "orange", color: "orange" },
    { name: "grape", color: "purple" }
];

let index = arr.findIndex(function(element){
    return element.color === "orange";
});

console.log(`颜色为 "orange" 的水果在数组中的下标为 ${index}`);

输出：

颜色为 "orange" 的水果在数组中的下标为 2

通过使用 findIndex 方法与回调函数，我们可以根据指定的条件找到满足条件的第一个元素，并获取其在数组中的下标。

4. 使用 `Object.keys` 方法和 `indexOf` 方法

如果数组中的元素是对象类型，并且对象中有某个属性值已知，我们可以使用 Object.keys 方法将对象的属性转为数组，然后使用 indexOf 方法来获取对应元素的下标。

let arr = [
    { name: "apple", color: "red" },
    { name: "banana", color: "yellow" },
    { name: "orange", color: "orange" },
    { name: "grape", color: "purple" }
];

let color = "yellow";
let index = Object.keys(arr).findIndex(function(key){
    return arr[key].color === color;
});

console.log(`颜色为 " ${color}" 的水果在数组中的下标为$ {index}`);

输出：

颜色为 "yellow" 的水果在数组中的下标为 1

通过将对象的属性转为数组，并结合 indexOf 方法，我们可以根据对象中的某个属性值来获取元素在数组中的下标。

结语

本文介绍了在 JavaScript 中获取数组下标的多种方法，包括遍历数组、使用数组的索引方法、使用 ES6 的 findIndex 方法，以及结合 Object.keys 方法和 indexOf 方法。根据实际情况和需求，可以选择合适的方法来获取数组下标，并进行相应的操作。

JS 获取数组下标