JavaScript find()方法及返回数据实例


Posted in Javascript onApril 30, 2020

顾名思义就是 查找传入的对应数据

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。

如果没有符合条件的元素返回 undefined

// 定义一个需要被查找的数组
var memoList = [{
        id: 1, name: '1'
      },{
        id: 2, name: '2'
      },{
        id: 3, name: '3'
      }]
// 用 editItem 变量将 查找出来的数据进行接收
var editItem = memoList.find((ele) => {
               return ele.id == 2 
            })  
// 打印 editItem 得到的结果是 {id: 2, name: '2'}

这看起来和没什么区别呀。。。

但是~~

// 我们修改 接收后的值 editItem 的值
editItem.name = '我是修改后的'

// 我们再打印一下 editItem 
console.log( editItem )  // {id: 2, name: '我是修改后的'}

感觉很正常嘛~

然后我们再打印一下 被查找的数据 memoList

console.log(memoList) 
// [{id: 1, name: "1"}, {id: 2, name: "我是修改后的"}, {id: 3, name: "3"}]

// 看得没 memoList 内的数据也被修改了

这里就反应出 fine() 方法返回的结果内存指向依然是 memoList 所指向的内存地址

所有这里返回的是浅拷贝的数据

注意: find() 对于空数组,函数是不会执行的。

注意: find() 并没有改变数组的原始值。

浏览器支持

表格中的数字表示支持该方法的第一个浏览器版本号。

方法          
find() 45.0 12.0 25.0 7.1 32.0

注意: IE 11 及更早版本不支持 find() 方法。

array.find(function(currentValue, index, arr),thisValue)

参数

参数 描述
function(currentValue, index,arr) 必需。数组每个元素需要执行的函数。 函数参数:   参数 描述 currentValue 必需。当前元素 index 可选。当前元素的索引值 arr 可选。当前元素所属的数组对象
thisValue 可选。 传递给函数的值一般用 “this” 值。 如果这个参数为空, “undefined” 会传递给 “this” 值

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
基于jquery中children()与find()的区别介绍
Apr 26 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
深入理解node.js http模块
Jan 24 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
JavaScript中while循环的基础使用教程
Aug 11 Javascript
js this 绑定机制深入详解
Apr 30 #Javascript
JS 图片压缩原理与实现方法详解
Apr 29 #Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 #Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 #Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 #Javascript
JavaScript实现放大镜效果代码示例
Apr 29 #Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 #Javascript
You might like
php 过滤器实现代码
2010/08/09 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
javascript 实现map集合
2015/04/03 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
python实现目录树生成示例
2014/03/28 Python
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
艺术系应届生的自我评价
2013/10/19 职场文书
大学毕业感言200字
2014/03/09 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
安全目标管理责任书
2014/07/25 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
亮剑观后感
2015/06/05 职场文书
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android