ECMAScript扩展 -1 【数组扩展方法 forEach-filter-map使用与重写】

一.forEach

(1).JSON

JSON对象

var JSON = {
    "id" : "1",
    "name" : "zza"
}

Json对象集合/数据集合

var JSON = [
    {
    "id" : "1",
    "name" : "zza"
    },
    {
    "id" : "2",
    "name" : "zza"
    },
]

Json转换

字符串 -> 对象 JSON.parse

对象 -> 字符串 JSON.stringify

(2).forEach(循环)

来自于Array.prototype.forEach

data.forEach(function(elem, index, array){
    oLi[index].innerHtml = elem.cource;
    console.log(this);
},{'name' : 'test'})

输出结果:

可以通过第二个参数更改this的指向

第二个参数深入

1. 填入1的时候输出 String('1')
2. 填入false时输出 Boolean(false)
3. 填入null时则为window

证明了第二个参数是会强制包装类的

(3).重写forEach

Array.prototype.myForEach = function(fn){
    var arr = this,
        len = arr.length,
        arg2 = arguments[1] || window;
        for(var i = 0; i < len; i++){
            fn.apply(arg2, [arr[i], i, arr]);
        }
}

二.filter

(1).filter(过滤)

筛选过滤，会返回一个新数组

var newArr = data.filter(function(elem, index, array){
    return elem.inFree === '0';
},{name : 'test'})

会涉及到深拷贝的问题

(2).深拷贝

var tools = {
    deepClone: function(org, tar){
        var tar = tar || {},
            toStr = Object.prototype.toSting,
            arrType = '[object Array]';
            for(var key in org){
                if(org.hasOwnproperty(key)){
                    if(typeof(org[key]) === 'object' && org[key] !== null){
                       tar[key] = toStr.call(org[key]) === arrType ? [] ||{};
                       deepClone(org[key], tar[key]); 
                    }else{
                        tar[key] = org[key]
                    }
                }
            }
        return tar;
    }
}

(3).filter重写

Array.prototype.myFilter = function(fn){
    var arr = this,
        len = arr.length,
        arg2 = arguments[1] || window,
        nArr = [],
        item;
    for(var i = 0; i < len; i++){
        item = tools.deepClone(arr[i]);
        fn.apply(arg2, [arr[i], i, arr]) ? nArr.push(item) : "";
    }    
    return nArr;
}

三.map

(1).map(映射)

var newArr = data.map(function(elem, index, array){
    elem.course = this.name + elem.course;
    return elem;
},{name : 'zza'})

这样是会改变原数组的，return null不改变原数组

(2).map重写

Array.prototype.myMap = function(fn){
    var arr = this,
        len = arr.length,
        arg2 = arguments[i] || window,
        nArr = [],
        item;
    for(var i = 0; i < len; i++){
        item = tools.deepClone(arr[i]);
        nArr.push(fn.apply(arg2,[arr[i], i, arr]))
    }   
  return nArr; 
}

模板替换

function renderList(data){
                var list = '';
                                console.log(data);
                data.myForEach(function(elem, index, array){
                    list += tpl.replace(/{{(.*?)}}/g, function(node, key){
                        return{
                            course : elem.course
                        }[key]
                    })
                })
                return list;
            }