分享更有价值
被信任是一种快乐

es6中find()如何用

文章页正文上

这篇文章主要介绍“es6中find()如何用”,在日常操作中,相信很多人在es6中find()如何用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”es6中find()如何用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧! 在es6中,find()用于通过回调函数查找数组中符合条件的第一个元素的值,语法“array.find(function(…),thisValue)”。find()会为数组中的每个元素都调用一次函数执行,当数组中的元素在测试条件时返回true时,find()返回符合条件的该元素,之后的值不会再调用执行函数;如果没有符合条件的元素返回undefined。find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。find() 方法为数组中的每个元素都调用一次函数执行:当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined语法:

array.find(function(currentValue,index,arr),thisValue)

返回值:返回符合测试条件的第一个数组元素值,如果没有符合条件的则返回 undefined
注意:find() 对于空数组,函数是不会执行的。find() 并没有改变数组的原始值。Array.prototype.find
返回第一个满足条件的数组元素

constarr=[1,2,3,4,5];
constitem=arr.find(function(item){
returnitem>3;
});

console.log(item);//4

如果没有一个元素满足条件 返回undefined

constarr=[1,2,3,4,5];
constitem=arr.find(function(item){
returnitem>5;
});

console.log(item);//undefined

返回的元素和数组对应下标的元素是同一个引用

constarr=[
{
id:1,
name:'张三',
},
{
id:2,
name:'李四',
},
{
id:3,
name:'王五',
},
];

constitem=arr.find((item)=>item.name==='李四');
console.log(item);


回调函数的返回值是boolean 第一个返回true的对应数组元素作为find的返回值

constarr=[
{
id:1,
name:'张三',
},
{
id:2,
name:'李四',
},
{
id:3,
name:'王五',
},
];
consti免费云主机、域名tem=arr.find(function(item){
returnitem.id>1;
});
console.log(item);

当前遍历的元素 当前遍历出的元素对应的下标 当前的数组

constarr=[
{
id:1,
name:'张三',
},
{
id:2,
name:'李四',
},
{
id:3,
name:'王五',
},
];
constitem=arr.find(function(item,index,arr){
console.log(item,index,arr);
});

更改回调函数内部的this指向

constarr=[
{
id:1,
name:'张三',
},
{
id:2,
name:'李四',
},
{
id:3,
name:'王五',
},
];
constitem=arr.find(
function(item,index,arr){
console.log(item,index,arr);
console.log(this);
},
{a:1}
);


如果没有第二个参数
非严格模式下 this -> window

constarr=[
{
id:1,
name:'张三',
},
{
id:2,
name:'李四',
},
{
id:3,
name:'王五',
},
];
constitem=arr.find(function(item,index,arr){
console.log(item,index,arr);
console.log(this);
});


在严格模式下
不传入第二个参数 this为undefined 与严格模式规定相同

'usestrict';
constarr=[
{
id:1,
name:'张三',
},
{
id:2,
name:'李四',
},
{
id:3,
name:'王五',
},
];
constitem=arr.find(function(item,index,arr){
console.log(item,index,arr);
console.log(this);
});

find会遍历稀疏数组的空隙 empty
具体遍历出的值 由undefined占位

constarr=Array(5);
arr[0]=1;
arr[2]=3;
arr[4]=5;
constitem=arr.find(function(item){
console.log(item);
returnfalse;
});


而ES5数组扩展方法forEach,map,filter,reduce,reduceRight,every,some 只会遍历有值的数组
find的遍历效率是低于ES5数组扩展方法的虽然新增了元素 但是find会在第一次执行回调函数的时候 拿到这个数组最初的索引范围

constarr=[1,2,3,4,5];
constitem=arr.find(function(item){
arr.push(6);
console.log(item);
});
console.log(arr);

constarr=[1,2,3,4,5];
constitem=arr.find(function(item){
arr.splice(1,1);
console.log(item);
});
console.log(arr);


splice 删除对应项 该项位置不保留 在数据最后补上undefined

constarr=[1,2,3,,,,7,8,9];
arr.find(function(item,index){
if(index===0){
arr.splice(1,1);
}
console.log(item);
});

登录后复制

登录后复制
delete
删除该项的值 并填入undefined

constarr=[1,2,3,,,,7,8,9];
arr.find(function(item,index){
if(index===0){
deletearr[2];
}
console.log(item);
});


pop
删除该项的值 并填入undefined

constarr=[1,2,3,,,,7,8,9];
arr.find(function(item,index){
if(index===0){
arr.pop();
}
console.log(item);
});

Array.prototype.myFind=function(cb){
if(this===null){
thrownewTypeError('"this"isnull');
}
if(typeofcb!=='function'){
thrownewTypeError('Callbackmustbeafunctiontype');
}
varobj=Object(this),
len=obj.length>>>0,
arg2=arguments[1],
step=0;
while(step

到此,关于“es6中find()如何用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注云技术网站,小编会继续努力为大家带来更多实用的文章!

相关推荐: html下拉列表框如何设置

本篇内容主要讲解“html下拉列表框如何设置”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“html下拉列表框如何设置”吧! 1.创建下拉列表框使用HTML下拉列表框的第一步是创建一个标签,如下所示:该代码创建了一个…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册