前端知识点---Javascript的对象(Javascript)

文章目录

  • 01什么是对象
  • 02创建对象的方法
    • 2.1. 对象字面量 也是最常用的方法:
    • 2.2. 构造函数
    • 2.3. 对象构造函数(自定义)
    • 2.4. Object.create 方法
  • 03访问对象的属性
    • 3.1. 点
    • 3.2. 方括号操作符
  • 04. 添加/修改属性
  • 05. 删除属性
  • 06. 遍历对象属性
    • 6.1. for...in 循环
    • 6.2. Object.keys()
    • 6.3. Object.values()
    • 6.4. Object.entries()
  • 7. 对象的常见操作
    • 7.1. 合并对象
    • 7.2. 判断对象是否有某属性
  • 8. 对象的方法
  • 9. 对象与引用
  • 10. 原型与继承
    • 10.1. __proto__ 和 prototype
    • 10.2. 继承属性
  • 11. 总结

01什么是对象

在 JavaScript 中,对象是一复杂数据类型, 前面讲的数值字符串这些属于简单数据类型,用于存储键值对(key-value pairs)。

对象(Object) 是一种可以存储多个值的容器,每个值以键(key)为标识。键是字符串(或符号),值可以是任何数据类型 , 数值 , 字符串 , 函数等等 .

02创建对象的方法

2.1. 对象字面量 也是最常用的方法:

let person = {name: "John",  // 键 "name",值 "John"age: 30,       // 键 "age",值 30greet: function() { // 键 "greet",值是一个函数console.log("Hello!");}
};

注意
使用 = 赋值:在 let person 后面使用 = 来赋值一个对象。
属性间使用逗号分隔:对象的属性之间应该使用逗号 , 来分隔。
定义函数的时候 , 不要忘记()

