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

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

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

這篇文章分享的主要是以下方法的基本用法，想要更加深入了解這些方法的朋友，請(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"));//false

Object.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è)置該屬性名的屬性值，如果不寫[value:屬性值],則默認(rèn)該屬性名對(duì)應(yīng)的屬性值為undefined。

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

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

//當(dāng)writable:false 或 不寫 時(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），通過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è)瓉淼膶?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ì)象來提供新創(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ì)象已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值。此外，凍結(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);       // true

js遍歷對(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)行效果！

您可能感興趣的文章:

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

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

Object的相關(guān)方法

Object.hasOwnProperty()

Object.defineProperty()

Object.defineProperties()

Object.assign()

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

用法2：合并對(duì)象

Object.keys()

Object.create()

Object.entries()

Object.values()

Object.freeze()

Object.is()

js遍歷對(duì)象的三種方式

1. 使用for ...in

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

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

相關(guān)文章

最新評(píng)論

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

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

常用在線小工具

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

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

Object的相關(guān)方法

Object.hasOwnProperty()

Object.defineProperty()

Object.defineProperties()

Object.assign()

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

用法2：合并對(duì)象

Object.keys()

Object.create()

Object.entries()

Object.values()

Object.freeze()

Object.is()

js遍歷對(duì)象的三種方式

1. 使用for ...in

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

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

相關(guān)文章

最新評(píng)論

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

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

常用在線小工具

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