js数组高阶函数——includes()方法

js数组高阶函数——includes方法

  • 前言
  • 数组的一般化操作
    • 创建数组
    • 获取数组长度
    • 访问(遍历)数组元素
    • 修改数组元素
    • 删除数组元素
    • 数组尾部添加
    • 数组尾部删除
  • 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)); 

js数组高阶函数——includes()方法_第1张图片

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


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

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

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

js数组高阶函数——includes()方法_第2张图片

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


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

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

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

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

js数组高阶函数——includes()方法_第3张图片

数组users包含一个与user对象相等的对象,因此includes(user)返回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。


你可能感兴趣的:(vue,javascript,前端,开发语言,vue.js,react.js)