js 对象和数组的遍历方法总结
2019-02-12 16:40
239 查看
js对象和数组的遍历
对象的遍历
-
for…in
遍历循环对象自身和继承的可枚举属性。 -
Object.keys() (Object.values() Object.entries())
Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。 -
Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。 -
Object.getOwnPropertySymbols(obj)
返回一个数组,包含对象自身的所有 Symbol 属性的键名。 -
Reflect.ownKeys(obj)
返回一个数组,包含对象自身的所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。
以上的 5 种方法遍历对象的键名,都遵守同样的属性遍历的次序规则。
- 首先遍历所有数值键,按照数值升序排列。
- 其次遍历所有字符串键,按照加入时间升序排列。
- 最后遍历所有 Symbol 键,按照加入时间升序排列。
Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 }) // ['2', '10', 'b', 'a', Symbol()]
上面代码中,Reflect.ownKeys方法返回一个数组,包含了参数对象的所有属性。这个数组的属性次序是这样的,首先是数值属性2和10,其次是字符串属性b和a,最后是 Symbol 属性。
对象的可枚举性
描述对象的enumerable属性,称为“可枚举性”,如果该属性为false,就表示某些操作会忽略当前属性。
目前,有四个操作会忽略enumerable为false的属性。
- for…in循环:只遍历对象自身的和继承的可枚举的属性。
- Object.keys():返回对象自身的所有可枚举的属性的键名。
- JSON.stringify():只串行化对象自身的可枚举的属性。
- Object.assign():忽略enumerable为false的属性,只拷贝对象自身的可枚举的属性。
数组的遍历
数组遍历性能最好的是for循环 然后是for…of 然后是 forEach、map。
- for 循环
var arr = ['a', 'b', 'c'] for (let i = 0, len=arr.length; i<len; i++){ console.log(arr[i]); } // a b c
- for…of (es6)
var arr = [ 4000 'a', 'b', 'c'] for (let item of arr){ console.log(item); } // a b c
- arr.forEach()
var arr = ['a', 'b', 'c'] arr.forEach((item, index)=>{ console.log(item, index) }) // a 0 // b 1 // c 2
- arr.map()
var arr = ['a', 'b', 'c'] var arr2 = arr.map((item, index)=>{ return [item, index] }) // arr2 [[a, 0], [b,1], [c,2]]
- arr.reduce()
var arr = ['a', 'b', 'c'] var result = arr.reduce((total, currentValue, currentIndex, arr)=>{return total + currentIndex + currentValue}, 'start') // start0a1b2c
- arr.some()
var arr = ['a', 'b', 'c'] var result = arr.some((item)=>{ return item === 'a' }) // true
- arr.every()
var arr = ['a', 'b', 'c'] var result = arr.every((item)=>{ return item === 'a' }) // false
for循环 for…of 中可以使用break、continue;
forEach、map中 不能使用 break、continue 如果想要跳出循环可以使用try catch;
const arr = [1,2,3,4,5] arr.forEach((item, index)=>{ console.log(item); if (index === 1) { break; } }) // VM69:5 Uncaught SyntaxError: Illegal break statement // at Array.forEach (<anonymous>) // at <anonymous>:2:5 try { arr.forEach((item, index)=>{ if (index === 1) { throw 'Jump out now!'; } console.log(item); }) } catch(e) { console.log(e) } // 1 // Jump out now!
相关文章推荐
- JS中遍历数组的一些方法总结
- JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
- js遍历对象、遍历数组、js数组方法大全、区分map()和forEach()以及filter()、区分for...in...和for...of...
- js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
- JS提交对象数组到服务端的方法总结(C#实例)
- js数组遍历所有元素方法 总结
- js数组Array对象常用方法总结
- 10-10 arguments存储实参、解决js获取CSS属性值兼容性、object对象、for语句遍历对象内容、数组中的方法
- JS中数组与对象的遍历方法实例小结
- JS中深拷贝数组、对象、对象数组方法总结
- java和js中遍历数组和对象的总结
- js 的each()方法遍历对象和数组
- js遍历对象的方法总结
- js遍历数组方法(总结)
- java和js中遍历数组和对象的总结
- js 的each()方法遍历对象和数组
- js遍历数组和对象的方法
- JS数组的遍历方法
- objective-c数组的四种遍历方法总结
- js克隆对象、数组的常用方法【clone】