JS数组对象遍历

对象

测试代码：

// 构建继承对象
const person = {extend_prop: 'chinese'};
person[Symbol('extend_symbol')] = 'symbol';
Object.defineProperty(person, 'extend_non_enumerable', {
  value: '',
  enumerable: false
})

// 测试对象
const bruce = {
  self_prop: 'bruce',
}

// 修改原型继承，生产中不推荐这么做
bruce.__proto__ = person
// 加入symbol属性
bruce[Symbol('self_symbol')] = "secret";
// 不可枚举属性
Object.defineProperty(bruce, 'self_non_enumerable', {
  enumerable: false,
  value: 'unKnow'
})

1. for in

for (let key in bruce) {
  // 展示对象自身及继承的可枚举属性，不展示Symbol属性、不可枚举属性
  console.log(key)   // self_prop extend_prop
  // 继承属性
}

2. Object.keys

// 展示对象自身的可枚举属性，不展示Symbol属性、不可枚举属性、继承属性
console.log(Object.keys(bruce))   // [ 'self_prop' ]
// 最少的

3. Object.getOwnPropertyNames

// 展示对象自身的可枚举及不可枚举属性，不展示Symbol属性、继承属性
console.log(Object.getOwnPropertyNames(bruce))  // [ 'self_prop', 'self_non_enumerable' ]
// 自身不可枚举

4. Object.getOwnPropertySymbols

// 展示自身的symbol属性，不展示其他属性、继承属性
console.log(Object.getOwnPropertySymbols(bruce))  // [ Symbol(self_symbol) ]

5. Reflect.ownkeys

// 展示对象自身的可枚举、不可枚举、symbol属性，不展示继承属性
console.log(Reflect.ownKeys(bruce))  // [ 'self_prop', 'self_non_enumerable', Symbol(self_symbol) ]

数组

测试代码

// 包含空元素
const arr = ['foo', 'bar', , 'baz'];
// 非数字属性
arr.descripe = 'just array~';

1. for in

跳过空元素

// 0 foo
// 1 bar
// 3 baz
// descripe just array~
for (let i in arr) {
  console.log(i, arr[i]);
}

2. for

跳过非数字属性

// 0 foo
// 1 bar
// 2 undefined
// 3 baz
for (let i = 0; i < arr.length; i++) {
  console.log(i, arr[i])
}

3. forEach

跳过空元素，跳过非数字属性

// foo
// bar
// baz
arr.forEach(item => console.log(item))

4. for of

跳过非数字属性

// foo
// bar
// undefined
// baz
for (let v of arr) {
  console.log(v)
}