JavaScript find()方法及返回数据实例

 更新时间:2020年04月30日 08:35:55   作者:林中有风  
这篇文章主要介绍了JavaScript中的find()方法和返回数据的内存指向,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

顾名思义就是 查找传入的对应数据

当数组中的元素在测试条件时返回 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” 值

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例

    深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例

    这篇文章主要介绍了escape()、encodeURI()、encodeURIComponent()的区别,需要的朋友可以参考下
    2014-08-08
  • 微信小程序缓存过期时间的相关设置(推荐)

    微信小程序缓存过期时间的相关设置(推荐)

    这篇文章主要介绍了微信小程序缓存过期时间的相关知识,主要包括微信小程序缓存机制介绍及哪些是一定需要过期的缓存,本文给大家介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • JS开发自己的类库实例分析

    JS开发自己的类库实例分析

    这篇文章主要介绍了JS开发自己的类库,结合实例形式分析了javascript开发类库的原理、组成及实现方法,需要的朋友可以参考下
    2019-08-08
  • JavaScript中innerHTML使用方法实例

    JavaScript中innerHTML使用方法实例

    js中常常用到innerHTML,其作用就是获取到标签里面的内容,同时也可以为标签添加内容,下面这篇文章主要给大家介绍了关于JavaScript中innerHTML使用方法的相关资料,需要的朋友可以参考下
    2022-10-10
  • js中getter和setter用法实例分析

    js中getter和setter用法实例分析

    这篇文章主要介绍了js中getter和setter用法,结合实例形式分析了javascript中getter和setter的功能、使用方法及相关操作注意事项,需要的朋友可以参考下
    2018-08-08
  • Javascript模板技术

    Javascript模板技术

    Javascript模板技术...
    2007-04-04
  • 微信小程序开发常用功能汇总

    微信小程序开发常用功能汇总

    这篇文章主要介绍了微信小程序开发常用功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-02-02
  • 使用JS前端技术实现静态图片局部流动效果

    使用JS前端技术实现静态图片局部流动效果

    本文使用前端开发技术,结合 SVG 和 CSS 来实现类似的液化流动效果,包含的知识点主要包括:mask-image 遮罩、feTurbulence 和 feDisplacementMap 滤镜、filter 属性、canvas 绘制方法、TimelineMax 动画及input[type=file] 本地图片资源加载,需要的朋友可以参考下
    2022-08-08
  • three.js中点对象(Point)和点材质(PointsMaterial)的具体使用

    three.js中点对象(Point)和点材质(PointsMaterial)的具体使用

    本文主要介绍了three.js中点对象(Point)和点材质(PointsMaterial)的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • 基于js实现判断浏览器类型代码实例

    基于js实现判断浏览器类型代码实例

    这篇文章主要介绍了基于js实现判断浏览器类型代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07

最新评论