JavaScript遍历数组方法map、forEach与filter


共同点:

1.都是循环遍历数组中的每一项。
2.forEach() 和 map() 里面每一次执行匿名函数都支持 3 个参数:数组中的当前项 item,当前项的索引 index,原始数组 input。 3.匿名函数中的 this 都是指 Window。 4.只能遍历数组

1.forEach()

没有返回值

let arr = [] //原数组
arr.forEach(function (value, index, array) {
  //do something
})

//demo
let ary = [12, 23, 24, 42, 1]
let res = ary.forEach(function (item, index, input) {
  input[index] = item * 10
})
console.log(res) //--> undefined;
console.log(ary) //--> 通过数组索引改变了原数组;//120,230,240,420,10

参数:
1.value 数组中的当前项, index 当前项的索引, array 原始数组; 2.数组中有几项,那么传递进去的匿名回调函数就需要执行几次; 3.理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改;但是可以自己通过数组的索引来修改原来的数组;

2.map()

有返回值,可以 return 出来

let arr = [] //原数组
arr.map(function (value, index, array) {
  //do something
  return XXX
})

//demo
let ary = [12, 23, 24, 42, 1]
let res = ary.map(function (item, index, input) {
  return item * 10
})
console.log(res) //-->[120,230,240,420,10];  原数组拷贝了一份,并进行了修改
console.log(ary) //-->[12,23,24,42,1];  原数组并未发生变化

参数
1.value 数组中的当前项,index 当前项的索引,array 原始数组。 2.区别:map 的回调函数中支持 return 返回值;return 的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了)

3.filter()

有返回值

var filteredArray = array.filter(callback[thisObject])
//过滤掉小于 10 的数组元素:

//demo
function isBigEnough(element, index, array) {
  return element >= 10
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough)
// 12, 130, 44
//结果:[12, 5, 8, 130, 44].filter(isBigEnough) : 12, 130, 44

参数
1.callback: 要对每个数组元素执行的回调函数。
2.thisObject: 在执行回调函数时定义的 this 对象。

功能:
对数组中的每个元素都执行一次指定的函数(callback),并且创建一个新的数组,该数组元素是所有回调函数执行时返回值为 true 的原数组元素。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略,同时,新创建的数组也不会包含这些元素。

回调函数可以有三个参数:当前元素,当前元素的索引和当前的数组对象。

如参数 thisObject 被传递进来,它将被当做回调函数(callback)内部的 this 对象,如果没有传递或者为 null,那么将会使用全局对象。

  • filter 不会改变原有数组,记住:只有在回调函数执行前传入的数组元素才有效,在回调函数开始执行后才添加的元素将被忽略,而在回调函数开始执行到最后一个元素这一期间,数组元素被删除或者被更改的,将以回调函数访问到该元素的时间为准,被删除的元素将被忽略。

4.map() + filter()

let arr = [10, 20, 3, 40, 5]
let newarr = arr.map(res => {
  return res + 2 //自定义
})
//newarr => [12,20,5,42,7]
let filterarr = newarr.filter(it => it > 10).map(it => it)
//filterarr => [12,22,42]

5.some()

//检查是否有数组元素大于等于10:

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
//结果:
//[2, 5, 8, 1, 4].some(isBigEnough) : false
//[12, 5, 8, 1, 4].some(isBigEnough) : true

对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回 true,如果发现这个元素,some 将返回 true,如果回调函数对每个元素执行后都返回 false ,some 将返回 false。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略。

6.every()

//测试是否所有数组元素都大于等于10:

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
//结果:
//[12, 5, 8, 130, 44].every(isBigEnough) 返回 : false
//[12, 54, 18, 130, 44].every(isBigEnough) 返回 : true

对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回 false,如果发现这个元素,every 将返回 false,如果回调函数对每个元素执行后都返回 true ,every 将返回 true。它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略

7.lastIndexOf()

//查找符合条件的元素:
//语法
var index = array.lastIndexOf(searchElement[, fromIndex]);

var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);
// index is 0
index = array.lastIndexOf(2, -2);
// index is 0
index = array.lastIndexOf(2, -1);
// index is 3
//结果:
//[2, 5, 9, 2].lastIndexOf(2) : 3
//[2, 5, 9, 2].lastIndexOf(7) : -1
//[2, 5, 9, 2].lastIndexOf(2, 3) : 3
//[2, 5, 9, 2].lastIndexOf(2, 2) : 0
//[2, 5, 9, 2].lastIndexOf(2, -2) : 0
//[2, 5, 9, 2].lastIndexOf(2, -1) : 3

当有元素符合条件时,返回当前元素的索引。如果没有发现,就直接返回 -1 。
searchElement: 要搜索的元素
fromIndex : 开始搜索的位置,默认为数组的长度(length),在这样的情况下,将搜索所有的数组元素。搜索是反方向进行的

8.indexOf()

//查找符合条件的元素:

var array = [2, 5, 9]
var index = array.indexOf(2)
// index is 0
index = array.indexOf(7)
// index is -1
//结果:
//[2, 5, 9].indexOf(2) : 0
//[2, 5, 9].indexOf(7) : -1

功能与 lastIndexOf()一样,搜索是正向进行的

9.match()

var str = 'The rain in SPAIN stays mainly in the plain'
var n = str.match(/ain/g)
//在字符串中查找 "ain":
// n=> ain,ain,ain

字符串模式匹配法

10.replace()

var str = 'Visit Microsoft! Visit Microsoft!'
var n = str.replace('Microsoft', 'Runoob')
//n=> Visit Runoob!Visit Microsoft!

我们将执行一次替换,当第一个 “Microsoft” 被找到(匹配),它就被替换为 “Runoob”

数组去重

function dedupe(array) {
  return [...new Set(array)]
}
var arr = [1, 2, 2, 3, 3, 4, 4, 5, 5]
console.log(dedupe(arr))

Author: Eric
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint policy. If reproduced, please indicate source Eric !
  TOC