iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript获取对象key的几种方法和区别
  • 566
分享到

JavaScript获取对象key的几种方法和区别

2024-04-02 19:04:59 566人浏览 独家记忆
摘要

目录1、Object.keys()遍历自身可以枚举属性2、Ojbect.values() /Ojject.entries()3、for-in 遍历可枚举属性prototype 属性4

1、Object.keys()遍历自身可以枚举属性

   let myColors = {
        color1: 'pink',
        color2: 'red'
    };
    let yourColors = {
        color3: 'green',
        color4: 'blue'
    };
    Object.setPrototypeOf(yourColors, myColors);
    //setPrototypeOf()设置一个指定的对象的原型到另一个对象or NULL
    Object.keys(myColors);
    Object.keys(yourColors);
    console.log(myColors);
    console.log(yourColors);
    console.log(myColors['color1']);
    console.log(yourColors['color3']);

解析:Object.keys(myColors) 返回 myColors对象的自身可枚举属性键;Object.keys(yourColors)也是返回yourColors对象自身的可枚举属性键。setPrototypeOf()方法让yourColors继承myColors原型的属性,但是能看到并不能遍历出来。Object.keys() 是 遍历自身可以枚举属性。

2、Ojbect.values() /Ojject.entries()

返回自身可枚举属性的键值对数组:

    let myColors = {
        color1: 'pink',
        color2: 'red'
    };
    let yourColors = {
        color3: 'green',
        color4: 'blue'
    };
    Object.setPrototypeOf(yourColors, myColors);
    console.log(Object.values(myColors));
    console.log(Object.entries(myColors));

3、for-in 遍历可枚举属性prototype 属性

for-in遍历对象所有的可枚举属性,包括原型。

ps:for-in和for-of的区别

①for in 遍历的是数组索引(即键名),for of遍历的是数组元素值

②for in 得到对象的key or 数组 or 字符串的下标

③for of 得到对象的value or 数组 or 字符串的值

for in更适合遍历对象 

   let myColors = {
        color1: 'pink',
        color2: 'red'
    };
    let yourColors = {
        color3: 'green',
        color4: 'blue'
    };
    Object.setPrototypeOf(yourColors, myColors);
    let arrayColors = [];
    for (let key in yourColors) {
        arrayColors.push(key);
    }
    console.log(arrayColors);

解析:arrayColors 数组 包含yourColors自身属性键,也有从原型对象myColrs继承的属性。

4、hasOwnProperty 遍历可枚举属性

返回一个布尔值,只能判断自有属性是否存在,对于继承属性会返回false,因为它不查找原型链的函数

//不使用hasOwnProperty,返回自身属性和继承原型属性
    let myColors = {
        color1: 'pink',
        color2: 'red'
    };
    let yourColors = {
        color3: 'green',
        color4: 'blue'
    };
    Object.setPrototypeOf(yourColors, myColors);
    for (let i in yourColors) {
        console.log(i);
    }

//使用hasOwnProperty,返回自身属性
    let myColors = {
        color1: 'pink',
        color2: 'red'
    };
    let yourColors = {
        color3: 'green',
        color4: 'blue'
    };
    Object.setPrototypeOf(yourColors, myColors);
    for (let i in yourColors) {
        if (yourColors.hasOwnProperty(i)) { //加上if判断去掉原型链上的
            console.log(i)
        }
    }

5、getOwnPropertyNames() 返回可枚举属性和不可枚举属性

不包括prototype属性,不包括symbol类型的key

getOwnPropertyNames()返回一个对象自身所有的属性,包括可枚举和不可枚举属性组成的数组

//返回对象自身所有的属性,可枚举和不可枚举组成的数组,但不包括prototype属性
    let myColors = {
        color1: 'pink',
        color2: 'red'
    };
    let yourColors = {
        color3: 'green',
        color4: 'blue'
    };
    Object.setPrototypeOf(yourColors, myColors);
    //定义不可枚举属性
    Object.defineProperty(yourColors, 'your', {
        enumerable: true,
        value: 6,
    })
    console.log(Object.getOwnPropertyNames(yourColors));

//返回对象自身所有的属性,可枚举和不可枚举组成的数组,但不包括Symbol类型的key
    let _item = Symbol('item') //定义Symbol数据类型
    let myColors = {
        color1: 'pink',
        color2: 'red',
    };
    let yourColors = {
        color3: 'green',
        color4: 'blue',
        [_item]: 'mySymbol'
    };
    Object.setPrototypeOf(yourColors, myColors);
    //定义不可枚举属性
    Object.defineProperty(yourColors, 'your', {
        enumerable: true,
        value: 6,
    })
    console.log(Object.getOwnPropertyNames(yourColors));

6、getOwnPropertySymbols() 返回symbol类型的key属性,

不关心是否可枚举,返回对象自身的所有Symbol属性组成的数组

    let _item = Symbol('item') //定义Symbol数据类型
    let myColors = {
        color1: 'pink',
        color2: 'red',
    };
    let yourColors = {
        color3: 'green',
        color4: 'blue',
        [_item]: 'mySymbol'
    };
    Object.setPrototypeOf(yourColors, myColors);
    //定义不可枚举属性
    Object.defineProperty(yourColors, 'your', {
        enumerable: true,
        value: 6,
    })
    console.log(Object.getOwnPropertySymbols(yourColors));

7、对象对key的获取方法

    function geTKEy() {
        let obj = {
            a: 1,
            b: 2,
            c: 3
        };

        Object.prototype.d = 4;
        Object.defineProperty(obj, 'e', {
            configurable: true,
            writable: false,
            enumerable: false,
            value: 5
        });

        Object.defineProperty(obj, 'f', {
            configurable: true,
            writable: false,
            enumerable: true,
            value: 6
        });

        const symbolg = Symbol('g');
        const symbolh = Symbol('h');

        Object.defineProperty(obj, symbolg, {
            configurable: true,
            writable: false,
            enumerable: false,
            value: 7
        });

        Object.defineProperty(obj, symbolh, {
            configurable: true,
            writable: false,
            enumerable: true,
            value: 8
        });

        console.log();
        for (let key in obj) {
            console.log('-- for-in:', key);
            if (obj.hasOwnProperty(key)) {
                console.log('-- hasOwnProperty: ', key);
            }
        }
        console.log('-- getOwnPropertyNames: ', Object.getOwnPropertyNames(obj));
        console.log('-- getOwnPropertyDescriptor: ', Object.getOwnPropertyDescriptor(obj));
        console.log('-- getOwnPropertySymbols: ', Object.getOwnPropertySymbols(obj));
        console.log('-- keys: ', Object.keys(obj));

    }

8、对象声明/对象赋值


function getKey(flag) {
    return `uniqued key ${flag}`;
}
const obj = {
    id: 5,
    name: 'San Francisco',
    [getKey('enabled')]: true,  // 可变key提前声明
};

9、对象扩展


const row = {
    display: 'inline-block',
    height: '50px',
    lineHeight: '50px',
}
const rowLeft = Object.assign(row, {
    color: 'rgba(0,0,0,.4)'
});
const rowRight = Object.assign(row, {
    color: 'rgba(0,0,0,.6)'
});

console.log(rowLeft, rowRight, '同时都被修改为最新的assign值');

到此这篇关于javascript获取对象key的几种方法和区别的文章就介绍到这了,更多相关js获取对象key内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript获取对象key的几种方法和区别

本文链接: https://www.lsjlt.com/news/144252.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作