前端JavaScript中array数组的基础相关方法-查找元素

一、indexOf

使用 indexOf 从前向后查找元素出现的位置，如果找不到返回 -1

let arr = [7, 3, 2, 8, 2, 6];
console.log(arr.indexOf(2)); // 2 从前面查找2出现的位置

如下面代码一下，使用 indexOf 查找字符串将找不到，因为indexOf 类似于===是严格类型约束。

let arr = [7, 3, 2, '8', 2, 6];
console.log(arr.indexOf(8)); // -1

第二个参数用于指定查找开始位置

let arr = [7, 3, 2, 8, 2, 6];
//从第二个元素开始向后查找
console.log(arr.indexOf(2, 3)); //4

二、lastIndexOf

使用 lastIndexOf 从后向前查找元素出现的位置，如果找不到返回 -1。

let arr = [7, 3, 2, 8, 2, 6];
console.log(arr.lastIndexOf(2)); // 4 从后查找2出现的位置

第二个参数用于指定查找开始位置

let arr = [7, 3, 2, 8, 2, 6];
//从第五个元素向前查找
console.log(arr.lastIndexOf(2, 5));

//从最后一个字符向前查找
console.log(arr.lastIndexOf(2, -2));

三、includes

使用 includes 查找字符串返回值是布尔类型更方便判断

let arr = [7, 3, 2, 6];
console.log(arr.includes(8)); //true

我们来实现一个自已经的includes函数，来加深对includes方法的了解

function includes(array, item) {
  for (const value of array)
    if (item === value) return true;
  return false;
}

console.log(includes([1, 2, 3, 4], 3)); //true

四、find

find 方法找到后会把值返回出来

如果找不到返回值为undefined
返回第一次找到的值，不继续查找

let arr = ["rose", "jeck", "rose"];

let find = arr.find(function(item) {
  return item == "rose";
});

console.log(find); //rose

使用includes等不能查找引用类型，因为它们的内存地址是不相等的

const user = [{ name: "李四" }, { name: "张三" }, { name: "rose" }];
const find = user.includes({ name: "rose" });
console.log(find);

find 可以方便的查找引用类型

const user = [{ name: "李四" }, { name: "张三" }, { name: "rose" }];
const find = user.find(user => (user.name = "rose"));
console.log(find);

五、findIndex

findIndex 与 find 的区别是返回索引值，参数也是 : 当前值，索引，操作数组。

查找不到时返回 -1

let arr = [7, 3, 2, '8', 2, 6];

console.log(arr.findIndex(function (v) {
    return v == 8;
})); //3

附加：find原理

下面使用自定义函数

let arr = [1, 2, 3, 4, 5];
function find(array, callback) {
  for (const value of array) {
    if (callback(value) === true) return value;
  }
  return undefined;
}
let res = find(arr, function(item) {
  return item == 23;
});
console.log(res);

下面添加原型方法实现

Array.prototype.findValue = function(callback) {
  for (const value of this) {
    if (callback(value) === true) return value;
  }
  return undefined;
};

let re = arr.findValue(function(item) {
  return item == 2;
});
console.log(re);

本文参考连接：https://houdunren.gitee.io/note/js/4%20%E6%95%B0%E7%BB%84%E7%B1%BB%E5%9E%8B.html#%E6%9F%A5%E6%89%BE%E5%85%83%E7%B4%A0