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 加载和执行-性能提高篇
Dec 28 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 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利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
jquery操作select方法汇总
2015/02/05 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
angular4自定义组件详解
2017/09/28 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python函数返回多个值的示例方法
2013/12/04 Python
Python最基本的输入输出详解
2015/04/25 Python
Python中设置变量访问权限的方法
2015/04/27 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
Python高并发和多线程有什么关系
2020/11/14 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
好家长事迹材料
2014/01/23 职场文书
优秀交警事迹材料
2014/01/26 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫
SpringBoot详解执行过程
2022/07/15 Java/Android