前言
程序员在开发中会频繁的使用到数组遍历,熟练掌握数组遍历的各种方法能提高日常工作的开发效率,使得开发更加快捷、方便。
简介
数组遍历的方法多种多样,在开发中选择适当的遍历方法可使开发效率更高效、代码更整洁美观。
数组遍历的方法
- for
- map
- forEach
- every
- some
- filter
- for…of
- reduce
- reduceRight
- find
- findIndex
- keys
- values
- entries
遍历方法简介及使用
for
说明
- 使用临时变量,将长度缓存下来,避免重复获取数组长度,当数组较大时优化效果才能更明显。
Demo1
通过封装函数处理返回需要的数据。
forLoop = (arr) => {
for (let i = 0; i < arr.length; i++) {
// TODO 做数组操作
return arr[i];
}
}
let forVariate = forLoop([2, '3', 'hello']);
console.log(forVariate); // 2
Demo2
简单的数组遍历
let arr = [2, '3', 'hello'];
for (let i = 0; i < arr.length; i++) {
// TODO1 : 打印数组的每一项
console.log(arr[i]); // 2 3 hello
// TODO2 : 打印数组中下表为1的那一项
if (i == 1) {
console.log(arr[1]); // 3
}
// TODO.....
}
打印结果:
map
说明:
- 改变原数组。
Demo1
说明:使用map遍历数组。
let arr = ['1', 2, 2, 4, 5, 'like'];
arr.map((item, index, originArr) => {
console.log(`值:${item} -- 下标:${index} -- 原数组:${originArr}`);
})
打印结果:
Demo2
说明:使用map会改变原数组。
let arr = [
{
name:'lily',
age:'12'
},
{
name:'Mike',
age:'18'
}
];
arr.map((item,index) => {
if (index == '1') {
item.age = '100';
}
})
console.log(arr);
打印结果:
forEach
说明:使用forEach遍历。
let arr = ['a', 'b', 'c', 'd'];
arr.forEach((item, index, originArr) => {
console.log(`值:${item} -- 下标:${index} -- 原数组:${originArr}`)
})
打印结果:
Demo2
说明:forEach遍历改变原数组。
let arr = [
{
name: 'lily',
age: '12'
},
{
name: 'Mike',
age: '18'
}
];
arr.forEach((item, index) => {
if (index == '1') {
item.age = '100';
}
})
console.log(arr);
打印结果:
every
说明:
解释:every()方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。他返回一个布尔值。
语法:arr.every(callback[,thisArg])
参数:
callback:用来测试每个元素的函数,他可以接收三个参数:
element:用于测试的当前值。
index:可选。用于测试的当前值得索引。
array:可选。调用every的当前数组。
thisArg:执行callback时使用的this值。
返回值:如果回调函数的每一次返回都为truthy值,返回true,否则返回false。
注意:
1.若收到一个空数组,此方法在一切情况下都会返回true。
2.every()不会改变原数组。
Demo1
说明:使用every遍历originalArr,判断数组的value值是否等于橙子的value值(1044A2100000000ENEXD)。
let originalArr = [
{
label: "苹果",
parentValue: "-1",
value: "1044A21000000006BNS6"
},
{
label: "香蕉",
parentValue: "-1",
value: "1044AA1000000000006X"
},
{
label: "橘子",
parentValue: "-1",
value: "1044AA1000000000007D"
},
{
label: "榴莲",
parentValue: "-1",
value: "1044A21000000009CBVI"
},
{
label: "橙子",
parentValue: "-1",
value: "1044A2100000000ENEXD"
},
{
label: "西瓜",
parentValue: "-1",
value: "1044A510000000331G9V"
}
];
let newArr1 = originalArr.every(item => item.value == '1044A2100000000ENEXD');
console.log(newArr1); // false
打印结果:
Demo2
说明:用every遍历originalArr,判断数组的value值是否等于橙子的value值(1044A2100000000ENEXD)或 榴莲的value值(1044A21000000009CBVI)。
let originalArr = [
{
label: "苹果",
parentValue: "-1",
value: "1044A21000000006BNS6"
},
{
label: "香蕉",
parentValue: "-1",
value: "1044AA1000000000006X"
},
{
label: "橘子",
parentValue: "-1",
value: "1044AA1000000000007D"
},
{
label: "榴莲",
parentValue: "-1",
value: "1044A21000000009CBVI"
},
{
label: "橙子",
parentValue: "-1",
value: "1044A2100000000ENEXD"
},
{
label: "西瓜",
parentValue: "-1",
value: "1044A510000000331G9V"
}
];
let newArr2 = originalArr.every(item => {
return item.value == '1044A2100000000ENEXD' || item.value == '1044A21000000009CBVI';
})
console.log(newArr2); // false
// 或
let newArr3 = originalArr.every(item => item.value == '1044A2100000000ENEXD' || item.value == '1044A21000000009CBVI')
console.log(newArr2); // false
打印结果:
Demo3
说明:用every遍历originalArr,判断数组的每一项的value值是否存在。
let newArr4 = originalArr.every(item => item.value);
console.log(newArr4); // true
打印结果:
some
说明:
Demo1
说明
filter
说明:
for…of
说明:
reduce
说明:
reduceRight
说明:
find
说明:
1.find遍历,不会改变原数组。
2.find对于空数组,函数是不会执行的。
3.如果没有符合条件的元素返回 undefined。
Demo1
find可作判断条件的应用。
var arr = [
{
name: "lily",
age: '15',
birth: '2018',
},
{
name: "lily",
age: '18',
birth: '2019',
},
{
name: "Mike",
age: '18',
birth: '2019',
}
];
if (arr.find(({ name, birth }) => name == 'Mike')) {
console.log('YES'); // YES
}
if (arr.find(({ name, birth }) => name == 'Mike1')) {
console.log('YES');
} else {
console.log('NO'); // NO
}
let status1 = arr.find(({ name, birth }) => birth == '2018');
console.log(status1); // {name: "lily", age: "15", birth: "2018"}
let status2 = arr.find(({ name, birth }) => name == 'lily1');
console.log(status2); // undefined
console.log(typeof arr.find(({ name }) => name == 'Mike')); // object
打印结果:
后续未完,请继续关注,Thanks!☺