Object的相關(guān)方法和 js遍歷對象的常用方法總結(jié)

更新時間：2023年05月20日 09:03:55 作者：不甜吶

這篇文章主要介紹了Object的相關(guān)方法和 js遍歷對象的常用方法,結(jié)合實例形式總結(jié)分析了Object對象操作的操作方法與js遍歷的三種常用方法,需要的朋友可以參考下

這篇文章分享的主要是以下方法的基本用法，想要更加深入了解這些方法的朋友，請參考MND

Object的相關(guān)方法

Object.hasOwnProperty()

描述：Object.hasOwnProperty()方法會返回一個布爾值，指示對象自身屬性中是否具有指定的屬性(是否有指定的鍵或索引)。

語法：變量名.hasOwnProperty("屬性名"/索引);

//當(dāng)變量是數(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)變量是對象時 屬性名需要加""
const obj = {
	name: "張三",
	age: "40"
};
//判斷obj對象中中是否有屬性名為"name"的屬性
console.log(obj.hasOwnProperty("name"));//true
//判斷obj對象中中是否有屬性名為"gender"的屬性
console.log(obj.hasOwnProperty("gender"));//false

Object.defineProperty()

描述：Object.defineProperties()方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性，并返回此對象。

語法：Object.defineProperties(對象名,屬性名,{value:屬性值,writable:true/false});

特點：一次只能新增或修改一個屬性。

分析：

value:屬性值;設(shè)置該屬性名的屬性值，如果不寫[value:屬性值],則默認(rèn)該屬性名對應(yīng)的屬性值為undefined。

//不寫 value:屬性值 時
const obj = {};
Object.defineProperty(obj, "name", {});
console.log(obj);//{name: undefined}
//寫 value:屬性值 時
const myObj = {};
Object.defineProperty(myObj, "name", {value: "張三"});
console.log(myObj);//{name: '張三'}

writable:true/false;設(shè)置該屬性是否允許修改，true表示允許，false表示不允許。如果不寫，默認(rèn)為false。

//當(dāng)writable:false 或 不寫 時
const obj = {};
//Object.defineProperty(obj, "name", {value: "張三"});
Object.defineProperty(obj, "name", { value: "張三", "writable": false });
console.log(obj);//{name: '張三'}
obj.name = "李四";//不能修改 這里程序不會報錯 默認(rèn)不做任何事
console.log(obj);//{name: '張三'}
//當(dāng)writable:true時
const myObj = {};
Object.defineProperty(myObj, "name", { value: "張三", "writable": true });
console.log(myObj);//{name: '張三'}
myObj.name = "李四";//可以修改
console.log(myObj);//{name: '李四'}

除了value和writable之外，還有其他設(shè)置屬性的屬性，具體請參考MDN。

Object.defineProperties()

描述：Object.defineProperties()方法直接在一個對象上定義新的屬性或修改現(xiàn)有屬性，并返回該對象。

語法：Object.defineProperties(對象名, { 屬性名1: { value1: 值1, writable: true }, 屬性名2: { value2: 值2, writable: false } })；

特點：用法和Object.defineProperty()方法類似，語法略有不同，另外Object.defineProperties()一次只能新增或修改一個屬性，而Object.defineProperty()方法一次可以新增或修改多個屬性。

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";//不能修改 這里程序不會報錯 默認(rèn)不做任何事
console.log(obj);//{name: '李四', age: 20}

Object.assign()

描述：Object.assign()方法用于將所有可枚舉屬性的值從一個或多個源對象。它將返回目標(biāo)對象。如果屬性名相同，后面的值會覆蓋前面的。

語法：Object.assign(目標(biāo)對象,源對象);

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ù)制一個對象（深拷貝和淺拷貝）

對于Object.assign()而言，如果對象的屬性值為簡單類型（string，number），通過Object.assign({},obj);得到的新對象為深拷貝；如果屬性值為對象或其他引用類型，那對于這個對象而言其實是淺拷貝的，這是Object.assign()特別需要注意的地方。

深拷貝

const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy);//{a: 1}
obj.a = 2;//不會對copy對象有影響
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;//對obj有影響
console.log(result);//{a: {b: 2}}

