您的位置:首页 > Web前端 > JavaScript

js 对象和数组的遍历方法总结

2019-02-12 16:40 239 查看

js对象和数组的遍历

对象的遍历

  1. for…in
    遍历循环对象自身和继承的可枚举属性。

  2. Object.keys() (Object.values() Object.entries())
    Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。

  3. Object.getOwnPropertyNames(obj)
    Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。

  4. Object.getOwnPropertySymbols(obj)
    返回一个数组,包含对象自身的所有 Symbol 属性的键名。

  5. 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。

  1. for 循环
var arr = ['a', 'b', 'c']
for (let i = 0, len=arr.length; i<len; i++){
console.log(arr[i]);
}
// a b c
  1. for…of (es6)
var arr = [
4000
'a', 'b', 'c']
for (let item of arr){
console.log(item);
}
// a b c
  1. arr.forEach()
var arr = ['a', 'b', 'c']
arr.forEach((item, index)=>{
console.log(item, index)
})
// a 0
// b 1
// c 2
  1. arr.map()
var arr = ['a', 'b', 'c']
var arr2 =  arr.map((item, index)=>{
return [item, index]
})
// arr2 [[a, 0], [b,1], [c,2]]
  1. arr.reduce()
var arr = ['a', 'b', 'c']
var result = arr.reduce((total, currentValue, currentIndex, arr)=>{return total + currentIndex + currentValue}, 'start')
// start0a1b2c
  1. arr.some()
var arr = ['a', 'b', 'c']
var result = arr.some((item)=>{
return  item === 'a'
})
// true
  1. 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!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: