一分钟带你上手JS对象的基本用法

news2024/12/29 10:10:02

前言

相信大家对 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);

控制台打印

在这里插入图片描述


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/150249.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

生物信息学——基础篇——一至三代测序技术

生物信息学 生物信息学——基础篇——一至三代测序技术 文章目录生物信息学一、一代测序二、二代测序三、三代测序四、总结一、一代测序 概述:一代测序(又称Sanger测序)。 原理:Sanger测序利用一类特殊的核昔酸,即dd…

imx6ull内核添加exfat,并自动开机加载

下载地址:https://github.com/dorimanx/exfat-nofuse.git 方式一,移植到内核,通过内核开启 1、下载exfat源码(将源码目录设置成exfat方便修改),将其放到内核的fs目录下 2、修改fs目录下的Kconfig文件 3、…

Go语言设计与实现 -- GC的简要介绍

GC实现原理 什么是GC? 垃圾回收也称为GC(Garbage Collection),是一种自动内存管理机制 现代高级编程语言管理内存的方式分为两种:自动和手动,像C、C 等编程语言使用手动管理内存的方式,工程师…

OpenHarmony 标准系统 HDF 框架音视频驱动开发

OpenHarmony 标准系统 HDF 框架音视频驱动开发引言OpenHarmony 音频概述HDF 音频驱动框架概述HDF 音频驱动框架分析 —— 音频设备驱动HDF 音频驱动框架分析 —— supportlibs 实现HDF 音频驱动框架分析 —— hdi-passthrough 实现HDF 音频驱动框架分析 —— hdi-binder 实现HD…

从零开始计算机网络——计算机网络课程的了解初步认识计算机网络

目录 🍘计算机网络学科到底学什么? 🧇两个参考模型的介绍 🥪OSI参考模型&TPC参考模型&五层参考模型 🍱 计算机网络学科的重难点——网络协议 🥘如何学好计算机网络课程? 🍣相…

Java使用BigDecimal(公式精确计算)+(精度丢失问题)

一、Java使用BigDecimal公式计算(精确计算) 介绍: 使用BigDecimal加减乘除方法运算,可以使用BigDecimal类提供的add、subtract、multiply、divide方法函数实现。 公式加法计算~add public static void main(String[] args){BigDecimal a BigDecimal.valueOf(5.6);…

动态规划合集

62 斐波那契数列 public class Solution {public int Fibonacci(int n) { return f(n);}public int f(int n){if(n1||n2){return 1;}return f(n-1)f(n-2);} }这种做法时间复杂度O(2^N),空间复杂度是用递归栈,O(n) 改进:用动态规划,可以…

Pytorch优化器全总结(三)牛顿法、BFGS、L-BFGS 含代码

目录 写在前面 一、牛顿法 1.看图理解牛顿法 2.公式推导-三角函数 3.公式推导-二阶泰勒展开 二、BFGS公式推导 三、L-BFGS 四、算法迭代过程 五、代码实现 1.torch.optim.LBFGS说明 2.使用LBFGS优化模型 优化器系列文章列表 Pytorch优化器全总结(一&…

C 程序设计教程(09)—— 数据输出函数(printf)用法详解

C 程序设计教程(09)—— 数据输出函数(printf)用法详解 该专栏主要介绍 C 语言的基本语法,作为《程序设计语言》课程的课件与参考资料,用于《程序设计语言》课程的教学,供入门级用户阅读。 目录…

Python小案例

1、简单的打印输出 age =18 print("我的名字是%s,我的国籍是%s"%("小张","中国")) print("我的年纪是:%d岁"%age) print("www","baidu","com",sep=".") #sep是使用.分割的意思,这个输出是百…

微信小程序开发——小程序的宿主环境API,协同工作和发布

一.小程序API概述 小程序中的 API 是由宿主环境提供的,通过这些丰富的小程序 API ,开发者可以方便的调用微信提供的能力,例如:获取用户信息、本地存储、支付功能等。 二.小程序API的3大分类 a.事件监听AP1 特点:以…

【服务器数据恢复】服务器硬盘掉线的数据库数据恢复案例

服务器数据恢复环境&故障: 某公司服务器,配备24块FC硬盘,两块硬盘出现故障掉线,导致服务器上层的卷无法挂载。 服务器数据恢复过程: 1、查看服务器硬盘状态发现有两块硬盘离线,将服务器内的所有硬盘做好…

【数据结构-JAVA】栈(Stack)和队列(Queue)

栈1.1 栈的概念栈:一种特殊的线性表,其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈 顶,另一端称为栈底。栈中的数据元素遵守先进后出,后进先出的原则(LIFO——Last In First Out&a…

【从零开始学习深度学习】41. 算法优化之RMSProp算法【基于AdaGrad算法的改进】介绍及其Pytorch实现

上一篇文章AdaGrad算法中提到,因为调整学习率时分母上的变量st\boldsymbol{s}_tst​一直在累加按元素平方的小批量随机梯度,所以目标函数自变量每个元素的学习率在迭代过程中一直在降低(或不变)。因此,当学习率在迭代早…

LeetCode 45. 跳跃游戏 II

45. 跳跃游戏 II - 力扣(LeetCode) 解法1:(动态规划 贪心) 果然代码越短,思路越难。这题用的是动态规划贪心的思想。首先分析题意我们可以知道,从索引0这个点开始,我们走一步可以…

redis命令第二弹

1、redis命令-hash类型练习2、redis命令-list类型练习3、redis命令-set类型练习

YOLOV5环境搭建以及训练COCO128数据集

前言记录了自己训练coco128的全过程手把手教你YOLOV5环境搭建以及训练COCO128数据集。相关配置文件在百度网盘中。如果懒得话可以直接全部用我的数据一、准备工作1.1创建环境打开anaconda power shell(最好以管理员身份运行,免得到后面相关文件权限进不去…

sentinel-介绍(一)

Sentinel Website(Sentinel 官网网站) Sentinel: 分布式系统的流量防卫兵 Sentinel 是什么? 随着微服务的流行,服务和服务之间的稳定性变得越来越重要。Sentinel 以流量为切入点,从流量控制、流量路由、熔断降级、系…

ansible配置yum源仓库

1.挂载本地光盘到/mnt 2.配置yum源仓库文件通过多种方式实现 仓库1 : Name: RH294_Base Description: RH294 base software Base urt: file:///mnt/BaseOS 不需要验证钦件包 GPG 签名 启用此软件仓库 仓库 2: Name: RH294_S…

LeetCode刷题模版:41 - 50

目录 简介41. 缺失的第一个正数42. 接雨水43. 字符串相乘44. 通配符匹配45. 跳跃游戏 II46. 全排列47. 全排列 II48. 旋转图像49. 字母异位词分组50. Pow(x, n)结语简介 Hello! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~ ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标…