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获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
javascript json字符串到json对象转义问题
Jan 22 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
基于vue实现微博三方登录流程解析
Nov 04 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完整的日历类(CLASS)
2006/11/27 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
React组件的三种写法总结
2017/01/12 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
Python内置函数property()如何使用
2020/09/01 Python
python函数超时自动退出的实操方法
2020/12/28 Python
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
销售高级职员求职信
2013/10/29 职场文书
2013的个人自我评价
2013/12/26 职场文书
班组长岗位职责范本
2014/01/05 职场文书
警察群众路线整改措施
2014/09/26 职场文书
捐书活动倡议书
2015/04/27 职场文书
2015年底工作总结范文
2015/05/15 职场文书
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript
springboot中的pom文件 project报错问题
2022/01/18 Java/Android
科普 | 业余无线电知识-波段篇
2022/02/18 无线电