细说JavaScript对象(JavaScript对象详解)

在JavaScript中对象作为数据类型之一,它的数据结构区别于其余5中数据类型,从数据结构角度看对象就是数据值的几个,其书就结构就是若干组名值对,类似于其他语言中的哈希、散列
关联数组等,但对象在JavaScript中不仅仅扮演着数据类型的角色,同时也是JavaScript语言的实现基础,可通过内置对象实现各种操作,因此JavaScript也比叫做基于对象的编程语言
细说JavaScript对象(JavaScript对象详解)

一、理解对象

1、什么是对象

对象除了是一种数据结构它在js中还有另外一个功能,就是编程设计的一种模式,就是用对象的数据结构实现了js语言设计,例如window是一个对象,alert作为window对象的一个属性存在,其实window对象包含js中的所有方法,因为window对象是浏览器的一个全局对象,js所有开发的编码都是在这个全局对象下完成的,或者说是挂载在这个window对象下的。

2、对象有什么用

对象这种特殊的数据结构能够弥补其他数据结构存储信息不足的问题,我们可以使用对象存储大量的数据,或者一组相关联的数据
除了存储数据的功能对象的功能还包括网上的数据传输,例如JSON(JavaScript Object Notation)是js的一个子集
JSON数据结构与对象保持一致,对象的字面量表示就相当于一个JSON数据,这种数据传输起来更轻便

{"name":"知数SEO","sex":"女","age":8}
3、如何使用对象

在开发中我们经常将具有一个特定功能的代码段写成一个对象,比如

var calculator = {add:function(num1,num2){return num1 + num2;}sub:function(num1,num2){return num1 - num2;}mul:function(num1,num2){return num1 * num2;}div:function(num1,num2){return num1 / num2;}
}

二、创建对象

1、字面量创建
// 	字面量创建对象的方式是最简单的一种方式,语法:
{属性名1:属性值2,属性名2:属性值2,...属性名n:属性值n}// 对象字面量以大括号{}定界,其中存储了若干组数据信息,每组数据信息之间以逗号分隔,同时每组数据信息内部以冒号分隔,两端分别是属性名和属性值,属性名有两种形式
// 标准格式
{"name":"zhishunet","sex":"女"}// 简写格式
{name:"zhishunet",sex:"女"}
2、构造函数创建
// 使用构造函数创建对象 语法就是使用关键字new来创建一个对象,语法:
new Object();// 添加属性的语法
对象名.属性名 = 属性值;
// 或者
对象名[属性名] = 属性值;// 例子
var person = new Object();
person.name = "知数SEO";
person.sex = "女";
person['age'] = 8;
person['demo'] = function(){alert("你好");
}// 注意:当函数出现在对象中时,我们更希望称其为方法。
3、工厂模式
// 工厂模式就是改造后的构造函数,这种改造一定是由于构造函数不能满足开发者的部分需求导致的,构造函数创建出的对象不具备约束性和规范性,会出现大量的重复代码,工厂模式具体的实现方式就是利用函数的特性封装了具备特性规范的函数var createPerson = function(name,sex,age){var person = new Object;person.name = name;person.sex = sex;person.age = age;return person; //返回这个对象
}// 工厂模式下创建对象虽然具有统一性,但却没有解决对象识别的问题,就是如何判断多个对象出自一个函数
4、自定义构造函数
function Person(name,sex,age){this.name = name;this.sex = sex;this,age = age;
}var Person1 = new Person("知数SEO","女",8);
var Person2 = new Person("zhishunet","男",10)// 与工厂模式相比区别
// 1、将createPerson改为Person
// 2、没有显式的创建一个对象
// 3、将所有属性赋值给this对象
// 4、没有使用return返回指定对象// 自定义构造函数很好的解决了是否出自同一个构造函数的问题,我们可以使用instanceof来进行测试
console.log(person1 instanceof Person); // true
console.log(person2 instanceof Person); // true

三、对象属性

对象中存储数据信息的方式就是属性和值的格式,涉及到对象属性的增加、删除、修改、查询

1、属性的添加
var Person = new Object();
person.sex = "女"; // 小数点模式
person['age'] = 8; // 中括号模式
2、属性的删除
// 使用delete运算符,用来删除对象的属性
var obj = {"name":"知数SEO"};
delete obj.name;
alert(obj.name); // undefined
3、属性的查询
// 用运算符in
var obj = {"name":"知数SEO"};
console.log('name' in obj);
4、属性的遍历
// 遍历就是将对象的属性进行循环展示,语法格式:
for(变量 in 对象){语句;
}var company = {name:"知数网络";age:10;words:"专注企业品牌推广营销";
};for(var attr in company){console.log(attr);
}

四、对象的存储

1、存储机制

