js数组方法（一）

Array.prototype.map()

描述

map()方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

map() 方法不修改调用它的原数组本身（当然可以在 callbackFn 执行时改变原数组）

参数

callback

生成新数组元素的函数，使用三个参数：

  currentValue

    callbackFn 数组中正在处理的当前元素。

  index

    callbackFn 数组中正在处理的当前元素的索引。

  array

    map 方法调用的数组。

thisArg 可选

执行 callbackFn 函数时被用作 this 的值。

语法

// 箭头函数
map((element) => { /* … */ })
map((element, index) => { /* … */ })
map((element, index, array) => { /* … */ })

// 回调函数
map(callbackFn)
map(callbackFn, thisArg)

// 内联回调函数
map(function(element) { /* … */ })
map(function(element, index) { /* … */ })
map(function(element, index, array){ /* … */ })
map(function(element, index, array) { /* … */ }, thisArg)

实现原理

Array.prototype.myMap = function(){

            //获取第一个参数  回调函数
            var callback = arguments[0];
            //获取第二个参数   执行 callbackFn 函数时被用作 this 的值。
            var thisArg  = arguments[1] || window;
            //创建一个新数组
            var newArr = [];
            for(let i = 0;i<this.length;i++){
                //将回调函数每一次执行后的返回值放入新数组中
                newArr.push(callback.call(target,this[i],i,this))
            }
            return newArr;
        }

Array.prototype.reduce()

描述

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。否则，数组索引为 0 的元素将被作为初始值 initialValue，迭代器将从第二个元素开始执行（索引为 1 而不是 0）。

参数

callbackFn

一个“reducer”函数，包含四个参数：

• previousValue：上一次调用 callbackFn 时的返回值。在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue，否则为数组索引为 0 的元素 array[0]。
• currentValue：数组中正在处理的元素。在第一次调用时，若指定了初始值 initialValue，其值则为数组索引为 0 的元素 array[0]，否则为 array[1]。
• currentIndex：数组中正在处理的元素的索引。若指定了初始值 initialValue，则起始索引号为 0，否则从索引 1 起始。
• array：用于遍历的数组。

initialValue 可选

作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue，则 currentValue 则将使用数组第一个元素；否则 previousValue 将使用数组第一个元素，而 currentValue 将使用数组第二个元素。

返回值 

使用“reducer”回调函数遍历整个数组后的结果。

异常

TypeError  数组为空且初始值 initialValue 未提供。

语法&示例

// 箭头函数
reduce((previousValue, currentValue) => { /* … */ } )
reduce((previousValue, currentValue, currentIndex) => { /* … */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* … */ } )

reduce((previousValue, currentValue) => { /* … */ } , initialValue)
reduce((previousValue, currentValue, currentIndex) => { /* … */ } , initialValue)
reduce((previousValue, currentValue, currentIndex, array) => { /* … */ }, initialValue)

// 回调函数
reduce(callbackFn)
reduce(callbackFn, initialValue)

// 内联回调函数
reduce(function(previousValue, currentValue) { /* … */ })
reduce(function(previousValue, currentValue, currentIndex) { /* … */ })
reduce(function(previousValue, currentValue, currentIndex, array) { /* … */ })

reduce(function(previousValue, currentValue) { /* … */ }, initialValue)
reduce(function(previousValue, currentValue, currentIndex) { /* … */ }, initialValue)
reduce(function(previousValue, currentValue, currentIndex, array) { /* … */ }, initialValue)

计算数组所有元素的总和

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);

异步累计

arr.reduce(async (pre,next)=>{
    await prev;//等待上一个Promise
    return Axios.get(next);//返回一个新的Promise
},Promise.resolve())

实现原理

// 该方法存在构造函数的原型上，即数组实例的原型上。
Array.prototype.myReduce = function (fn, initValue) {
    //在没有初始值的空数组上调用 reduce 将报错。
  if (initValue === undefined && !this.length) {
     throw new Error('myReduce of empty array with no initial value');
   }
//没有初始值的非空数组上调用 reduce 将使用将使用数组第一个元素做为初始值。
 let result = initValue ? initValue : this[0];
   for (let i = initValue ? 0 : 1; i < this.length; i++) {
     result = fn(result, this[i], i, this);
   }
   return result;
};

Array.prototype.every()

描述

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

every 方法为数组中的每个元素执行一次 callback 函数,如果回调函数的每一次返回都为真值，返回 true ，否则返回 false。

若收到一个空数组，此方法在任何情况下都会返回 true。

参数

callback

用来测试每个元素的函数，它可以接收三个参数：

• element  用于测试的当前值。
• index  用于测试的当前值的索引。
• array  调用 every 的当前数组。

thisArg可选

执行 callback 时使用的 this 值。

语法&示例

// 箭头函数
every((element) => { /* … */ } )
every((element, index) => { /* … */ } )
every((element, index, array) => { /* … */ } )

// 回调函数
every(callbackFn)
every(callbackFn, thisArg)

// 内联回调函数
every(function(element) { /* … */ })
every(function(element, index) { /* … */ })
every(function(element, index, array){ /* … */ })
every(function(element, index, array) { /* … */ }, thisArg)

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

实现原理

 Array.prototype.Myevery = function(){
            var callback = arguments[0];
            var thisArg = arguments[1] || window;
 
            for(var i = 0;i<this.length;i++){
                // 如果有不满足条件的数据立即返回false
                if(!callback.call(thisArg,this[i],i,this)){
                    return false;
                }
            }
 
            // 等到循环结束之后 全部满足条件 返回true
            return true;
        }
 
 

Array.prototype.some()

描述

some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。

数组中有至少一个元素通过回调函数的测试就会返回true；所有元素都没有通过回调函数的测试返回值才会为false。

 如果用一个空数组进行测试，在任何情况下它返回的都是 false。

参数

通上every()

语法&示例

// 箭头函数
some((element) => { /* … */ } )
some((element, index) => { /* … */ } )
some((element, index, array) => { /* … */ } )

// 回调函数
some(callbackFn)
some(callbackFn, thisArg)

// 内联回调函数
some(function(element) { /* … */ })
some(function(element, index) { /* … */ })
some(function(element, index, array){ /* … */ })
some(function(element, index, array) { /* … */ }, thisArg)

onst array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

实现原理

 Array.prototype.Myevery = function(){
            var callback = arguments[0];
            var thisArg = arguments[1] || window;
 
            for(var i = 0;i<this.length;i++){
                // 如果有满足条件的数据返回true
                if(callback.call(thisArg,this[i],i,this)){
                    return true;
                }
            }
 
            // 等到循环结束之后 全部数据都不满足条件 返回false
            return false;
        }