温故而知新之- Javascript 数组类型 （查找元素）

查找元素

indexOf()

使用indexOf()可以找出指定元素在数组中的索引，查找顺序是从左向右，若找不到元素时，会返回-1。

let info = [2, 4, 6, 8, 10];
console.log(info.indexOf(8)); // 4
console.log(info.indexOf(3)); // -1

有个知识点需要注意下：indexOf()类似于 === ，indexOf()是严格类型约束。因此在查找元素时，需要值跟类型完全匹配，才算查找到，否则，返回-1。

let info = [2, 4, 6, 8, 10];
console.log(info.indexOf('8')); // -1

indexOf()的第二个参数是指定查找元素的开始位置。

let info = [2, 4, 6, 8, 2, 10];
console.log(info.indexOf(2, 3)); // 4

lastIndexOf()

使用lastIndexOf()可以找出指定元素在数组中的索引，查找顺序是从右向左，若找不到元素时，会返回-1。

let info = [2, 4, 6, 8, 2, 10];
console.log(info.lastIndexOf(2)); // 4
console.log(info.lastIndexOf(3)); // -1

跟indexOf()一样，第二个参数也是指定查找元素的开始位置。

let info = [2, 4, 6, 8, 2, 10];
console.log(info.lastIndexOf(2, 3)); // 0

includes()

使用includes()查找元素更方便，因为它的返回值是布尔类型，更直观。

let info = [2, 4, 6, 8, 2, 10];
console.log(info.includes(8)); // true
console.log(info.includes(3)); // false

让我们来深究一下，结合我的以前学过的基础知识，可以试着写出includes()的原理：

function includes(array, item) {
    for (let value of array) {
        if (value === item) return true;
    }
    return false;
}
console.log(includes([2, 4, 6, 8], 6)); // true
console.log(includes([2, 4, 6, 8], '6')); // false

find()

如果我们想把找到的元素值返回出来，我们可以使用find()函数。找不到的话，返回值是undefined。若找到值的话，就不向后继续查找。

let arr = ["hw91364016", "余人杰", 4836];

let result = arr.find(function(item) {
  return item == "余人杰";
});
console.log(result); // 余人杰

//上面代码，可以使用箭头函数简写成：
let result = arr.find(item => item === "余人杰");

// 找不到值的话，返回undefined
let result = arr.find(item => item === "余余余");
console.log(result); // undefined

我们前面介绍的includes(),它查找的值是基本数据类型，不能查找引用类型，而find()可以。

let info = [{ name: "余人杰" }, { name: "hw91364016" }];
let result = info.includes({ name: "余人杰" });
console.log(result); // false


let result1 = info.find(item => item.name === "余人杰");
console.log(result1); // {name: "余人杰"}

findIndex()

findIndex()也可以用于查找数组元素，但是它跟find()的区别就是返回值不同，findIndex()返回元素对应索引值。

findIndex(当前元素，当前元素索引，调用findIndex()的数组)。

let arr = ["hw91364016", "余人杰", 4836];
let result = arr.findIndex(value => value === '余人杰');
console.log(result); // 1

心里话：本短文知识点有点多，但不杂，我已将其分块，也附上一些栗子跟原理，大家可以细品。学无止境，有你我同行，加油。