【JavaScript】对象的遍历

灰太狼 2024-02-05 14:13 40阅读 0赞

#### JavaScript——对象的遍历 ####

*  属性的可枚举性
 *  for...of
 *  对象的遍历
 *   *  for...in
     *  Object.getOwnPropertyNames()
     *  Object.getOwnPropertySymbols()
     *  Object.keys()
     *  Object.values() | Object.entries()
     *  Reflect.ownKeys()

## 属性的可枚举性 ##

*  可枚举属性是指那些内部“可枚举”(enumerable)标志设置为 `true` 的属性
    
     *  `Object.getOwnPropertyDescriptor`静态方法返回一个对象，用于描述指定对象上的特定属性的配置。
 *  通过直接的赋值和属性初始化的属性，该标识值默认为即为 `true`

let obj = {
        
        name: "小明",
        age: 22
    }
    console.log(Object.getOwnPropertyDescriptor(obj, "name"));

![在这里插入图片描述][d87708dcb69845d1a1329d18e0b5c4ce.png_pic_center]

*  对于通过 `Object.defineProperty` 等定义的属性，该标识值默认为 `false`
    
     *  `Object.defineProperty()` 静态方法会直接在一个对象上定义一个新属性，或修改其现有属性。

const obj = {
        }
    Object.defineProperty(obj, "name", {
        
        value: "小明",
    });
    console.log(Object.getOwnPropertyDescriptor(obj, "name"));

![在这里插入图片描述][ca0acc2b407e4a2292860c304f446d59.png_pic_center]

## for…of ##

`for...of` 也可进行遍历，但是它只能对可迭代对象进行遍历，不能遍历普通对象。

**那么怎么判断是否为迭代对象呢？**

*  为了实现**可迭代**，一个对象必须实现 **@@iterator** 方法，这意味着这个对象（或其原型链中的任意一个对象）必须具有一个键值为 `Symbol.iterator` 的属性。
    
        let arr = [10, 20, 30] 
        let obj = {
              a:1,b:2}
        let str = "hello"
        let map1 = new Map([["k1","v1"], ["k2", "v2"]])
        console.log(arr[Symbol.iterator]) //ƒ values() { [native code] }
        console.log(obj[Symbol.iterator]) //undefined
        console.log(str[Symbol.iterator]) //undefined
        console.log(map1[Symbol.iterator]) //undefined
    
    除 `Array` 、`Object`、 `String`、 `Map` 外，还有 `set` 、`Arguments`、`DOM集合`。

虽然普通对象上不存在 `Symbol.iterator`属性，但我们可以手写实现。

let Alice = {
        
        heigh: 168,
        age: 19,
        hobby: ['sing', 'dance', 'speak'],
        todo:function(){
        
            console.log('dududu...');
        },
        [Symbol.iterator](){
        
            const this_ = this
            const key_value = Object.entries(this_)
            let index = 0
    
            return {
        
                next(){
                    
                    if(index < key_value.length){
        
                        const ret = {
        
                            value: key_value[index][1],
                            done: false}
                        index++
                        return ret
                    }else{
        
                        return {
        value: undefined, done: true}
                    }
                }
            }
        }
    }
    
    for(let val of classes){
        
        console.log(val);
    }

![在这里插入图片描述][5488b49becb5470796b663c94f77f3d2.png_pic_center]

## 对象的遍历 ##

### for…in ###

*  遍历对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。

let Alice = {
        
        height: "170", 
        hobby: ['dance','sing','drawing'],
        point: "cook"
    }
    
    let sym = Symbol("foo")
    Alice[sym] = true
    
    function EnglishPeople(){
        
        this.birthPlace = "English"
    }
    
    EnglishPeople.prototype = Alice
    
    let obj = new EnglishPeople();
    
    for(let prop in obj){
        
        console.log(`obj.${
          prop}=${
          obj[prop]}`);
    }

![在这里插入图片描述][0eeb0f4d96a24b3ba837bc04a94d277c.png_pic_center]

如果只考虑对象本身的属性，那么使用 `hasOwnProperty()` 或者 `getOwnPropertyNames()`来确定某属性是否是对象本身的属性。

*  `Object.property.hasOwnProperty(prop)`返回一个布尔值，表示对象自有属性中是否具有指定的属性。

### Object.getOwnPropertyNames() ###

