ES7 中使用 Array.prototype.includes 遇到的坑及解决方式
在 ES7 中,新增了 Array.prototype.includes 方法,它可以用来判断数组中是否包含某个元素,返回值为 true 或 false。此方法看似简单,但在实际使用中,却可能会遇到一些坑。
一、includes 方法的参数类型
Array.prototype.includes 方法接受一个参数,表示要搜索的元素。需要注意的是,该参数的类型必须与数组中的元素类型相同,否则会返回 false。
示例代码:
const arr = [1, 2, 3]; console.log(arr.includes(1)); // true console.log(arr.includes("1")); // false
在上面的示例中,arr 数组中包含数字类型的元素,当我们搜索数字 1 时,返回值为 true,但当我们搜索字符串 "1" 时,返回值为 false。
二、includes 方法的第二个参数
Array.prototype.includes 方法还可以接受第二个参数,表示搜索的起始位置。需要注意的是,该参数必须是一个整数,否则会被转换为整数。如果该参数小于 0,则从数组末尾开始搜索。
示例代码:
const arr = [1, 2, 3]; console.log(arr.includes(1, 1)); // false console.log(arr.includes(2, -1)); // false
在上面的示例中,第一个 includes 方法的第二个参数为 1,表示从数组索引 1 开始搜索,由于数组中的第一个元素是 0,因此搜索不到数字 1,返回值为 false。第二个 includes 方法的第二个参数为 -1,表示从数组末尾倒数第一个元素开始搜索,由于数组中的最后一个元素是 2,因此搜索不到数字 2,返回值为 false。
三、ES5 中的解决方式
在 ES5 中,我们可以使用 Array.prototype.indexOf 方法来判断数组中是否包含某个元素,返回值为元素在数组中的位置,如果不存在则返回 -1。
示例代码:
const arr = [1, 2, 3]; console.log(arr.indexOf(1) !== -1); // true console.log(arr.indexOf("1") !== -1); // false
在上面的示例中,arr 数组中包含数字类型的元素,当我们搜索数字 1 时,返回值为其在数组中的位置,不等于 -1,因此返回值为 true。但当我们搜索字符串 "1" 时,返回值为 -1,因此返回值为 false。
总结
在使用 Array.prototype.includes 方法时,需要注意参数类型和第二个参数的取值范围。如果出现问题,可以使用 ES5 中的 Array.prototype.indexOf 方法来解决。希望本文能对大家在前端开发中使用 ES7 中的 includes 方法有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6604b343d10417a2221fb3d4