js对象属性遍历，Object应用之属性遍历的几种方式

JS 对象Object应用之属性遍历的几种方式

[TOC]

## 1. 对象属性遍历
### 1.1. for-in 的方式

**for-in 遍历的范围：**
+ 对象本身的属性 `obj = { key : value}`
+ 添加在对象上的自由属性 `object.key = value`
+ 添加在原型链上的属性 `Object.prototype`
+ 通过 `Object.defineProperty` 方法描述的可枚举的属性

**示例：**

```JS
var obj = { s1: "曹操", s2: "孙权", s3: "刘备", s4: "刘协", s5: "董卓" }
Object.prototype.prop = function () { } //在原型链上添加属性
obj.s6 = "吕布" //添加自由属性
Object.defineProperty(obj, "s7", { enumerable: true, value: "郭汜" }) //描述一个新属性，设置为可枚举
Object.defineProperty(obj, "s8", { enumerable: false, value: "李傕" }) //描述一个新属性，设置为不可枚举
let s9 = Symbol("我是私密属性，看你能不能找到我")
obj[s9] = "貂蝉"
//使用for-in的方式
for (var i in obj) {
    console.log(i + ":" + obj[i]) //第一次循环console.log
}
```

**结果：**

```JS
// 第一次循环console.log输出
// 1、此方式会遍历对象自身的所有可枚举属性，包括添加到原型上的属性
// 2、定义为Symbol类型的私密属性也不在遍历范围内
// 3、定义为非枚举的属性不在遍历范围内，示例中 [s8:李傕] 是不可枚举的属性
s1:曹操
s2:孙权
s3:刘备
s4:刘协
s5:董卓
s6:吕布
s7:郭汜
prop:function () { }
```

**注意：**for-in 是 `ES6` 的语法，Symbol 类型也是 `ES6` 的内容，因此使用时需要浏览器支持 `ES6`

***

### 1.2. Object.keys().forEach 的方式

**🚩 Object.keys()**

Object.keys() 获取键数组，使用Object.keys().forEach 可以进行遍历，它遍历的范围如下

+ 对象本身的属性 `obj = { key : value}`
+ 添加在对象上的自由属性 `object.key = value`
+ 通过 `Object.defineProperty` 方法描述的可枚举的属性

**示例：**

```JS
var obj = { s1: "曹操", s2: "孙权", s3: "刘备", s4: "刘协", s5: "董卓" }
Object.prototype.prop = function () { } //在原型链上添加属性
obj.s6 = "吕布" //添加自由属性
Object.defineProperty(obj, "s7", { enumerable: true, value: "郭汜" }) //描述一个新属性，设置为可枚举
Object.defineProperty(obj, "s8", { enumerable: false, value: "李傕" }) //描述一个新属性，设置为不可枚举
let s9 = Symbol("我是私密属性，看你能不能找到我")
obj[s9] = "貂蝉"
//使用Object.keys().forEach的方式
var keys = Object.keys(obj);
keys.forEach(function (i) {
    console.log(i + ":" + obj[i]) //第一次循环console.log
})
```

**结果：**

```JS
// 第一次循环console.log输出
// 1、此方式会遍历对象自身的所有可枚举属性
// 2、原型上的属性不在遍历范围内示例中的prop
// 3、定义为Symbol类型的私密属性也不在遍历范围内
// 4、定义为非枚举的属性不在遍历范围内，示例中 [s8:李傕] 是不可枚举的属性
s1:曹操
s2:孙权
s3:刘备
s4:刘协
s5:董卓
s6:吕布
s7:郭汜
```

**🚩 Object.values()**

Object.keys() 获取键数组，必然会有对应的 Object.values() 值数组，Object.values() 遍历的话，它遍历的就是对象的值，它的遍历范围和 Object.keys() 是一样的

+ 对象本身的值 `obj = { key : value}` 中的 value
+ 添加在对象上的自由属性设置的值 `object.key = value` 中的 value
+ 通过 `Object.defineProperty` 方法描述的可枚举的属性设置的值

**示例：**

```JS
var obj = { s1: "曹操", s2: "孙权", s3: "刘备", s4: "刘协", s5: "董卓" }
Object.prototype.prop = function () { } //在原型链上添加属性
obj.s6 = "吕布" //添加自由属性
Object.defineProperty(obj, "s7", { enumerable: true, value: "郭汜" }) //描述一个新属性，设置为可枚举
Object.defineProperty(obj, "s8", { enumerable: false, value: "李傕" }) //描述一个新属性，设置为不可枚举
let s9 = Symbol("我是私密属性，看你能不能找到我")
obj[s9] = "貂蝉"
//使用Object.values()获取对象属性值
var values = Object.values(obj);
console.log(values)      //第一次console.log
console.log(values[2])   //第二次console.log
console.log(values[7])   //第三次console.log
console.log(values[8])   //第四次console.log
```

**结果：**

```JS
// 第一次console.log输出，从结果来看，获取对象的值和keys获取属性一样，它的范围如下
// 1、可获取对象自身的所有可枚举属性的值
// 2、原型上的属性值不可获取，示例中prop为原型属性
// 3、定义为Symbol类型的私密属性的值不可获取，示例中obj[s9]为私密属性
// 4、定义为非枚举的属性的值不可获取，示例中 [s8:李傕] 是不可枚举的属性
['曹操', '孙权','刘备', '刘协','董卓', '吕布','郭汜']
// 第二次console.log输出，按索引算即s3
刘备
// 第三次console.log输出，按索引算即s8，但是使用values[7]是获取不到属性值的，因为定义为非枚举的属性不在values范围内
undefined
// 第四次console.log输出，按索引算即s9，但是使用values[8]是获取不到属性值的，因为它定义的是Symbol的私密属性，不在values范围内
undefined
```

***

### 1.3. Object.entries().forEach 的方式

**Object.entries():**

获取对象所有属性和值，将每个对象属性和值拆分成一个数组，最后返回一个多维数组

**使用Object.entries().forEach 可以进行的遍历范围**

+ 对象本身的属性 `obj = { key : value}`
+ 添加在对象上的自由属性 `object.key = value`
+ 通过 `Object.defineProperty` 方法描述的可枚举的属性

**示例：**

```JS
var obj = { s1: "曹操", s2: "孙权", s3: "刘备", s4: "刘协", s5: "董卓" }
Object.prototype.prop = function () { } //在原型链上添加属性
obj.s6 = "吕布" //添加自由属性
Object.defineProperty(obj, "s7", { enumerable: true, value: "郭汜" }) //描述一个新属性，设置为可枚举
Object.defineProperty(obj, "s8", { enumerable: false, value: "李傕" }) //描述一个新属性，设置为不可枚举
let s9 = Symbol("我是私密属性，看你能不能找到我")
obj[s9] = "貂蝉"
// 使用Object.entries(obj)方式
var entries = Object.entries(obj);
console.log(entries)  // 第一次console.log
entries.forEach(function (item, index) {
    console.log(item[0] + '-' + item[1] + '-是第' + (index + 1) + "属性") //第二次循环console.log
})
```

**结果：**

```JS
// 第一次console.log输出，得到的是一个二维数组
[
  [ 's1', '曹操' ],
  [ 's2', '孙权' ],
  [ 's3', '刘备' ],
  [ 's4', '刘协' ],
  [ 's5', '董卓' ],
  [ 's6', '吕布' ],
  [ 's7', '郭汜' ]
]
//------------------------------------------------------
// 第二次循环console.log输出
// 1、此方式会遍历对象自身的所有可枚举属性
// 2、原型上的属性不在遍历范围内示例中的prop
// 3、定义为Symbol类型的私密属性也不在遍历范围内
// 4、定义为非枚举的属性不在遍历范围内，示例中 [s8:李傕] 是不可枚举的属性
s1-曹操-是第1属性
s2-孙权-是第2属性
s3-刘备-是第3属性
s4-刘协-是第4属性
s5-董卓-是第5属性
s6-吕布-是第6属性
s7-郭汜-是第7属性
```

***

### 1.4. Object.getOwnPropertyNames().forEach 的方式

**使用Object.getOwnPropertyNames().forEach 可以进行的遍历范围**

+ 对象本身的属性 `obj = { key : value}`
+ 添加在对象上的自由属性 `object.key = value`
+ 通过 `Object.defineProperty` 方法描述的属性，包括了非枚举的属性

**示例：**

