对应indexOf这个方法,在日常开发中比较常见的应该是String.prototype.indexOf()方法,Array.prototype.indexOf()方法和其有很大的相似性,本文不想去描述其的基本用法,而是去探究在使用中需要考虑的一些问题。

一、性能

在数组元素少的情况下,我们虽然只是跳过一个元素来检索,性能微不足道,但是当我们正在处理数以千计的元素,如果使用indexOf()的第二个参数,你可能获得性能上的显著提升。

二、全等(===)

indexOf方法使用全等(===)来判断一个元素是否符合您的搜索。搜索字符串及数字可能没有问题,但是搜索对象和数组可能会有问题,看下面一个实例:

var arr = [{
"name": "Benjamin",
"blog": "http://www.zuojj.com"
},{
"name": "John",
"blog": "http://www.john.com"
}],
index = arr.indexOf({
"name": "Benjamin",
"blog": "http://www.zuojj.com"
}); //Outputs: -1
console.log(index);

实例输出结果为-1,为什么?其实就是判断两个对象是否相等的问题,在本专题中,写过一篇文章Javascript 判断对象是否相等,大家可以看看。我们可以判断两个对象的属性和值是否相等,但是不等判断两个对象是否相等,除非它们指向相同的地址。 修改上例,可以得到我们期望的结果:

var e1 = {
"name": "Benjamin",
"blog": "http://www.zuojj.com"
},
e2 = {
"name": "John",
"blog": "http://www.john.com"
},
arr = [e1, e2],
index = arr.indexOf(e1); //Outputs: 0
console.log(index);

三、兼容性

Array.prototype.indexOf()方法是在ES5规范中添加的,同filter/every/some/reduce/map等方法一样,在IE8及以下浏览器不支持,可以使用下面的Polyfill或者一些封装库Underscore or Lo-Dash来兼容。

Array.prototype.indexOf = Array.prototype.indexOf || function (searchElement, fromIndex) {
if ( this === undefined || this === null ) {
throw new TypeError( '"this" is null or not defined' );
} var length = this.length >>> 0; // Hack to convert object.length to a UInt32 fromIndex = +fromIndex || 0; if (Math.abs(fromIndex) === Infinity) {
fromIndex = 0;
} if (fromIndex < 0) {
fromIndex += length; if (fromIndex < 0) {
fromIndex = 0;
}
} for (; fromIndex < length; fromIndex++) {
if (this[fromIndex] === searchElement) {
return fromIndex;
}
} return -1;
};

使用Array.prototype.indexOf()的几点注意的更多相关文章

  1. [基础] Array.prototype.indexOf()查询方式

    背景 最近在看Redux源码,createStore用于注册一个全局store,其内部维护一个Listeren数组,存放state变化时所有的响应函数. 其中store.subscribe(liste ...

  2. Array.prototype.indexOf

    arr.indexOf(searchElement[, fromIndex = 0]) Array.prototype.indexOf()

  3. 有了 indexOf,为什么 ECMAScript 7 还添加了 Array.prototype.include

    ECMAScript 7 中新增了用于检测数组中是否包含某个元素 Array.prototype.includes() API,想到了 Array 其实有很多相关 API 可以检测到是否包含某个元素, ...

  4. 终于解决了IE8不支持数组的indexOf方法,array的IndexOf方法

    /* 终于解决了IE8不支持数组的indexOf方法 */ if (!Array.prototype.indexOf) { Array.prototype.indexOf = function (el ...

  5. JS Array常用方法indexOf/filter/forEach/map/reduce详解

    Array共有九个方法   Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every Array.protot ...

  6. 为Array 添加indexOf

    为array赋予属性 if (!Array.prototype.indexOf) { Array.prototype.indexOf = function (elt /*, from*/) { var ...

  7. 5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例

    ES5中,一共有9个Array方法 Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every Array.pr ...

  8. 数组方法 Array.prototype

    Object.prototype 数组的值是有序的集合,每一个值叫做元素,每一个元素在数组中都有数字位置编号,也就是索引,js中数组是弱类型的,数组中可以含有不同类型的元素.数组元素甚至可以是对象或者 ...

  9. [ES2016] Check if an array contains an item using Array.prototype.includes

    We often want to check if an array includes a specific item. It's been common to do this with the Ar ...

随机推荐

  1. nc工具用法

    http://man.linuxde.net/nc_netcat nc命令用法举例 什么是nc

  2. 华为5573+联通4G上网SIM+ROS hap ac-RB962UiGS-5HacT2HnT 上网

    华为5573+联通4G上网SIM+ROS hap ac-RB962UiGS-5HacT2HnT 上网 原理其实是这样的,ROS的USB口连接华为5573: 华为5573看成是一个路由器,他的外网网卡走 ...

  3. 北京师范大学第十六届程序设计竞赛决赛-重现赛-B题

    一.题目链接 https://www.nowcoder.com/acm/contest/117/B 二.题意 给定一组序列$a_1,a_2,\cdots,a_n$,表示初始序列$b_1,b_2,\cd ...

  4. 【失败】CentOS 6.5安装VNCserver 并开启远程桌面

    如果你的centos系统压根就没装CDE.Gnome等桌面,那你先执行这条命令,把GUI环境装上,no GUI no VNC yum -y groupinstall 'GNOME Desktop En ...

  5. springcloud(九) springboot Actuator + admin 监控

    前一章讲的都是Feign项目(调用方)的监控.接下来讲的是服务提供方的监控 一.springboot actuator + springboot admin Spring Boot Admin 是一个 ...

  6. 我的第一个C程序

    // // main.c // one // // Created by Shuang Gai on 2019/1/19. // Copyright © 2019 Shuang Gai. All ri ...

  7. Selenium Webdriver——去哪儿网输入实例

    1.对出发地方和到达地方进行Xpath定位,这里采用了Xpath的text() 函数进行定位 用following::sibling选择当前元素后的兄弟元素,比如出发框的Xpath表达式如下: .// ...

  8. jQuery常用属性方法大全 attr(),val()

    @@@@属性篇: 写作本篇文章的意义:jQuery的教程千千万,却没有英文版的API讲的系统.到位,一些话用中文翻译过来味道就变了,所以我将英文版的API的一些常用的方法单独提出来放在这里,并用自己的 ...

  9. HTML5 APP

    jquery,bootstrap http://www.bcty365.com/content-74-2640-1.html JS运行效率,浏览器 html+js+css3    css3是在css的 ...

  10. IMMDevice::Activate and specifying IID_IBaseFilter as the interface identifier

    Use the IMMDevice pointer to the endpoint returned by the enumeration process to activate the desire ...