学习SegmentFault上的
JavaScript
设计模式 笔记
原文:听飞狐聊JavaScript设计模式系列01
系列一主要回顾ES5中数组的方法,除原文介绍还查阅了MDN相关资料
Array.prototype.some()
语法
参数
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。1
2
3
4
5
6
7function 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()
概述
reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值。
语法
1 | arr.reduce(callback,[initialValue]) |
参数
- callback
执行数组中每个值的函数,包含四个参数- previousValue
上一次调用回调返回的值,或者是提供的初始值(initialValue) - currentValue
数组中当前被处理的元素 - index
当前元素在数组中的索引 - array
调用 reduce 的数组
- previousValue
- initialValue
作为第一次调用 callback 的第一个参数。
描述
reduce()
为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce
的数组。
回调函数第一次执行时,previousValue
和 currentValue
可以是一个值,如果在调用 reduce()
时提供了初始值 initialValue
,那么第一个 previousValue
等于 initialValue
,并且currentValue
等于数组中的第一个值;如果initialValue
未被提供,那么previousValue
等于数组中的第一个值,currentValue
等于数组中的第二个值。
如果数组为空并且没有提供initialValue, 会抛出TypeError 。如果数组仅有一个元素(无论位置如何)并且没有提供initialValue, 或者有提供initialValue但是数组为空,那么此唯一值将被返回并且callback不会被执行。
例:如果把初始值作为第二个参数传入 reduce,最终返回值变为20,结果如下:1
2
3[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()
扁平化数组(降维)
1 | var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) { |
ES5中数组的新特性
ECMAScript5中数组的新特性,个人做了如下区分:
- 位置方法:
indexOf
,lastIndexOf
- 迭代方法:
every
,filter
,forEach
,some
,map
- 缩小方法:
reduce
,reduceRight
注:迭代方法回调支持3个参数,第1个是遍历的数组内容(currentElement
);第2个是对应的数组索引(index
),第3个是数组本身(array
)
every
对数组的每个元素都进行函数运行,如果每个都是true,则返回true,否则,如果有一个是false,那就返回false咯1
2
3
4
5var arr = ["卫士",3,5,"包裹",8,6,"皮带","包裹","包裹"];
var res = arr.every(function(item){
return typeof item=="string";
})
alert(res); // false,把数组中的数字项全部去掉,则返回true
some
对数组的每个元素都进行函数运行,对任一项返回为true,则返回为true,跟上面的every相似,好像every是处女座样(^__^)1
2
3
4
5var arr = [1,3,5];
var res = arr.some(function(item){
return item>6;
})
alert(res); // 返回false
filter
对数组的每个元素都进行函数运行,返回过滤后的选项1
2
3
4
5var arr = ["卫士",23,"包裹",565,"皮带","包裹","包裹"];
var res = arr.filter(function(item){
return typeof item=="string";
})
alert(res); // 卫士, 包裹, 皮带, 包裹, 包裹