js数组的深度扩展

js 数组的深度扩展

foreach 方法 (遍历)

 

arr.foreach( function(ele, index, self){} )

arr.foreach(function(ele, index, self){
    console.log(ele, index, self， this) //  数组元素  索引  数组整体  this指向
    console.log(this[index]) //  提取类数组中当前索引的 li 标签
}, document.getElementsByTagName( 'li' ));

 在原型链上模拟

Array.prototype.myForEach = function(fun){
    // personArray == this
    var arr = this,
        len = arr.length,
        _this = arguments[1] || window;
    for(var i = 0; i < len; i++){
        // ele 当前元素 index 索引 self 数组
        fun.apply(_this, [arr[i], i, arr]);
    }
}
personArray.myForEach(function(ele, index, self){
    this[index].innerText = ele.name;
}, document.getElementsByTagName('li'));

filter 方法 (过滤)

arr.filter( function (ele, index, self) )

由于形式相同这里只在原型链上模拟

 

Array.prototype.myFilter = function(fun){
    var arr = this,
        len = arr.length,
        _this = arguments[1] || window,
        newArray = [];
    for(var i = 0; i < len; i++){
        fun.apply(_this,[arr[i], i, arr]) ? newArray.push(arr[i]) : '';
    }

    return newArray;
}
var arr = personArray.myFilter(function(ele, index, self){
    return true; // 未加判断全部保留
})
console.log(arr); // 和 personArray 数组完全一样

 

map 方法 (映射)

arr.map( function (ele, index, self) )

Array.prototype.myMap = function(fun){
    var arr = this,
        len = arr.length,
        _this = arguments[1] || window,
        newArray = [];
    for(var i = 0; i < len; i++){
        newArray.push(fun.apply(_this, arr[i], i, arr));
    }

    return newArray;
}
var arr = personArray.myMap(function(ele, index, self){
    return ele.name + '!!!'; // 实现元素 name 属性的拼串
})
console.log(arr); // 所有元素的 name 属性发生改变

every 和 some 方法

every 方法: 如果每一项都符合要求就返回 true

some 方法: 如果有一项符合要求就返回 true

 

reduce 方法 ()

arr.reduce( function(prve, cur, index, self), init )

prve 指的是上一次的值，如果没有就用 init 代替

Array.prototype.myReduce = function(fun, init){
    var arr = this,
        len = arr.length,
        _this = arguments[2] || window; // 已有两个固定参数
    for(var i = 0; i < len; i++){
        init = fun.apply(_this, [init, arr[i], i, arr]);
    }
    return init;
}
var arr = personArray.myReduce(function(prve, cur, index, self){
    console.log(prve, cur, index, self); // 上次的值 当前值 索引 数组
    return prev;
}, init);
// 举个小例子
var arr = [1, 2, 3, 4];
var result = arr.reduce(function(a, b){
    console.log(a); // 0  1  3  6      prve 起始为 0 每次运算 a + b 保留结果 
    console.log(b); // 1  2  3  4      cur   数组当前的值
    return a + b;
}, 0);
console.log(result); // 10

在小例子中可以看出，最后 result 的结果为 10，a 即 prve 在开始时为 init 等于 0，b 即 cur 为 arr [0] 等于 1，所以第一次运行结果为 0 + 1，然后将结果返回给 a，以便下一次运算。在第二次运算中，a 为第一次的结果 1，b 为 arr [1] 等于 2，结果返回 1 + 2，第三次运算时 a 为 3 后面依照此规则知道将整个数组完全遍历，最终返回结果给 result。