js indexOf 的正确用法「建议收藏」

js indexOf 的正确用法「建议收藏」indexOf在js中有着重要的作用,可以判断一个元素是否在数组中存在,或者判断一个字符是否在字符串中存在,如果存在返回该元素或字符第一次出现的位置的索引,不存在返回-1。例如vararr=[1,2,3];console.log(arr.indexOf(2));//打印结果为1又或者varstr=”helloworld”;console.log(str.indexOf(“w”));//打印结果为5那么,当想删除某个数组中的某个元素时,常常会这么

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

indexOf在js中有着重要的作用,可以判断一个元素是否在数组中存在,或者判断一个字符是否在字符串中存在,如果存在返回该元素或字符第一次出现的位置的索引,不存在返回-1。

例如

var arr = [1, 2, 3];
console.log(arr.indexOf(2));    //打印结果为1

又或者

var str = "helloworld";
console.log(str.indexOf("w"));  //打印结果为5

那么,当想删除某个数组中的某个元素时,常常会这么写

var arr = [1, 2, 3];
var idx = arr.indexOf(2);
arr.splice(idx,1);
console.log(arr);

但是,indexOf真的就是好东西吗?看下面的代码。

var arr = [{name:"racyily",age:22},{name:"susan",age:18}];
var obj = {name:"susan",age:18};
console.log(arr.indexOf(obj));  //打印结果为-1

我们发现obj和arr数组中第1个元素时一样的。但是却返回-1。

再试试这个

var arr = [{name:"racyily",age:22},{name:"susan",age:18}];
var arr2 = arr[1];
console.log(arr.indexOf(arr2));  //打印结果为1

这下明白了,就是因为如果数组中存放的是对象或者数组的话,必须是该对象的引用,才可以使用indexOf得到正确的索引值。

那么,如果想判断一个对象(数组)在一个数组中是否存在(值与元素相等),如何实现呢?

只能自己写一个方法去实现了。

最初我是这么写的

var myIndexOf = function(arr,el){
    for(var i=0;i<arr.length;i++){
        if(JSON.stringify(arr[i]) == JSON.stringify(el)){
            return i;
        }
    }
    return -1;
}

上面这段代码实现的原理是将数组中的元素和传进去的对象都通过JSON.stringify()来转成字符串,然后比较两个字符串是否相等,

这个方法看起来实现了功能,但是一个深深的坑藏在其中。

因为一旦对象中的字段顺序前后颠倒,就会匹配不到,返回-1(曾经被这个坑深深的伤了心)。

那么到底怎么规避这样的问题呢,从原理上来说,就是挨个比较对象里每个元素是否都相等。

看下面代码

//查找一个对象(数组)是否存在于一个数组中
function myIndexOf(arr, el) {
    var result = false;
    if (arr instanceof Array && el instanceof Object) {
        for (var i in arr) {
            if(checkLen(arr[i],el)){
                result = recursiveFunc(arr[i], el);
            }
            if (result) {
                return i;
            }
        }
        return -1;
    }
    return -1;
}

//递归调用比较对象每个字段
var recursiveFunc = function (arr, o) {
    var result = false;
    if (o instanceof Object) {
        if (!(arr instanceof Object)) {
            return false;
        }
        for (var p in arr) {
            if(checkLen(arr[p],o[p])){
                result = recursiveFunc(arr[p], o[p]);
                if (!result) {
                    return false;
                }
            }
        }
        return true;
    }
    else {
        if (arr == o) {
            return true;
        }
        return false;
    }
}

//判断两个对象长度是否相同。
var checkLen = function (o1, o2) {
    var count1 = 0,
        count2 = 0;
    if(o1 instanceof Object && o2 instanceof Object){
        for(var i in o1){
            count1++;
        }
        for(var p in o2){
            count2++;
        }
    }
    return count1==count2;
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/158312.html原文链接:https://javaforall.net

(0)
上一篇 2022年7月26日 下午9:00
下一篇 2022年7月26日 下午9:00


相关推荐

  • java sortedset_Java集合 TreeSet和SortedSet

    java sortedset_Java集合 TreeSet和SortedSet一 TreeSetTreeS 是集合的一种 与 HashSet 不同的是他是有序的 也就是说 TreeSet 中的数据是有序不重复的 TreeSet 实现了 SortedSet 这个接口 由于 TreeSet 是 SortedSet 的一个子类 因此 TreeSet 具有 SortedSet 的所公共方法 具体案例详情见 SortedSet 二 SortedSetSor 是一个有序的接口 集合内元素有 2 种排序

    2026年3月26日
    3
  • xinetd完全向导

    xinetd完全向导1 什么是 xinetd 大家对被称作超级服务器的 Inetd 一定很熟悉 其实现控制对主机网络连接 当一个请求到达由 Inetd 管理的服务端口 Inetd 将该请求转发给名为 tcpd 的程序 Tcpd 根据配置文件 hosts allow deny 来判断是否允许服务该请求 如果请求被允许则相应的服务器程序 如 ftpd telnetd 将被启动 这个机制也被称作 tcp wrapper xi

    2026年3月19日
    2
  • LAN8720A网络模块关于时钟的使用问题「建议收藏」

    LAN8720A网络模块关于时钟的使用问题「建议收藏」微雪的LAN8720A驱动电路:正点原子LAN8720A驱动电路:1、nINTSELConfiguration从原理图中可以看出正点原子的LAN8720A模块所使用的晶振是25M,而微雪的LAN8720A模块使用的晶振是50M,根据数据手册和结合原理图可以看出,微雪的LAN8720A的nINTSEL没有接下拉,则是默认使用内部上拉到高电平,即nINTSEL=1,为REF_CLKInMode模式,所以选用50M的晶振。…

    2022年6月22日
    156
  • android更新ui的方式_android ui界面模板

    android更新ui的方式_android ui界面模板该楼层疑似违规已被系统折叠隐藏此楼查看此楼1.status_bar_latest_event.xml的修改:源代码:xmlns:android=”http://schemas.android.com/apk/res/android”>1.通知条目高度的修改:上面的65.0sp和64.0sp就是高度2.通知条目下面一般都有一条白线,透明方法:①drawable-mdpi文件夹内divid…

    2026年1月17日
    4
  • python constants_Python constants.SUCCESS属性代码示例

    python constants_Python constants.SUCCESS属性代码示例本文整理汇总了 Python 中 django contrib messages constants SUCCESS 属性的典型用法代码示例 如果您正苦于以下问题 Pythonconsta SUCCESS 属性的具体用法 Pythonconsta SUCCESS 怎么用 Pythonconsta SUCCESS 使用的例子 那么恭喜您 这里精选的属性代码示例或许可以为您提供帮助 您也可

    2026年3月17日
    2
  • python中divmod函数的用法

    python中divmod函数的用法divmod 函数把除数和余数运算结果结合起来 返回一个包含商和余数的元组 divmod 是内置函数 不需要导入 可以直接使用 gt gt gt divmod 7 2 3 1 gt gt gt divmod 9 2 5 3 0 1 5 实际应用时可以这么写 carry remainder div

    2026年3月20日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号