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高级程序设计 事件学习笔记
Sep 10 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
TypeScript入门-接口
Mar 30 Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 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像数组一样存取和修改字符串字符
2014/03/21 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
Python中的引用和拷贝浅析
2014/11/22 Python
python制作最美应用的爬虫
2015/10/28 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
Python的Lambda函数用法详解
2019/09/03 Python
python入门教程之基本算术运算符
2020/11/13 Python
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
校运会入场式解说词
2014/02/10 职场文书
工程承包协议书
2014/04/22 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
感谢信怎么写
2015/01/21 职场文书
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android
Vue router配置与使用分析讲解
2022/12/24 Vue.js