JavaScript设计模式学习笔记1

学习SegmentFault上的 JavaScript设计模式 笔记
原文：听飞狐聊JavaScript设计模式系列01
系列一主要回顾ES5中数组的方法，除原文介绍还查阅了MDN相关资料

Array.prototype.some()

来源：MDN-Array.prototype.some()

语法

arr.some(callback[, thisArg])

参数

callback
用来测试每个元素的函数。
thisArg
执行 callback 时使用的 this 值。

描述

some 为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some 将会立即返回 true。否则，some 返回 false。callback 只会在那些”有值“的索引上被调用，不会在那些被删除或从来未被赋值的索引上调用。

callback 被调用时传入三个参数：元素的值，元素的索引，被遍历的数组。

如果为 some 提供了一个 thisArg 参数，将会把它传给被调用的 callback，作为 this 值。否则，在非严格模式下将会是全局对象，严格模式下是 undefined。

some 被调用时不会改变数组。

some 遍历的元素的范围在第一次调用 callback. 时就已经确定了。在调用 some 后被添加到数组中的值不会被 callback 访问到。如果数组中存在且还未被访问到的元素被 callback 改变了，则其传递给 callback 的值是 some 访问到它那一刻的值。

示例

例子：测试数组元素的值

下面的例子检测在数组中是否有元素大于 10。

function isBigEnough(element, index, array) {
  return (element >= 10);
}
[2, 5, 8, 1, 4].some(isBigEnough);
// passed is false
[12, 5, 8, 1, 4].some(isBigEnough);
// passed is true

Array.prototype.reduce()

来源：MDN-Array.prototype.reduce

概述

reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始合并，最终为一个值。

语法

arr.reduce(callback,[initialValue])

参数

• callback
  执行数组中每个值的函数，包含四个参数
  • previousValue
    上一次调用回调返回的值，或者是提供的初始值（initialValue）
  • currentValue
    数组中当前被处理的元素
  • index
    当前元素在数组中的索引
  • array
    调用 reduce 的数组
• initialValue
  作为第一次调用 callback 的第一个参数。

描述

reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

回调函数第一次执行时，previousValue 和 currentValue 可以是一个值，如果在调用 reduce() 时提供了初始值 initialValue，那么第一个 previousValue 等于 initialValue ，并且currentValue 等于数组中的第一个值；如果initialValue 未被提供，那么previousValue 等于数组中的第一个值，currentValue等于数组中的第二个值。

如果数组为空并且没有提供initialValue， 会抛出TypeError 。如果数组仅有一个元素（无论位置如何）并且没有提供initialValue， 或者有提供initialValue但是数组为空，那么此唯一值将被返回并且callback不会被执行。

例：如果把初始值作为第二个参数传入 reduce，最终返回值变为20，结果如下：

[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
  return previousValue + currentValue;
}, 10);

调用次数	previousValue	currentValue	index	array	return value
第一次调用	10	0	0	[0,1,2,3,4]	10
第二次调用	10	1	1	[0,1,2,3,4]	11
第三次调用	11	2	2	[0,1,2,3,4]	13
第四次调用	13	3	3	[0,1,2,3,4]	16
第五次调用	16	4	4	[0,1,2,3,4]	20

使用reduce()扁平化数组(降维)

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
    return a.concat(b);
});
// flattened is [0, 1, 2, 3, 4, 5]

ES5中数组的新特性

来源：听飞狐聊JavaScript设计模式系列01

ECMAScript5中数组的新特性，个人做了如下区分：

• 位置方法：indexOf，lastIndexOf
• 迭代方法：every，filter，forEach，some，map
• 缩小方法：reduce，reduceRight

注：迭代方法回调支持3个参数，第1个是遍历的数组内容(currentElement)；第2个是对应的数组索引(index)，第3个是数组本身(array)

every

对数组的每个元素都进行函数运行，如果每个都是true，则返回true，否则，如果有一个是false，那就返回false咯

var arr = ["卫士",3,5,"包裹",8,6,"皮带","包裹","包裹"];
   var res = arr.every(function(item){
       return typeof item=="string";    
   })    
   alert(res);    // false，把数组中的数字项全部去掉，则返回true

some

对数组的每个元素都进行函数运行，对任一项返回为true，则返回为true，跟上面的every相似，好像every是处女座样(^__^)

var arr = [1,3,5];
var res = arr.some(function(item){
    return item>6;
})
alert(res);    // 返回false

filter

对数组的每个元素都进行函数运行，返回过滤后的选项

var arr = ["卫士",23,"包裹",565,"皮带","包裹","包裹"];
   var res = arr.filter(function(item){
       return typeof item=="string";
   })    
   alert(res);    // 卫士, 包裹, 皮带, 包裹, 包裹