ES6 -- find 详解

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);returnfalse;});

而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){thrownewTypeError('"this" is null');}if(typeof cb !=='function'){thrownewTypeError('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++;}returnundefined;};