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 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 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 Smarty date_format [格式化时间日期]
2010/03/15 PHP
php 生成短网址原理及代码
2014/01/23 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
js取得url地址参数实例
2013/02/22 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
BootStrap selectpicker
2016/06/20 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
js实现轮播图特效
2020/05/28 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
在django中使用自定义标签实现分页功能
2017/07/04 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
Python设计密码强度校验程序
2020/07/30 Python
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
编写strcpy函数
2014/06/24 面试题
采购部部长岗位职责
2014/02/06 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
防汛工作情况汇报
2014/10/28 职场文书
《叶问2》观后感
2015/06/15 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
运动会开幕式致辞
2015/07/29 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL