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。

1
2
3
4
5
6
7
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),数组中的每个值(从左到右)开始合并,最终为一个值。

语法

1
arr.reduce(callback,[initialValue])

参数

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

描述

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

回调函数第一次执行时,previousValuecurrentValue 可以是一个值,如果在调用 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
2
3
4
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中数组的新特性,个人做了如下区分:

  • 位置方法:indexOflastIndexOf
  • 迭代方法:everyfilterforEachsomemap
  • 缩小方法:reducereduceRight

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

every

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

1
2
3
4
5
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是处女座样(^__^)

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

filter

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

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