js中includes怎么用

在JavaScript中，includes方法主要用于检测一个字符串或数组是否包含特定的子字符串或元素。 它返回一个布尔值，表示是否找到了指定的子字符串或元素。本文将详细讲解includes方法的使用，包括其基本语法、实际应用场景以及一些最佳实践。

一、字符串中的includes方法

1、基本语法

在字符串中，includes方法用于检查一个字符串是否包含另一个子字符串。其基本语法如下：

string.includes(searchString, position)

• searchString：要搜索的子字符串。
• position（可选）：开始搜索的位置，默认为0。

2、简单示例

下面是一个简单的示例：

let str = "Hello, world!";

console.log(str.includes("world")); // 输出: true
console.log(str.includes("World")); // 输出: false

3、详细描述

在上面的示例中，str.includes("world")返回true，因为字符串"world"确实存在于"Hello, world!"中。注意，includes方法是区分大小写的，因此str.includes("World")返回false。

二、数组中的includes方法

1、基本语法

在数组中，includes方法用于检查数组是否包含某个特定的元素。其基本语法如下：

array.includes(element, fromIndex)

• element：要搜索的元素。
• fromIndex（可选）：开始搜索的索引，默认为0。如果该索引为负数，则从数组末尾开始计算。

2、简单示例

下面是一个简单的示例：

let arr = [1, 2, 3, 4, 5];

console.log(arr.includes(3)); // 输出: true
console.log(arr.includes(6)); // 输出: false
console.log(arr.includes(3, 3)); // 输出: false

3、详细描述

在上面的示例中，arr.includes(3)返回true，因为数组确实包含元素3。而arr.includes(6)返回false，因为数组中没有元素6。另外，arr.includes(3, 3)返回false，因为从索引3开始搜索时，数组中没有元素3。

三、实际应用场景

1、验证用户输入

在表单验证时，可以使用includes方法来检查用户输入是否包含某些非法字符或词语。例如：

let userInput = "Hello, world!";

let forbiddenWords = ["badword1", "badword2"];
for (let word of forbiddenWords) {
  if (userInput.includes(word)) {
    console.log("输入包含非法词语");
  }
}

2、判断数组中是否存在特定元素

在处理数组时，经常需要检查数组中是否存在某个特定元素。例如：

let fruits = ["apple", "banana", "mango"];

if (fruits.includes("banana")) {
  console.log("数组中包含香蕉");
}

四、最佳实践

1、注意区分大小写

在使用includes方法时，请记住它是区分大小写的。如果需要进行不区分大小写的比较，可以将字符串转换为统一的大小写：

let str = "Hello, world!";

console.log(str.toLowerCase().includes("world")); // 输出: true

2、合理使用fromIndex参数

在数组中搜索元素时，如果知道某个元素可能在数组的特定位置之后，可以使用fromIndex参数来提高搜索效率：

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

console.log(numbers.includes(8, 5)); // 输出: true

3、结合其他数组方法使用

includes方法可以与其他数组方法结合使用，例如filter、map等，以实现更复杂的逻辑：

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let evenNumbers = numbers.filter(num => num % 2 === 0);
if (evenNumbers.includes(4)) {
  console.log("数组中包含4");
}

五、数组和字符串中的includes方法比较

1、相同点

• 都用于检查是否包含某个元素或子字符串。
• 都返回布尔值。
• 都是区分大小写的。

2、不同点

• 字符串中的includes方法第二个参数是搜索的起始位置，默认为0。
• 数组中的includes方法第二个参数是搜索的起始索引，默认为0，且可以为负数。

六、includes方法的兼容性

虽然includes方法在现代浏览器中得到了广泛支持，但在一些旧版浏览器中可能不被支持。为了确保代码的兼容性，可以使用polyfill：