变量是存储在内存中的,给变量赋值为不同的数据类型则均是在内存中的操作,在js中基本的数据类型在栈内存中引用的数据类型存放在堆内存中,存放在栈内存中的变量是大小固定的,这些基本的数据类型都是定长的,分配的内存空间也是一定的。而在堆内存中存放的变量并非定长的,它的值可以动态增加和删除,存储的空间也可以根据数据的大小进行缩小或扩展
注意:
对某个字母或文字进行修改时,实际上生成了新的字符串,并对原变量的值进行了覆盖
而对象中针对某个属性进行增加或修改时,其实是在原来对象上的一次修改

2、垃圾回收机制

对于js内存占满会导致浏览器崩溃,所以浏览器自带了垃圾回收机制,它能够对不再使用的变量进行清理和回收,具体是如何运行的呢?
垃圾回收机制最常用的方式就是标记清楚,其中标记清楚模式是指当变量进入环境时,对其做一个开始标记,而环境指的是全局作用域和局部作用域,在全局作用域中的变量是在全局有效的,而在局部作用域中的变量尽在局部作用域中生效,意思就是当变量在局部作用域中使用完成时或作一个结束标记,垃圾回收机制会自动对其占用的内存空间进行清理
除标记清里外还包括其他的回收模式,比如根据变量多少、变量所占的内存空间等规则进行垃圾回收、清理内存

3、内存优化

引用数据类型之所以称为引用数据类型是因为在变量中存储的值是一个指针(或称为内存地址)(定长),它指向的是堆内存中存储的对象

五、ES6对象新特性

1、属性的简洁表示法
// ES6允许直接写变量和函数,作为对象的属性和方法
var foo = 'bar';
var baz = {foo};
baz;  // {foo:"bar"}// 等同于
var baz = {foo:"bar"};// 除了属性简写,方法也可以简写
// ES5写法
var o = {method:function(x){return x;}
}
//ES6写法
var 0 = {methed(x){retrun x;}
}
2、属性名的表达式
// js语言定义对象的属性有两种方法
// 方法一 直接用标识符作属性名
obj.foo = true;// 方法二 用表达式作属性名
obj['a' + 'bc'] = 123;// ES6允许使用字面量定义对象时用表达式作为对象的属性名,即把表达式放在方括号内
let key = "foo";
let obj = {[key] = true,['a' + 'bc'] = 123
}
// 例子
let key = 'zhishunet';
var obj = {"zhishuseo":"知数SEO",[key] = '知数',
}console.log(a['zhishuseo']);
console.log(a[key]);
console.log(a['zhishunet']);// 注意
// 属性名的表达式与属性的简洁表示法不能同时使用,属性名的表达式如果是一个对象,则默认情况下会自动将对象转换为字符串[Object Object]

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

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

相关文章

如何通过pytest+requests+allure自动化测试接入Jenkins?测开必备

最近在这整理知识,发现在pytest的知识文档缺少系统性,这里整理一下,方便后续回忆。 在python中,大家比较熟悉的两个框架是unittest和pytest: Unittest是Python标准库中自带的单元测试框架,Unittest有时候也…

2024腾讯云服务器购买指南一步步全流程攻略(超详细)

腾讯云服务器购买流程很简单,有两种购买方式,直接在官方活动上购买比较划算,在云服务器CVM或轻量应用服务器页面自定义购买价格比较贵,但是自定义购买云服务器CPU内存带宽配置选择范围广,活动上购买只能选择固定的活动…

基于SPI的插件式开发实现方案之@AutoService+ServiceLoader介绍及Dolphinscheduler中的实际应用

1.插件化开发概述 插件化开发模式正在很多编程语言或技术框架中得以广泛的应用实践,比如大家熟悉的jenkins,docker可视化管理平台rancher,以及日常编码使用的编辑器idea,vscode等。 实现服务模块之间解耦的方式有很多&#xff0…

22.实战演练--记住密码和登录状态

在登录注册案例的基础上,实现一个相对完整的登录注册模块 (1).记住密码 (2).记住登录状态(自动登录) (3).注册成功,登录成功,退出登录时的页面跳转

雍禾医疗好医生:雍禾植发张华医生立志服务好毛发患者

作为中国领先的专门从事毛发医疗服务的医疗集团,雍禾医疗提供诊疗、植发、养固等一站式毛发医疗服务,旗下拥有由专业植发品牌“雍禾植发”、医疗养固品牌“史云逊”、女性美学植发品牌“雍禾发之初”及医学假发品牌“哈发达”等组成的全产业链品牌矩阵。…

MySQL 协议(非常详细适合小白学习)

MySQL 查询过程 MySQL 查询过程大致如下: 1)客户端与服务器端建立连接; 2)客户端登陆 MySQL; 3)客户端向服务器端发起一条请求; 4)服务器端先检查查询缓存,如果命中缓…

哈希(hash)

