一、ES5的方法
1.for循環(huán)
let arr = [1, 2, 3]
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
// 1
// 2
// 3
2.forEach()
- 特點： 沒有返回值，只是針對每個元素調(diào)用func
- 三個參數(shù)：item, index, arr ；當前項，當前項的索引，被遍歷的數(shù)組
let arr = [1, 2, 3]
arr.forEach(function (item, index, arr) {
console.log(item, index)
})
// 1 0
// 2 1
// 3 2
3. for 循環(huán) 和forEach區(qū)別
for 循環(huán)可以在循環(huán)體中終止或跳過該循環(huán)，forEach不可以
let arr = [1, 2, 3]
for (let i = 0; i < arr.length; i++) {
if (arr[i] === 1) {
continue // 跳過
}
if (arr[i] === 3) {
break
}
console.log(arr[i])
}
// 2
4.map()
- 特點：返回新的arr, 每個元素為調(diào)用函數(shù)返回的結(jié)果
- 參數(shù)：
function：必選，數(shù)組中每個元素都會執(zhí)行的函數(shù)
thisValue：可選，用作"this"指向，如果不傳，那么回調(diào)函數(shù)的this為全局對象
function的參數(shù)：item, index, arr ；當前項，當前項的索引，被遍歷的數(shù)組
let arr = [1, 2, 3]
let result = arr.map(function (value) {
value += 1
return value
})
console.log(arr, result)
//(3) [1, 2, 3] (3) [2, 3, 4]
4.filter()
- 特點：過濾元素， 返回符合條件的元素組成的新數(shù)組
let arr = [1,2,3]
let result = arr.filter(function (value) {
return value === 2
})
console.log(arr, result)
// (3) [1, 2, 3] [2]
5.some()
- 特點: 返回boolean，只要循環(huán)中，有一個元素符合條件，那么就返回true，否則false
let arr = [1,2,3]
let result = arr.some(function (value) {
return value === 2
})
console.log(arr, result )
// (3) [1, 2, 3] true
6.every()
- 特點: 返回boolean，在循環(huán)中，每一個元素都符合條件，那么就返回true,否則false
let arr = [1,2,3]
let result = arr.every(function (value) {
return typeof value === 'number'
})
console.log(arr, result)
// (3) [1, 2, 3] true
7.reduce()
1. 接收一個函數(shù)作為累加器
2. 參數(shù)：function(prev, cur, index, arr)， initValue
prev 表示上一次調(diào)用函數(shù)的返回值
cur 表示當前正在處理的元素
index 當前元素的索引
arr 原數(shù)組
initValue 傳遞給函數(shù)的初始值
3. 常見應(yīng)用場景
- 求數(shù)組的每一項的和
let arr = [1, 2, 3]
let sum = arr.reduce(function(prev, cur, index, arr){
return prev + cur
}, 0)
console.log(sum)
// 6
- 找到數(shù)組里面最大的值
let arr = [1, 2, 3]
let max = arr.reduce(function (prev, cur) {
return Math.max(prev, cur)
})
console.log(arr, max)
// (3) [1, 2, 3] 3
- 數(shù)組去重
let arr = [1, 2, 3, 2, 4]
let res = arr.reduce(function (prev, cur) {
prev.indexOf(cur) == -1 && prev.push(cur)
return prev
}, [])
console.log(res)
// (4) [1, 2, 3, 4]
8.for in （謹慎使用）
1.特點：不僅循環(huán)遍歷了數(shù)組本身，同時循環(huán)遍歷了數(shù)組原型鏈上的屬性和方法
let arr = [1, 2, 3]
Array.prototype.name ='xiaoxiao'
Array.prototype.foo = function () {
console.log('foo')
}
for (let index in arr) {
console.log(index, arr[index])
}
//0 1
// 1 2
// 2 3
// name xiaoxiao
// foo ? () {
// console.log('foo')
// }
二、ES6的方法
1.find()
返回第一個符合條件的元素文章來源：http://www.zghlxwxcb.cn/news/detail-663435.html
let arr = [1,2,3,4, 2]
let res = arr.find(function (value) {
return value === 2
})
console.log(res, arr)
// 2 (5) [1, 2, 3, 4, 2]
// 返回第一個數(shù)字2
2.findIndex()
返回第一個符合條件的元素的索引文章來源地址http://www.zghlxwxcb.cn/news/detail-663435.html
let arr = [1,2,3,4, 2]
let res = arr.findIndex(function(value) {
return value === 2
})
console.log(arr, res)
// (5) [1, 2, 3, 4, 2] 1
3.for of 循環(huán)
1. 普通循環(huán)
let arr = [
{
name: '張三',
age: 18
},
{
name: '趙四',
age:20
}
]
for( let item of arr) {
console.log(item, arr)
}
// {name: '張三', age: 18}, Object (2) [{…}, {…}]
// {name: '趙四', age: 20}, Object (2) [{…}, {…}]
2.values() 獲取每一項的value值
let arr = [
{
name: '張三',
age: 18
},
{
name: '趙四',
age:20
}
]
for( let item of arr.values()) {
console.log(item, arr)
}
// {name: '張三', age: 18}, Object (2) [{…}, {…}]
// {name: '趙四', age: 20}, Object (2) [{…}, {…}]
3.keys() 獲取每一項的索引
let arr = [
{
name: '張三',
age: 18
},
{
name: '趙四',
age:20
}
]
for( let item of arr.keys()) {
console.log(item, arr)
}
// 0 (2) [{…}, {…}]
// 1 (2) [{…}, {…}]
4.entries()，返回每一項 索引 和 value值 組合的數(shù)組
let arr = [
{
name: '張三',
age: 18
},
{
name: '趙四',
age:20
}
]
for( let [index, item] of arr.entries()) {
console.log(index, item)
}
// 0 {name: '張三', age: 18}
// 1 {name: '趙四', age: 20}
到了這里，關(guān)于【ES5和ES6】數(shù)組遍歷的各種方法集合的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
