Array.prototype.includes() 原型调用用法案例讲解

简介: Array.prototype.includes() 原型调用用法案例讲解

官方示例如下:

let passed = 0;
const result = [].includes.call({
    get "0"() {
        passed = NaN;
        return 'foo';
    },
    get "11"() {
        passed += 1;
        return 0;
    },
    get "19"() {
        passed += 1;
        return 'foo';
    },
    get "21"() {
        passed = NaN;
        return 'foo';
    },
    get length() {
        passed += 1;
        return 24;
    }
}, 'foo', 6)
console.log(result) //  true
console.log(passed) // 3


我们不妨先更改一下这个案例,加一下日志,更改如下

let passed = 0;
const result = [].includes.call({
    get "0"() {
        console.log(1);
        passed = NaN;
        return 'foo';
    },
    get "11"() {
        console.log(2);
        passed += 1;
        return 0;
    },
    get "21"() {
        console.log(4);
        passed = NaN;
        return 'foo';
    },
    get "19"() {
        console.log(3);
        passed += 1;
        return 'foo';
    },
    get length() {
        console.log(5);
        passed += 1;
        return 24;
    }
}, 'foo', 6)
console.log(result)
console.log(passed)
// 输出如下:
// 5
// 2
// 3
// true
// 3


那么,可以知道,最开始是调用了 length ,之后依次是 11 , 19 , 21


首先看一下 call() 方法的第二个参数 'foo' ,这个是用来匹配的,很好理解。主要是第三个参数 6 ,这个参数是用来排序并按顺序迭代用的,可以看到并没有调用 0 ,因为 06 小,然后按照数字排序顺序(不是属性定义顺序)来迭代查找 foo 值。可以尝试一下去掉参数 6 会得到什么样的结果,对比有参数时有何不同,加深理解。

目录
相关文章
|
设计模式
ES6中新增Array.from()函数的用法详解
ES6中新增Array.from()函数的用法详解
285 1
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
JSON 前端开发 API
多维数组操作,不要再用遍历循环foreach了!来试试数组展平的小妙招!array.flat()用法与array.flatMap() 用法及二者差异详解
理论上array.flat()能做的事情,array.flatMap()都可以做,但是array.flat()更简单,占用内存更少,执行更快。 这个相对冷门一些,w3school上都没有相关教程,看到就是赚到,收藏就是财富! 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助
|
Python
Numpy学习笔记(一):array()、range()、arange()用法
这篇文章是关于NumPy库中array()、range()和arange()函数的用法和区别的介绍。
1195 6
Numpy学习笔记(一):array()、range()、arange()用法
|
JSON 数据格式 C++
C++ JSON库 nlohmann::basic_json::array 的用法
C++ JSON库 nlohmann::basic_json::array 的用法
1759 1
|
存储 容器
2023-3-3-std::array的用法
2023-3-3-std::array的用法
400 0
|
C++ 容器
论c++中的数组,vector和array的区别及用法
论c++中的数组,vector和array的区别及用法
524 0
|
编译器 C语言
【C 语言】数组 ( 数组取值操作 | array[i][j] 用法 等价于 *( *(array = i) + j ) 用法 | 下标操作到指针操作演化过程 )
【C 语言】数组 ( 数组取值操作 | array[i][j] 用法 等价于 *( *(array = i) + j ) 用法 | 下标操作到指针操作演化过程 )
458 0

热门文章

最新文章

  • 1
    PHP 数组查找:为什么 `isset()` 比 `in_array()` 快得多?
    288
  • 2
    Java 中数组Array和列表List的转换
    1024
  • 3
    JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
    734
  • 4
    通过array.reduce()实现数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式、聚合统计、处理树结构数据和性能优化,reduce()的使用详解(附实际应用代码)
    1564
  • 5
    通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
    680
  • 6
    通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
    480
  • 7
    多维数组操作,不要再用遍历循环foreach了!来试试数组展平的小妙招!array.flat()用法与array.flatMap() 用法及二者差异详解
    324
  • 8
    别再用双层遍历循环来做新旧数组对比,寻找新增元素了!使用array.includes和Set来提升代码可读性
    322
  • 9
    Array.forEach实战详解:简化循环与增强代码可读性;Array.forEach怎么用;面对大量数据时怎么提高Array.forEach的性能
    200
  • 10
    深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
    776