目录 一、什么是哈希 二、哈希冲突 三、哈希函数 3.1、哈希函数设计原则 3.2、常见的哈希函数 四、哈希冲突解决 4.1、闭散列 4.2、开散列 五、哈希表的模拟实现 5.1、哈希表的功能模拟实现 5.2、测试模拟实现: 一、什么是哈希 如果构造一种存储结构&…

实例分割模型Mask2Former解析

Masked2Former是在mask rcnn基础上改进的一个实例分割模型,参考了一些经典模型的思想,如DETR,实验表明效果很好。 论文:《Masked-attention Mask Transformer for Universal Image Segmentation》 https://arxiv.org/abs/2112.0…

新手必看:腾讯云服务器购买详细图文教程

腾讯云服务器购买流程很简单,有两种购买方式,直接在官方活动上购买比较划算,在云服务器CVM或轻量应用服务器页面自定义购买价格比较贵,但是自定义购买云服务器CPU内存带宽配置选择范围广,活动上购买只能选择固定的活动…

【极光系列】Windows安装Mysql8.0版本

【极光系列】Windows安装Mysql8.0版本 一.mysql服务端 下载地址:https://dev.mysql.com/downloads/mysql/ 二.解压二进制包 解压到 E:\mysql-8.0.35-winx64目录下,记住你解压后的目录,后续要使用三.创建my.ini文件 tips:mys…

nvcc -V显示command not found

出现这个问题,不仅是 nvcc -V会显示command not found,nvidia-smi同样也会显示 解决方法如下: 1)这里首先转换到CUDA所在位置,一般是在这个位置 cd /usr/local 2)打开、编辑环境变量的配置文件 vim ~/.bashrc …

使用HTTP/2在Linux上的Nginx服务器进行优化

随着互联网的发展,HTTP/2协议逐渐成为主流。与传统的HTTP/1.1相比,HTTP/2提供了更高的传输效率和更好的安全性。在Linux上使用Nginx服务器进行优化,我们可以充分利用HTTP/2的优势,提高网站的性能和用户体验。 1. 安装Nginx并启用…

日志采集传输框架之 Flume,将监听端口数据发送至Kafka

1、简介 Flume 是 Cloudera 提供的一个高可用的,高可靠的,分布式的海量日志采集、聚合和传 输的系统。Flume 基于流式架构,主要有以下几个部分组成。 主要组件介绍: 1)、Flume Agent 是一个 JVM 进程&#xf…

【JupyterLab】在 conda 虚拟环境中 JupyterLab 的安装与使用

【JupyterLab】在 conda 虚拟环境中 JupyterLab 的安装与使用 1 JupyterLab 介绍2 安装2.1 Jupyter Kernel 与 conda 虚拟环境 3 使用3.1 安装中文语言包(Optional)3.2 启动3.3 常用快捷键3.3.1 命令模式下 3.4 远程访问个人计算机3.4.1 局域网下 1 JupyterLab 介绍 官方文档: …

15.鸿蒙HarmonyOS App(JAVA)进度条与圆形进度条

15.鸿蒙HarmonyOS App(JAVA)进度条与圆形进度条 progressBar2.setIndeterminate(true);//设置无限模式,运行查看动态效果 //创建并设置无限模式元素 ShapeElement element new ShapeElement(); element.setBounds(0,0,50,50); element.setRgbColor(new RgbColor(255,0,0)); …

Nginx——强化基础配置

1、牢记Context Context是Nginx中每条指令都会附带的信息,用来说明指令在哪个指令块中使用,可以将Context 理解为配置环境。 每个指令都拥有自己的配置环境,如果把配置环境记错了,或者在设计时未考虑配置环境的作用,…

【闯关练习】—— 1400分(构造)

🌏博客主页:PH_modest的博客主页 🚩当前专栏:cf闯关练习 💌其他专栏: 🔴每日一题 🟡 C跬步积累 🟢 C语言跬步积累 🌈座右铭:广积粮,缓…

STM32F103标准外设库——寄存器 (二)

个人名片: 🦁作者简介:一名喜欢分享和记录学习的在校大学生 🐯个人主页:妄北y 🐧个人QQ:2061314755 🐻个人邮箱:2061314755qq.com 🦉个人WeChat:V…

LeetCode刷题---逆波兰表达式求值

解题思路: 使用栈来解决该问题 首先定义一个栈Stack,接着对tokens数组进行遍历,如果当前元素是非数字字符串的话(运算符),就从栈中取出两个元素根据该运算符进行计算,将计算后的结果添加到栈中。如果当前元素是数字字符…

基于Spring Boot+vue的云上新鲜水果超市商城系统

本云上水果超市是为了提高用户查阅信息的效率和管理人员管理信息的工作效率,可以快速存储大量数据,还有信息检索功能,这大大的满足了用户、员工信息和管理员这三者的需求。操作简单易懂,合理分析各个模块的功能,尽可能…