本文介绍了JavaScript中常用的数组遍历方法，包括for of、for in（对象遍历）、forEach、map、filter、find、reduce以及includes、every和some方法。详细阐述了每个方法的用法和特点，如forEach用于替代传统的for循环，map用于映射数组，find用于查找特定元素，而some和every则用于检查数组中的元素是否满足条件。
for of
语法： for( let item of arr){}
--for…of语句在可迭代对象上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句 。
// 获取数组每个值value
const arr = ['a','b','c']
for(let item of arr){
console.log(item)
// 'a'
// 'b'
// 'c'
}
---------------------------------------
// 获取数组的下标或key
for(let item of arr.keys()){
console.log(item)
// 0
// 1
// 2
}
--------------------------------------
// 既想得到key 也想得到 value
for(let item of arr.entries()){
console.log(item)
// // [ 0, 'a' ]
// // [ 1, 'b' ]
// // [ 2, 'c' ]
}
for in 对象遍历
语法： for(let key in obj){}
–获取对象的属性（键）
–遍历对象本身的可枚举属性，包括继承来的属性（不包括Symbol()）
–没有返回值
let obj = {
name: "ned",
like: "man"
}
Object.defineProperty(obj, 'age', {
value: "18",
enumerable: false
});
for (item in obj) {
console.log(item)
}
// name
// like
--------------------------------------
// 获取对象的值
for (key in obj) {
console.log(obj[key])
}
// ned
// man
其他对象遍历方法：其返回值均为数组
--Object.keys()
--Object.values()
--Object.entries()
--Object.getOwnPropertyNames()
--Object.getOwnPropertySymbols()
--Reflect.ownKeys()
let obj = {
name:"ned",
like:"man"
}
console.log(Object.keys(obj)) // ['name', 'like']
console.log(Object.values(obj)) //[ 'ned', 'man' ]
console.log(Object.entries(obj)) //[ [ 'name', 'ned' ], [ 'like', 'man' ] ]
forEach 遍历数组(替代for)
语法: 数组名.forEach(function (item,index,arr) {})
常用：arr.forEach((item) => {})
item : 这个表示的是数组中的每一项
index : 这个表示的是每一项对应的索引
arr : 这个表示的是原数组
--对数组的每个元素执行一次给定的函数。
--不会改变其调用的数组。
--除非抛出异常，否则没有办法停止或中断 forEach() 循环。
--forEach() 总是返回 undefined，而且不能继续链式调用。
//简单数组
const array1 = ['a', 'b', 'c']
array1.forEach((element) => console.log(element))
// 'a'
// 'b'
// 'c'
// 需求：统计a,b,c出现的次数，存于对象中
let arr = ['a', 'b', 'c', 'a']
let obj = {}
arr.forEach((item) => {
if (obj[item]) {
obj[item]++
} else {
obj[item] = 1
}
})
console.log(obj)
// {
// a: 2,
// b: 1,
// c: 1
// }
// 需求：将type相同的对象筛选到同一个数组，存于二维数组中
let arr = [
{
id: 1,
name: 1112,
type: 1
},
{
id: 2,
name: 111,
type: 2
},
{
id: 3,
name: 222,
type: 2
},
{
id: 4,
name: 333,
type: 3
}
]
// 第一种方法
let arr2 = []
let arr3 = []
arr.forEach((item) => {
if (item.type === 1) {
arr1.push(item)
}
if (item.type === 2) {
arr2.push(item)
}
if (item.type === 3) {
arr3.push(item)
}
})
let res2 = [arr1,arr2,arr3]
console.log(res2)
// [
// [ { id: 1, name: 1112, type: 1 } ],
// [ { id: 2, name: 111, type: 2 }, { id: 3, name: 222, type: 2 } ],
// [ { id: 4, name: 333, type: 3 } ]
// ]
// 第二种方法
let arr1 = []
let res = []
let obj = {}
arr.forEach((item) => {
if (obj[item.type]) {
obj[item.type].push(item)
} else {
obj[item.type] = [item]
}
})
console.log(Object.values(obj))
// [
// [ { id: 1, name: 1112, type: 1 } ],
// [ { id: 2, name: 111, type: 2 }, { id: 3, name: 222, type: 2 } ],
// [ { id: 4, name: 333, type: 3 } ]
// ]
map 映射数组
语法: 数组名.map(function (item,index,arr) {})
常用：arr.map((item) => {})
item : 这个表示的是数组中的每一项
index : 这个表示的是每一项对应的索引
arr : 这个表示的是原数组
--创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
--返回值: 必然是一个数组, 一个映射完毕的数组；这个数组合原数组长度一样
--map 生成的新数组元素是可自定义。
// 简单数组
var arr = [1, 2, 3, 4, 5]
console.log('原始数组 : ', arr); //[1, 2, 3, 4, 5]
var res = arr.map((item) => {
return item*1000
})
console.log(res); //[1000, 2000, 3000, 4000, 5000]
// 对象数组
var arr = [
{
id: 1,
name: 'LXL'
},
{
id: 2,
name: 'SYK'
}
]
var res = arr.map((item) => {
return `@${item.name}`
})
console.log(res); //[ '@LXL', '@SYK' ]
console.log(res.join()); //@LXL,@SYK
var res2 = arr.map((item) => {
return {
...item,
name: `@${item.name}`
}
})
console.log(res2); //[{ id: 1, name: '@LXL' },{ id: 2, name: '@SYK' }]
filter 过滤数组
语法: 数组名.filter(function (item,index,arr) {})
常用：arr.filter((item) => {})
item : 这个表示的是数组中的每一项
index : 这个表示的是每一项对应的索引
arr : 这个表示的是原数组
--创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。
--返回值: 如果有就是过滤(筛选)出来的数据 保存在一个新数组中，数组长度与原数组不同；如果没有返回一个空数组
--filter 生成的新数组元素不可自定义，与对应原数组元素一致。
// 简单数组
var arr = [1, 2, 3, 4, 5]
console.log('原始数组 : ', arr); //[1, 2, 3, 4, 5]
var res = arr.filter((item) => {
return item > 2
})
console.log(res); //[ 3, 4, 5 ]
// 对象数组
const list = [
{ name: '头部导航', type: 'nav', id: 1 },
{ name: '轮播', type: 'content', id: 2 },
{ name: '页脚', type: 'nav', id: 3 },
];
// 过滤
const resultList = list.filter(item => {
console.log(item);
// { name: '头部导航', type: 'nav', id: 1 }
// { name: '轮播', type: 'content', id: 2 }
// { name: '页脚', type: 'nav', id: 3 }
return item.type === 'nav';
});
console.log(resultList)
// [
// { name: '头部导航', type: 'nav', id: 1 },
// { name: '页脚', type: 'nav', id: 3 }
// ]
// map 对比
const newList = list.map(item => {
return item.type === 'nav';
});
console.log(newList)
// [ true, false, true ]
find 查找
语法: 数组名.find(function (item,index,arr) {})
常用：arr.find((item) => {})
item : 这个表示的是数组中的每一项
index : 这个表示的是每一项对应的索引
arr : 这个表示的是原数组
--用来获取数组中满足条件的第一个数据
--返回值: 如果有就是满足条件的第一个数据；如果没有就是undefined
--注意: 要以return的形式执行返回条件
// 简单数组
var arr = [1, 2, 3, 4, 5]
var res = arr.find((item) => {
return item > 3
})
console.log(res) //4
// 对象数组
const list = [
{ name: '头部导航', id: 1 },
{ name: '轮播', id: 2 },
{ name: '页脚', id: 3 },
];
const result = list.find((item) => item.id === 3);
// 箭头函数结合解构赋值
const result = list.find(({id}) => id === 3);
console.log(result) // { name: '页脚', id: 3 }
recduce 叠加后的效果
语法: 数组名.reduce(function (prev,item,index,arr) {},初始值)
常用: arr.reduce((pre,item,index) => {})
prev :一开始就是初始值 当第一次有了结果以后；这个值就是第一次的结果
item : 这个表示的是数组中的每一项
index : 这个表示的是每一项对应的索引
arr : 这个表示的是原数组
--对数组中的每个元素按序执行一个提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
--返回值: 就是叠加后的结果
--注意: 以return的形式书写返回条件
--第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。否则，数组索引为 0 的元素将被用作初始值，迭代器将从第二个元素开始执行（即从索引为 1 而不是 0 的位置开始）。
// 简单数组
var arr = [1, 2, 3, 4, 5]
// 指定了初始值
var res = arr.reduce((prev,cur) => {
return prev += cur
}, 1)
//1+1+2+3+4+5
console.log(res); //16
// 未指定初始值
var res2 = arr.reduce((prev, cur) => {
return prev += cur
},)
// 1+2+3+4+5
console.log(res2) //15
// 对象数组
const list = [
{ name: 'left', width: 20 },
{ name: 'center', width: 70 },
{ name: 'right', width: 10 },
];
const total = list.reduce((pre, cur) => {
return pre + cur.width;
}, 0);
console.log(total) // 100
// 对象数组的去重，并统计每一项重复次数
const list = [
{ name: 'left', width: 20 },
{ name: 'right', width: 10 },
{ name: 'center', width: 70 },
{ name: 'right', width: 10 },
{ name: 'left', width: 20 },
{ name: 'right', width: 10 },
];
const repeatTime = {};
const result = list.reduce((pre, cur, index) => {
console.log(pre, index)
if (repeatTime[cur.name]) {
repeatTime[cur.name]++;
} else {
repeatTime[cur.name] = 1;
pre.push(cur);
}
return pre;
}, []);
// console.log(repeatTime) // { left: 2, right: 3, center: 1 }
// [] 0
// [ { name: 'left', width: 20 } ] 1
// [ { name: 'left', width: 20 }, { name: 'right', width: 10 } ] 2
// [
// { name: 'left', width: 20 },
// { name: 'right', width: 10 },
// { name: 'center', width: 70 }
// ] 3
// [
// { name: 'left', width: 20 },
// { name: 'right', width: 10 },
// { name: 'center', width: 70 }
// ] 4
// [
// { name: 'left', width: 20 },
// { name: 'right', width: 10 },
// { name: 'center', width: 70 }
// ] 5
// 对象数组最大/最小值获取
const list = [
{ name: 'left', width: 20 },
{ name: 'right', width: 30 },
{ name: 'center', width: 70 },
{ name: 'top', width: 40 },
{ name: 'bottom', width: 20 },
];
const max = list.reduce((pre, cur) => {
return pre.width >= cur.width ? pre : cur;
});
const min = list.reduce((pre, cur) => {
return pre.width <= cur.width ? pre : cur;
});
console.log('max=',max)
console.log('min=',min)
// max= { name: 'center', width: 70 }
// min= { name: 'left', width: 20 }
includes方法：
用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
语法：arr.includes(item,index)
–item:必填，需要查找的元素值
–index:可选，从该索引开始查找item，如果为负值，则按升序从arr.length+index的索引开始查找。默认为0
var arr = [10,20,30,40,50];
arr.includes(10); //true
arr.includes(10,1); //false
every
语法: 数组名.every(function (prev,item,index,arr) {})
常用: arr.every((pre,item,index) => {})
--every 循环查找数组中所有符合条件的元素并返回boolean值，只有当数组中有所有元素都符合条件才返回 true 否则返回 fasle
--循环会检测数组的每一个元素
--如果有一个元素不满足条件，则返回false，且剩余元素不在检测 即 循环结束。
--循环不会对空数组进行检测
--不会改变原数组。
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const res = arr.every((item,index,arr)=>{
return item > 3
})
console.log(res); // false
// 判断arr2和arr3是否为arr1的子集
let arr1 = [1,2,3,4,5,6,7]
let arr2 = [5,6,7]
let arr3 = [5,7,8]
const isSubset = (arr1, arr2) => {
return arr2.every((item) => arr1.includes(item))
}
let res1 = isSubset(arr1,arr2)
let res2 = isSubset(arr1,arr3)
console.log(res1) //ture
console.log(res2) //false
some
语法: 数组名.some(function (prev,item,index,arr) {})
常用: arr.some((pre,item,index) => {})
–some 循环查找数组中任意符合条件的元素并返回boolean值，当数组中有任意元素符合条件就返回 true 否则返回 fasle
–循环会依次执行数组的每一个元素。
–如果有一个元素满足条件，则返回 true，且剩余的元素不会在执行检测,即循环结束。
–循环不会对空数组进行检测
–循环不会改变原数组
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const res = arr.every((item,index,arr)=>{
return item > 3
})
console.log(res); // ture
et(arr1,arr3)
console.log(res1) //ture
console.log(res2) //false
扫一扫
6589
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
