还搞不清JS里for..in for...of forEach map各种遍历方式的区别吗
原创还搞不清JS里for..in for...of forEach map各种遍历方式的区别吗
原创
for
for循环是JS里最简单也是最通用的遍历方式，我们需要知道遍历的次数。
for循环里return,break等关键字都是可以用的
let arr=[1,2,3,4,5];
for (let i = 0; i < arr.length; i++) {
console.log(i + ':' + arr[i]) //0:1 1:2 2:3 ...
}
1234for in
for…in 是es5标准， 此方法遍历数组效率比较低，它的作用主要是去遍历对象的可枚举属性。遍历的key,key为string类型，也会循环原型链中的属性，适用于对象。我们可以简单的认为，for...in是为遍历对象而设计的，不适合遍历数组。
遍历数组的缺点：数组的下标index值是数字，for-in遍历的index值"0","1","2"等是字符串
var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var x;
for (x in person) {
text += person[x] + " ";
}
//John Doe 25
1234567for of
for…of是ES6的标准，该方法遍历的是可迭代对象(包括 Array，Map，Set，String，TypedArray，arguments 对象等等）的属性所对应的值(value：键值)。所以它用来遍历数组时得到每个元素的值。
var arr = [
{id:1,value:'A'},
{id:2,value:'B'},
{id:3,value:'C'}
]
var str ='Hello'
for(let item of str){
console.log(item) //H e l l o
}
for(let item of arr){
console.log(item) //{id:1,value:'A'},{id:2,value:'B'},{id:3,value:'C'}
}
123456789101112forEach
array.forEach(function(currentValue, index, arr), thisValue)
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数,是最节省内存的一种，但是不能break，也不能return。注意: forEach() 只适用于数组，且对于空数组是不会执行回调函数的
var arr = [
{id:1,value:'A'},
{id:2,value:'B'},
{id:3,value:'C'}
]
arr.forEach(function(v,key,arr){
console.log(v,key,arr)
})
12345678
map
array.map(function(currentValue,index,arr), thisValue)
map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回,即可以return。注意：map仅适用于数组
var arr = [
{id:1,value:'A'},
{id:2,value:'B'},
{id:3,value:'C'}
]
var res = arr.map(function (item,index,ary ) {
return item.value='D';
})
console.log(res);// ["D", "D", "D"]; 原数组拷贝了一份，并进行了修改
console.log(arr);// [ {id: 1, value: "A"},{id: 2, value: "B"},{id: 3, value: "C"}]； 原数组并未发生变化
12345678910filter
Array.filter(function(currentValue, indedx, arr), thisValue) filter用于对数组进行过滤。创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let res = nums.filter((num) => {
return num > 5;
});
console.log(res); // [6, 7, 8, 9, 10]
12345reduce
array.reduce((total,currentValue,currentIndex,arr),initialValue)
接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。reduce() 对于空数组是不会执行回调函数的。
[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
});
//10
1234keys，values，entries
ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历
var arr= [
{id:1,value:'A'},
{id:2,value:'B'},
{id:3,value:'C'},
]
for (let index of arr.keys()) {
console.log(index);
}
// 0
// 1
// 2
for (let elem of arr.values()) {
console.log(elem);
}
// {id: 1, value: "A"}
// {id: 2, value: "B"}
// {id: 3, value: "C"}
for (let [index, elem] of arr.entries()) {
console.log(index, elem);
}
//0 {id: 1, value: "A"}
//1 {id:2,value:'B'}
//2 {id:3,value:'C'}
1234567891011121314151617181920212223every/some
返回一个布尔值。当我们需要判定数组中的元素是否满足某些条件时，可以使用every/some。这两个的区别是，every会去判断判断数组中的每一项，而some则是当某一项满足条件时返回。
let foo=[5,1,3,7,4].every(function (item,index) {
console.log(`索引：${index}，数值：${item}`)
return item>2
})
console.log(foo)
12345
let foo=[5,1,3,7,4].some(function (item,index) {
console.log(`索引：${index}，数值：${item}`)
return item>2
})
console.log(foo)
12345
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
