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


相关文章
|
3月前
|
前端开发 JavaScript 开发者
JavaScript:无处不在的Web语言
JavaScript:无处不在的Web语言
|
3月前
|
前端开发 JavaScript 开发者
JavaScript:构建动态Web的核心力量
JavaScript:构建动态Web的核心力量
|
3月前
|
JavaScript 前端开发 开发者
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
7月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
3月前
|
JavaScript 前端开发 物联网
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
8月前
|
JavaScript 前端开发 API
|
6月前
|
JSON JavaScript 前端开发
JavaScript入门干货:蓝桥杯Web组分章学习笔记(基于蓝桥云课《JavaScript基础入门》)
这是一份详尽的JavaScript学习笔记,涵盖基础到进阶内容。包括变量、运算符、数组、字符串操作,DOM/BOM事件处理,内置对象(如Array、Date、Math)用法,JSON格式解析,以及函数作用域与闭包等核心概念。同时深入探讨值类型和引用类型的差异、异常处理机制,并介绍函数高级特性如call/apply/bind方法、递归及arguments对象。代码按章节分点整理,注释细致,适合初学者系统掌握JavaScript编程知识。
123 2
|
8月前
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
258 23
|
9月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
8099 23
|
10月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
297 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布