ES7 中使用 includes 取代 indexOf
JavaScript 是一门动态语言，其语法简单易学，上手极快，并且能够运行在浏览器和服务器上。在前端开发中，JavaScript 占据了非常重要的位置。ES7 是 JavaScript 的一个新版本，增加了一些新的特性，其中一个重要的特性就是 includes。本文将详细介绍 ES7 中的 includes，以及如何使用它来替代 indexOf，使我们的代码更加简洁、易读、易维护。
一、includes 的背景
在 JavaScript 中，indexOf 是一个常用的方法，它用来返回某个数组中第一个匹配项的下标。例如：
var arr = ["apple", "banana", "orange"];
var index = arr.indexOf("banana");
console.log(index);//输出 1在上面的代码中，indexOf 方法返回了匹配项 "banana" 的下标 1。
但是，在实际开发中，我们常常需要判断某个数组中是否包含某个值，这时候我们会写很多冗长的代码，例如：
var arr = ["apple", "banana", "orange"];
if(arr.indexOf("banana") !== -1){
console.log("数组中包含 banana");
}indexOf 方法返回 -1 表示未找到匹配项，因此我们需要使用 !== 进行严格比较。
于是，ES7 中引入了 includes 方法，用来判断一个数组是否包含另一个元素。includes 方法返回一个布尔值，表示是否找到了匹配项。例如：
var arr = ["apple", "banana", "orange"];
if(arr.includes("banana")){
console.log("数组中包含 banana");
}二、includes 的语法
includes 方法的语法如下：
array.includes(valueToFind[, fromIndex])
其中，
- array：要进行查找的数组。
- valueToFind：要查找的值。
- fromIndex（可选）：开始查找的位置，默认为 0。
includes 方法返回一个布尔值，表示数组是否包含要查找的值。
三、includes 的示例和指导意义
下面是关于 includes 方法的一些示例和指导意义：
1、使用 includes 方法判断数组中是否包含某个值
var arr = ["apple", "banana", "orange"];
if(arr.includes("banana")){
console.log("数组中包含 banana");
}上述代码可以替代下面的代码：
var arr = ["apple", "banana", "orange"];
if(arr.indexOf("banana") !== -1){
console.log("数组中包含 banana");
}2、使用 includes 方法查找指定的值
var arr = ["apple", "banana", "orange"];
var index = arr.indexOf("banana");
if(arr.includes(arr[index])){
console.log("找到了指定的值");
}上述代码可以替代下面的代码：
var arr = ["apple", "banana", "orange"];
var index = arr.indexOf("banana");
if(index !== -1){
console.log("找到了指定的值");
}3、使用 includes 方法进行数字查找（fromIndex 参数）
var arr = [1, 2, 3, 4, 5, 6];
if(arr.includes(3, 2)){
console.log("查找到了 3");
}上述代码从下标为 2 开始查找，如果查到了值为 3 的元素，则返回 true。
4、使用 includes 方法进行字符串查找
var str = "hello world";
if(str.includes("wo")){
console.log("找到了匹配的字符串");
}includes 方法不仅可以用于数组，还可以用于字符串。
四、总结
ES7 中的 includes 方法是一个非常实用的方法，可以替代 indexOf 方法来判断数组中是否包含指定的值，从而使代码更加简洁、易读、易维护。在实际开发中，我们可以根据具体的需求来使用 includes 方法，增强代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654dc6457d4982a6eb72a768