如何调用对象呢 ?[跳转](# 03访问对象的属性)

2.2. 构造函数

使用 new Object():语法是定死的

let person = new Object();
person.name = "John";
person.age = 30;

2.3. 对象构造函数(自定义)

function Person(name, age) {this.name = name;this.age = age;
}let john = new Person("John", 30);

2.4. Object.create 方法

let person = Object.create(null);  // 创建一个没有原型的空对象

03访问对象的属性

3.1. 点

console.log(person.name);  // 访问 "name" 属性,输出 "John"

3.2. 方括号操作符

console.log(person["age"]);  // 访问 "age" 属性,输出 30

使用场景:如果属性名称包含空格或特殊字符,或需要动态访问属性时,方括号是必要的。

04. 添加/修改属性

person.job = "Developer";  // 添加新属性
person.age = 35;  // 修改已有属性

05. 删除属性

delete person.age;  // 删除 "age" 属性
console.log(person.age);  // undefined

06. 遍历对象属性

6.1. for…in 循环

遍历对象的所有可枚举属性:

for (let key in person) {console.log(key + ": " + person[key]);
}

6.2. Object.keys()

获取对象所有属性的键:

console.log(Object.keys(person));  // ["name", "job", "greet"]

6.3. Object.values()

获取对象所有属性的值:

console.log(Object.values(person));  // ["John", "Developer", function]

6.4. Object.entries()

获取对象的键值对数组:

console.log(Object.entries(person));
// [["name", "John"], ["job", "Developer"], ["greet", function]]

7. 对象的常见操作

7.1. 合并对象

使用 Object.assign:

let target = { a: 1 };
let source = { b: 2, c: 3 };
Object.assign(target, source);
console.log(target);  // { a: 1, b: 2, c: 3 }

使用扩展运算符 …:

let merged = { ...target, ...source };
console.log(merged);  // { a: 1, b: 2, c: 3 }

7.2. 判断对象是否有某属性

使用 in 操作符:

console.log("name" in person);  // true

使用 hasOwnProperty:

console.log(person.hasOwnProperty("name"));  // true

8. 对象的方法

对象可以包含方法,即存储在对象中的函数:

let calculator = {add: function(a, b) {return a + b;},subtract(a, b) {return a - b;  // 简写方式}
};console.log(calculator.add(5, 3));  // 8
console.log(calculator.subtract(5, 3));  // 2

9. 对象与引用

对象是引用类型,这意味着两个变量可能引用同一个对象:

let obj1 = { name: "Alice" };
let obj2 = obj1;
obj2.name = "Bob";
console.log(obj1.name);  // 输出 "Bob"

10. 原型与继承

JavaScript 对象具有原型链,支持继承。

10.1. proto 和 prototype

每个对象都有一个隐藏属性 proto,指向它的原型对象。

let obj = {};
console.log(obj.__proto__ === Object.prototype);  // true

10.2. 继承属性

对象可以从其原型链中继承属性:

let parent = { greet: "Hello" };
let child = Object.create(parent);
console.log(child.greet);  // 输出 "Hello"

11. 总结

支持键值对存储,具备动态属性管理、方法定义、继承等特性。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【STM32】基于SPI协议读写SD,详解!

文章目录 0 前言1 SD卡的种类和简介1.1 SD卡的种类1.2 SD卡的整体结构1.3 SD卡运行机制——指令和响应2 SD卡的通信总线2.1 SDIO2.2 SPI3 硬件连接4 代码实践【重点】4.1 HAL库移植4.2 标准库移植4.3 遇到的问题和解决方案5 扩展阅读0 前言 因为项目需要,使用stm32读写sd卡,这…

软件测试面试题(800道)【附带答案】持续更新...

(2024版)面经 详细笔记部分展示: 测试基础(102页) Linux基础(38页) MySQL(63页) web测试(21页) API测试(46页) APP测试&…

带你掌握springboot集成SpringSecurity安全框架

前言: Spring Security 是 Spring 家族中的一个框架,提供了一套 Web 应用安全性的完整解决方案。一般来说,系统的安全性包括用户认证(Authentication)和用户授权(Authorization)两个部分。 认证…

【2024最新】基于springboot+vue的闲一品交易平台lw+ppt

作者:计算机搬砖家 开发技术:SpringBoot、php、Python、小程序、SSM、Vue、MySQL、JSP、ElementUI等,“文末源码”。 专栏推荐:SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏:Java精选实战项…

修改yolo格式的labels类别、删除yolo格式的labels类别

1、项目中,数据集的类别顺序有时会改变,例如a项目类别1是b项目的类别3,,需要用a项目的数据集,只需要改类别就行,就不需要重新标注了,例如a项目的classes是 b项目的classes是 a项目的数据可以用…

Java项目实战II基于微信小程序的个人行政复议在线预约系统微信小程序(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发,CSDN平台Java领域新星创作者,专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 基于微信小…

Kubernetes在容器编排中的应用

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 Kubernetes在容器编排中的应用 Kubernetes在容器编排中的应用 Kubernetes在容器编排中的应用 引言 Kubernetes 概述 定义与原理 …

D67【python 接口自动化学习】- python基础之数据库

day67 Python操作MySQL基础使用 学习日期:20241113 学习目标:MySQL数据库-- 136 Python操作MySQL基础使用 学习笔记: pymysql 创建MySQL的数据库链接 执行sql语句 总结 Python中使用第三方库:pymysql来操作MySQL,…

GitLab基于Drone搭建持续集成(CI/CD)

本文介绍了如何为 Gitee 安装 Drone 服务器。服务器打包为在 DockerHub 上分发的最小 Docker 映像。 1. 准备工作 创建OAuth应用 创建 GitLab OAuth 应用。Consumer Key 和 Consumer Secret 用于授权访问极狐GitLab 资源。 ps:授权回调 URL 必须与以下格式和路径匹配&…

python实战(八)——情感识别(多分类)

一、任务目标 本文使用的是来自Kaggle的一个情感识别数据集,这个数据集的总数据量是5934条,标签为anger、fear、joy三种情感的其中一种,很明显是一个多分类任务。这里,我们将使用微调技巧进行深度学习建模,同时我们会比…

【学习笔记】数据结构(七)

图 文章目录 图7.1 图的定义和术语7.2 图的存储结构7.2.1 数组表示法 - 邻接矩阵(Adjacency Matrix)7.2.2 邻接表 -(链式)表示法(Adjacency List)7.2.3 十字链表(Orthogonal List)7.2.4 邻接多重表(Adjacent MultiList) 7.3 图的遍…

scrapy爬取中信证券销售金融产品信息

import scrapyclass CsProductSpider(scrapy.Spider):name "cs_product"allowed_domains ["www.cs.ecitic.com"]start_urls ["http://www.cs.ecitic.com/newsite/cpzx/jrcpxxgs/zgcp/index.html"]def parse(self, response):# 提取数据的逻辑…

power bi中的related函数解析

在Power BI中,RELATED函数是一种用于检索相关表中数据的函数。它用于在一个表中检索与当前行相关联的另一个表中的数据。 销售成本 [销售数量]*related(商品表[进价])

Ollama的安装以及大模型下载教程

简介 Ollama是一个开源的大型语言模型服务工具,它帮助用户快速在本地运行大模型。通过简单的安装指令,用户可以执行一条命令就在本地运行开源大型语言模型, Ollama极大地简化了在Docker容器内部署和管理LLM的过程,使得用户能够快…

算法演练----24点游戏

给定4个整数,数字范围在1~13之间任意使用-*/(),构造出一个表达式,使得最终结果为24, 方法一 算法分析:加括号和取出重复表达式 # 导入精确除法模块,使得在Python2中除法运算的行为更…

YUM 的使用

YUM 是一个用于 Fedora 和 Red Hat 以及 CentOS 操作系统的前端软件包管理器,它可以自动处理依赖关系并一次性安装所有必需的软件包。 镜像站点选择 1. 备份原有的镜像源配置文件 系统默认的 yum 镜像源配置文件存储在 /etc/yum.repos.d/ 目录下,可以…

第三十六章 Vue之路由重定向/404页面设置/路径模式设置

目录 一、路由重定向 1.1. 使用方式 1.2. 完整代码 1.2.1. main.js 1.2.2. App.vue 1.2.3. index.js 1.2.4. Search.vue 1.2.5. Home.vue 1.3. 运行效果 二、设定404错误页面 2.1. 使用方式 2.2. 完整代码 2.2.1. index.js 2.2.2. NotFound.vue 2.2.3. 运行效…

鸿蒙进阶篇-属性动画-animateTo转场动画

大家好啊,这里是鸿蒙开天组,今天我们来学习属性动画-animateTo&转场动画,咱们先来学习属性动画-animateTo 属性动画-animateTo 属性动画 animation是作为属性使用,而animateTo显示动画是一个系统的内置函数,可以…

[CKS] K8S ServiceAccount Set Up

最近准备花一周的时间准备CKS考试,在准备考试中发现有一个题目关于Rolebinding的题目。 ​ 专栏其他文章: [CKS] Create/Read/Mount a Secret in K8S-CSDN博客[CKS] Audit Log Policy-CSDN博客 -[CKS] 利用falco进行容器日志捕捉和安全监控-CSDN博客[CKS] K8S Netwo…

Autosar CP DDS规范导读

Autosar CP DDS 主要用途 数据通信 中间件协议:作为一种中间件协议,DDS实现了应用程序之间的高效数据通信,能够在不同的软件组件和ECU之间传输数据,确保数据的实时性和可靠性。跨平台通信:支持在AUTOSAR CP平台上的不同…