js数组遍历和对象遍历
js数组遍历和对象遍历
- 针对js各种遍历作一个总结分析，从类型用处：分数组遍历和对象遍历；还有性能，优缺点等。
JS数组遍历：
1.普通for循环，经常用来遍历数组或者json 是key
var arr = [1,2,0,3,9];
for ( var i = 0; i <arr.length; i++){
console.log(arr[i]);
}
2.优化版for循环:
使用变量，将长度缓存起来，避免重复获取长度，数组很大时优化效果明显
var arr = [1,2,0,3,9];
for(var j = 0,len = arr.length; j < len; j++){
console.log(arr[j]);
}
3.map()
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 不会改变原始数组
var arr = [1,2,3];
var brr = arr.map(function(item,index) {
return item * 2;
})
console.log(arr);
console.log(brr);
// [1, 2, 3]
// [2, 4, 6]
因为返回的是一个新数组，这样的优点在于你可以使用复合(composition)(map(), filter(), reduce()等组合使用)来玩出更多的花样。
let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);
// arr2 = [6, 8, 10]
map遍历支持使用return语句，支持return返回值
4.forEach()
遍历数组 列出数组的value
forEach没有返回值，forEach适合于你并不打算改变数据的时候，而只是想用数据做一些事情 – 比如存入数据库或则打印出来。
var arr = [1,2,3];
var brr = arr.forEach(function(item,index) {
return item * 2;
})
console.log(arr);
console.log(brr);
// [1, 2, 3]
// undefined
forEach 不能使用break语句中断循环，也不能使用return语句返回到外层函数。
map 和 forEach总结：
- map()会分配内存空间存储新数组并返回，forEach()不会返回数据。
- forEach()允许callback更改原始数组的元素。map()返回新的数组。
5.for-of遍历
for..of为ES6新增的方法，主要来遍历可迭代的对象（包括Array, Map, Set, arguments等），它主要用来获取可迭代对象的属性值(键值)，而for..in主要获取对象的属性名(键)。
var arr1 = [1, 2, 3]
for (let i of arr1){
console.log(i)
}
// 遍历普通对象报错
var obj2 = {fname:1, name2:22}
for(let val of obj2){
console.log(val)
}
for-of循环支持数组，还支持类对象(例如DOM NodeList对象)，字符串，map对象，set对象
for -of遍历数组，遍历的结果是数组的值
for-of不适合遍历普通对象
JS对象遍历：
1.Object.keys()遍历对象
1.1，在实际开发中，我们有时需要知道对象的所有属性,Object.keys()，传入对象，返回属性名并放在数组里
var obj = {'a':'123','b':'345'}
console.log(Object.keys(obj))
// ["a", "b"]
1.2，Object.keys().forEach() 遍历对象，把对象的属性名转成数组，可与数组遍历结合使用
var person = {
name: 'hhh',
age:'20',
sex:'男',
home:'china'
}
var keys = Object.keys(person).forEach((e) =>{
console.log('person', e, ':', person[e])
})
// Object.keys 遍历对象，把对象的属性名转成数组，可与数组遍历结合使用
var keys2 = Object.keys(person)
console.log(keys2)
// ["name", "age", "sex", "home"]
2.for-in遍历对象
for...in遍历对象，它遍历的是key
var obj = {
name: "lokka",
age: 18,
address: "beijing",
1: "ok",
_:"yes"
}
for ( var key in obj ) {
console.log(key +'-'+ obj[key]);
}
// 1-ok
// name-lokka
// age-18
// address-beijing
// _-yes
使用for…in循环时，返回的是所有能够通过对象访问的、可枚举的属性，既包括存在于实例中的属性，也包括存在于原型中的实例。
会遍历实例的属性，还会遍历整个原型链，这可能不是你所期望的结果，然后从性能角度上看Object.keys()会更优。
for in 也可以用来遍历数组的下标,不过得到的是string
var arr = [1,2,3,4,6]
for (var index in arr){
console.log(arr[index])
console.log(index)
console.log(typeof(index))
}
for-in遍历，会把属性名排序
let obj2 = {b:2, a:'11', 1:'ok'}
for (let key in obj2) {
console.log(key)
}
// 1
// b
// a
首先遍历所有数值键，按照数值升序排列。
其次遍历所有字符串键，按照加入时间升序排列。
最后遍历所有 Symbol 键，按照加入时间升序排列。
遍历数组的缺点：for-in遍历的index值"0","1","2"等是字符串
补充：对象的属性分为可枚举和不可枚举之分，它们是由属性的enumerable值决定的。因此for-in循环有缺陷，需要和object.hasOwnProperty(key)一起使用。
for...in总结：
1、for in遍历对象时，会遍历实例的属性+还遍历原型中可枚举的属性
2、for in可以遍历数组，但是遍历数组遍历的是下标，得到的下标类型是字符串
3，for in遍历会以某些顺序遍历对象的属性名
for in 和 for of 对比
for…of为ES6新增的方法，获取(类)数组的属性值（键值）value
for…in获取数组或者对象的属性名(键)key
var colors = ['red', 'green', 'blue'];
colors.length = 5;
colors.push('yellow');
for (var i in colors) {
console.log(colors[i]); // red green blue yellow
}
for (var j of colors) {
console.log(j); // red green blue undefined undefined yellow
}
Object.keys().forEach() 方法遍历对象
1. 先说下Object.keys()
Object.keys()用于获得由对象属性名组成的数组
var obj = {
name: "lokka",
age: 18,
address: "beijing",
1: "ok",
_:"yes"
}
console.log(Object.keys(obj));
// [ '1', 'name', 'age', 'address', '_' ]
方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致
2. Object.keys() 结合 forEach() 遍历对象
var obj = {
name: "lokka",
age: 18,
address: "beijing",
1: "ok",
_:"yes"
}
Object.keys(obj).forEach(function(i) {
console.log(i, obj[i]);
})
// 1 ok
// name lokka
// age 18
// address beijing
// _ yes
- 有人会问，为什么不直接使用 for in 循环遍历对象，为什么要用 Object.keys(obj).forEach(i=>{})
遍历对象，而且看着更加的复杂了？
因为是从性能上进行考虑：
for in 会遍历整个原型链，这可能不是你所期望的结果，然后从性能角度上看 Object.keys 会更优。在一些eslint 的规则中也默认禁用了 for in 循环。
从方法的角度简结：
- 单数组：⬇
获取下标：
普通for循环，
优化版for循环，
获取value
map()
forEach()
for of
- 单对象⬇
获取key
Object.keys()
- 数组 对象 ⬇
获取key 或者下标string
for in
原文链接：https://blog.csdn.net/alokka/article/details/103083140
原文链接：https://www.cnblogs.com/yizhilin/p/7344675.html
浙公网安备 33010602011771号