js some()方法详解以及实际应用

对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回 true,如果发现这个元素,some 将返回 true,如果回调函数对每个元素执行后都返回 false ,some 将返回 false。

var arr=[1,2,3,4,5];
arr.some(function(el,index){
  return (el==5);
});

在这段代码中,当遍历到5==5时,为return true,这能做什么用呢?前几天作者就碰到了一个需求:

QQ截图20170928185056.png

当点击上面的任务栏时,上面被点击的任务栏跳到下面的框,当点击下面的任务栏时,被点击的任务栏移动到上边的框里。说到这里其实还好做,用jq的remove()和append就可以实现,当点击上面的任务栏时,将任务栏remove掉,然后用append添加到下面的div里,注意先添加,后remove,一会你就知道为什么了。
还有个附加需求,就是当刷新页面的时候,两个框里的状态不变(前提:这个功能需要前台实现),这时,我就想到了用cookie或者stroage,我选择了localstroage,每个人物栏都有个id,将这些id存在stroage里边,这样刷新的时候,任务栏会依据stroage重新排列,好,到此为止还没有任何问题,但是有没有想过一种情况,当用户闲的蛋疼,一个任务栏两个盒子之间来回点击,这样一来,你的数组里就会用重复的id,这时候some就上场了,还用上面那段代码,比如已经存了id为1,2,3,4,5,这时用户瞎扯淡,来回点了好几次id为5的任务栏,这是这段代码就会返回true。然后用if判断一下,如果为false,就将这个id push到数组里,然后把id经过字符串拼接append到下面的div里,然后把被点击的dom remove掉,这样就不怕遇到熊孩子了。~
最后送上一个彩蛋,其实some方法还能节省性能,仔细看第一句,对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回 true,如果发现这个元素,some 将返回 true,也就是说,当代码改为el==2,判断为true了,后面的遍历将不再执行。

QQ截图20170928184118.png

为什么remove排在最后,你找到答案了吗?
最后献上一句作者最近读的《好吗,好的》里的一句话:

“平行世界,多元生活,既可以朝九晚五,又可以浪迹天涯。”——大冰

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,881评论 18 139
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,759评论 18 399
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,510评论 0 17
  • 京东衣锦还乡 人若成名屁亦香,一呼百应众景仰。 走在哪里掌声亮,一路鲜花喜洋洋。 君若羡慕多努力,飞上枝头变凤凰。
    陈老师_7891阅读 490评论 0 1
  • ---------------Agan智投机器人战国&短线晚报---------------- 日期: 2017-...
    Agan智投机器人阅读 161评论 0 0