快捷導(dǎo)航

js數(shù)組高階函數(shù)之includes()方法總結(jié)

更新時間：2023年12月06日 14:52:02 作者：小貓娃來啦

JS的數(shù)組是一種特殊的對象,其特點是在值的列表中按照順序存放值,在 JS中,數(shù)組是由中括號 [] 括起來的數(shù)值序列,本篇文章給大家介紹js數(shù)組高階函數(shù)——includes()方法,感興趣的朋友一起看看吧

前言

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

數(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。

舉例說明

當(dāng)我們使用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() 方法進(jìn)行判斷是不準(zhǔn)確的。
為什么不準(zhǔn)確呢？

因為 includes() 方法在比較對象時使用的是嚴(yán)格相等運算符（===），而不是按對象屬性逐個匹配的方式。
如果想要檢查數(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()方法在比較元素時使用的是嚴(yán)格相等（===）的方式。

第二點：如果數(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。