js數(shù)組高階函數(shù)includes()方法使用示例

更新時間：2025年06月03日 08:36:50 作者：普通網(wǎng)友

這篇文章主要介紹了js數(shù)組高階函數(shù)includes()方法使用的相關(guān)資料,includes()方法用于判斷數(shù)組是否包含指定元素,返回布爾值,區(qū)分大小寫,需要的朋友可以參考下

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

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

let myArray = []; // 創(chuàng)建一個空數(shù)組
let myArray = [1, 2, 3]; // 創(chuàng)建一個包含三個數(shù)值的數(shù)組
let myArray = new Array(); // 用構(gòu)造函數(shù)創(chuàng)建一個空數(shù)組
let myArray = new Array(1, 2, 3); // 用構(gòu)造函數(shù)創(chuàng)建一個包含三個數(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ù)組中是否包含某個元素，我們可以使用 includes() 方法。includes() 方法用于判斷數(shù)組中是否包含某個指定的元素，如果包含，則方法返回 true，否則返回 false。

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

 array.includes(searchElement[, fromIndex])

其中：

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

舉例說明

當我們使用includes()方法時，可以通過傳入一個元素作為參數(shù)來判斷數(shù)組中是否包含該元素。
???第一例：判斷數(shù)組中是否包含某個數(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ù)組中是否包含某個字符串

const fruits = ['長生界', '神墓', '遮天'];

console.log(fruits.includes('遮天')); 
console.log(fruits.includes('完美世界'));

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

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

const users = [
  { name: '葉天帝', age: 225 },
  { name: '石昊', age: 130 },
  { name: '辰南', age: 135 }
];

const user = { name: '石昊', age: 130 };

console.log(users.includes(user)); // false

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

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

因為 includes() 方法在比較對象時使用的是嚴格相等運算符（===），而不是按對象屬性逐個匹配的方式。
如果想要檢查數(shù)組中是否包含某個對象，可以使用 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)鍵點

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

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

第三點：兼容性：includes() 方法并不兼容所有的瀏覽器。如果需要在不支持 includes() 方法的瀏覽器中使用該方法，可以使用以下 polyfill 實現(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;
    };
}

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

總結(jié)

細節(jié)方面：

includes() 方法適用于字符串和數(shù)組類型。
它可以快速判斷目標對象中是否包含指定的元素。
在字符串中，它區(qū)分大小寫，如果找到完全匹配的子串，返回 true；否則返回 false。

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

您可能感興趣的文章: