zoukankan      html  css  js  c++  java
  • ES7中的includes

    ES7中的includes

      在ES7中,数组方法includes被提出,这个方法被提出的考虑是,在开发过程中,indexOf方法其实处于一个很尴尬的地位,indexOf接受一个参数,返回当前的被查询元素在数组中的位置,不存在时返回-1。我们的工程师使用这个方法的时候不能直接使返回值转布尔值这样判断,经常写一些额外的检查语句,比如arr.indexOf(1) > -1

    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    if (arr.indexOf(1)) {
        console.log('存在');
    }
    if(arr.indexOf(1) > -1){
        console.log('存在'); // 存在
    }
    

      甚至在数组中存在NaN的时候,这个方法也会失效

    var arr = [1, 2, 3, 4, 5, NaN, 7, 8, 9];
    console.log(arr.indexOf(NaN)); // -1, 这里我们预期的输出是5
    

      所以ES7提出了这个includes函数,这个函数可以接收两个参数,第一个参数是想查询的参数。第二个参数是数字类型,代表索引,如果这个参数大于等于数组的长度,则会返回 false,且该数组不会被搜索。如果这个参数为小于零,则需要对这个参数进行计算(数组长度 + 索引参数),如果计算出的结果小于零,则整个数组都会被搜索。

      由于是ES7,所以部分项目是需要对其进行babelES5代码的,事实上很多的JavaScript库都已经做到了这一点,但是我们希望能自己写一次,也让自己对于这块的理念思想有些自己的体验。

    我做的兼容代码如下,注释也尽量详细了,希望对大家有所帮助,谢谢

    // 判断你的环境是否支持includes方法。若想测试你的代码,可删除此外层判断
    if (!Array.prototype.includes) {
        /**
         * 给数组原型链绑定原型方法includes
         **/
        Object.defineProperty(Array.prototype, 'includes', {
            value: function (findAttr, fromIndex) {
    
                // this为null时报错。undefined不用考虑,当this为undefined时,在调用之前就应该报错了。
                if (this === null) {
                    throw new TypeError('"this" is null or not defined');
                }
    
                // 一定是数组,不然不会进入这个方法,所以可以不用类型判断
                var parArr = Object(this);
                // 数组长度
                var len = parArr.length;
    
                // 若数组为空,直接返回false
                if (!len) {
                    return false;
                }
    
                // 索引
                var n = fromIndex || 0;
                // 当n为小数的时候,n为数组长度加上n,若计算出的数字小于0,会遍历整个数组,所以最小由0表示即可
                n = Math.max(n >= 0 ? n : len + n, 0);
    
                // 若数组为空,直接返回false
                if (n >= len) {
                    return false;
                }
    
                // 对比函数
                function compare(x, y) {
                    // NaN的原型是Number,但是 NaN === NaN => false
                    return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
                }
    
                // n代表需要查找的数组起点位置,左闭右开
                while (n < len) {
                    // 判断是否相等
                    if (compare(findAttr, parArr[n++])) {
                        return true;
                    }
                }
                return false;
            },
        })
    }
    
  • 相关阅读:
    LintCode Python 简单级题目 488.快乐数
    LintCode Python 简单级题目 100.删除排序数组中的重复数字 101.删除排序数组中的重复数字II
    LintCode Python 简单级题目 373.奇偶分割数组
    LintCode Python 简单级题目 39.恢复旋转排序数组
    LintCode Python 简单级题目 35.翻转链表
    LintCode Python 简单级题目 451.两两交换链表中的节点
    LintCode Python 简单级题目 174.删除链表中倒数第n个节点
    aws查看官方centos镜像imageid
    linux shell脚本查找重复行/查找非重复行/去除重复行/重复行统计
    php配置优化-生产环境应用版
  • 原文地址:https://www.cnblogs.com/JobsOfferings/p/JS_Array_includes.html
Copyright © 2011-2022 走看看