*  返回一个数组，其包含给定对象中所有自有属性（包括不可枚举属性，但不包括使用 symbol 值作为名称的属性）

let Alice = {
        
        height: "170", 
        hobby: ['dance','sing','drawing'],
        point: "cook",
    }
    
    // symbol属性
    let sym = Symbol("foo")
    Alice[sym] = true
    
    // 设置不可枚举属性
    Object.defineProperty(Alice, "legs", {
        
        value: 4
    })
    console.log(Object.getOwnPropertyNames(Alice));

![在这里插入图片描述][caa01100d11545c9bb7337894f375d62.png_pic_center]

### Object.getOwnPropertySymbols() ###

返回一个包含给定对象所有自有 Symbol 属性的数组。

let Alice = {
        
        height: "170", 
        hobby: ['dance','sing','drawing'],
        point: "cook",
    }
    
    let sym = Symbol("foo")
    Alice[sym] = true
    
    const objectSymbols = Object.getOwnPropertySymbols(Alice);
    console.log(objectSymbols);
    console.log(objectSymbols.length);

![在这里插入图片描述][b1afb40683884e948eb3f65ef6dbd94f.png_pic_center]

### Object.keys() ###

`Object.keys()` 遍历对象本身的可枚举属性，返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。

const Alice = {
        
        height: "170", 
        hobby: ['dance','sing','drawing'],
        point: "cook"
    }
    console.log(Object.keys(Alice))

![在这里插入图片描述][b5f7a3aeaf43413891f7d769ebcfb997.png_pic_center]

*  如果传入非对象参数会强制转换为对象，`undefiend` 和 `null`无法强制转换。另外只有字符串有自己的可枚举属性，其他类型都会返回空数组。

// 字符串具有索引作为可枚举的自有属性
    console.log(Object.keys("foo")); // ['0', '1', '2']
    
    // 其他基本类型（除了 undefined 和 null）没有自有属性
    console.log(Object.keys(100)); // []

`Object.keys` 与使用 `for...in` 循环迭代相同，但是 `for...in`循环还会枚举原型链中的属性。

因此大多数情况下推荐使用`Object.keys`替代 `for...in`。如果需要属性的值，请使用`Object.values`。如果键和值都需要，请使用 `Object.entries`

### Object.values() | Object.entries() ###

`Object.values` 返回一个给定对象的自有可枚举字符串键属性值组成的数组。

`Object.entries` 返回一个包含给定对象自有的可枚举字符串键属性的键值对。

const Alice = {
        
        height: "170", 
        hobby: ['dance','sing','drawing'],
        point: "cook"
    }
    console.log(Object.keys(Alice))
    console.log(Object.values(Alice))
    console.log(Object.entries(Alice))

![在这里插入图片描述][bf55cd1b56a14fafbe7eddd4a7fa1272.png_pic_center]

### Reflect.ownKeys() ###

`Reflect.ownKeys(target)` 返回一个由目标对象自身的属性键组成的数组

Reflect.ownKeys({
         z: 3, y: 2, x: 1 }); // [ "z", "y", "x" ]
    Reflect.ownKeys([]); // ["length"]

总结：

**遍历可枚举属性：**

for…in | Object.keys | Object.values | Object.entries | Reflect.ownKeys()

其中for…in还遍历原型对象的可枚举属性。

**不可枚举属性也会遍历的：**

Object.getOwnPropertyNames

**可遍历对象上的Symbol类型属性：**

Object.getOwnPropertySymbols()

[d87708dcb69845d1a1329d18e0b5c4ce.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/e1523c33c75d4fb9ac2a3ce6a3955654.png
[ca0acc2b407e4a2292860c304f446d59.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/17087b81790c42158cb56c14355da83f.png
[5488b49becb5470796b663c94f77f3d2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/906492a74c034bd7b01789baa8613f86.png
[0eeb0f4d96a24b3ba837bc04a94d277c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/e3f1df63f3254b09a7f611b413731cd5.png
[caa01100d11545c9bb7337894f375d62.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/3053416c36ef4e52860b68b690386f71.png
[b1afb40683884e948eb3f65ef6dbd94f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/ae5242a6eef74cac985d61873fe974ec.png
[b5f7a3aeaf43413891f7d769ebcfb997.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/dbd4b92efa0e4ca39747d428941c37c0.png
[bf55cd1b56a14fafbe7eddd4a7fa1272.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/31bcb74fce8f44af89f01e8cc438c91e.png