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


相关文章
|
4天前
|
JSON JavaScript 前端开发
JavaScript实现字符串转json对象的方法
JavaScript实现字符串转json对象的方法
|
4天前
|
开发框架 前端开发 Java
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
【8月更文挑战第12天】SpringBootWeb极速入门-实现一个简单的web页面01
15 3
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
|
1天前
|
缓存 前端开发 JavaScript
高效开发现代 Web 应用:从前端到后端的最佳实践
在开发现代 Web 应用时,前端和后端技术的选择对项目的性能、可维护性和用户体验至关重要。本文将探讨如何通过现代工具和框架来优化前端和后端开发流程。我们将分析前端技术(如 React 和 Vue.js)与后端技术(如 Node.js 和 Django)的集成,并提供实际案例来展示如何实现高效开发。无论是对新手还是经验丰富的开发者,本指南都提供了宝贵的洞见和实用的技巧,以帮助提高开发效率并构建出色的 Web 应用。
|
1天前
|
缓存 编解码 前端开发
优化Web应用性能的前端技巧:从加载时间到用户体验
在现代Web开发中,提升前端性能不仅仅是为了缩短页面加载时间,更是为了提供更流畅的用户体验。本文将探讨几种有效的前端优化技术,包括懒加载、代码拆分、资源压缩以及浏览器缓存策略。通过具体实例和最佳实践,读者将能够掌握如何系统地提高Web应用的响应速度,减少资源消耗,并最终改善用户的整体体验。
|
2天前
|
SQL 存储 数据库
|
1天前
|
JSON JavaScript 前端开发
如何检查 JavaScript 对象是否为空
【8月更文挑战第18天】
12 0
如何检查 JavaScript 对象是否为空
|
4天前
|
JavaScript 前端开发
JavaScript BOM 的概念(浏览器对象模型)
JavaScript BOM 的概念(浏览器对象模型)
12 1
|
4天前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
|
3月前
|
JavaScript
js 字符串String转对象Object
该代码示例展示了如何将一个以逗号分隔的字符串(`&#39;1.2,2,3,4,5&#39;`)转换为对象数组。通过使用`split(&#39;,&#39;)`分割字符串并`map(parseFloat)`处理每个元素,将字符串转换成浮点数数组,最终得到一个对象数组,其类型为`object`。
245 2
|
3月前
|
存储 JavaScript
JS中Map对象与object的区别
JS中Map对象与object的区别

热门文章

最新文章