web前端-JavaScript中的对象(Object)

简介: 对象是什么?对象就是女朋友其实不然,对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性。在上一节我们说到JavaScript中有许多数据类型,有基本数据类型和引用数据类型,在这里我可以理解为只要不是基本数据类型,都属于对象。

文章目录

对象是什么?

对象的分类

内建对象

宿主对象

自定义对象

创建对象

操作对象中的属性

添加和修改属性

删除一个属性

查找对象属性值

属性名和属性值

属性名

属性值

判断对象中的属性是否存在(in运算符)

JavaScript中的数据类型的存储原理

对象是什么?

对象就是女朋友

其实不然,对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性。

在上一节我们说到JavaScript中有许多数据类型,有基本数据类型和引用数据类型,在这里我可以理解为只要不是基本数据类型,都属于对象。


对象的分类

内建对象

由ES标准中定义的对象,在任何的ES的实现中都可以使用。


宿主对象

由js的运行环境提供的对象,目前来讲主要指由浏览器提供的对象比如BOM,DOM


自定义对象

有开发人员自己创建的对象。


创建对象

使用new关键字调用的函数,是构造函数constructor,构造函数是专门用来创建对象的函数。

<script>
//创建一个对象
        var inf = new Object();
</script>
  • 直接创建
<script>
//创建一个对象
        var inf = {};
</script>

操作对象中的属性

添加和修改属性

语法:对象名.属性名=属性值

删除一个属性

语法:delete 对象名.属性名

查找对象属性值

语法:对象名.属性名

image.png

属性名和属性值

  • 对象的属性名不强制遵守标识符的规范
  • 无论什么名字都可取
  • 在取一些特殊的属性名,添加到对象中时不能使用.的方式来操作。而是对象['属性名'] = 属性值

image.png

使用[]这种形式去操作属性,更加的灵活,

[]中可以直接传递一个变量,这样变量值是多少就会读取那个属性。

image.png

属性值

JavaScript对象的属性值,可以是任意的数据类型。甚至也可以是一个对象。

image.png

判断对象中的属性是否存在(in运算符)

检查一个属性是否在一个对象中。

语法:'属性名' in 对象名

返回值为true/false 92d29de760f24788ab08c91334bada4a.png

JavaScript中的数据类型的存储原理

基本数据类型存储原理:js中的变量都是保存到栈内存中的,基本数据类型的值直接在栈内存中存储,值与值之间是独立存在,修改一个变量不会影响其他的变量

74cec6b357f34c338911e4f9e16e6806.gif

image.png

对象的存储原理:对象是保存到堆内存中的,每创建一个新的对象,就会在堆内存中开辟出一个新的空间,而变量保存的是对象的内存地址(对象的引用),如果两个变量保存的是同一个对象引用,当一个通过一个变量修改属性时,另一个也会受到影响。

  1. 变量保存的为对象的内存地址

815ba19fdf854d0dba4f25c21d2a1f54.gif

给对象添加属性,并将其赋值给另一个变量,另一个变量也是保存的是该对象的内存地址。

8f2da65d05c84a709dd1ab2e72ec6e8d.gif

用变量修改对象属性值,实际上无论用那个变量修改属性值,对象的属性值都改变了。

164a00b206384ede9b748f5400581118.gif

image.png


相关文章
|
1天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
1天前
|
JavaScript 前端开发 安全
怎样用Node.js搭建web服务器
本文探讨了如何使用Node.js构建高效的HTTP服务器。首先,介绍了HTTP常见请求方法,如GET、POST、PUT等。接着,展示了如何使用Node.js的`http`模块创建服务器,并根据请求方法进行不同处理,如判断GET和POST请求,以及获取GET请求参数和处理POST请求数据。最后,讨论了服务器代码的模块化管理,包括路由管理和业务逻辑拆分,以提升代码的维护性和扩展性。通过本文,读者可以掌握基础的Node.js服务器开发及模块化设计技巧。
|
2天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
11 0
|
2天前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
56 1
前端JS发起的请求能暂停吗?
|
4天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的高校疫情防控web系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的高校疫情防控web系统附带文章源码部署视频讲解等
7 0
|
4天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
10 2
|
4天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
15 3
|
5天前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
21 2
|
9天前
|
Java 编译器 数据处理
JavaSE——面相对象高级一(4/4)-继承相关的注意事项:权限修饰符、单继承、Object类、方法重写、子类访问成员的特点......
JavaSE——面相对象高级一(4/4)-继承相关的注意事项:权限修饰符、单继承、Object类、方法重写、子类访问成员的特点......
6 0
|
9天前
|
Web App开发 资源调度 JavaScript
【保姆级】前端使用node.js基础教程
【6月更文挑战第3天】Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境,用于服务器端编程。常用命令包括:安装 Node.js,通过 `node -v` 查看版本;使用 npm(Node 包管理器)进行初始化、安装/卸载包、查看版本和更新;运行 `.js` 脚本;使用 `node inspect` 调试;借助 nodemon 实现自动重启;通过 `npm list` 管理包;
5 0