find

基本使用

Array.prototype.find
返回第一个满足条件的数组元素

const arr = [1, 2, 3, 4, 5];
const item = arr.find(function (item) {return item > 3;
});console.log(item);//4

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

const arr = [1, 2, 3, 4, 5];
const item = arr.find(function (item) {return item > 5;
});console.log(item); //undefined

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

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

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

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

回调的参数

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

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

find的第二个参数

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

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

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

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

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

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

稀疏数组find

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

const arr = Array(5);
arr[0] = 1;
arr[2] = 3;
arr[4] = 5;
const item = arr.find(function (item) {console.log(item);return false;
});

而ES5数组扩展方法forEach,map,filter,reduce,reduceRight,every,some 只会遍历有值的数组
find的遍历效率是低于ES5数组扩展方法的

find不会更改数组

虽然新增了元素但是find会在第一次执行回调函数的时候拿到这个数组最初的索引范围

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

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

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

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

delete
删除该项的值并填入undefined

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

pop
删除该项的值并填入undefined

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

创建myFind

Array.prototype.myFind = function (cb) {if (this === null) {throw new TypeError('"this" is null');}if (typeof cb !== 'function') {throw new TypeError('Callback must be a function type');}var obj = Object(this),len = obj.length >>> 0,arg2 = arguments[1],step = 0;while (step < len) {var value = obj[step];if (cb.apply(arg2, [value, step, obj])) {return value;}step++;}return undefined;
};

ES6 -- find 详解相关推荐

ES6 Promise详解
Promise是JS中进行异步编程的新解决方案. 从语法上来说:Promise是一个构造函数从功能上来说:promise对象用来封装一个异步操作并可以获取其成功/失败的结果值 promise:启动异 ...
ES6 -- fill详解
fill Array.prototype.fill fill方法实际上是根据下标范围来给范围内的元素覆盖新的值左闭右开 const arr = [1, 2, 3, 4, 5]; const newA ...
ES5和ES6数组遍历方法详解
ES5和ES6数组遍历方法详解在ES5中常用的10种数组遍历方法: 1.原始的for循环语句 2.Array.prototype.forEach数组对象内置方法 3.Array.prototype. ...
【ES6】Module模块详解
[ES6]Module模块详解一.Module的由来二.严格模式三.export命令四.import命令查看更多ES6教学文章: 参考文献引言:由于两个JS文件之间相互使用必须通过一个ht ...
【ES6】Promise对象详解
[ES6]Promise对象详解一.Promise对象的含义二.Promise对象的用法三.Promise对象的几个应用[重点] 1.时间延迟函数 2.图片异步加载查看更多ES6教学文章: 参 ...
【ES6】Generator函数详解
[ES6]Generator函数详解一.Generator函数简介基本概念函数写法 yield关键字介绍二.next方法的参数三.for...of循环四.关于普通throw()与Gener ...
【ES6】 let与const详解
[ES6] let与const详解 ES6,全称为ECMAScript6.ES6与js的关系是:前者是后者的规格,后者是前者的实现.换句话说,ES是js的国际化版本,js是ES的子集. 1. let ...
JS ES6中export和import详解
1.Export 模块是独立的文件,该文件内部的所有的变量外部都无法获取.如果希望获取某个变量,必须通过export输出, // profile.js export var firstName = ' ...
ES6模块之export和import详解
ES6模块之export和import详解 ES6中的模块即使一个包含JS代码的文件,在这个模块中所有的变量都是对其他模块不可见的,除非我们导出它.ES6的模块系统大致分为导出(export)和导入( ...

ES6 -- find 详解