89%

ES5新增内置方法总结

发表于 2016-06-27

Array

5个迭代方法:

2个归并方法:

参数

如何使用

reduce()和reduceRight()都会迭代数组的所有项，然后构建一个最终返回的值。其中，reduce()从数组的第一项开始，逐个遍历到最后。reduceRight()则从数组最后一项开始，和前遍历到第一项。

var arrs = [1, 2, 3, 4, 5];
var sum = arrs.reduce(function(prev, cur, index, array){
	return prev + cur;
})
console.log(sum); // 15

2个索引方法:

Array.prototype.forEach()

forEach() 方法让数组的每一项都执行一次给定的函数。

语法

array.forEach(callback[, thisArg])

参数

如何使用

forEach 方法按升序为数组中含有效值的每一项执行一次callback 函数。

var arr = [1, 2, 3];
arr.forEach(function(value, index, arr) {
	console.log(value, index, arr);
});

/*
1 0 [1, 2, 3]
2 1 [1, 2, 3]
3 2 [1, 2, 3]
*/

删除第二项，第三项的值改为undefined，第四项值改为10，

var arr = [1, 2, 3, 4];
arr.forEach(function(value, index, arr2) {
	delete arr2[1]; //删除第二项
	arr2[2] = undefined; //改为`undefined`
	arr2[3] = 10;
	console.log(value, index, arr);
	console.log(arr2 === arr)  // true, 说明 arr2 和arr 指向的是同一对象的引用地址
});

/*
1 0 [1, 2: undefined, 3: 10]
undefined 2 [1, 2: undefined, 3: 10]
10 3 [1, 2: undefined, 3: 10]
*/

如果已经存在的值被改变，则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到，那些已删除（使用delete方法等情况）或者从未赋值的项将被跳过（但不包括哪些值为 undefined 的项）。

forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。

var arr = [1, 2, 3];
arr.forEach(function(value, index, arr) {
	arr.push('新来的');
	console.log(value, index, arr);
});
/*
1 0 [1, 2, 3, "新来的"]
2 1 [1, 2, 3, "新来的", "新来的"]
3 2 [1, 2, 3, "新来的", "新来的", "新来的"]
*/

thisArg 参数如何使用？ 这里就举个例子：

function Counter() {
  this.sum = 0;
  this.count = 0;
}
Counter.prototype.add = function(array) {
  array.forEach(function(entry) {
    this.sum += entry;
    ++this.count;
  }, this);
  // ^---- 这里传入了 forEach 执行的上下文对象
};

var obj = new Counter();
obj.add([2, 5, 9]);
console.log(obj.count)
// 3
console.log(obj.sum)
// 16

Array.prototype.map()

map() 方法让数组的每一项都执行一次给定的函数后返回的值组成新数组。

基本的特性和 forEach 一致。

语法

array.map(callback[, thisArg])

参数

如何使用

var arr = [1, 2, 3];
var sqrtArr = arr.map(Math.sqrt);
console.log(sqrtArr); //[1, 1.4142135623730951, 1.7320508075688772]

上面的代码求数组 arr 中每个元素的平方根，其中参数没有指定，默认有传参。

forEach 方法按升序为数组中含有效值的每一项执行一次callback 函数。

在字符串上使用 map 方法：

var map =  Array.prototype.map;
var arr = map.call('hello world', function(x) {
//             ^--- 通过 call 来改变 map 方法执行的上下文对象。ES5 有更好的 bind 来替换call。
	return x.toUpperCase();
});

注意点

通常情况下，map 方法中的 callback 函数只需要接受一个参数，就是正在被遍历的数组元素本身。但这并不意味着 map 只给 callback 传了一个参数。这个思维惯性可能会让我们犯一个很容易犯的错误。

// 下面的语句返回什么呢:
var arr = ["1", "2", "3"].map(parseInt);

console.log(arr) // [1, NaN, NaN]

why ?

parsetInt 方法有2个参数，第一个要被解析的字符串（string）， 第二个为 进制数（表示要解析的数字的基数），该值介于 2 ~ 36 之间。

当 map 方法在调用 parseInt 函数时,会给它传递三个参数(默认的)：当前正在遍历的元素， 元素索引， 原数组本身。 第三个参数 parseInt 会忽视, 但第二个参数不会，也就是说， parseInt 把传过来的索引值当成进制数来使用.从而返回了 NaN。

应该修改成如下：

function returnInt(value){
  return parseInt(value, 10); // 显式指定进制数为10
}
var arr = ["1", "2", "3"].map(returnInt);
console.log(arr); // 返回[1,2,3]

Array.prototype.filter()

filter() 方法使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组。

基本的特性和 forEach 一致。

语法

array.filter(callback[, thisArg])

参数

如何使用

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
console.log(filtered); // [12, 130, 44]

上面的代码筛选排除掉所有的小值, isBigEnough 中大于等于10的 数返回 true， 被保留在新数值中。

Array.prototype.some()

some() 方法测试数组中的某些元素是否通过了指定函数的测试。 为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个 “真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some 将会立即返回 true。

基本的特性和 forEach 一致。

语法

array.some(callback[, thisArg])

参数

如何使用

var arr1 = [1, 2, 3].some(isNaN);
console.log(arr1);  // false

var arr2 = [1, NaN, 3].some(isNaN);
console.log(arr2); // true

Array.prototype.every()

every() 方法测试数组的所有元素是否都通过了指定函数的测试。这个方法和 some刚好相反。 every 方法为数组中的每个元素执行一次 callback 函数，直到它找到一个使 callback 返回 false（表示可转换为布尔值 false 的值）的元素。如果发现了一个这样的元素，every 方法将会立即返回 false。否则，callback 为每一个元素返回 true，every 就会返回 true。

基本的特性和 forEach 一致。

语法

array.every(callback[, thisArg])

参数

如何使用

var arr1 = [1, 2, 3].every(isNaN);
console.log(arr1);  // false

var arr2 = [NaN, NaN, NaN].every(isNaN);
console.log(arr2); // true

Date

语法

Date.now() //返回表示调用这个方法时的日期和时间的毫秒数

+new Date() //使用+操作符获取Date对象的时间戳，也可以达到以上同样的目的

Function

bind 函数绑定

函数绑定要创建一个函数，可以在特定的this环境中以指定参数调用另一个函数。

语法

fun.bind(thisArg[, arg1[, arg2[, ...]]])

参数

如何使用

this.x = 9; 
var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 返回 81

var retrieveX = module.getX;
retrieveX(); // 返回 9, 在这种情况下，"this"指向全局作用域

// 创建一个新函数，将"this"绑定到module对象
// 新手可能会被全局的x变量和module里的属性x所迷惑
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81

详情查看：Function.prototype.bind()

Object

Blog

life

Project