Ronaldo

• 于 Read

js map、forEach、filter、reduce、some、every

请参考 MDN

1.map方法

概述：map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

语法：

1
2
3
let array = arr.map(function callback(currentValue, index, array) { 
    // Return element for new_array 
}[, thisArg])

参数

  • callback:生成新数组元素的函数，使用三个参数：
    • currentValue:callback 的第一个参数，数组中正在处理的当前元素。
    • index:callback 的第二个参数，数组中正在处理的当前元素的索引。
    • array:callback 的第三个参数，map 方法被调用的数组。
  • thisArg:可选的。执行 callback 函数时 使用的this 值。

  • 返回值：一个新数组，每个元素都是回调函数的结果。

  • 描述：map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。

  • callback 函数会被自动传入三个参数：数组元素，元素索引，原数组本身。

  • 如果 thisArg 参数有值，则每次 callback 函数被调用的时候，this 都会指向 thisArg 参数上的这个对象。如果省略了 thisArg 参数,或者赋值为 null 或 undefined，则 this 指向全局对象 。

  • map 不修改调用它的原数组本身（当然可以在 callback 执行时改变原数组）。

  • 使用 map 方法处理数组时，数组元素的范围是在 callback 方法第一次调用之前就已经确定了。在 map 方法执行的过程中：原数组中新增加的元素将不会被 callback 访问到；若已经存在的元素被改变或删除了，则它们的传递到 callback 的值是 map 方法遍历到它们的那一时刻的值；而被删除的元素将不会被访问到。

1
2
3
4
5
6
7
8
9
10
11
var kvArray = [{key: 1, value: 10}, {key: 2, value: 20}, {key: 3, value: 30}];
var reformattedArray = kvArray.map(function(obj){
    var rObj = {};
    rObj[obj.key] = obj.value; // 这步一开始感到奇怪，对象居然也可以用数组下标的方式取到，自己试了下果然可以
    return rObj;
})
reformattedArray; // [{1: 10}, {2: 20}, {3: 30}]
kvArray; // [{key: 1, value: 10}, {key: 2, value: 20}]
// 对象用类似数组下标的方式取值 []
var test = {a: 1};
test['a']; // 1

注意

1
2
3
4
5
6
7
8
9
10
11
12
["1", "2", "3"].map(parseInt); // [1, NaN, NaN]而不是[1,2,3],why?
// parseInt其实是有两个参数的，只是平常我们将它第二个参数省略了
// parseInt的第二个参数其实是 进制数，而我们用 map 时会传递三个参数
// 第三个参数会被 parseInt 忽略，但是第二个传的是 index（下标），
// parseInt 会将传过来的 index 当作进制数，所以结果是 [1, NaN, NaN]
// 
//
//
function returnInt(element) {
  return parseInt(element, 10);
}
['1', '2', '3'].map(returnInt); // [1, 2, 3]

2.forEach方法

概述：forEach() 方法对数组的每个元素执行一次提供的函数。

语法：

1
2
3
4
array.forEach(callback(currentValue, index, array){
    //do something
}, this)
array.forEach(callback[, thisArg])

参数：

  • callback:为数组中每个元素执行的函数，该函数接收三个参数：
    • currentValue(当前值):数组中正在处理的当前元素。
    • index(索引):数组中正在处理的当前元素的索引。
    • array:forEach()方法正在操作的数组。
  • thisArg:可选参数。当执行回调 函数时用作this的值(参考对象)。

  • 返回值：undefined

  • 描述：forEach 方法按升序为数组中含有效值的每一项执行一次callback 函数，那些已删除（使用delete方法等情况）或者未初始化的项将被跳过（但不包括那些值为 undefined 的项）（例如在稀疏数组上）。

  • callback 函数会被依次传入三个参数：数组当前项的值、数组当前项的索引、数组对象本身

  • 如果给forEach传递了thisArg参数，当调用时，它将被传给callback 函数，作为它的this值。否则，将会传入 undefined 作为它的this值。callback函数最终可观察到this值，这取决于 函数观察到this的常用规则。

  • forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变，则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了(例如使用 shift()) ，之后的元素将被跳过 - 参见下面的示例。

  • forEach() 为每个数组元素执行callback函数；不像map() 或者reduce() ，它总是返回 undefined值，并且不可链式调用。典型用例是在一个链的最后执行副作用。

