Fundebug

Array.map

Array.map通过对输入的数组中每一个元素进行变换，返回由变换后的元素按序组成的新数组。原始数组的值不会被修改。假设我们相对一个数组中的每一个元素乘以3，使用for循环可以这样写。

for循环

``````var originalArr = [1, 2, 3, 4, 5];
var newArr = [];
for(var i = 0; i < originalArr.length; i++) {
newArr[i] = originalArr[i] * 3;
}
console.log(newArr); // -> [3, 6, 9, 12, 15]
``````

multiplyByThree函数

``````var originalArr = [1, 2, 3, 4, 5];
function multiplyByThree(arr) {
var newArr = [];

for(var i = 0; i < arr.length; i++) {
newArr[i] = arr[i] * 3;
}
return newArr;
}
var arrTransformed = multiplyByThree(originalArr);
console.log(arrTransformed); // -> [3, 6, 9, 12, 15]
``````

``````var originalArr = [1, 2, 3, 4, 5];
function timesThree(item) {
return item * 3;
}
function multiplyByThree(arr) {
var newArr = [];

for(var i = 0; i < arr.length; i++) {
newArr[i] = timesThree(arr[i]);
}
return newArr;
}
var arrTransformed = multiplyByThree(originalArr);
console.log(arrTransformed); // -> [3, 6, 9, 12, 15]
``````

multiply函数

``````function multiplyByThree(arr) {
var newArr = [];

for(var i = 0; i < arr.length; i++) {
newArr[i] = timesThree(arr[i]);
}
return newArr;
}
``````

``````function multiply(arr, multiplyFunction) {
var newArr = [];

for(var i = 0; i < arr.length; i++) {
newArr[i] = multiplyFunction(arr[i]);
}
return newArr;
}
``````

``````var originalArr = [1, 2, 3, 4, 5];
function timesThree(item) {
return item * 3;
}
var arrTimesThree = multiply(originalArr, timesThree);
console.log(arrTimesThree); // -> [3, 6, 9, 12, 15]
``````

``````var originalArr = [1, 2, 3, 4, 5];
function timesFive(item) {
return item * 5;
}
var arrTimesFive = multiply(originalArr, timesFive);
console.log(arrTimesFive); // -> [5, 10, 15, 20, 25]
``````

Map

``````function multiply(arr, multiplyFunction) {
var newArr = [];

for(var i = 0; i < arr.length; i++) {
newArr[i] = multiplyFunction(arr[i]);
}
return newArr;
}
``````

``````function map(arr, transform) {
var newArr = [];

for(var i = 0; i < arr.length; i++) {
newArr[i] = transform(arr[i]);
}
return newArr;
}
``````

``````function makeUpperCase(str) {
return str.toUpperCase();
}
var arr = ['abc', 'def', 'ghi'];
var ARR = map(arr, makeUpperCase);
console.log(ARR); // -> ['ABC', 'DEF, 'GHI']
``````

Array.map

``````function func(item) {
return item * 3;
}
var arr = [1, 2, 3];
var newArr = map(arr, func);
console.log(newArr); // -> [3, 6, 9]
``````

``````function func(item) {
return item * 3;
}
var arr = [1, 2, 3];
var newArr = arr.map(func);
console.log(newArr); // -> [3, 6, 9]
``````

Arrary.map参数解析

``````function logItem(item) {
console.log(item);
}
function logAll(item, index, arr) {
console.log(item, index, arr);
}
var arr = ['abc', 'def', 'ghi'];
arr.map(logItem); // -> 'abc', 'def', 'ghi'
arr.map(logAll); // -> 'abc', 0, ['abc', 'def', 'ghi']
// -> 'def', 1, ['abc', 'def', 'ghi']
// -> 'ghi', 2, ['abc', 'def', 'ghi']
``````

