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 30 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
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入门学习的几个不错的实例代码
2008/07/13 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
JQuery与iframe交互实现代码
2009/12/24 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
js实现车辆管理系统
2020/08/26 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
Python批量更改文件名的实现方法
2017/10/29 Python
基于Python实现简单学生管理系统
2020/07/24 Python
Python二元算术运算常用方法解析
2020/09/15 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
实践单位评语
2014/04/26 职场文书
团代会闭幕词
2015/01/28 职场文书
小学国庆节活动总结
2015/03/23 职场文书
2015年仓库工作总结
2015/04/09 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
2016年教师新年寄语
2015/08/18 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题