前言

?JS的數(shù)組是一種特殊的對象，其特點(diǎn)是在值的列表中按照順序存放值。JS數(shù)組用于存儲按照索引順序排列的數(shù)據(jù)，例如數(shù)字、字符串和對象等。數(shù)組是一個(gè)類似于列表的高階對象，它可以存儲任何類型的數(shù)據(jù)，并且具有一些非常有用的方法。其中，includes()方法是其中最常用的之一。
在 JS中，數(shù)組是由中括號 [] 括起來的數(shù)值序列。數(shù)組可以包含不同類型的值，例如數(shù)字、字符串、對象等。以下是一些基礎(chǔ)的 JS數(shù)組操作：

數(shù)組的一般化操作

創(chuàng)建數(shù)組

let myArray = []; // 創(chuàng)建一個(gè)空數(shù)組
let myArray = [1, 2, 3]; // 創(chuàng)建一個(gè)包含三個(gè)數(shù)值的數(shù)組
let myArray = new Array(); // 用構(gòu)造函數(shù)創(chuàng)建一個(gè)空數(shù)組
let myArray = new Array(1, 2, 3); // 用構(gòu)造函數(shù)創(chuàng)建一個(gè)包含三個(gè)數(shù)值的數(shù)組

獲取數(shù)組長度

 let myArray = [1, 2, 3];console.log(myArray.length); // 輸出 3

訪問（遍歷）數(shù)組元素

let myArray = [1, 2, 3];
console.log(myArray[0]); // 輸出 1
console.log(myArray[1]); // 輸出 2
console.log(myArray[2]); // 輸出 3

修改數(shù)組元素

let myArray = [1, 2, 3];
myArray[1] = 4;
console.log(myArray); // 輸出 [1, 4, 3]

刪除數(shù)組元素

let myArray = [1, 2, 3];
delete myArray[1];
console.log(myArray); // 輸出 [1, 3]

數(shù)組尾部添加

let myArray = [1, 2, 3];
myArray.push(4);
console.log(myArray); // 輸出 [1, 2, 3, 4]

數(shù)組尾部刪除

let myArray = [1, 2, 3];
myArray.pop();
console.log(myArray); // 輸出 [1, 2]

includes（）方法

?對于數(shù)組中是否包含某個(gè)元素，我們可以使用 includes() 方法。includes() 方法用于判斷數(shù)組中是否包含某個(gè)指定的元素，如果包含，則方法返回 true，否則返回 false。

以下是 includes() 方法的語法：

 array.includes(searchElement[, fromIndex])

其中：

searchElement：需要查找的元素，必選。fromIndex：可選，從該索引處開始查找元素。如果省略該參數(shù)，則從數(shù)組的頭開始查找。如果 fromIndex 大于或等于數(shù)組長度，則返回 false。

舉例說明

當(dāng)我們使用includes()方法時(shí)，可以通過傳入一個(gè)元素作為參數(shù)來判斷數(shù)組中是否包含該元素。
???第一例：判斷數(shù)組中是否包含某個(gè)數(shù)字

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3)); 
console.log(numbers.includes(6)); 

數(shù)組numbers包含數(shù)字3，因此includes(3)返回true。而數(shù)組numbers不包含數(shù)字6，因此includes(6)返回false。

???第二例：判斷數(shù)組中是否包含某個(gè)字符串

const fruits = ['長生界', '神墓', '遮天'];
console.log(fruits.includes('遮天')); 
console.log(fruits.includes('完美世界')); 

數(shù)組fruits包含字符串’遮天’，因此includes('banana')返回true。而數(shù)組fruits不包含字符串’grape’，因此includes('grape')返回false。

?????第三例：判斷數(shù)組中是否包含某個(gè)對象

const users = [
  { name: '葉天帝', age: 225 },
  { name: '石昊', age: 130 },
  { name: '辰南', age: 135 }
];
const user = { name: '石昊', age: 130 };
console.log(users.includes(user)); // false

數(shù)組users包含了一個(gè)與user對象相等的對象，但返回的卻是false，為什么呢？

這是因?yàn)镴avaScript 中的 includes() 方法用于檢查一個(gè)數(shù)組是否包含某個(gè)特定的元素，它并不適用于檢查對象。因此，在上述代碼中使用 includes() 方法進(jìn)行判斷是不準(zhǔn)確的。
為什么不準(zhǔn)確呢？

因?yàn)?includes() 方法在比較對象時(shí)使用的是嚴(yán)格相等運(yùn)算符（===），而不是按對象屬性逐個(gè)匹配的方式。
如果想要檢查數(shù)組中是否包含某個(gè)對象，可以使用 some() 方法，代碼示例如下：

const users = [
  { name: '葉天帝', age: 225 },
  { name: '石昊', age: 130 },
  { name: '辰南', age: 135 }
];
const user = { name: '石昊', age: 130 };
const isUserIncluded = users.some(u => u.name === user.name && u.age === user.age);
console.log(isUserIncluded); //true

關(guān)鍵點(diǎn)

第一點(diǎn)：includes()方法在比較元素時(shí)使用的是嚴(yán)格相等（===）的方式。

第二點(diǎn)：如果數(shù)組中有多個(gè)相同的元素，includes()方法只會返回第一個(gè)匹配到的元素。

第三點(diǎn)：兼容性：
includes() 方法并不兼容所有的瀏覽器。如果需要在不支持 includes() 方法的瀏覽器中使用該方法，可以使用以下 polyfill 實(shí)現(xiàn)：

if (!Array.prototype.includes) {
    Array.prototype.includes = function(searchElement /*, fromIndex*/ ) {
        'use strict';
        var O = Object(this);
        var len = parseInt(O.length) || 0;
        if (len === 0) {
            return false;
        }
        var n = parseInt(arguments[1]) || 0;
        var k;
        if (n >= 0) {
            k = n;
        } else {
            k = len + n;
            if (k < 0) {
                k = 0;
            }
        }
        while (k < len) {
            var currentElement = O[k];
            if (searchElement === currentElement ||
                (searchElement !== searchElement && currentElement !== currentElement)) {
                return true;
            }
            k++;
        }
        return false;
    };
}

在這個(gè) polyfill 中，Array.prototype.includes() 方法首先通過對象來獲取數(shù)組的長度，并使用 while 循環(huán)來遍歷數(shù)組。如果搜索的元素存在則返回 true，否則返回 false。

總結(jié)

細(xì)節(jié)方面：

• includes() 方法適用于字符串和數(shù)組類型。
• 它可以快速判斷目標(biāo)對象中是否包含指定的元素。
• 在字符串中，它區(qū)分大小寫，如果找到完全匹配的子串，返回 true；否則返回 false。
• 在數(shù)組中，它使用嚴(yán)格相等（===）來匹配元素，如果找到與搜索元素相等的元素，返回 true；否則返回 false。
• 可以通過第二個(gè)參數(shù)來設(shè)置搜索的起始位置或索引。
• includes() 方法在 ES6 中新增，不支持舊版本的瀏覽器，可以使用 polyfill 或轉(zhuǎn)譯工具進(jìn)行兼容處理。

應(yīng)用場景方面：

檢查字符串是否包含特定子串
可以使用 includes() 方法來檢查一個(gè)字符串是否包含了某個(gè)子串。例如，判斷一個(gè)文章內(nèi)容是否包含特定關(guān)鍵字，并根據(jù)結(jié)果進(jìn)行相應(yīng)處理。

檢查數(shù)組是否包含特定元素
可以使用 includes() 方法來檢查一個(gè)數(shù)組中是否包含了某個(gè)特定的元素。例如，在一個(gè)商品列表中，判斷用戶所選商品是否在購物車中存在。

查找文件名的拓展名
在處理文件路徑時(shí)，可以使用 includes() 方法來判斷文件名是否包含特定的拓展名。例如，判斷一個(gè)文件是否為圖片文件（如 .jpg、.png 等），便于后續(xù)的處理。

過濾數(shù)組中的特定元素
利用 includes() 方法可以在數(shù)組中快速過濾掉指定的元素。例如，從一個(gè)任務(wù)列表中排除已完成的任務(wù)，構(gòu)建一個(gè)新的未完成任務(wù)列表。

實(shí)現(xiàn)輸入提示功能
在前端開發(fā)中，可以使用 includes() 方法對用戶的輸入進(jìn)行匹配和過濾，實(shí)現(xiàn)輸入提示或自動(dòng)補(bǔ)全的功能。例如，根據(jù)用戶輸入的關(guān)鍵詞，展示匹配的選項(xiàng)供選擇或顯示相關(guān)提示信息。

快速判斷字符串是否為空或數(shù)組是否為空
通過使用 includes() 方法判斷字符串是否包含空字符串或數(shù)組是否包含元素，可以快速檢測目標(biāo)對象是否為空。

到此這篇關(guān)于js數(shù)組高階函數(shù)——includes()方法的文章就介紹到這了,更多相關(guān)js includes()方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論