Object的相关方法和 js遍历对象的常用方法总结

更新时间：2023年05月20日 09:03:55 作者：不甜呐

这篇文章主要介绍了Object的相关方法和 js遍历对象的常用方法,结合实例形式总结分析了Object对象操作的操作方法与js遍历的三种常用方法,需要的朋友可以参考下

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

Object的相关方法

Object.hasOwnProperty()

描述：Object.hasOwnProperty()方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性(是否有指定的键或索引)。

语法：变量名.hasOwnProperty("属性名"/索引);

//当变量是数组时
const arr = [4, 6, 7, 88, 99, 200];
//判断arr数组中是否有索引为4的元素  
console.log(arr.hasOwnProperty(4));//true
//判断arr数组中是否有索引为7的元素
console.log(arr.hasOwnProperty(7));//false
//当变量是对象时 属性名需要加""
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()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

语法：Object.defineProperties(对象名,属性名,{value:属性值,writable:true/false});

特点：一次只能新增或修改一个属性。

分析：

value:属性值;设置该属性名的属性值，如果不写[value:属性值],则默认该属性名对应的属性值为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;设置该属性是否允许修改，true表示允许，false表示不允许。如果不写，默认为false。

//当writable:false 或 不写 时
const obj = {};
//Object.defineProperty(obj, "name", {value: "张三"});
Object.defineProperty(obj, "name", { value: "张三", "writable": false });
console.log(obj);//{name: '张三'}
obj.name = "李四";//不能修改 这里程序不会报错 默认不做任何事
console.log(obj);//{name: '张三'}
//当writable:true时
const myObj = {};
Object.defineProperty(myObj, "name", { value: "张三", "writable": true });
console.log(myObj);//{name: '张三'}
myObj.name = "李四";//可以修改
console.log(myObj);//{name: '李四'}

除了value和writable之外，还有其他设置属性的属性，具体请参考MDN。

Object.defineProperties()

描述：Object.defineProperties()方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。

语法：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";//不能修改 这里程序不会报错 默认不做任何事
console.log(obj);//{name: '李四', age: 20}

Object.assign()

描述：Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象。它将返回目标对象。如果属性名相同，后面的值会覆盖前面的。

语法：Object.assign(目标对象,源对象);

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：复制一个对象（深拷贝和浅拷贝）

对于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：合并对象

注意目标对象自身也会改变。如果属性名相同，后面的值会覆盖前面的

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}--目标对象自身也会改变
//如果不想改变原来的对象，可以使用一个空对象作为目标对象
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()方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历对象是返回的顺序一致。

语法：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里，如果此方法的参数不是对象（而是一个原始值），那么它会抛出 TypeError。

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

2. 在ES2015中，非对象的参数将被强制转换为一个对象。

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

Object.create()

描述：OObject.create(对象名);bject.create()方法创建一个对象，使用现有的对象来提供新创建的对象的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()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用for...in循环遍历该对象时返回的顺序一致(区别在于 for-in 循环还会枚举原型链中的属性)。

语法：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()方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for...in循环的相同(区别在于 for-in 循环枚举原型链中的属性)。

语法：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() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

语法：Object.freeze(被冻结的对象);

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
// 判断是否被冻结
Object.isFrozen(obj); //true
// 现在任何改变都会失效(默认不做任何事 程序不会报错)
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 测试上述代码运行效果！

您可能感兴趣的文章:

DOM 脚本编程中的兄弟节点
兄弟节点之间可以通过 previousSibling 和 nextSibling 属性访问同一级别上的不同子节点。这个兄弟节点是元素还是文本节点在现代浏览器上运行是怎么样的呢？
2009-10-10
getComputedStyle与currentStyle获取样式(style/class)
通过document.getElementById(element).style.xxx可以获取元素的样式信息但是对于通过class属性引用的外部样式表就获取不到了，感兴趣的朋友可以了解下
2013-03-03
自制简易打赏功能的实例
下面小编就为大家带来一篇自制简易打赏功能的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
echarts柱状图背景重叠组合而非并列的实现代码
这篇文章主要给大家介绍了关于echarts柱状图背景重叠组合而非并列的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
javascript中Array数组的迭代方法实例分析
这篇文章主要介绍了javascript中Array数组的迭代方法,实例分析了Array数组的迭代方法定义与使用技巧,需要的朋友可以参考下
2015-02-02
Bootstrap学习笔记之css组件(3)
这篇文章主要为大家详细介绍了bootstrap学习笔记中的css组件，感兴趣的小伙伴们可以参考一下
2016-06-06
JavaScript将相对地址转换为绝对地址示例代码
本文为大家详细介绍下JavaScript怎么将相对地址转换为绝对地址，具体的示例如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
2013-07-07
Jquery中删除元素的实现代码
empty用来删除指定元素的子元素，remove用来删除元素，或者设定细化条件执行删除
2011-12-12
20个必会的JavaScript面试题(小结)
这篇文章主要介绍了20个必会的JavaScript面试题(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-07-07
uniapp小程序的图片(视频)上传的组件封装方法
这篇文章主要介绍了uniapp做小程序的图片(视频)上传的组件封装,要求实现多张图片的上传 ,可以限制图片上传的数量,图片预览,多次使用对图片的上传顺序排序,需要的朋友可以参考下
2024-02-02

Object的相关方法和 js遍历对象的常用方法总结

Object的相关方法

Object.hasOwnProperty()

Object.defineProperty()

Object.defineProperties()

Object.assign()

用法1：复制一个对象（深拷贝和浅拷贝）

用法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()

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具

Object的相关方法 和 js遍历对象的常用方法总结

Object的相关方法

Object.hasOwnProperty()

Object.defineProperty()

Object.defineProperties()

Object.assign()

用法1：复制一个对象（深拷贝和浅拷贝）

用法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()

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具

Object的相关方法和 js遍历对象的常用方法总结