if (!String.prototype.includes) {

  String.prototype.includes = function(search, start) {
    'use strict';
    if (typeof start !== 'number') {
      start = 0;
    }
    if (start + search.length > this.length) {
      return false;
    } else {
      return this.indexOf(search, start) !== -1;
    }
  };
}
if (!Array.prototype.includes) {
  Array.prototype.includes = function(valueToFind, fromIndex) {
    if (this == null) {
      throw new TypeError('"this" is null or not defined');
    }
    // 1. Let O be ? ToObject(this value).
    var o = Object(this);
    // 2. Let len be ? ToLength(? Get(O, "length")).
    var len = o.length >>> 0;
    // 3. If len is 0, return false.
    if (len === 0) {
      return false;
    }
    // 4. Let n be ? ToInteger(fromIndex).
    //    (If fromIndex is undefined, then let n be 0.)
    var n = fromIndex | 0;
    // 5. If n ≥ 0, then
    //  a. Let k be n.
    // 6. Else n < 0,
    //  a. Let k be len + n.
    //  b. If k < 0, let k be 0.
    var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
    // 7. Repeat, while k < len
    while (k < len) {
      // a. Let elementK be the result of ? Get(O, ! ToString(k)).
      // b. If SameValueZero(valueToFind, elementK) is true, return true.
      // c. Increase k by 1.
      // NOTE: === provides the correct "SameValueZero" comparison needed here.
      if (o[k] === valueToFind) {
        return true;
      }
      k++;
    }
    // 8. Return false
    return false;
  };
}

七、使用includes方法的注意事项

1、性能问题

在大型数组或长字符串中使用includes方法时，性能可能成为一个问题。虽然现代JavaScript引擎已经对includes方法进行了优化，但在处理非常大的数据集时，依然需要注意性能问题。

2、使用fromIndex参数

在处理特别大的数组时，使用fromIndex参数可以显著提高性能，尤其是在知道搜索元素可能位于数组的后半部分时。

3、替代方法

在某些情况下，可以使用其他方法来替代includes，比如使用indexOf来检查元素是否存在：

let arr = [1, 2, 3, 4, 5];

console.log(arr.indexOf(3) !== -1); // 输出: true

八、实际案例

1、案例一：过滤敏感词

在一个社交媒体平台上，检测用户输入的评论是否包含敏感词：

let comment = "This is a very badword1 comment!";

let sensitiveWords = ["badword1", "badword2", "badword3"];
for (let word of sensitiveWords) {
  if (comment.includes(word)) {
    console.log("评论包含敏感词");
    break;
  }
}

2、案例二：检查用户权限

在一个项目管理系统中，检查用户是否拥有某个特定权限：

let userPermissions = ["read", "write", "delete"];

if (userPermissions.includes("admin")) {
  console.log("用户拥有管理员权限");
} else {
  console.log("用户没有管理员权限");
}

九、总结

JavaScript中的includes方法是一种强大的工具，无论是在字符串还是数组中都能发挥重要作用。通过合理使用includes方法，可以简化代码逻辑、提高代码可读性，并有效解决许多常见的编程问题。在实际开发中，建议结合其他数组和字符串方法，灵活运用includes方法，以实现更复杂和高效的业务逻辑。

无论是处理字符串还是数组，includes方法都能提供简洁高效的解决方案。通过掌握其使用技巧和最佳实践，可以在实际项目中大大提高开发效率和代码质量。

相关问答FAQs：

1. 什么是JavaScript中的includes方法？
JavaScript中的includes方法是用于检查字符串或数组中是否包含指定的值。它返回一个布尔值，如果找到匹配项，则返回true，否则返回false。

2. includes方法如何在JavaScript字符串中使用？
要在JavaScript字符串中使用includes方法，可以使用以下语法：

var str = "Hello World";
var searchTerm = "World";

if (str.includes(searchTerm)) {
  console.log("字符串中包含指定的值");
} else {
  console.log("字符串中不包含指定的值");
}

在上面的例子中，我们将字符串"Hello World"赋给变量str，然后使用includes方法检查它是否包含"World"。如果包含，将输出"字符串中包含指定的值"。

3. includes方法如何在JavaScript数组中使用？
要在JavaScript数组中使用includes方法，可以使用以下语法：

var arr = [1, 2, 3, 4, 5];
var searchValue = 3;

if (arr.includes(searchValue)) {
  console.log("数组中包含指定的值");
} else {
  console.log("数组中不包含指定的值");
}

在上面的例子中，我们将数组[1, 2, 3, 4, 5]赋给变量arr，然后使用includes方法检查它是否包含值3。如果包含，将输出"数组中包含指定的值"。