原生JS数组方法（二）ES6、ES7数组方法的描述及原理实现

2、ES6新增数组方法

敲黑板！！重点来了！
indexOf() 找出数组中是否有给定值的元素，并返回找到的第一个元素的索引值；如果没有则返回-1。

 // 原理：indexOf方法，在数组循环过程中会和传入的参数比对，
        // 如果是比对成功，那么终止循环，返回对比成功的下标，
        Array.prototype.myIndexOf = function(){
        var startIndex=arguments[1];
        var arr = this;
        var index = -1;
        for (var i = 0; i < arr.length; i++) {
         if (arr[i] === arguments[0]&&(startIndex===undefined||startIndex!==undefined&&i>=startIndex))       {
                index = i;
                break;
            }
        }
        return index;
}
        var a = [1, 2, 3];
        var b = a.myIndexOf(2);
        console.log(a);         
        console.log(b);        // 结果为1

lastIndexOf () 找出数组中是否有给定值的元素，并返回找到的最后一个元素的索引值；如果没有则返回-1。

    Array.prototype.lastIndexOf = function (value) {
            var startIndex=arguments[1];
            var arr = this;
            var index = -1;
            for (var i = arr.length; i--;) {
if (arr[i] === arguments[0]&&(startIndex===undefined||startIndex!==undefined&&i>=startIndex)) {
                    index = i;
                    return index
                }
            }
            return index;
        }
        var a = [1, 2, 3, 1];
        var b = a.lastIndexOf(1);
        console.log(b)

forEach() 如果不接受参数，遍历数组中每一个元素。
如果接受参数，分别为：item, index, array, （用不到时可以不写）；item 表示每次迭代的元素；index 表示每次迭代元素的下标；array 表示原数组。

var a = [1,2,3];
a.forEach(function(value,key,arr){
  console.log(value)    
// 结果依次为1，2，3
  console.log(key)      
// 结尾依次为0，1，2
  console.log(arr)      
// 三次结果都为[1,2,3]，该参数貌似没什么用
})
//项目应用
 this.datalist.forEach((item, index) => {
      if (item._id === id) {
                        this.once=item
                        }
                    });

原理实现：

Array.prototype.myForEach = function (callback) {
    if (typeof callback !== 'function') {
        throw new Error(callback + 'is not function');
    }
    var arr = this;
    var _this = arguments[1] || window;
    for (var i = 0; i < arr.length; i++) {
        if (this[i] === undefined) continue;
        // callback.apply(_this,[arr[i], i, arr])
        callback.call(_this, arr[i], i, arr)
    }
}
var arr1 = [1, 2, 3];
var newArr = [ ]
// 桥接模式;自身方法不做任何处理；让回调函数去做处理
arr1.myForEach(function (value, key, arr) {
    console.log(value, key, arr)
    this.push(value *key)
},newArr)
console.log(newArr)

map()返回一个新数组，新数组是原数组的映射；不改变原数组的值；新数组的元素值是每次函数return的返回值；若不写return，接收的新数组的元素值将全为空。

var arr = [20,13,11,8,0,11];
var brr = arr.map(function(item)){
	//将数组的每个元素都将增加到原来的1.2倍
	return item*1.2;
	// 此时brr为a数组每个元素的1.2倍
	//若return 1，则新数组的每个元素值均为1
	return 1;
}
//项目应用
 this.datalist.map((item, index) => {
           if (item._id === id) {
                        item=this.once
                        }
                    });

原理实现：

Array.prototype.myMap = function (callback, bindingArr) {
        if (typeof callback !== 'function') {
            throw new Error(callback + 'is not function');
        }
        var newArr = [];
        var arr = this;
        var _this = arguments[1] || window;
        for (var i = 0; i < arr.length; i++) {
            newArr.push(callback.apply(_this,[arr[i], i, arr]))
            // newArr.push(callback.call(_this, arr[i], i, arr))
        }
        return newArr;
    }
    var arr = [1, 2, 3];
    var bindingArr = [1, 2];
    var b = arr.myMap(function (value, key, arr) {
        // console.log(value, key, arr)
        // return value + 1;
        return this.push(value+1)  
    }, bindingArr)
    // console.log(arr);
    // console.log(b);
    console.log(bindingArr)

filter()过滤元素，返回一个新数组；新的数组由每次函数返回值为true对应的元素组成；原数组不受影响。

var arr = [20,13,11,8,0,11];
var brr =arr.filter(function(item)){
	//返回值为奇数的元素
	return item%2;
}
//项目应用
 let result=this.originlist.filter((item)=>{
         let reg=RegExp(this.keyword,"i")
                    return reg.test(item.companyName)
                })
         let startIndex=(this.pageno-1)*this.pagesize
         let endIndex=startIndex+this.pagesize
          return result.slice(startIndex,endIndex)
                }

