Es5新增数组和对象

为了更方便的对JS中Array的操作，ES5规范在Array的原型上新增了9个方法，分别是forEach、filter、map、reduce、reduceRight、some、every、indexOf 和 lastIndexOf，

forEach(callback[,thisArg]) 替代for in 会遍历出数组新增元素

//遍历数组
var arr = [1,'xx','yy'];
arr['name'] = 'zhangsan';
//Es5
arr.forEach(function (value,key,arr) {
    console.log(value, key, arr);
});
/*  结果 不会将后面添加加入
 * 1 0 [1, "xx", "yy", name: "zhangsan"]
 * xx 1 [1, "xx", "yy", name: "zhangsan"]
 * yy 2 [1, "xx", "yy", name: "zhangsan"]
 * */

兼容扩展

if(!Array.prototype.forEach){
    Array.prototype.forEach = function (callback,thisArg) {
        for(var i=0;i<this.length;i++){
            //js中,call第一个参数undefined,默认为window
            callback.call(thisArg,this[i],i,this.toString());
        }
    }
}

filter(callback[,thisArg]) – 用于过滤数组 返回新数组

var arr = [1,5,9];
arr['name'] = 'zhangsan';
//Es5
var newArr = arr.filter(n=>{return n>3});
console.log(arr);//[ 1, 5, 9, name: 'zhangsan' ]
console.log(newArr);//[ 5, 9 ]

var newArr = arr.filter(function (item) {
    return item>3;
});

兼容扩展

if(!Array.prototype.filter){
    Array.prototype.filter = function (callback,thisArg) {
        var newArr=[];
        for(var i=0;i<this.length;i++){
            //如果callback返回true,则该元素符合过滤条件，将元素压入temp中
            if(callback.call(thisArg,this[i])){
                newArr.push(this[i]);
            }
        }
        return newArr;
    }
}

map(callback[,thisArg]) – 用于加工数组元素 返回新数组

var arr = [1,5,9];
arr['name'] = 'zhangsan';
//item
var newArr = arr.map(function (item) {
    return item+3;
});
// var newArr = arr.map(item=>item+3);
console.log(arr);//[ 1, 5, 9, name: 'zhangsan' ]
console.log(newArr);//[ 4, 8, 12 ]

兼容扩展

if (!Array.prototype.map) {
    Array.prototype.map = function (callback, thisArg) {
        var newArr = [];
        for (var i = 0; i < this.length; i++) {
            //如果callback返回true,则该元素符合过滤条件，将元素压入temp中
            newArr.push(callback.call(thisArg, this[i]));
        }
        return newArr;
    }
}

reduce(callback[,initialValue]) – 返回新数组 默认左向右
reduceRight(callback[,initialValue])
reduce的作用完全相同，唯一的不同是，reduceRight是从右至左遍历数组的元素。

var arr = [1,2,3,4];
var result = arr.reduce(function(previousValue, currentValue, currentIndex, array){
    console.log(previousValue, currentValue,currentIndex);
    return previousValue + currentValue;
});
/* 1 2 1
 * 3 3 2
 * 6 4 3
* */
console.log(result);//10

reduce实现了数组元素的累加，reduce接收4个参数，previousValue中存放的是上一次callback返回的结果，currentValue是当前元素，currentIndex是当前元素位置，array是当前数组。previousValue初始值为数组的第一个元素，数组从第2个元素开始遍历。

PS: 前两个参数是必须。

initialValue

var arr = [1,2,3,4];
var result = arr.reduce(function(previousValue, currentValue, currentIndex, array){
    console.log(previousValue, currentValue,currentIndex);
    return previousValue + currentValue;
},20);
/* 20 1 0
 * 21 2 1
 * 23 3 2
 * 26 4 3
* */
console.log(result);//30

从运行结果看，initialValue参数指定了previousValue的初始值，更重要的是，这次数组是从第1个位置开始遍历，而不再是从第2个位置开始了。

兼容扩展

if (!Array.prototype.reduce) {
    Array.prototype.reduce = function (callback, initialValue) {
        var previousValue = initialValue || this[0];
        for (var i = initialValue ? 0 : 1; i < this.length; i++) {
            previousValue += callback(previousValue, this[i], i, this.toString());
        }
        return previousValue;
    }
}

some(callback[,thisArg]) – 用于检测数组元素 返回布尔值
some是某些、一些的意思，因此，some的作用是检测数组中的每一个元素，当callback返回true时就停止遍历，(有任意一个满足条件就停止并返回true)，并返回true

var arr = [1, 2, 3, 4];
var result = arr.some( function( item, index, array ){
    console.log( item, index, array);
    return item > 1;
});
/* 1 0 [ 1, 2, 3, 4 ]
 * 2 1 [ 1, 2, 3, 4 ]
 * */
console.log(result);//true

兼容扩展

if (!Array.prototype.some) {
    Array.prototype.some = function (callback, thisArg) {

        for (var i = 0 ; i < this.length; i++) {
            if(callback.call(thisArg, this[i], i, this.toString())){
                return true;
            }
        }
        return false;
    }
}

every(callback[,thisArg]) – 用于检测数组元素 返回布尔值
every是每一个的意思，相比some来讲，every对元素的检测应该更加严格

var arr = [1, 2, 3, 4];
var result = arr.every( function( item, index, array ){
    console.log( item, index, array);
    return item > 0;
});
/* 1 0 [ 1, 2, 3, 4 ]
 * */
console.log(result);//false

兼容扩展

if (!Array.prototype.every) {
    Array.prototype.every = function (callback, thisArg) {

        for (var i = 0 ; i < this.length; i++) {
            if(!callback.call(thisArg, this[i], i, this.toString())){
                return false;
            }
        }
        return true;
    }
}

Object属性

var obj = Object.create({}, {
    i: {
        // value : 5,配合writable使用
        // writable: true,//外部可以修改
        configurable: true,//外部可以删除
        enumerable: true,//可以被遍历
        get: function () {//自定义操作数据get,set
            return 300;
        }
    }
});
Object.defineProperty(obj,'gf',{//扩展属性,不会出现for in中
    value :  'xadqw'
});
console.log(obj.i);//300
console.log(obj.gf);//xadqw
obj.i = 3000;
obj.j = 'add';
// delete obj.i;//删除
for (var v in obj){
    console.log(v,obj[v]);
    //i 300
    //j add --j会出现
}

Object绑定作用域

var  obj = {
    name : '张三',
    f : function () {
        console.log(this.name);
    }
};
var f = obj.f.bind(obj);//this绑定在obj上
f();//张三