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

news2024/11/14 1:55:31

文章目录

  • 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",值 30
  greet: 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.coloradmin.cn/o/2239822.html

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

相关文章

vmware在全屏模式下快速切换回win桌面的方法

window上开发没有ubuntu下的方便,经常在window主机和ubuntu虚拟机直接切换太麻烦,每次得ctrlalt从虚拟机释放鼠标才可以切换,经过折腾发现以下几种方法可行 方法1 虚拟机监听切换按键并通知主机进行切换桌面 虚拟主机放在单独的一个桌面上并…

[Docker#8] 容器配置 | Mysql | Redis | C++ | 资源控制 | 命令对比

目录 一:Mysql 容器化安装 二:Redis 容器化安装 Redis 简介 Redis 容器创建 三:C容器制作 四:容器资源更新 常见问题 一:Mysql 容器化安装 进入 mysql 的镜像网站,查找 mysql 的镜像 mysql docker…

泷羽sec学习打卡-Linux基础

声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 关于Linux的那些事儿-Base 一、Linux-Base什么时openssl?有哪些加密参数?常用lin…

SpringBoot后端解决跨域问题

1.全局方式 新建一个conifg配置类,内容如下: Configuration public class CorsConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**")//是否发送Cookie.allowCrede…

odoo17 owl 前端 顶部导航栏右侧添加自定义按钮

odoo17 前端 顶部导航栏右侧添加自定义按钮 先看图 很多时候都想要在这添加个自定义按钮或图标, 无穷下手添加 这里将展示如何在顶部header添加自定义 添加自定义模块 demo 目录结构如下 └─demo│ __init__.py│ __manifest__.py│├─static│ └─src│ ├─s…

Power bi中的lookupvalue函数

lookupvalue函数是一个非常实用的函数,它可用于在两个表之间查找相应的值。kagkupMalue函数可以将一个表中的列值作为参数传递给另一个表中的列,并返回在第二个表中与该值匹配的另一个列的值。在实践中,lookupvalue函数通常用于两个表之间的关…

golang分布式缓存项目 Day5 分布式节点

该项目原作者:https://geektutu.com/post/geecache-day1.html。本文旨在记录本人做该项目时的一些疑惑解答以及部分的测试样例以便于本人复习 1 流程回顾注: 我们在GeeCache 第二天 中描述了 geecache 的流程。在这之前已经实现了流程 ⑴ 和 ⑶&#xf…

[产品管理-76]:延续是创新与颠覆式创新的比较

目录 一、概述 1、定义与特征 2、市场影响与竞争策略 3、实施难度与风险 4、案例分析 二、示例 1. 延续性创新示例 2. 创新示例 3. 颠覆式创新示例 一、概述 延续性创新与颠覆式创新是技术创新领域的两种重要策略,它们在多个方面存在显著差异。 以下是对…

【 AI写作鹅-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击,存在如下安全问题: 1. 暴力破解密码,造成用户信息泄露 2. 短信盗刷的安全问题,影响业务及导致用户投诉 3. 带来经济损失,尤其是后付费客户,风险巨大,造…

AI:重塑电商行业的创新引擎,开启电商数字化转型新征程

🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/literature?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,…

语义分割数据增强,图像和标签同步对应详细增强教程(附代码)

💪 专业从事且热爱图像处理,图像处理专栏更新如下👇: 📝《图像去噪》 📝《超分辨率重建》 📝《语义分割》 📝《风格迁移》 📝《目标检测》 📝《图像增强》 &a…

pgsql和mysql的自增主键差异

1. 当有历史数据存在时, mysql的自增主键是默认从最大值自增。 pgsql的自增主键取初始值开始逐个尝试,所以存在可能与历史数据的主键重复的情况。 pgsql解决上述问题的方式:重设自增值。 SELECT SETVAL(t_db_filed_id_seq, (SELECT MAX(&q…

Spring Cloud Contract快速入门Demo

1.什么是Spring Cloud Contract ? Spring Cloud Contract 是 Spring 提供的一套工具,用于帮助开发者通过契约(Contract)驱动的方式进行微服务的测试和集成。它主要解决微服务之间通信时,如何确保服务提供者和消费者之…

OceanBase JDBC (Java数据库连接)的概念、分类与兼容性

本章将介绍 OceanBase JDBC的 概念与分类,已帮助使用 JDBC 的用户及技术人员更好的 了解JDBC,以及 OceanBase JDBC在与 MySQL 及 Oracle 兼容性方面的相关能力。 一、JDBC 基础 1.1 JDBC 的概念 JDBC 一般指 Java 数据库连接。Java 数据库连接&#xf…

自定义springCloudLoadbalancer简述

概述 目前后端用的基本都是springCloud体系; 平时在dev环境开发时,会把自己的本地服务也注册上去,但是这样的话,在客户端调用时请求可能会打到自己本地,对客户端测试不太友好. 思路大致就是前端在请求头传入指定ip&a…

Go/Golang语言各种数据类型内存字节占用大小和最小值最大值

具体请前往:Go/golang语言基本数据类型字节大小和取值范围(最小值~最大值)

力扣104 : 二叉树最大深度

补:二叉树的最大深度 描述: 给定一个二叉树 root ,返回其最大深度。二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 何解? 树一般常用递归:递到叶子节点开始倒着处理

Android GPU纹理数据拷贝

在 Android 开发中读取纹理数据有以下几种方法: glReadPixelsImageReaderPBO(Pixel BufferObject) HardwareBuffer 1. glReadPixels glReadPixels 是 OpenGL ES 的 API,通常用于从帧缓冲区中读取像素数据,OpenGL ES…

畅捷通T+ RecoverPassword.aspx

用友 畅捷通T RecoverPassword.aspx 存在未授权管理员密码修改漏洞,攻击者可以通过漏洞修改管理员账号密码登录后台 #漏洞影响版本 12.0,12.1.12.2.12.3 13.0 15.0 16.0 18.0 补丁号291都影响 19.0 补丁号167之前也有影响 对于老版本畅捷通已经…

最全最简单理解迭代器

1. 迭代器的基础概念(iterator) 1.1 本质 迭代器能够用来遍历容器的对象,与能够遍历数组的指针类似,是广义指针。 1.2 作用: 能够让迭代器与算法不干扰的相互发展,最后又能无间隙的粘合起来。重载了*,++,==,!=,=运算符。用以操作复杂的数据结构。容器提供迭代…