``````function multiplyByIndex(item, index) {
return (index + 1) + '. ' + item;
}
var arr = ['bananas', 'tomatoes', 'pasta', 'protein shakes'];
var mappedArr = arr.map(multiplyByIndex);
console.log(mappedArr); // ->
// ["1. bananas", "2. tomatoes", "3. pasta", "4. protein shakes"]
``````

``````function map(arr, transform) {
var newArr = [];

for(var i = 0; i < arr.length; i++) {
newArr[i] = transform(arr[i], i, arr);
}
return newArr;
}
``````

Array.filter

Array.filter将数组中不满足条件的元素过滤，我们可以用for循环加上Array.push来实现。

for-loop

``````var arr = [2, 4, 6, 8, 10];
var filteredArr = [];
for(var i = 0; i < arr.length; i++) {
if(arr[i] > 5) {
filteredArr.push(arr[i]);
}
}
console.log(filteredArr); // -> [6, 8, 10]
``````

``````function filterLessThanFive(arr) {
var filteredArr = [];
for(var i = 0; i < arr.length; i++) {
if(arr[i] > 5){
filteredArr.push(arr[i]);
}
}
return filteredArr;
}
var arr1 = [2, 4, 6, 8, 10];
var arr1Filtered = filterLessThanFive(arr1);
console.log(arr1Filtered); // -> [6, 8, 10]
``````

``````function isGreaterThan5(item) {
return item > 5;
}
function filterLessThanFive(arr) {
var filteredArr = [];
for(var i = 0; i < arr.length; i++) {
if(isGreaterThan5(arr[i])) {
filteredArr.push(arr[i]);
}
}
return filteredArr;
}
var originalArr = [2, 4, 6, 8, 10];
var newArr = filterLessThanFive(originalArr);
console.log(newArr); // -> [6, 8, 10]
``````

``````function filterBelow(arr, greaterThan) {
var filteredArr = [];
for(var i = 0; i < arr.length; i++) {
if(greaterThan(arr[i])) {
filteredArr.push(arr[i]);
}
}
return filteredArr;
}
var originalArr = [2, 4, 6, 8, 10];
``````

``````function isGreaterThan5(item) {
return item > 5;
}
var newArr = filterBelow(originalArr, isGreaterThan5);
console.log(newArr); // -> [6, 8, 10];
``````

Array.filter

``````function filter(arr, testFunction) {
var filteredArr = [];
for(var i = 0; i < arr.length; i++) {
if(testFunction(arr[i])) {
filteredArr.push(arr[i]);
}
}
return filteredArr;
}
``````

``````var arr = ['abc', 'def', 'ghijkl', 'mnopuv'];
function longerThanThree(str) {
return str.length > 3;
}
var newArr1 = filter(arr, longerThanThree);
var newArr2 = arr.filter(longerThanThree);
console.log(newArr1); // -> ['ghijkl', 'mnopuv']
console.log(newArr2); // -> ['ghijkl', 'mnopuv']
``````

``````function func(item, index, arr) {
console.log(item, index, arr);
}
var arr = ['abc', 'def', 'ghi'];
arr.filter(func); // -> 'abc', 0, ['abc', 'def', 'ghi']
// -> 'def', 1, ['abc', 'def', 'ghi']
// -> 'ghi', 2, ['abc', 'def', 'ghi']
``````

https://blog.fundebug.com/2017/07/26/master_map_filter_by_hand_written/

Fundebug

2018/06/25
0
0
[JavaScript]-Array构造的数组使用map为何失效?

[示例] 假设你需要生成一个从0到99的数组。你要怎么做呢？下面是一种解法： 看到这种使用传统的for循环的方式会有点不大习惯。事实上，各种高阶函数，像forEach, map, filter, reduce足以写出...

xiaoLoo
2018/06/27
0
0

2018/07/24
0
0

Fundebug
2018/12/28
0
0
JavaScript 高阶函数快速入门

03/20
0
0

Android7.1 recent过滤指定应用

12分钟前
0
0

21分钟前
0
0

xiaomin0322
26分钟前
0
0

wlc534
28分钟前
0
0

38分钟前
0
0