Object的相關(guān)方法 和 js遍歷對(duì)象的常用方法總結(jié)
這篇文章分享的主要是以下方法的基本用法，想要更加深入了解這些方法的朋友，請(qǐng)參考MND
Object的相關(guān)方法
Object.hasOwnProperty()
描述：Object.hasOwnProperty()方法會(huì)返回一個(gè)布爾值，指示對(duì)象自身屬性中是否具有指定的屬性(是否有指定的鍵或索引)。
語(yǔ)法：變量名.hasOwnProperty("屬性名"/索引);
//當(dāng)變量是數(shù)組時(shí)
const arr = [4, 6, 7, 88, 99, 200];
//判斷arr數(shù)組中是否有索引為4的元素
console.log(arr.hasOwnProperty(4));//true
//判斷arr數(shù)組中是否有索引為7的元素
console.log(arr.hasOwnProperty(7));//false
//當(dāng)變量是對(duì)象時(shí) 屬性名需要加""
const obj = {
name: "張三",
age: "40"
};
//判斷obj對(duì)象中中是否有屬性名為"name"的屬性
console.log(obj.hasOwnProperty("name"));//true
//判斷obj對(duì)象中中是否有屬性名為"gender"的屬性
console.log(obj.hasOwnProperty("gender"));//falseObject.defineProperty()
描述：Object.defineProperties()方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)對(duì)象的現(xiàn)有屬性，并返回此對(duì)象。
語(yǔ)法：Object.defineProperties(對(duì)象名,屬性名,{value:屬性值,writable:true/false});
特點(diǎn)：一次只能新增或修改一個(gè)屬性。
分析：
value:屬性值;設(shè)置該屬性名的屬性值，如果不寫(xiě)[value:屬性值],則默認(rèn)該屬性名對(duì)應(yīng)的屬性值為undefined。
//不寫(xiě) value:屬性值 時(shí)
const obj = {};
Object.defineProperty(obj, "name", {});
console.log(obj);//{name: undefined}
//寫(xiě) value:屬性值 時(shí)
const myObj = {};
Object.defineProperty(myObj, "name", {value: "張三"});
console.log(myObj);//{name: '張三'}writable:true/false;設(shè)置該屬性是否允許修改，true表示允許，false表示不允許。如果不寫(xiě)，默認(rèn)為false。
//當(dāng)writable:false 或 不寫(xiě) 時(shí)
const obj = {};
//Object.defineProperty(obj, "name", {value: "張三"});
Object.defineProperty(obj, "name", { value: "張三", "writable": false });
console.log(obj);//{name: '張三'}
obj.name = "李四";//不能修改 這里程序不會(huì)報(bào)錯(cuò) 默認(rèn)不做任何事
console.log(obj);//{name: '張三'}
//當(dāng)writable:true時(shí)
const myObj = {};
Object.defineProperty(myObj, "name", { value: "張三", "writable": true });
console.log(myObj);//{name: '張三'}
myObj.name = "李四";//可以修改
console.log(myObj);//{name: '李四'}除了value和writable之外，還有其他設(shè)置屬性的屬性，具體請(qǐng)參考MDN。
Object.defineProperties()
描述：Object.defineProperties()方法直接在一個(gè)對(duì)象上定義新的屬性或修改現(xiàn)有屬性，并返回該對(duì)象。
語(yǔ)法：Object.defineProperties(對(duì)象名, { 屬性名1: { value1: 值1, writable: true }, 屬性名2: { value2: 值2, writable: false } })；
特點(diǎn)：用法和Object.defineProperty()方法類似，語(yǔ)法略有不同，另外Object.defineProperties()一次只能新增或修改一個(gè)屬性，而Object.defineProperty()方法一次可以新增或修改多個(gè)屬性。
const obj = {};
Object.defineProperties(obj, {
"name": { value: "張三", "writable": true },
"age": { value: 20, "writable": false }
});
console.log(obj);//{name: '張三', age: 20}
obj.name = "李四";//可以修改
obj.age = "16";//不能修改 這里程序不會(huì)報(bào)錯(cuò) 默認(rèn)不做任何事
console.log(obj);//{name: '李四', age: 20}Object.assign()
描述：Object.assign()方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象。它將返回目標(biāo)對(duì)象。如果屬性名相同，后面的值會(huì)覆蓋前面的。
語(yǔ)法：Object.assign(目標(biāo)對(duì)象,源對(duì)象);
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const result = Object.assign(target, source);
console.log(result);//{a: 1, b: 4, c: 5}
console.log(target);//{a: 1, b: 4, c: 5}用法1：復(fù)制一個(gè)對(duì)象（深拷貝和淺拷貝）
對(duì)于Object.assign()而言，如果對(duì)象的屬性值為簡(jiǎn)單類型（string，number），通過(guò)Object.assign({},obj);得到的新對(duì)象為深拷貝；如果屬性值為對(duì)象或其他引用類型，那對(duì)于這個(gè)對(duì)象而言其實(shí)是淺拷貝的，這是Object.assign()特別需要注意的地方。
深拷貝
const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy);//{a: 1}
obj.a = 2;//不會(huì)對(duì)copy對(duì)象有影響
console.log(copy); //{a: 1}淺拷貝
const obj = { a: { b: 1 } };
const result = Object.assign({}, obj);
console.log(result);//{a: {b: 1}}
obj.a.b = 2;//對(duì)obj有影響
console.log(result);//{a: {b: 2}}用法2：合并對(duì)象
注意目標(biāo)對(duì)象自身也會(huì)改變 。如果屬性名相同，后面的值會(huì)覆蓋前面的
const o1 = { a: 1, b: 4, f: 6 };
const o2 = { b: 2 };
const o3 = { c: 3 };
const obj = Object.assign(o1, o2, o3);
console.log(obj); // {a: 1, b: 2, f: 6, c: 3}
console.log(o1); // {a: 1, b: 2, f: 6, c: 3}--目標(biāo)對(duì)象自身也會(huì)改變
//如果不想改變?cè)瓉?lái)的對(duì)象，可以使用一個(gè)空對(duì)象作為目標(biāo)對(duì)象
const o1 = { a: 1, b: 4, f: 6 };
const o2 = { b: 2 };
const o3 = { c: 3 };
const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // {a: 1, b: 2, f: 6, c: 3}Object.keys()
描述：Object.keys()方法會(huì)返回一個(gè)由一個(gè)給定對(duì)象的自身可枚舉屬性組成的數(shù)組,數(shù)組中屬性名的排列順序和正常循環(huán)遍歷對(duì)象是返回的順序一致。
語(yǔ)法：Object.keys(要返回其枚舉自身屬性的對(duì)象);
const arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); //['0', '1', '2']
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); //['0', '1', '2']
for (const key of Object.keys(obj)) {
console.log(key + ":" + obj[key]);
};
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); //['2', '7', '100']
const myObj = Object.create({}, {
getFoo: {
value: function () { return this.foo; }
}
});
myObj.foo = 1;
console.log(Object.keys(myObj)); //['foo']注意
1. 在ES5里，如果此方法的參數(shù)不是對(duì)象（而是一個(gè)原始值），那么它會(huì)拋出 TypeError。
Object.keys("foo");// TypeError: "foo" is not an object (ES5 code)2. 在ES2015中，非對(duì)象的參數(shù)將被強(qiáng)制轉(zhuǎn)換為一個(gè)對(duì)象。
Object.keys("foo");// ["0", "1", "2"] (ES2015 code)Object.create()
描述：OObject.create(對(duì)象名);bject.create()方法創(chuàng)建一個(gè)對(duì)象，使用現(xiàn)有的對(duì)象來(lái)提供新創(chuàng)建的對(duì)象的proto
語(yǔ)法：Object.create(對(duì)象名);
const obj = {
name: "haha",
isStudent: true,
show: function () {
console.log(this.name + this.isStudent);
}
};
//const stu = new obj("張三", false);//報(bào)錯(cuò) obj is not a constructor
const stu = Object.create(obj);
stu.name = "張三";
stu.isStudent = false;
console.log(stu);//{name: '張三', isStudent: false}
console.log(stu.show());//張三false
console.log(stu.__proto__);//{name: 'haha', isStudent: true, show: f}Object.entries()
描述：Object.entries()方法返回一個(gè)給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組，其排列與使用for...in循環(huán)遍歷該對(duì)象時(shí)返回的順序一致(區(qū)別在于 for-in 循環(huán)還會(huì)枚舉原型鏈中的屬性)。
語(yǔ)法：Object.entries(對(duì)象名);
const obj = {
a: "have",
b: "some",
c: "thing",
d: "to",
e: "do"
};
console.log(Object.entries(obj));//[['a', 'have'], ['b', 'some'], ['c', 'thing'], ['d', 'to'], ['e', 'do']]
for (const [key, value] of Object.entries(obj)) {
console.log(key + ":" + value);
};Object.values()
描述：Object.values()方法返回一個(gè)給定對(duì)象自身的所有可枚舉屬性值的數(shù)組，值的順序與使用for...in循環(huán)的相同(區(qū)別在于 for-in 循環(huán)枚舉原型鏈中的屬性)。
語(yǔ)法：Object.values(被返回可枚舉屬性值的對(duì)象);
const obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); //['bar', 42]
const obj_ = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj_)); //['a', 'b', 'c']
const an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); //['b', 'c', 'a']
const my_obj = Object.create({}, { getFoo: { value: function () { return this.foo; } } });
my_obj.foo = 'bar';
console.log(Object.values(my_obj)); //['bar']
console.log(Object.values('foo')); //['f', 'o', 'o']Object.freeze()
描述：Object.freeze() 方法可以凍結(jié)一個(gè)對(duì)象。一個(gè)被凍結(jié)的對(duì)象再也不能被修改；凍結(jié)了一個(gè)對(duì)象則不能向這個(gè)對(duì)象添加新的屬性，不能刪除已有屬性，不能修改該對(duì)象已有屬性的可枚舉性、可配置性、可寫(xiě)性，以及不能修改已有屬性的值。此外，凍結(jié)一個(gè)對(duì)象后該對(duì)象的原型也不能被修改。freeze() 返回和傳入的參數(shù)相同的對(duì)象。
語(yǔ)法：Object.freeze(被凍結(jié)的對(duì)象);
const obj = {
prop: function () { },
foo: 'bar'
};
obj.foo = 'baz';
obj.lumpy = 'woof';
delete obj.prop;
const o = Object.freeze(obj);
console.log(obj);//{foo: 'baz', lumpy: 'woof'}
console.log(o === obj);// true
// 判斷是否被凍結(jié)
Object.isFrozen(obj); //true
// 現(xiàn)在任何改變都會(huì)失效(默認(rèn)不做任何事 程序不會(huì)報(bào)錯(cuò))
obj.foo = 'quux';
obj.quaxxor = 'the friendly duck';
console.log(obj);//{foo: 'baz', lumpy: 'woof'}Object.is()
描述：Object.is()方法判斷兩個(gè)值是否為同一個(gè)值。
語(yǔ)法：Object.is(value1, value2);
Object.is('foo', 'foo'); // true
Object.is(window, window); // true
Object.is('foo', 'bar'); // false
Object.is([], []); // false
const foo = { a: 1 };
const bar = { a: 1 };
Object.is(foo, foo); // true
Object.is(foo, bar); // false
Object.is(null, null); // true
Object.is(0, -0); // false
Object.is(0, +0); // true
Object.is(-0, -0); // true
Object.is(NaN, 0 / 0); // truejs遍歷對(duì)象的三種方式
1. 使用for ...in
const obj = {
name: "張三",
age: 25,
gender: "男",
};
for (const key in obj) {
console.log(key+":"+ obj[key]);
};2. 使用for...of和Object.keys()
const obj = {
name: "張三",
age: 25,
gender: "男",
};
//console.log(Object.keys(obj));//['name', 'age', 'gender']
for (const key of Object.keys(obj)) {
console.log(key + ":" + obj[key]);
};3. 使用for...of和Object.entries()
const obj = {
name: "張三",
age: 25,
gender: "男",
};
//console.log(Object.entries(obj));//[['name', '張三'], ['age', 25], ['gender', '男']]
// for (const item of Object.entries(obj)) {
// console.log(item);//['name', '張三'] ['age', 25] ['gender', '男']
// };
for (const [key, value] of Object.entries(obj)) {
console.log(key + ":" + value);
};
今天的分享就到這里啦~~
如有錯(cuò)誤，歡迎隨時(shí)雅正。
感興趣的朋友可以使用本站在線工具：http://tools.jb51.net/code/HtmlJsRun 測(cè)試上述代碼運(yùn)行效果！
- js中遍歷對(duì)象的屬性和值的方法
- Javascript的數(shù)組與字典用法與遍歷對(duì)象的技巧
- js中遍歷Map對(duì)象的方法
- js 遍歷對(duì)象的屬性的代碼
- JS中如何輕松遍歷對(duì)象屬性的方式總結(jié)
- js遍歷json對(duì)象所有key及根據(jù)動(dòng)態(tài)key獲取值的方法(必看)
- JS遍歷數(shù)組和對(duì)象的區(qū)別及遞歸遍歷對(duì)象、數(shù)組、屬性的方法詳解
- jquery動(dòng)態(tài)遍歷Json對(duì)象的屬性和值的方法
- js簡(jiǎn)單遍歷獲取對(duì)象中的屬性值的方法示例
- JS遍歷Json字符串中鍵值對(duì)先轉(zhuǎn)成JSON對(duì)象再遍歷
- 關(guān)于JavaScript對(duì)象類型之Array及Object
- es6 javascript對(duì)象Object.values() , Object.entries()示例詳解
- Javascript?Object對(duì)象類型使用詳解
相關(guān)文章
JavaScript利用油猴腳本實(shí)現(xiàn)去水印功能
這篇文章主要為大家詳細(xì)介紹了JavaScript如何利用油猴腳本實(shí)現(xiàn)去水印功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
這篇文章主要介紹了js for等循環(huán) 跳出多層循環(huán)，終止循環(huán)執(zhí)行的方法,需要的朋友可以參考下2018-10-10
event.srcElement 可以捕獲當(dāng)前事件作用的對(duì)象，如event.srcElement.tagName可以捕獲活動(dòng)標(biāo)記名稱。2009-12-12
JS與jQuery遍歷Table所有單元格內(nèi)容的方法
這篇文章主要介紹了JS與jQuery遍歷Table所有單元格內(nèi)容的方法,結(jié)合實(shí)例形式分別描述了JavaScript與jQuery實(shí)現(xiàn)遍歷table單元格的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
echarts實(shí)現(xiàn)3d柱狀圖的2種方式舉例
echarts3D效果柱狀圖的實(shí)現(xiàn),這個(gè)太難了,我花了兩天終于調(diào)成我想要的效果啦,要是官網(wǎng)上有例子就好了,太難調(diào)了,下面這篇文章主要給大家介紹了關(guān)于echarts實(shí)現(xiàn)3d柱狀圖的2種方式,需要的朋友可以參考下2023-02-02
詳解JavaScript表單驗(yàn)證（E-mail 驗(yàn)證）
這篇文章主要為大家詳細(xì)介紹了JavaScript表單驗(yàn)證，重點(diǎn)介紹了E-mail驗(yàn)證，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
前端如何判斷多個(gè)請(qǐng)求完畢的實(shí)戰(zhàn)及常見(jiàn)問(wèn)題
在前端開(kāi)發(fā)中,判斷多個(gè)請(qǐng)求完畢是一個(gè)常見(jiàn)需求,這篇文章主要介紹了前端如何判斷多個(gè)請(qǐng)求完畢實(shí)戰(zhàn)及常見(jiàn)問(wèn)題的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
游戲人文件夾程序 ver 3.0...2006-07-07
JavaScript實(shí)現(xiàn)數(shù)組降維詳解
大家都知道將多維數(shù)組（尤其是二維數(shù)組）轉(zhuǎn)化為一維數(shù)組是業(yè)務(wù)開(kāi)發(fā)中的常用邏輯，除了使用樸素的循環(huán)轉(zhuǎn)換以外，我們還可以利用Javascript的語(yǔ)言特性和數(shù)據(jù)結(jié)構(gòu)的思想實(shí)現(xiàn)更為簡(jiǎn)潔優(yōu)雅的轉(zhuǎn)換。下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)關(guān)于JavaScript如何實(shí)現(xiàn)數(shù)組降維吧。2017-01-01
本文主要介紹了JS實(shí)現(xiàn)頁(yè)面打印功能的方法，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03