原理实现：

   Array.prototype.myFilter = function (callback) {
            if (typeof callback !== 'function') {
                throw new Error(callback + 'is not function');
            }
            var arr = this;
            var _arr = [ ];
            for (var i = 0; i < arr.length; i++) {
                var fn = callback(arr[i], i, this);
                if (fn) {
                    _arr.push(arr[i]);
                }
            }
            return _arr;
        }
        var a = [1, 2, 3];
        var b = a.myFilter(function (value, key, arr) {
            console.log(value, key, arr)
            return value<3;
        })
        console.log(a);
        console.log(b);

some() return返回的值只要有一项为true,最终的返回值就为true,不会继续遍历后边的元素；
若没有一项满足返回值为true的，就返回false；原数组不受影响；

var arr = [20,13,11,8,0,11];
var brr = arr.some(function(item){
	return item>10;
})
alert(brr); //true

原理实现：

   Array.prototype.mySome = function (callback, countInit) {
        var arr = this;
        var bool = false;
        for (var i = 0; i < arr.length; i++) {
            var cbValue = callback(arr[i], i, this);
            if (cbValue) {
                bool = true;
                return bool
            }
        }
        return bool;
    }
    var arr= [1, 2, 3];
    var b = arr.mySome(function (value, key, arr) {
        console.log(value, key, arr);
        return arr.indexOf(4);
    })
    console.log(arr);
    console.log(b);

every() 对数组的每一项执行给定的函数，假如该函数每一项都返回true，最后结果才为true；
只要有一项返回值为false，最后结果就是false。且后边的元素都不会再继续执行函数；
原数组不受影响；

var a = [1,2,3];
var b = a.every(function(value,key,arry){
  console.log(value);   // 结果依次为1，2
  console.log(key);     // 结果依次为0，1
  console.log(arry);    // 两次次结果都为[1,2,3]
  return value===2;
})
console.log(a);         // 结果为[ 1, 2, 3 ]
console.log(b);         // 结果为false

原理实现：

  Array.prototype.myEvery = function (callback, bindingArr) {
        if (typeof callback !== 'function') {
            throw new Error(callback + 'is not function');
        }
        var _this = arguments[1] || window;
        var arr = this;
        var bool = true;
        for (var i = 0; i < arr.length; i++) {
            var cbValue = callback.call(_this, arr[i], i, arr);
            if (cbValue) {
                bool = false;
                return bool
            }
        }
        return bool;
    }
    var a = [1, 2, 3];
    var b = a.myEvery(function (value, key, arr) {
        console.log(value, key, arr);
        return value===4;
    })
    console.log(a);
    console.log(b);

reduce() 返回值是最后一次函数调用的返回值；
不写return时，默认返回undefined；
运行机制：一开始，prev代表数组第一个元素，next指向数组第二个元素 ；函数有个返回值，会作为下次的prev值；当给方法第二个参数值时，prev从传的第二个参数值开始，next从第一个元素值开始
用途：
过滤效果：return item.id=1006?item:value;
归并求和：return item.select?value+item.total:value;

var arr = [1,4,5,7,8,10];
var res = arr.reduce(function(prev,next){
	console.log(prev+"---"+next);
	return 4;
})
console.log(res);

//reduce()还可以有第二个参数

var arr = [1,4,5,7,8,10];
var res = arr.reduce(function(prev,next){
	console.log(prev+"---"+next);
	return prev+next;
},100)  //prev从传的第二个参数值100开始，next从第一个元素值开始
console.log(res);

原理实现：

Array.prototype.myReduce = function (callback, initValue) {
    if (typeof callback !== 'function') {
        throw new Error(callback + 'is not function');
    }
    var start=0;
    if(initValue===undefined){
        initValue=arr[0];
        start++;
    }
    var arr = this;
    for (var i = start; i < arr.length; i++) {
        var cbValue = callback(initValue, arr[i], i, this);
        initValue = cbValue;
    }
    return initValue;
}
var a = [1, 2, 3];
var b = a.myReduce(function (initValue, value, key, arr) {
    // console.log(initValue, value, key, arr);
    return initValue + value;
}, 0);
console.log(a);
console.log(b)

代码解读：reduce的不同之处在于累加，和其他几个内置方法不同的地方，它的第二个参数不是this对象，而是初始累加值（如果不设置的话数组会乱掉），而且回调函数的的个数也不同，比其他的多了一个，而且还在在开始的多加了一个参数，第一个参数记录的是上一次循环的累加值;
reduceRight( )该方法接收一个函数作为累加器（accumulator），数组中的每个值（从右到左）开始合并，最终为一个值；与reduce原理类似；不会改变原数组并迭代到最后的返回值

3、ES7新增数组方法

keys( )返回一个新的Array迭代器，它包含数组中每个索引的键；不会改变数组。

let arr=[1,2,234,'sdf',-2];
for(let a of arr.keys( )){
    console.log(a)
}
//结果：0,1,2,3,4  
//此处keys，对数组索引进行遍历

values( )返回一个新的Array迭代器，它包含数组中每个值的键；该方法不会改变数组。

let arr=[1,2,234,'sdf',-2];
for(let a of arr.values()){
    console.log(a)  }
//结果：1,2,234,sdf,-2
//values， 遍历了数组arr的值

entries( )返回一个新的Array迭代器，它包含数组中每个键值对[index，item]；该方法不会改变数组。

for(let a of arr.entries()){
    console.log(a)
}
//结果：[0,w],[1,b]
for(let [i,v] of arr.entries()){
    console.log(i,v)
}
//结果：0 w,1 b
//entries，对数组键值对的遍历。

includes( )includes函数与string的includes一样，接收2参数，查询的项以及查询起始位置。用来判断当前数组是否包含某指定的值；返回一个布尔值；该方法不会改变数组

arr.includes(20);// 结果：false，返回布尔值
arr.includes(2,3)//结果：false，返回布尔值

Array.from( )在一个类似数组或可迭代对象中创建一个新的数组实例并返回该数组实例。

Array.from({'0':'w','1':'b',length:2})
//["w", "b"],返回数组的长度取决于对象中的length，故此项必须有！
Array.from({'0':'w','1':'b',length:4})
//["w", "b", undefined, undefined],数组后2项没有属性去赋值，故undefined
Array.from({'0':'w','1':'b',length:1})
//["w"],length小于key的数目，按序添加数组
let ps=document.getElementsByTagName('p');
Array.from(ps)
//返回p元素数组
Array.from('wbiokr')
//["w", "b", "i", "o", "k", "r"]
Array.from([1,2,3],function(x){
    return x+1})
//[2, 3, 4],第二个参数为回调函数

Array.isArray( )用于判断一个元素是否为数组返回布尔值还可以用于创建一个具有可变数量参数的新数组实例；并返回该数组实例
fill( )将数组中指定区间的所有元素的值，都替换成第一个参数值；当第三个参数大于数组长度时候，以最后一位为结束位置。该方法会改变数组；没有返回值。

let arr=['w','b'];
arr.fill('i')
//结果：['i','i']，改变原数组
arr.fill('o',1)
//结果：['i','o']改变原数组,第二个参数表示填充起始位置
new Array(3).fill('k').fill('r',1,2)
//结果：['k','r','k']，第三个数组表示填充的结束位置

copyWithin( )用于在数组内的替换操作，即替换元素和被替换元素都是数组内的元素；copyWithin方法接收三个参数，被替换数据的开始处、替换块的开始处、替换块的结束处(不包括)；copyWithin(s，m，n)。该方法会改变数组，并返回改变后的数组。

["w", "i", "r"].copyWithin(0)//此时数组不变
["w", "i", "r"].copyWithin(1)
//["w", "w", "i"],数组从位置1开始被原数组覆盖，只有1之前的项0保持不变
["w", "i", "r","b"].copyWithin(1,2)
//["w", "r", "b", "b"],索引2到最后的r,b两项分别替换到原数组1开始的各项，当数量不够，变终止
["w", "i", "r",'b'].copyWithin(1,2,3)
//["w", "r", "r", "b"]，强第1项的i替换为第2项的r

find( )返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。该方法不改变原数组。

let arr=[1,2,234,'sdf',-2];
arr.find(function(x){
    return x<=2;
})//结果：1，返回第一个符合条件的x值
arr.find(function(x,i,arr){
    if(x<2){console.log(x,i,arr)}
})
//结果：1 0 [1, 2, 234, "sdf", -2]，-2 4 [1, 2, 234, "sdf", -2]

findIndex( )返回数组中满足提供的测试函数的第一个元素的值的索引。否则返回 undefined。该方法不改变原数组。findIndex和find差不多，不过默认返回的是索引。

let arr=[1,2,234,'sdf',-2];
arr.findIndex(function(x){
    return x<=2;
})
//结果：0，返回第一个符合条件的x值的索引

arr.findIndex(function(x,i,arr){
    if(x<2){console.log(x,i,arr)}
})
//结果：1 0 [1, 2, 234, "sdf", -2]，-2 4 [1, 2, 234, "sdf", -2]