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入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
JQuery中clone方法复制节点
May 18 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
angular directive的简单使用总结
May 24 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 Javascript
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
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+mysqli事务控制实现银行转账实例
2015/01/29 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
jQuery入门知识简介
2010/03/04 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
利用python画一颗心的方法示例
2017/01/31 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
详解Python字典的操作
2019/03/04 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
武汉东之林科技有限公司机试
2013/09/17 面试题
大学应届生求职简历的自我评价
2013/10/08 职场文书
高二政治教学反思
2014/02/01 职场文书
信息管理应届生求职信
2014/03/07 职场文书
护士医德医风自我评价
2014/09/15 职场文书