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 相关文章推荐
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
jQuery对val和atrr("value")赋值的区别介绍
Sep 26 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
angular第三方包开发整理(小结)
Apr 19 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 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
搜索引擎技术核心揭密
2006/10/09 PHP
深入PHP FTP类的详解
2013/06/13 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
python字符串排序方法
2014/08/29 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
毕业研究生的自我鉴定
2013/11/30 职场文书
四年大学自我鉴定
2014/02/17 职场文书
酒店开业策划方案
2014/06/02 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
邀请书格式范文
2015/02/02 职场文书
元旦晚会开场白
2015/05/29 职场文书
安全生产奖惩制度
2015/08/06 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL