【ES5新特性四】数组新增方法

ES5中新增了很多数组的方法，使用这些方法能够大大减少开发的时间成本，让代码更具有可读性。下面就让我们来看看，都有哪些新增的方法？

原生JavaScipt案例合集
 JavaScript +DOM基础
 JavaScript 基础到高级
 Canvas游戏开发

将这些方法和之前的传统方式处理逻辑做对比、思考，并通过原型尝试拦截去实现这些相关的方法。

1.1 判断数组

第一种方式判断实例化对象
```
obj instanceof Array
```
第二种方式判断构造函数
```
obj.constructor === Array
```
第三种方式判断对象的类型
```
Object.prototype.toString.call(obj)
```
第四种数组的静态方法（ES5新增）
```
Array.isArray(obj)
```

代码示例：

// instanceof 
console.log(obj instanceof Array); // false
console.log(arr instanceof Array); // true
// 当构造函数是Object的时候也会返回true
console.log(arr instanceof Object); // true

// constructor
console.log(obj.constructor === Array); // fasle
console.log(arr.constructor === Array); // true
console.log(arr.constructor === Object); // false
	
// 判断对象的类型
console.log(Object.prototype.toString.call(obj) === "[object Array]"); // false
console.log(Object.prototype.toString.call(arr) === "[object Array]"); // true
// ES5拓展的静态方法
console.log(Array.isArray(obj)); // false
console.log(Array.isArray(arr)); // true

1.2 获取数组成员的索引

indexOf(item,?startIndex) 返回一个指定的元素在数组中第一次出现的位置

lastIndexOf(item,?startIndex) 返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找

两个方法使用时，如果要检索的元素没有出现，则返回 -1
两个方法，如果省略第二个参数，则是从第一个或最后一个索引开始查找。浏览器都支持这两个方法，但是 IE8 及更早IE版本不支持该方法
在查找的过程中不会进行类型转换，而是真正的全等查找

代码演示：

// 创建一个数组
var arr = ["apple","orange","banana","pear","orange","kiwi fruit","orange","peach"];

// 利用ES5方法获取指定成员第一次和最后一次出现的位置
// indexOf() 返回一个指定的元素在数组中第一次出现的位置
// console.log(arr.indexOf("orange"));//1  不指定起始索引，默认从0开始
// console.log(arr.indexOf("orange",2));//4 从第2个索引开始向后查找
// lastIndexOf()  返回一个指定的元素在数组中最后出现的位置
// console.log(arr.lastIndexOf("orange"));//6  不指定索引，默认从最后一个开始向前查找
// console.log(arr.lastIndexOf("orange",5));//4 从第5个索引开始向前查找


// indexOf() 返回一个指定的元素在数组中第一次出现的位置
console.log(arr.indexOf("orange"));//1  不指定起始索引，默认从0开始
console.log(arr.indexOf("orange",2));//4 从第2个索引开始向后查找
// lastIndexOf()  返回一个指定的元素在数组中最后出现的位置
console.log(arr.lastIndexOf("orange"));//6  不指定索引，默认从最后一个开始向前查找
console.log(arr.lastIndexOf("orange",5));//4 从第5个索引开始向前查找

1.3 数组遍历

forEach(function(currentValue, index, arr))方法用于调用数组的每个元素，并将元素传递给回调函数

参数：必需，为一个回调函数，数组中每个元素需要调用的函数，函数参数如下：

currentValue 必需。当前数组中的元素
index 可选。当前元素的索引值
arr 可选。当前元素所属的数组对象

注意: 1. forEach() 对于空数组是不会执行回调函数的

forEach用于替代for循环，但是并没有将for循环移除，只是将for循环放在了数组迭代器forEach方法的内部

回调函数内作用域是window

回调函数中的返回值对forEach方法的执行结果没有影响，forEach方法的返回值始终是undefined

代码示例：
需求：遍历数组

// 创建一个数组
var arr = ["apple","orange","banana","pear","kiwi fruit","peach"];

// 1. 使用普通的for进行遍历
// console.group("使用普通的for进行遍历");
// for(var i = 0; i < arr.length; i++){
//     console.log("索引",i,"对应的数组元素为:",arr[i],"原数组为:",arr);
// }
// console.log("全局中打印i的值:",i);//全局中打印i的值: 6  全局中保存了i的值，i是全局变量
// console.groupEnd();

// // 2. 使用for...in循环进行遍历
// console.group("使用for...in循环进行遍历");
// for(var idx in arr){
//     console.log("索引",idx,"对应的数组元素为:",arr[idx],"原数组为:",arr);
//     // 注意打印结果：这里的index是字符串，利用的是 对象["属性"] 的方式获取数组中元素的值
// }
// console.log("全局中打印idx:",idx);//全局中打印idx: 5  全局中保存了idx的值，idx是全局变量
// console.groupEnd();

// // 3. 利用ES5新增方法进行遍历
// console.group("利用ES5新增方法进行遍历");
// arr.forEach(function(value,index,array){
//     console.log("索引",index,"对应的数组元素为:",value,"原数组为:",array);
// });
// //console.log("全局中打印index:",index);//报错 Error: index is not defined  说明index在forEach中是局部变量，避免全局变量的污染
// console.groupEnd();

1.4 映射数组

map(function(currentValue,index,arr)) 方法通过指定函数处理数组的每个元素，并返回处理后的数组

参数：同 forEach

返回值：一个新的数组，数组中的每一项都是每一次函数执行的结果组成的新成员
需求：将数组中的每一个成员首字母大写，并返回

// 创建一个数组
var arr = ["apple","orange","banana","pear","kiwi fruit","peach"];

console.log("原数组：",arr);//原数组： (6) ["apple", "orange", "banana", "pear", "kiwi fruit", "peach"]

// var mapArr = arr.map(function(value,index,array){
//     // 获取每一个成员字符串的第一个字符，并将其转为大写，拼接到原字符串中
//     var newVal = value.charAt(0).toUpperCase().concat(value.substring(1));
//     // 将转换后的新元素返回
//     return newVal;
// });

// console.log("进行处理后的数组为：",mapArr);//进行处理后的数组为： (6) ["Apple", "Orange", "Banana", "Pear", "Kiwi fruit", "Peach"]

var mapArr = arr.map(function(value,index,array){
    // 获取每一个成员字符串的第一个字符，并将其转为大写，拼接到原字符串中
    var newVal = value.charAt(0).toUpperCase().concat(value.substring(1));
    // 将转换后的新元素返回
    return newVal;
});

console.log("进行处理后的数组为：",mapArr);

1.5 填充数组

fill(value, start, end)方法使用一个固定值来填充数组

参数：value 必需。填充的值 start 可选。开始填充位置 end 可选。停止填充位置(默认为 array.length)

注意:此方法会改变原数组

// 创建一个数组
// var arr = ["apple","orange","banana","pear","peach"];
// console.log("填充前原数组arr:",arr);
// // 使用固定值填充数组
// arr.fill("kiwi fruit");
// console.log("填充后原数组arr:",arr);//(5) ["kiwi fruit", "kiwi fruit", "kiwi fruit", "kiwi fruit", "kiwi fruit"] 默认填充每一个数组

// console.log("========= 分割线 =========");

// // 创建一个数组
// var arr2 = ["apple","orange","banana","pear","peach"];
// console.log("填充前原数组arr2:",arr2);//填充前原数组arr2: (5) ["apple", "orange", "banana", "pear", "peach"]
// // 指定索引之间的填充  左闭右开
// arr2.fill("kiwi fruit",2,4);
// console.log("填充后原数组arr2:",arr2);//填充后原数组arr2: (5) ["apple", "orange", "kiwi fruit", "kiwi fruit", "peach"]

// 创建一个数组
var arr3 = ["apple","orange","banana","pear","peach"];
console.log(arr3);
console.log("========= fill填充 =========")
// 指定索引之间的填充  左闭右开
arr3.fill("kiwi fruit",2,4);
console.log(arr3);

1.6 断言

some(function(currentValue,index,arr) 方法用于检测数组中的元素是否满足指定条件（函数提供）

some() 方法会依次执行数组的每个元素：
- 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测
- 如果没有满足条件的元素，则返回false。
every(function(currentValue,index,arr) 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）

every() 方法使用指定函数检测数组中的所有元素：
- 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测
- 如果所有元素都满足条件，则返回 true

some方法代码示例：
需求：检测数组中是否有大于50的数字

// 定义一个数字
// var arr = [10,20,30,50,60,70,80,90];

// // 使用函数定义条件
// function checkNum(num){
//     return num >= 50;
// }

// // 使用some()检测
// var flag = arr.some(checkNum);
// console.log(flag);//true

every方法代码示例：
需求：检测数组中的数字是否都大于50

// 定义一个数字
var arr = [10,20,30,50,60,70,80,90];
// 使用函数定义条件
function checkNum(num){
    return num >= 50;
}
// 使用every()检测
var flag = arr.every(checkNum);
console.log(flag);//false

需求：判断数组中的人名是否都是三个字

var pArr = ["张翠花","王二狗","李大壮","张狗蛋"];
var flag = pArr.every(function(value,index,arr){
    
    
    return value.length === 3;
})
console.log(flag);//true

// 兼容IE8及以下版本...
if(!Array.prototype.every){
    
    
    Array.prototype.every = function(){
    
    
        //...
    }
}

1.7 过滤

filter() 检测数值元素，并返回符合条件所有元素的数组

返回值 返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组

需求：检测数组中所有大于50的数字并返回

// 定义一个数字
var arr = [10,20,30,50,60,70,80,90];
// 使用函数定义条件
function checkNum(num){
    return num >= 50;
}
// 使用filter()检测
var resultArr = arr.filter(checkNum);
console.log(resultArr);//(5) [50, 60, 70, 80, 90]

1.8 累加器

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加

参数：接收一个参数是函数，函数中有四个参数：当次累积的结果、当前成员值、当前索引值、原数组

返回值：当次累积的结果，将会在下一次遍历的时候作为第一个参数传递

注：1. reduce是从前向后累加，reduceRight是从后向前累加。这两个方法会对所有的成员逐一处理并将结果返回。

// 创建一个数组
var arr = [10,20,30,40,50,60];

// 创建累加器需要的函数
// function sum(total,num){
//     return total + num;
//     // return total * num;
// }
// // reduce()累加器完成累加
// var result = arr.reduce(sum);

// 匿名方式
var result = arr.reduce(function(total,value,index,array){
    return total + value;
})
console.log(result);//累加结果：210

// reduceRight()  累乘等效果
function multiple(total,num){
    return total * num;
}
var result2 = arr.reduceRight(multiple);
console.log(result2);//累乘结果：720000000

1.9 bind方法

call()、apply() 与 bind()方法：这三个方法都是用于执行函数并改变函数的this指向

call 方法：接收多个参数，第一个参数就是要改变的this指向，从第二个参数开始都是传递的参数
apply 方法：接收两个参数，第一个参数就是要改变的this指向，第二个参数是一个数组，数组中每一项才是传递的参数
bind 方法与call 方法类似，都是执行函数并改变函数的作用域
- bind 方法接收多个参数: 第一个参数就是要改变的this指向，从第二个参数开始都是传递的参数
- bind 方法与 call 之间的区别：call 改过 this 的指向后，会再执行函数，bind 改过 this 后，不执行函数，会返回一个绑定新 this 的函数

function sum(a,b){
    return a+b;
}

function reduce(a,b){
    return a-b;
}

var test = sum.apply(reduce,[10,20]);
console.log(test);//30

var test1 = sum.call(reduce,10,20);
console.log(test1);//30

var test2 = sum.bind(reduce,10,20);
console.log(test2);//ƒ sum(a,b){return a+b;}
console.log(test2());//30