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中判断函数是new还是()调用的区别说明
Apr 07 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
vue中的计算属性和侦听属性
Nov 06 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数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
python中property和setter装饰器用法
2019/12/19 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
免税水晶:Duty Free Crystal
2019/05/13 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
经典的班主任推荐信
2013/10/28 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
python 如何用terminal输入参数
2021/05/25 Python