0

0

JavaScript学习笔记:数组(六)_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-21 08:55:21

|

1214人浏览过

|

来源于php中文网

原创

众所都之,数组项在一个数组中都有自己的位置。在javascript中提供了两个确定数组项位置的方法: indexof() 和 lastindexof() 。今天我们主要一起学习这两个方法是如何使用,又是如何查找出数组项在数组中的确切位置。

indexOf() 方法

indexOf() 方法从数组的开头(位置为 0 )开始向后查询。 indexOf() 方法返回指定数组项在数组中找到的第一索引值。如果通过 indexOf() 查找指定的数组项在数组中不存在,那么返回的值会是 -1 。

语法

indexOf() 使用的语法非常的简单:

arr.indexOf(searchElement[, fromIndex = 0])
  • searchElement : 是指定要查找的数组项
  • fromIndex : 开始查找的位置。

如果该索引值( fromIndex )大于或等于数组长度( length ),意味着不会在数组里查找,返回 -1 。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即 -1 表示从最后一个元素开始查找, -2 表示从倒数第二个元素开始查找 ,以此类推。

注意:如果参数中提供的索引值是一个负值,仍然从前向后查询数组。如果抵消后的索引值仍小于 0 ,则整个数组都将会被查询。其默认值为 0 。

立即学习Java免费学习笔记(深入)”;

示例

一起来看看使用示例:

var arr = [0,1,2,3,4,5,6,5,4,3,2,1,0];console.log(arr.length); // 13arr.indexOf(2); // 2arr.indexOf(7); // -1arr.indexOf(9, 2); // -1arr.indexOf(2, -1); // -1arr.indexOf(2, -3); // 10

来看看相关的位置示意图:

arr.indexOf(2)

arr.indexOf(2) 表示的是从数组 arr 第 0 索引值开始查找第一个数组项 2 ,并且返回其在数组中对应的索引值:

arr.indexOf(7)

arr.indexOf(7) 其要在数组确定数组项 7 的索引值,但整个数组 arr 并没有数组项 7 的存在,如此一来, indexOf() 方法在 arr 数组中找不到数组项 7 。这样一来就 arr.indexOf(7) 就会返回的值为 -1 。

arr.indexOf(9, 2)

arr.indexOf(9, 2) 表示从数组 arr 的第 2 个索引值位置开始查找数组项 9 ,但整个数组 arr 中并没有数组项 9 的存在,这样一来, indexOf() 方法在 arr 数组中找不到数组项 9 。那其最后返回的值为 -1 。

arr.indexOf(2, -1)

arr.indexOf(2, -1) 表示的是从数组 arr 最后一个(相当于 arr.length - 1 ,也就是 12 )开始查找数组项第一个 2 。如果不存在将返回 -1 。

arr.indexOf(2, -3)

arr.indexOf(2, -3) 表示从数组 arr 倒数的第 3 个索引值(相当于 arr.length-3 ,也就是 10 )开始查找数组项中第一个 2 。在这个示例中将返回的值为 10 。

从上面的示例可以告诉我们,如果 indexOf() 返回的值为 -1 时,就可以轻松的判断这个数组项是否在数组中存在。比如:

var arr = ['a','b','c'];function arrIndexOf (arrayItems, arrayItem) {    if (arrayItems.indexOf(arrayItem) === -1) {        console.log(arrayItem + '不在[' + arrayItems + ']数组中');    }    else if (arrayItems.indexOf(arrayItem) > -1){        console.log(arrayItem + '在[' + arrayItems + ']数组中的索引值是:' + arrayItems.indexOf(arrayItem));    }}arrIndexOf(arr, 'c'); // c在[a,b,c]数组中的索引值是:2arrIndexOf(arr, 'd'); //d不在[a,b,c]数组中

兼容性处理