```JS
var obj = { s1: "曹操", s2: "孙权", s3: "刘备", s4: "刘协", s5: "董卓" }
Object.prototype.prop = function () { } //在原型链上添加属性
obj.s6 = "吕布" //添加自由属性
Object.defineProperty(obj, "s7", { enumerable: true, value: "郭汜" }) //描述一个新属性，设置为可枚举
Object.defineProperty(obj, "s8", { enumerable: false, value: "李傕" }) //描述一个新属性，设置为不可枚举
let s9 = Symbol("我是私密属性，看你能不能找到我")
obj[s9] = "貂蝉"
// 使用Object.getOwnPropertyNames()方式
var owns = Object.getOwnPropertyNames(obj)
console.log(owns) //第一次
owns.forEach(function (i) {
    console.log(i + ":" + obj[i]) //第二次循环console.log
})
```

**结果：**

```JS
//第一次console.log输出，得到对象属性组成的数组，数组里包含了非枚举的属性 s8
['s1', 's2', 's3','s4', 's5', 's6','s7', 's8']
//------------------------------------------------------
//第二次循环console.log输出
// 1、此方式会遍历对象自身的所有属性，包括定义为非枚举的属性，示例中 [s8:李傕] 是不可枚举的属性
// 2、原型上的属性不在遍历范围内示例中的prop
// 3、定义为Symbol类型的私密属性也不在遍历范围内
s1:曹操
s2:孙权
s3:刘备
s4:刘协
s5:董卓
s6:吕布
s7:郭汜
s8:李傕
```

***

### 1.5. Reflect.ownKeys().forEach 的方式

**使用Reflect.ownKeys().forEach 可以进行的遍历范围**

+ 对象本身的属性 `obj = { key : value}`
+ 添加在对象上的自身属性 `object.key = value`
+ 通过 `Object.defineProperty` 方法描述的属性，包括了非枚举的属性
+ 定义为 `Symbol` 类型的私密属性

**示例：**

```JS
var obj = { s1: "曹操", s2: "孙权", s3: "刘备", s4: "刘协", s5: "董卓" }
Object.prototype.prop = function () { } //在原型链上添加属性
obj.s6 = "吕布" //添加自由属性
Object.defineProperty(obj, "s7", { enumerable: true, value: "郭汜" }) //描述一个新属性，设置为可枚举
Object.defineProperty(obj, "s8", { enumerable: false, value: "李傕" }) //描述一个新属性，设置为不可枚举
let s9 = Symbol("我是私密属性，看你能不能找到我")
obj[s9] = "貂蝉"
// 使用Reflect.ownKeys(obj)方式
var owns = Reflect.ownKeys(obj)
console.log(owns) // 第一次
owns.forEach(function (i) {
    console.log(i.toString() + ":" + obj[i]) //第二次循环console.log
})
```

**结果：**

```JS
// 第一次console.log输出，得到对象属性组成的数组，数组里包含了非枚举的属性和Symbol类型私密属性
[
  's1',
  's2',
  's3',
  's4',
  's5',
  's6',
  's7',
  's8',
  Symbol(我是私密属性，看你能不能找到我)
]
//-----------------------------------------------------------------------------
// 第二次console.log遍历输出说明
// 1、此方式会遍历对象自身的所有属性，包括了Symbol类型的私密属性，被定义为不可枚举的属性，示例中 [s8:李傕] 是不可枚举的属性
// 2、添加到原型上的属性不在遍历范围内
s1:曹操
s2:孙权
s3:刘备
s4:刘协
s5:董卓
s6:吕布
s7:郭汜
s8:李傕
Symbol(我是私密属性，看你能不能找到我):貂蝉
```

***

## 2. 几种遍历方式对比

**遍历范围对比：**Y 在范围内，N 不在范围内

|属性存在方式|for-in|Object.key()|Object.entries()|Object.getOwnPropertyNames()|Reflect.ownKeys()|
|--|--|--|--|--|--|
|添加到原型的属性|Y|N|N|N|N|
|自身属性|Y|Y|Y|Y|Y|
|自身属性 `对象.属性 = 值`|Y|Y|Y|Y|Y|
|Object.defineProperty `枚举`|Y|Y|Y|Y|Y|
|Object.defineProperty `非枚举`|N|N|N|Y|Y|
|Symbol类型属性|N|N|N|N|Y|