js数组高阶函数之includes()方法总结

 更新时间:2023年12月06日 14:52:02   作者:小猫娃来啦  
JS的数组是一种特殊的对象,其特点是在值的列表中按照顺序存放值,在 JS中,数组是由中括号 [] 括起来的数值序列,本篇文章给大家介绍js数组高阶函数——includes()方法,感兴趣的朋友一起看看吧

前言

⭐JS的数组是一种特殊的对象,其特点是在值的列表中按照顺序存放值。JS数组用于存储按照索引顺序排列的数据,例如数字、字符串和对象等。数组是一个类似于列表的高阶对象,它可以存储任何类型的数据,并且具有一些非常有用的方法。其中,includes()方法是其中最常用的之一。
在 JS中,数组是由中括号 [] 括起来的数值序列。数组可以包含不同类型的值,例如数字、字符串、对象等。以下是一些基础的 JS数组操作:

数组的一般化操作

创建数组

let myArray = []; // 创建一个空数组
let myArray = [1, 2, 3]; // 创建一个包含三个数值的数组
let myArray = new Array(); // 用构造函数创建一个空数组
let myArray = new Array(1, 2, 3); // 用构造函数创建一个包含三个数值的数组

获取数组长度

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

访问(遍历)数组元素

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

修改数组元素

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

删除数组元素

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

数组尾部添加

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

数组尾部删除

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

includes()方法

⭐对于数组中是否包含某个元素,我们可以使用 includes() 方法。includes() 方法用于判断数组中是否包含某个指定的元素,如果包含,则方法返回 true,否则返回 false。

以下是 includes() 方法的语法:

 array.includes(searchElement[, fromIndex])

其中:

searchElement:需要查找的元素,必选。fromIndex:可选,从该索引处开始查找元素。如果省略该参数,则从数组的头开始查找。如果 fromIndex 大于或等于数组长度,则返回 false。

举例说明

当我们使用includes()方法时,可以通过传入一个元素作为参数来判断数组中是否包含该元素。
⭐⭐⭐第一例:判断数组中是否包含某个数字

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

在这里插入图片描述

数组numbers包含数字3,因此includes(3)返回true。而数组numbers不包含数字6,因此includes(6)返回false。

⭐⭐⭐第二例:判断数组中是否包含某个字符串

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

在这里插入图片描述

数组fruits包含字符串’遮天’,因此includes('banana')返回true。而数组fruits不包含字符串’grape’,因此includes('grape')返回false。

⭐⭐⭐⭐⭐第三例:判断数组中是否包含某个对象

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

在这里插入图片描述

数组users包含了一个与user对象相等的对象,但返回的却是false,为什么呢?

这是因为JavaScript 中的 includes() 方法用于检查一个数组是否包含某个特定的元素,它并不适用于检查对象。因此,在上述代码中使用 includes() 方法进行判断是不准确的。
为什么不准确呢?

因为 includes() 方法在比较对象时使用的是严格相等运算符(===),而不是按对象属性逐个匹配的方式。
如果想要检查数组中是否包含某个对象,可以使用 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

在这里插入图片描述

关键点

第一点:includes()方法在比较元素时使用的是严格相等(===)的方式。

第二点:如果数组中有多个相同的元素,includes()方法只会返回第一个匹配到的元素。

第三点:兼容性:
includes() 方法并不兼容所有的浏览器。如果需要在不支持 includes() 方法的浏览器中使用该方法,可以使用以下 polyfill 实现:

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() 方法首先通过对象来获取数组的长度,并使用 while 循环来遍历数组。如果搜索的元素存在则返回 true,否则返回 false。

总结

细节方面:

  • includes() 方法适用于字符串和数组类型。
  • 它可以快速判断目标对象中是否包含指定的元素。
  • 在字符串中,它区分大小写,如果找到完全匹配的子串,返回 true;否则返回 false。
  • 在数组中,它使用严格相等(===)来匹配元素,如果找到与搜索元素相等的元素,返回 true;否则返回 false。
  • 可以通过第二个参数来设置搜索的起始位置或索引。
  • includes() 方法在 ES6 中新增,不支持旧版本的浏览器,可以使用 polyfill 或转译工具进行兼容处理。

应用场景方面:

检查字符串是否包含特定子串
可以使用 includes() 方法来检查一个字符串是否包含了某个子串。例如,判断一个文章内容是否包含特定关键字,并根据结果进行相应处理。

检查数组是否包含特定元素
可以使用 includes() 方法来检查一个数组中是否包含了某个特定的元素。例如,在一个商品列表中,判断用户所选商品是否在购物车中存在。

查找文件名的拓展名
在处理文件路径时,可以使用 includes() 方法来判断文件名是否包含特定的拓展名。例如,判断一个文件是否为图片文件(如 .jpg、.png 等),便于后续的处理。

过滤数组中的特定元素
利用 includes() 方法可以在数组中快速过滤掉指定的元素。例如,从一个任务列表中排除已完成的任务,构建一个新的未完成任务列表。

实现输入提示功能
在前端开发中,可以使用 includes() 方法对用户的输入进行匹配和过滤,实现输入提示或自动补全的功能。例如,根据用户输入的关键词,展示匹配的选项供选择或显示相关提示信息。

快速判断字符串是否为空或数组是否为空
通过使用 includes() 方法判断字符串是否包含空字符串或数组是否包含元素,可以快速检测目标对象是否为空。

到此这篇关于js数组高阶函数——includes()方法的文章就介绍到这了,更多相关js includes()方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 邮箱下拉自动填充选择示例代码附图

    邮箱下拉自动填充选择示例代码附图

    这篇文章主要介绍了邮箱下拉自动填充选择的具体实现,需要的朋友可以参考下
    2014-04-04
  • JavaScript中Array功能方法详解

    JavaScript中Array功能方法详解

    Array 对象是前端开发中使用频率最高的数据结构之一,今天我们来复习一下它的几种操作方法,find(),some()和filter(),通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • JavaScript设计模式--简单工厂模式定义与应用案例详解

    JavaScript设计模式--简单工厂模式定义与应用案例详解

    这篇文章主要介绍了JavaScript设计模式--简单工厂模式定义与应用,结合具体案例形式详细分析了JavaScript设计模式中简单工厂模式基本概念、定义、用法与相关注意事项,需要的朋友可以参考下
    2020-05-05
  • 微信小程序实现表单验证提交功能

    微信小程序实现表单验证提交功能

    这篇文章主要为大家详细介绍了微信小程序实现表单验证提交功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 同时使用n个window onload加载实例介绍

    同时使用n个window onload加载实例介绍

    window onload加载多个同时使用,想必有很多人没有用过吧,接下来为大家详细介绍下具体的使用方法,感兴趣的朋友可以参考下
    2013-04-04
  • Js 回车换行处理的办法及replace方法应用

    Js 回车换行处理的办法及replace方法应用

    当我们在文本框里输入文字敲下回车后,希望在提交后网页也显示是换行的效果,可往往并不能如愿以偿啊,实在是愤怒啊自己写了一个回车换行处理的函数,感兴趣的朋友可以了解下啊,希望本文对你有所帮助
    2013-01-01
  • JS动态的把左边列表添加到右边的实现代码(可上下移动)

    JS动态的把左边列表添加到右边的实现代码(可上下移动)

    在javascript前端开发过程中经常见到动态的把左边列表添加到右边,基于js代码怎么实现的呢?今天小编通过本文给大家介绍下js 左边列表添加到右边的实现方法,感兴趣的朋友一起看看吧
    2016-11-11
  • Javascript和jquery在selenium的使用过程

    Javascript和jquery在selenium的使用过程

    这篇文章主要介绍了Javascript和jquery在selenium的使用过程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • 使用JavaScript switch case 另类写法

    使用JavaScript switch case 另类写法

    在JavaScript里,函数(todoA、todoB、todoC)就是对象,“()”的作用就是就是执行函数对象,二者简单地组合一下就能够让代码清晰简洁很多了,何乐不为呢?
    2010-03-03
  • JavaScript canvas实现雪花随机动态飘落

    JavaScript canvas实现雪花随机动态飘落

    这篇文章主要为大家详细介绍了JavaScript canvas实现雪花随机动态飘落,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02

最新评论