值得注意的是 indexOf() 方法并不是所有浏览器都支持(IE9+、Firefox2+、Safari 3+、Opera 9.5+和Chrome)。如果希望在能更好的让浏览器支持 indexOf() 方法,你可以在你的代码顶部添加下面的这部分代码:

if (!Array.prototype.indexOf) {    Array.prototype.indexOf = function(elt /*, from*/) {        var len = this.length;        var from = Number(arguments[1]) || 0;        from = (from < 0) ? Math.ceil(from) : Math.floor(from);        if (from < 0) {            from += len;            for (; from < len; from++) {                if (from in this && this[from] === elt) {                    return from;                }            }            return -1;        };    }  }

lastIndexOf() 方法

lastIndexOf() 方法和 indexOf() 刚好相反,从一个数组中末尾向前查找数组项,并且返回数组项在数组中的索引值,如果不存在,则返回的值是 -1 。

大同搜索
大同搜索

多语言高质量的AI搜索

下载

语法

lastIndexOf() 方法的语法规则如下:

arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1])
  • searchElement :需要查找的数组项
  • fromIndex : 从数组的末尾开始向前查找,默认值为 arr.length -

和 indexOf() 方法一样,如果 fromIndex 值大于或等于数组的长度( arr.length ),则整个数组会被查找。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即 -1 表示从最后一个元素开始查找, -2 表示从倒数第二个元素开始查找 ,以此类推。另外,如果该值为负时,其绝对值大于数组长度,则方法返回 -1 ,即数组不会被查找。如果值为正数,表示的是数组中对应的位置,向数组前查找。

示例

一起来看看 lastIndexOf() 方法的使用示例:

var arr = [0,1,2,3,4,5,6,5,4,3,2,1,0];console.log(arr.length); // 13arr.lastIndexOf(2); // 10arr.lastIndexOf(7); // -1arr.lastIndexOf(9, 2); // -1arr.lastIndexOf(4,9); // 8arr.lastIndexOf(2, -1); // 10

来看看相关的位置示意图:

arr.lastIndexOf(2)

arr.lastIndexOf(2) 表示从数组 arr 末尾( arr.length - 1 )向前查找数组项 2 的索引值。将返回的索引值为 10 :

arr.lastIndexOf(7)

arr.lastIndexOf(7) 表示从数组 arr 末尾( arr.length - 1 )向前查找数组项 7 的索引值。由于整个数组 arr 都没有数组项 7 ,因此其将返回的值为 -1 :

arr.lastIndexOf(9, 2)

arr.lastIndexOf(9, 2) 表示从数组 arr 倒数第二位向前查找数组项 9 的索引值。由于整个数组 arr 都没有数组项 9 ,因此其将返回的值为 -1 :

arr.lastIndexOf(4,9)

arr.lastIndexOf(4,9) 表示从数组 arr 索值值为 9 的位置查找第一个数组项为 4 。其返回的值为 8 :

arr.lastIndexOf(2, -1)

arr.lastIndexOf(2, -1) 表示的从数组 arr 倒数第一个位置向前查找第一个数组项 2 ,其返回的值``:

使用 lastIndexOf() 方法查找一个数组项时,如果数组项不在数组中时,其返回的值同样为 -1 。如此一来,也可以像使用 indexOf() 方法一样, lastIndexOf() 可以用来判断数组项是不是在数组中:

var arr = ['a','b','c'];function arrLastIndexOf (arrayItems, arrayItem) {    if (arrayItems.lastIndexOf(arrayItem) === -1) {        console.log(arrayItem + '不在[' + arrayItems + ']数组中');    }    else if (arrayItems.lastIndexOf(arrayItem) > -1){        console.log(arrayItem + '在[' + arrayItems + ']数组中的索引值是:' + arrayItems.lastIndexOf(arrayItem));    }}arrIndexOf(arr, 'c'); // c在[a,b,c]数组中的索引值是:2arrIndexOf(arr, 'd'); //d不在[a,b,c]数组中

兼容性处理

