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 相关文章推荐
js AspxButton的客户端操作
Jun 26 Javascript
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
ES6箭头函数和扩展实例分析
May 23 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
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中spl_autoload详解
2014/10/17 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
PHP微商城开源代码实例
2019/03/27 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
jquery延迟对象解析
2016/10/26 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
Python卸载模块的方法汇总
2016/06/07 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
Python 列表反转显示的四种方法
2020/11/16 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
非常详细的C#面试题集
2016/07/13 面试题
大学生关于奋斗的演讲稿
2014/01/09 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