数组方法之includes(写出我的myIncludes)

数组方法之includes(写出我的myIncludes)

首先,includes()方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

先来简单的使用一下include()方法

var arr = [10,20,30,40,50];
arr.includes(10);  //true

当传入俩个参数的参数

var arr = [10,20,30,40,50];
arr.includes(10,1);  //false

竟然变成false了

那么先介绍一下对于include()方法的解释

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

语法:

arr.includes(searchElement)
arr.includes(searchElement, fromIndex)

参数说明:

searchElement   //必须。需要查找的元素值。
fromIndex      // 可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始                   搜索。默认为 0。

返回值

布尔值。如果找到指定值返回 true，否则返回 false。

好了,解释完毕,那么再次看看上面的俩道题

var arr = [10,20,30,40,50];
arr.includes(10);  //true
arr.includes(10,1);  //false

第一题,因为并没有给定第二个参数,参数默认为0索引开始查询,所以查找结果为true;

第二题,因为给定了第二个参数1 ,所以查询从1开始,所以查找结果为false;

理解了includes,那我们继续用一些特殊值来看看includes

var arr = [1,'1',true,undefined,NaN,null,function a(){},[1,2,3,4],{a:123},] 
arr.includes(1); //true
arr.includes("1"); //true
arr.includes(true); //true
arr.includes(undefined); //true
arr.includes(NaN); //true
arr.includes(null); //true
arr.includes(function a(){}); //false
arr.includes([1,2,3,4]);//false
arr.includes({a:123}); //false

从上面例子可以知道

includes()方法并不支持对引用类型的查询

下面来继续探讨includes()方法–当第二个参数为负数的时候

从参数说明哪里我们知道

当fromIndex 参数负值，则按升序从 array.length + fromIndex 的索引开始 搜索

var arr = [1,2,3,4];
arr.includes(1,-1); //false
arr.includes(2,-4); //true

可知arr.length = 4

那么第一题其实就是: **arr.includes(1,4+(-1) ) => arr.includes(1,3) ** 也就是从索引3开始,所以没有找到元素

第二题: arr.includes(2,4+(-4)) => arr.includes(2,0) 也就是从索引0开始,所以找到元素了

了解了上面这些我们开始试着写下我们的myIncludes()方法吧;

/**
 * includes()方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
 * @param {*} searchElement  必须。需要查找的元素值。
 * @param {*} fromIndex 可选。从该索引处开始查找item。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
 * @returns 
 */
Array.prototype.myIncludes = function (searchElement, fromIndex = 0) {
   
    //判断第二个参数是否为负数 
    if(fromIndex<0){
        fromIndex = this.length + fromIndex;
    }
    //循环判断是否找到查询元素
    for (var i = fromIndex; i < this.length; i++) {
        
        if (this[i] === searchElement) {
            return true;
        }
    }
    //循环过后完全没匹配到
    return false;

}

已经完成了我们的myIncludes()方法了

我们试着去使用它来做前面的例子

var arr = [10,20,30,40,50];
arr.myIncludes(10);  //true
arr.myIncludes(10,1);  //false

var arr = [1,'1',true,undefined,NaN,null,function a(){},[1,2,3,4],{a:123},] 
arr.myIncludes(1); //true
arr.myIncludes("1"); //true
arr.myIncludes(true); //true
arr.myIncludes(undefined); //true
arr.myIncludes(NaN); //false
arr.myIncludes(null); //true
arr.myIncludes(function a(){}); //false
arr.myIncludes([1,2,3,4]);//false
arr.myIncludes({a:123}); //false

好家伙 **arr.myIncludes(NaN)**这个竟然变成了false了,竟然是什么原因?

看下我们的myIncludes()方法第一版,我们使用全等**===来判断NaN,当然是false啦*(NaN ! == NaN) **

下面第二版本myIncludes()方法,去处理NaN

/**
 * includes()方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
 * @param {*} searchElement  必须。需要查找的元素值。
 * @param {*} fromIndex 可选。从该索引处开始查找item。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
 * @returns 
 */
Array.prototype.myIncludes = function (searchElement, fromIndex = 0) {
   
    //判断第二个参数是否为负数 
    if(fromIndex<0){
        fromIndex = this.length + fromIndex;
    }
    //循环判断是否找到查询元素
    for (var i = fromIndex; i < this.length; i++) {
        
        if (Object.is(this[i],searchElement)) {
            return true;
        }
    }
    //循环过后完全没匹配到
    return false;

}

使用了Object.is()方法来解决了NaN的问题

myIncludes()方法就实现到这里了

有错望提及,感谢有你!!!