如果数组在迭代时被修改了，则其他元素会被跳过。

下面的例子输出”one”, “two”, “four”。当到达包含值”two”的项时，整个数组的第一个项被移除了，这导致所有剩下的项上移一个位置。因为元素 “four”现在在数组更前的位置，”three”会被跳过。 forEach()不会在迭代之前创建数组的副本。

1
2
3
4
5
6
7
8
9
10
var words = ["one", "two", "three", "four"];
words.forEach(function(word) {
  console.log(word);
  if (word === "two") {
    words.shift();
  }
});
// one
// two
// four

3.reduce方法

概述：reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。
语法：arr.reduce([callback, initialValue])
参数

  • callback:执行数组中每个值的函数，包含四个参数：
    • previousValue:上一次调用回调函数返回的值，或者是提供的初始值（initialValue）
    • currentValue:数组中当前被处理的元素
    • currentIndex:当前被处理元素在数组中的索引, 即currentValue的索引.如果有initialValue初始值, 从0开始.如果没有从1开始.
    • array:调用 reduce 的数组
  • initialValue: 可选参数, 作为第一次调用 callback 的第一个参数。

  • 返回值：最后一次调用回调函数返回的结果

  • 描述：回调函数第一次执行时，previousValue 和 currentValue可能是两个不同值其中的一个，如果reduce有initialValue参数，那么 previousValue 等于 initialValue ，并且currentValue 等于数组中的第一个值；如果reduce没有 initialValue 参数，那么previousValue 等于数组中的第一个值，currentValue等于数组中的第二个值。

  • 注意: 如果没有 initialValue 参数, reduce 从 index 为1开始执行回调函数, 跳过第一个index. 如果有initialValue参数, reduce 将从index为 0 开始执行回调。

  • 如果数组是空的并且没有initialValue参数, 将会抛出TypeError错误. 如果数组只有一个元素并且没有初始值initialValue, 或者有initialValue但数组是空的, 这个唯一的值直接被返回而不会调用回调函数.

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

4.filter方法

概述：filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

语法：

1
var new_array = arr.filter(callback[, thisArg])

参数：

  • callback:用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。返回true表示保留该元素（通过测试），false则不保留。
  • thisArg:可选。执行 callback 时的用于 this 的值。

返回值： 一个新的通过测试的元素的集合的数组

  • 描述：filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。

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

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

  • filter 不会改变原数组。

  • filter 遍历的元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到。如果已经存在的元素被改变了，则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。

1
2
3
4
5
function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

5.every方法

概述：every() 方法测试数组的所有元素是否都通过了指定函数的测试。

语法：arr.every(callback[, thisArg])

参数

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

  • 描述：every 方法为数组中的每个元素执行一次 callback 函数，直到它找到一个使 callback 返回 false（表示可转换为布尔值 false 的值）的元素。如果发现了一个这样的元素，every 方法将会立即返回 false。否则，callback 为每一个元素返回 true，every 就会返回 true。callback 只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。

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

  • 如果为 every 提供一个 thisArg 参数，则该参数为调用 callback 时的 this 值。如果省略该参数，则 callback 被调用时的 this 值，在非严格模式下为全局对象，在严格模式下传入 undefined。

  • every 不会改变原数组。

  • every 遍历的元素范围在第一次调用 callback 之前就已确定了。在调用 every 之后添加到数组中的元素不会被 callback 访问到。如果数组中存在的元素被更改，则他们传入 callback 的值是 every 访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到。

1
2
3
4
5
6
7
function isBigEnough(element, index, array) {
  return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true

6.some方法

概述：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 访问到它那一刻的值。

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

js原型对象

摘抄自 https://segmentfault.com/a/1190000010842024拓展理解：https://github.com/mqyqingfeng/Blog/issues/2概念理解什么是原型对象呢？有以下几点1.构造函数有一个 prototype 属性，指向构造函数的原型对象。而 …

• 于 继续阅读
Older Post

js apply和call

先看定义call方法 语法：fun.call(thisArg, arg1, arg2, …) 定义：call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。 参数 thisArg 在fun函数运行时指定的this值。需要注意的是，指定的this值并不一定是该 …

• 于 继续阅读