数组拓展方法总结 - Array.prototype.find-找元素 - 《JavaScript Note》

特点

返回第一个满足条件的数组元素。
如果没有一个元素满足条件返回 undefined
返回的是引用值，和数组对应下标是同一个引用。
两个参数
1. 第一个参数回调函数
  1. item 当前元素
  2. idx 当前元素的索引
  3. 当前数组
  4. 回调函数的返回值满足条件的第一个item 作为 find 做为返回值
2. 第二个参数 thisArg 修改find中this指向
  1. 非严格模式下默认指向window
  2. 严格模式下指向null
find会遍历数组中所有的元素。包含empty。
ES5 数组遍历 forEach, map,filter,some,every,reduce,reduceRight 遍历的时候会剔除empty
find的效率会比所有ES5数组遍历的效率都低
find会在第一次执行回调函数的时候会拿到数组的索引范围
删除元素后的占位问题
1. splice(1,1); 删除元素后，会在数组末尾添加一个undefined。
2. delete arr[i] 删除元素后，会在原位置添加一个undefined
3. pop() 删除元素后，会在数组末尾添加一个undefined； ```javascript // Array.prototype.find ES2015 ES6

var arr = [1, 2, 3, 4, 5];

// 1.返回第一个满足条件的数组元素 const item = arr.find(function(item){ return item > 2 })

    console.log(item)// 3

// 2.如果没有一个满足条件返回undefined const item = arr.find(function(item){ return item > 6 })

    console.log(item)// undefined

// 3.返回的元素如果是引用值。和数组对应下标是同一个引用。 var objArr = [{name: 1,age: 1},{name: 2,age: 2}];

    const item = arr.find(function(item){
            return item.name === 2
    })
    console.log(item === objArr[1])// true

// 4.第一个参数回调函数fn(it, idx, arr)[it -> 当前元素,idx -> 数组下表] // thisArg是修改find 参数的this 指向。 // 1.在非严格模式下指向winodw // 2.在严格模式下不传入第二个参数。this为undefined;与严格模式规定相统一

    const item = arr.find(function(it,idx,arr) {
        console.log(it,idx,arr);
    },{a: 1});

// 5.回调函数返回值是bool 第一个返回true的元素作为 find 的返回值

const item = arr.find(function(item){
    return item.age === 1;
})

// 6.find 的遍历是不会放过稀松数组 // 稀松数组会遍历所有的元素。 var laxArr = [1,,3,,5,,7]; laxArr.find(function (item) { console.log(item); return false; })

// 7.forEach,map,filter, some,every,reduceRight,reduce 会剔除数组中的empty

// 8.find的效率会低于es5 数组遍历的方法 // // 9.find不会修改数组。 var arr = [1, 2, 3, 4, 5] arr.find(function(item){ item = item++; return false; }) console.log(arr); // [1,2,3,4,5]

// 10.虽然新增元素。但是find会在第一次执行回调函数的时候会拿到数组的索引范围。

var item = arr.find(function (item) {
    arr.splice(1,1);//undefined 占位
})
console.log(arr);

// 11.删除元素后的占位问题 laxArr.find(function (item, idx) { if(idx === 0) { laxArr.splice(1,1); // 删除元素后会在末尾补一个undefined delete laxArr[i]; // 删除元素后，并且填入undefined laxArr.pop(); // 删除数组最后一位元素并且填入undefined } console.log(item); })

// 重写 find // 1. this不能等于null // 2. 回调函数必须是一个函数

Array.prototype.myFind = function (cb){ ‘use strict’ if(this === null){ throw new TypeError(‘this is null ‘); } if(typeof cb !== ‘function’){ throw new TypeError(cb + ‘ must be a function’); }

var arr = Object(this), // 包装一层
        len = arr.length >>> 0, // 保证长度是正整数
        step = 0, // 计数
        arg2 = arguments[1], // 在非严格模式下 指向window,严格模式下指向null 
        val;
while(step < len){
    if(cb.apply(arg2,[arr[step],step,arr])){
        return arr[step];
    }
    step++;
}
return undefined;

} ```