欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript獲取對象key的幾種方法和區(qū)別

 更新時間：2022年03月29日 10:44:43   作者：傲嬌味的草莓  
這篇文章主要介紹了JavaScript獲取對象key的幾種方法和區(qū)別，下面文章更多的相關(guān)資料需要的小伙伴可以參考一下，希望對你有所幫助

1、Object.keys()遍歷自身可以枚舉屬性

 ? let myColors = {
? ? ? ? color1: 'pink',
? ? ? ? color2: 'red'
? ? };
? ? let yourColors = {
? ? ? ? color3: 'green',
? ? ? ? color4: 'blue'
? ? };
? ? Object.setPrototypeOf(yourColors, myColors);
?? ?//setPrototypeOf()設(shè)置一個指定的對象的原型到另一個對象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()

返回自身可枚舉屬性的鍵值對數(shù)組：

? ? 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的區(qū)別

①for in 遍歷的是數(shù)組的索引（即鍵名），for of遍歷的是數(shù)組元素值

②for in 得到對象的key or 數(shù)組 or 字符串的下標(biāo)

③for of 得到對象的value or 數(shù)組 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 數(shù)組 包含yourColors自身屬性鍵，也有從原型對象myColrs繼承的屬性。

4、hasOwnProperty 遍歷可枚舉屬性

返回一個布爾值，只能判斷自有屬性是否存在，對于繼承屬性會返回false，因?yàn)樗徊檎以玩湹暮瘮?shù)

//不使用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()返回一個對象自身所有的屬性，包括可枚舉和不可枚舉屬性組成的數(shù)組

//返回對象自身所有的屬性，可枚舉和不可枚舉組成的數(shù)組，但不包括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));

//返回對象自身所有的屬性，可枚舉和不可枚舉組成的數(shù)組，但不包括Symbol類型的key
? ? let _item = Symbol('item') //定義Symbol數(shù)據(jù)類型
? ? 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屬性，

不關(guān)心是否可枚舉，返回對象自身的所有Symbol屬性組成的數(shù)組

?? ?let _item = Symbol('item') //定義Symbol數(shù)據(jù)類型
? ? 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));

? ? }
/***
?*?
?-- for-in: a
?-- hasOwnProperty: ?a
?-- for-in: b
?-- hasOwnProperty: ?b
?-- for-in: c
?-- hasOwnProperty: ?c
?-- for-in: f
?-- hasOwnProperty: ?f
?-- for-in: d
?-- getOwnPropertyNames: ?(5) ["a", "b", "c", "e", "f"]
?-- getOwnPropertyDescriptor: ?undefined (可獲取對象屬性的具體配置，總共是6個)
?-- getOwnPropertySymbols: ?(2) [Symbol(g), Symbol(h)]
?-- keys: ?(4) ["a", "b", "c", "f"]
?*/

8、對象聲明/對象賦值

/**
?* 對象聲明
?* 首選 {}
?*?
?* 對象賦值
?* 首選 對象內(nèi)賦值
?*/
function getKey(flag) {
? ? return `uniqued key ${flag}`;
}
const obj = {
? ? id: 5,
? ? name: 'San Francisco',
? ? [getKey('enabled')]: true, ?// 可變key提前聲明
};

9、對象擴(kuò)展

/**
?*?
?* 對象 擴(kuò)展?
?*?
?* object assign 對象擴(kuò)展
?* 每次執(zhí)行 assign?
?* 事實(shí)上是對 object 原來對象的擴(kuò)展然后并返回這個新的對象，??
?* 原理的對象被修改
?*?
?* */
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值');

到此這篇關(guān)于JavaScript獲取對象key的幾種方法和區(qū)別的文章就介紹到這了,更多相關(guān)JS獲取對象key內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • js動態(tài)創(chuàng)建及移除div的方法

    js動態(tài)創(chuàng)建及移除div的方法

    這篇文章主要介紹了js動態(tài)創(chuàng)建及移除div的方法,涉及javascript針對頁面元素的動態(tài)操作技巧,需要的朋友可以參考下
    2015-06-06
  • 利用JavaScript實(shí)現(xiàn)放鞭炮動畫效果

    利用JavaScript實(shí)現(xiàn)放鞭炮動畫效果

    談及過年，最先讓人想到的就是，噼里啪啦的鞭炮聲。本文將利用JavaScript實(shí)現(xiàn)一個簡單的放鞭炮動畫效果，感興趣的小伙伴可以了解一下
    2023-01-01
  • js實(shí)現(xiàn)字符串和數(shù)組之間相互轉(zhuǎn)換操作

    js實(shí)現(xiàn)字符串和數(shù)組之間相互轉(zhuǎn)換操作

    這篇文章主要介紹了js實(shí)現(xiàn)字符串和數(shù)組之間相互轉(zhuǎn)換操作的相關(guān)資料，感興趣的小伙伴們可以參考一下
    2016-01-01
  • JavaScript運(yùn)行機(jī)制之事件循環(huán)(Event Loop)詳解

    JavaScript運(yùn)行機(jī)制之事件循環(huán)(Event Loop)詳解

    這篇文章主要介紹了JavaScript運(yùn)行機(jī)制之事件循環(huán)(Event Loop)詳解,本文從多個方面講解了Event Loop,需要的朋友可以參考下
    2014-10-10
  • js判斷鼠標(biāo)位置是否在某個div中的方法

    js判斷鼠標(biāo)位置是否在某個div中的方法

    這篇文章主要介紹了js判斷鼠標(biāo)位置是否在某個div中的方法,涉及JavaScript針對鼠標(biāo)事件的響應(yīng)及頁面元素屬性操作相關(guān)技巧,需要的朋友可以參考下
    2016-02-02
  • js操作checkbox遇到的問題解決

    js操作checkbox遇到的問題解決

    這篇文章介紹了js操作checkbox遇到的問題解決，有需要的朋友可以參考一下
    2013-06-06
  • JavaScript null和undefined區(qū)別分析

    JavaScript null和undefined區(qū)別分析

    在JavaScript開發(fā)中，被人問到：null與undefined到底有啥區(qū)別？
    2009-10-10

    • 最新評論