还有 lastIndexOf() 也只在IE9+、Firefox2+、Safari 3+、Opera 9.5+和Chrome得到支持,如果希望自己的代码更健壮,在使用 lastIndexOf() 方法的前面需要添加下面的代码:

if (!Array.prototype.lastIndexOf) {    Array.prototype.lastIndexOf = function(elt /*, from*/) {        var len = this.length;        var from = Number(arguments[1]);        if (isNaN(from)) {            from = len - 1;        } else {            from = (from < 0) ? Math.ceil(from) : Math.floor(from);            if (from < 0) {                from += len;            } else if (from >= len){                from = len - 1;            }        }        for (; from > -1; from--) {            if (from in this && this[from] === elt) {                return from;            }        }        return -1;    };}

总结

indexOf() 和 lastIndexOf() 两个方法都是用来查找数组项在一个数组中的索引值,其中 indexOf() 是从前向后寻找,而 lastIndexOf() 是从后向前寻找。如果数组项不在数组中,返回的值为 -1 。这样一来,可以使用 indexOf() 或 lastIndexOf() 的值是否全等于( === ) -1 来做判断。

初学者学习笔记,如有不对,还希望高手指点。如有造成误解,还希望多多谅解。

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3:核心技术与案例实战 》。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Python 序列化
Python 序列化

本专题整合了python序列化、反序列化相关内容,阅读专题下面的文章了解更多详细内容。

12

2026.02.02

AO3官网入口与中文阅读设置 AO3网页版使用与访问
AO3官网入口与中文阅读设置 AO3网页版使用与访问

本专题围绕 Archive of Our Own(AO3)官网入口展开,系统整理 AO3 最新可用官网地址、网页版访问方式、正确打开链接的方法,并详细讲解 AO3 中文界面设置、阅读语言切换及基础使用流程,帮助用户稳定访问 AO3 官网,高效完成中文阅读与作品浏览。

200

2026.02.02

主流快递单号查询入口 实时物流进度一站式追踪专题
主流快递单号查询入口 实时物流进度一站式追踪专题

本专题聚合极兔快递、京东快递、中通快递、圆通快递、韵达快递等主流物流平台的单号查询与运单追踪内容,重点解决单号查询、手机号查物流、官网入口直达、包裹进度实时追踪等高频问题,帮助用户快速获取最新物流状态,提升查件效率与使用体验。

98

2026.02.02

Golang WebAssembly(WASM)开发入门
Golang WebAssembly(WASM)开发入门

本专题系统讲解 Golang 在 WebAssembly(WASM)开发中的实践方法,涵盖 WASM 基础原理、Go 编译到 WASM 的流程、与 JavaScript 的交互方式、性能与体积优化,以及典型应用场景(如前端计算、跨平台模块)。帮助开发者掌握 Go 在新一代 Web 技术栈中的应用能力。

15

2026.02.02

PHP Swoole 高性能服务开发
PHP Swoole 高性能服务开发

本专题聚焦 PHP Swoole 扩展在高性能服务端开发中的应用,系统讲解协程模型、异步IO、TCP/HTTP/WebSocket服务器、进程与任务管理、常驻内存架构设计。通过实战案例,帮助开发者掌握 使用 PHP 构建高并发、低延迟服务端应用的工程化能力。

16

2026.02.02

Java JNI 与本地代码交互实战
Java JNI 与本地代码交互实战

本专题系统讲解 Java 通过 JNI 调用 C/C++ 本地代码的核心机制,涵盖 JNI 基本原理、数据类型映射、内存管理、异常处理、性能优化策略以及典型应用场景(如高性能计算、底层库封装)。通过实战示例,帮助开发者掌握 Java 与本地代码混合开发的完整流程。

9

2026.02.02

go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

62

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

56

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

28

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 8.7万人学习

Javascript趣味课堂
Javascript趣味课堂

共49课时 | 11.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号