开发者社区> yanbigfeg> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【前端】js中数组对象根据内容查找符合的第一个对象

简介: 今天在写一个混合开发版的app,其中一个功能是扫描快递单号,客户要求不能扫描重复的快递单号!所有就验证查出。 首先实现思路就是:        1.定义一个全局数组变量:var nubList = [];        2.进入该扫描页面先查找已扫描的数据。
+关注继续查看

 今天在写一个混合开发版的app,其中一个功能是扫描快递单号,客户要求不能扫描重复的快递单号!所有就验证查出。

首先实现思路就是:

       1.定义一个全局数组变量:var nubList = [];

       2.进入该扫描页面先查找已扫描的数据。

       3.扫描快递单号成功回调里根据当前扫描结果查重。存在择提示已存在。不存在择进行添加快递单列表。

这就是一个简单的实现思路。本篇不是一个什么记录就是一个随笔记录。

以前我查重大多是使用循环进行遍历对比。下面是我这次使用的数组示例find方法。

数组示例find:用于查找数组中第一个符合条件的对象返回。其实实现原来也是每个数组元素对比遍历,这个方法传进去一个回调函数,元素依次调用回调函数(可能看起来爽吧)。

var nubList = [{
expressId: "00001", //快递单号ID
expressNum: "数据1"
},
{
expressId: "00002", //快递单号ID
expressNum: "数据2"
},
{
expressId: "00003", //快递单号ID
expressNum: "数据3"
},
{
expressId: "00004", //快递单号ID
expressNum: "数据4"
},];

//增加单号查重操作
if(nubList.find(function(x) {
return x.expressId == result;
}) != undefined) {
mui.alert("该快件已经录入!", function() {
//重新开启继续扫描
scan.start();
})
return;
}

注意其中nubList.find(function(x) {return x.expressId = result;}) 就是查询结果了。如果查询不到择返回undefined

小技巧: 

最后我在补充几个小方法(从官网看到的比较常用的):

findIndex:查找第一个符合元素的位置(注意是位置不是元素);arr.findIndex(v,index,arr){}

reverse:将数组元素位置倒置。简单来说就是反转一下,第一个成最后一个,最后一个成第一个。

join:将数组连接到一个字符串中。此方法也可以传入分割参数

	var a=["one","two","three"]
	a.join("|");
	//"one|two|three"  结果

splice:在指定位置添加/修改元素;简单理解就是没有就添加,存在就删除替换调。arr.splice(开始位置,移除数目,元素)

push:再远末尾插入元素。

扩展数组根据指定元素删除:

 //扩展数组删除
                                Array.prototype.indexOf = function (val) {
                                    for (var i = 0; i < this.length; i++) {
                                        if (this[i] == val) return i;
                                    }
                                    return -1;
                                };

                                Array.prototype.remove = function (val) {
                                    var index = this.indexOf(val);
                                    if (index > -1) {
                                        this.splice(index, 1);
                                    }
                                };

2018-07-31补充

今天再次使用到这个方法,但是不同的是我需要在ie下进行兼容测试,不幸的是还真的就不通过,提示“对象不支持“find”属性或方法”。不行那就不用吧,我们换个:filter

在数组处理上filter和find实现的功能是类似的。所有如果是在ie下使用请切换成filter方法:nubList.filter(function(x) {return x.expressId = result;}) 

在元素筛选上filter是对自身的查找,find是对子集的查找。例如:

            <div class="css">
                <p class="test">测试1</p>
            </div>
            <div class="test">
                <p >测试2</p>
            </div>

 

然后分别查询:

filter=>$("div").filter(".test") 输出结果是:“<p >测试2</p>”

find=>$("div").filter(".test") 输出结果是:测试1

 

作者:YanBigFeg —— 颜秉锋

出处:http://www.cnblogs.com/yanbigfeg

本文版权归作者和博客园共有,欢迎转载,转载请标明出处。如果您觉得本篇博文对您有所收获,觉得小弟还算用心,请点击右下角的 [推荐],谢谢!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JS中数组随机排序实现(原地算法sort/shuffle算法)
JS中数组随机排序实现(原地算法sort/shuffle算法)
0 0
JS如何去除数组中相同的数值
JS如何去除数组中相同的数值
0 0
浅谈四种JS数组循环
浅谈四种JS数组循环
0 0
JS流程控制的三种分支、三种循环以及数组的底层原理
JS流程控制的三种分支、三种循环以及数组的底层原理
0 0
JavaScript 数组对象去重的几种方法
JavaScript 数组对象去重的几种方法
0 0
JavaScript 数组(array)reduce方法详解
JavaScript 数组(array)reduce方法详解
0 0
JavaScript中 数组迭代(遍历)的几种方法
JavaScript中 数组迭代(遍历)的几种方法
0 0
JavaScript中 拼接数组的几种方法
JavaScript中 拼接数组的几种方法
0 0
JavaScript中 判断数组的几种方法详解
JavaScript中 判断数组的几种方法详解
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JS 语言在引擎级别的执行过程
立即下载
Python第五讲——关于爬虫如何做js逆向的思路
立即下载
编程语言如何演化—— 以 JS 的 private 为例
立即下载