一分钟带你上手JS对象的基本用法
Posted 水星记_
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一分钟带你上手JS对象的基本用法相关的知识,希望对你有一定的参考价值。
前言
相信大家对 JavaScript 中的对象都不陌生,而且我们几乎每天都在使用它,那你对对象的认识有多少呢?本章就带大家一起出浅入深的了解 JavaScript 中的对象。
一、什么是对象?
到底什么是对象呢?大多数人可能都会脱口而出,一个大括号呗。用官方的话来说,在
js
中对象是一组元素的相关属性和方法的集合,所有的事物都是对象,例如:日期,字符串,数字,数组,布尔,函数等。你可以理解为对象就是属性和方法组成的,是一种无序的数据集合,用来描述某个事物的信息。
二、怎么声明对象?
对象的声明其实特别简单,以下为两种常见的声明方式。
1. 直接声明
let obj =
2. 通过
new
关键字创建
let obj2 = new Object
当然,声明对象的方式远不止上面两种,还有很多其它的方式,例如通过构造函数、工厂函数、混合模式、原型模式等等,感兴趣的同学可以去了解一下。
三、对象是如何访问内部属性的?
对象.属性
对象['属性']
四、如何遍历对象?
let obj =
id: "001",
name: "小欧兰",
age: "18",
sex: "女",
;
for (let i in obj)
console.log(i); //所有属性名
console.log(obj[i]); //所有属性值
console.log(`$i:$obj[i]`); //所有属性名和属性值
五、如何合并多个对象?
1. Object.assign(target,sources) 浅拷贝
第一个值是目标对象,第二个值是源对象,返回值为目标对象。需要注意的是对象中有同名属性会被后面的对象属性值覆盖。
let obj =
id: "001",
name: "小欧兰",
age: "18",
sex: "女",
;
let obj1 =
old: "12",
cki: "no",
sex: "男",
;
const objs = Object.assign(obj, obj1);
console.log(objs);
控制台打印
2. 扩展运算符(…)es6
扩展运算符(…)是 ES6
的语法,用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中。需要注意的是对象中有同名属性会被后面的对象属性值覆盖。
let obj =
id: "001",
name: "小欧兰",
age: "18",
sex: "女",
;
let obj1 =
old: "12",
cki: "no",
sex: "男",
;
const objs = ...obj, ...obj1 ;
console.log(objs);
控制台打印
除此之外,你还可以使用 lodash
工具实现对象的合并,感兴趣的同学可以去了解一下。
六、如何将对象所有属性值清空?
Object.keys(this.ruleForm).forEach(
(key) => (this.ruleForm[key] = "")
);
七、对象中的增删改查?
对象的原始状态
let obj =
id: "001",
name: "小欧兰",
age: "18",
sex: "女",
;
1. 增
obj.site = "北京";
obj["site"] = "北京";
控制台打印
2. 删
delete obj.name;
delete obj["name"];
// es6
Reflect.deleteProperty(obj, "name");
控制台打印
2.1 Reflect.deleteProperty()
Reflect.deleteProperty()
方法允许删除对象上的属性。如果该方法返回 true
,则表示删除该属性成功。否则,它返回 false
。
用法:
Reflect.deleteProperty(target, propertyKey)
参数:
-
target
要删除其属性的目标对象 -
propertyKey
要删除的属性的名称
返回值:
布尔值表示该属性是否已成功删除。
3. 改
obj.id = "002";
obj["id"] = "002";
控制台打印
修改属性名
let a = JSON.parse(JSON.stringify(obj).replace(/id/g, "code")); //将对象中属性名为 id 的修改成 code
控制台打印
有关于 replace
方法的详细用法,可访问 JavaScript replace() 方法 查看。
4. 查
查的话直接通过 log
即可。
console.log(obj);
控制台打印
以上是关于一分钟带你上手JS对象的基本用法的主要内容,如果未能解决你的问题,请参考以下文章
3分钟上手JS中的FileReader对象(实现上传图片预览)
云开发给我 10 分钟,带你上手一个 AWS serverless web server