用法2：合并對象

注意目標(biāo)對象自身也會改變。如果屬性名相同，后面的值會覆蓋前面的

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)對象自身也會改變
//如果不想改變原來的對象，可以使用一個空對象作為目標(biāo)對象
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()方法會返回一個由一個給定對象的自身可枚舉屬性組成的數(shù)組,數(shù)組中屬性名的排列順序和正常循環(huán)遍歷對象是返回的順序一致。

語法：Object.keys(要返回其枚舉自身屬性的對象);

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ù)不是對象（而是一個原始值），那么它會拋出 TypeError。

Object.keys("foo");// TypeError: "foo" is not an object (ES5 code)

2. 在ES2015中，非對象的參數(shù)將被強制轉(zhuǎn)換為一個對象。

Object.keys("foo");// ["0", "1", "2"]  (ES2015 code)

Object.create()

描述：OObject.create(對象名);bject.create()方法創(chuàng)建一個對象，使用現(xiàn)有的對象來提供新創(chuàng)建的對象的proto

語法：Object.create(對象名);

const obj = {
	name: "haha",
	isStudent: true,
	show: function () {
		console.log(this.name + this.isStudent);
	}
};
//const stu = new obj("張三", false);//報錯 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()方法返回一個給定對象自身可枚舉屬性的鍵值對數(shù)組，其排列與使用for...in循環(huán)遍歷該對象時返回的順序一致(區(qū)別在于 for-in 循環(huán)還會枚舉原型鏈中的屬性)。

語法：Object.entries(對象名);

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()方法返回一個給定對象自身的所有可枚舉屬性值的數(shù)組，值的順序與使用for...in循環(huán)的相同(區(qū)別在于 for-in 循環(huán)枚舉原型鏈中的屬性)。

語法：Object.values(被返回可枚舉屬性值的對象);

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é)一個對象。一個被凍結(jié)的對象再也不能被修改；凍結(jié)了一個對象則不能向這個對象添加新的屬性，不能刪除已有屬性，不能修改該對象已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值。此外，凍結(jié)一個對象后該對象的原型也不能被修改。freeze() 返回和傳入的參數(shù)相同的對象。

語法：Object.freeze(被凍結(jié)的對象);

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)在任何改變都會失效(默認(rèn)不做任何事 程序不會報錯)
obj.foo = 'quux';
obj.quaxxor = 'the friendly duck';
console.log(obj);//{foo: 'baz', lumpy: 'woof'}

Object.is()

描述：Object.is()方法判斷兩個值是否為同一個值。

語法：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);       // true

js遍歷對象的三種方式

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);
};

今天的分享就到這里啦~~

如有錯誤，歡迎隨時雅正。

感興趣的朋友可以使用本站在線工具：http://tools.jb51.net/code/HtmlJsRun 測試上述代碼運行效果！

您可能感興趣的文章:

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

Object的相關(guān)方法和 js遍歷對象的常用方法總結(jié)

Object的相關(guān)方法

Object.hasOwnProperty()

Object.defineProperty()

Object.defineProperties()

Object.assign()

用法1：復(fù)制一個對象（深拷貝和淺拷貝）

用法2：合并對象

Object.keys()

Object.create()

Object.entries()

Object.values()

Object.freeze()

Object.is()

js遍歷對象的三種方式

1. 使用for ...in

2. 使用for...of和Object.keys()

3. 使用for...of和Object.entries()

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

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

Object的相關(guān)方法 和 js遍歷對象的常用方法總結(jié)

Object的相關(guān)方法

Object.hasOwnProperty()

Object.defineProperty()

Object.defineProperties()

Object.assign()

用法1：復(fù)制一個對象（深拷貝和淺拷貝）

用法2：合并對象

Object.keys()

Object.create()

Object.entries()

Object.values()

Object.freeze()

Object.is()

js遍歷對象的三種方式

1. 使用for ...in

2. 使用for...of和Object.keys()

3. 使用for...of和Object.entries()

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

Object的相關(guān)方法和 js遍歷對象的常用方法總結(jié)