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编写技巧整理
Aug 23 Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
AngularJS快速入门
Apr 02 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 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快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
php封装的验证码类分享
2017/02/26 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
javascript中length属性的探索
2011/07/31 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
require.js的用法详解
2015/10/20 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
简述vue状态管理模式之vuex
2018/08/29 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python 字符串与数字输出方法
2018/07/16 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
Python Process多进程实现过程
2019/10/22 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
会展策划与管理专业求职信
2014/06/09 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
详解Python为什么不用设计模式
2021/06/24 Python