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中对数组的操作代码
Aug 12 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
JQuery 入门实例1
2009/06/25 Javascript
javascript 面向对象继承
2009/11/26 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
浅谈Fetch 数据交互方式
2018/12/20 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
python实现Zabbix-API监控
2018/09/17 Python
使用Python实现画一个中国地图
2019/11/23 Python
python中数据库like模糊查询方式
2020/03/02 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
生物技术毕业生自荐信
2013/10/23 职场文书
售后服务科岗位职责范文
2013/11/13 职场文书
软件工程师岗位职责
2013/11/16 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
师德模范事迹材料
2014/06/03 职场文书
2014教师研修学习体会
2014/07/08 职场文书
党支部工作总结2015
2015/04/01 职场文书