05—js对象

一、初识对象

JavaScript是面向对象编程(Object Oriented Programming,OOP)语言。

面对象是一种复合值:它将很多值集合在一起,可通过名字访问这些值。对象也可看做一种无序的数据集合,由若干个“键值对”(key-value)构成。

对象是一个容器,封装了“属性”(property)和“方法”(method)。

属性,就是对象的状态,而方法,就是对象的行为。

比如:我们可以把一辆汽车抽象成一个对象,它的属性就是它的颜色、重量等,而方法就是它可以启动、停止等。

二、创建对象

1.json模式创建对象,使用对象字面量创建对象

//对象定义的规则:

//将左花括号与类名放在同一行。

//冒号与属性值间有个空格。

//字符串使用双引号,数字不需要引号。

//最后一个属性-值对后面不要添加逗号。

//注意:对象直接量中的最后一个属性后的逗号可有可无,但是在ie中,如果多了一个逗号,会报错

//将右花括号独立放在一行,并以分号作为结束符号

var  a={name: ”小米”,age: ”22”};

在ECMAScript 5中,保留字可以用做不带引号的属性名。

2.直接实例化方式

//使用new关键字实例化对象

//使用typeof检查一个对象时,会返回object

Var a=new Object(); 

3.Object.create()函数创建。

Var a=object.create(null);

(其它创建对象方式:工厂模式创建对象,原型模式创建对象,组合模式创建对象)

键名:

  1. 键名:对象的所有键名都是字符串,所以加不加引号都可以。如果键名是数值,会被自动转为字符串。
  2. 属性名可以是包含空字符串在内的任意字符串,但对象中不能存在两个同名的属性。
  3. 对象属性名不强制要求遵守标识符的规范,(obj.var=’hello’;)什么乱七八糟的名字都能用,但还是建议按规范做

函数也可以作为对象属性,如果一个函数作为对象的属性,我们可以说这个函数是这个对象的方法,调用函数可以说调用对象的方法

键值:

  1. 对象的每一个“键名”又称为“属性”(property),它的“键值”可以是任何数据类型。
  2. 对象的属性值,可以是任意数据类型,甚至可以是一个对象
  3. 如果一个属性的值为函数,通常把这个属性称为“方法”,它可以像函数那样调用。

如果键名不符合标识名的条件(比如第一个字符为数字,或者含有空格或运算符),也不是数字,则必须加上引号。否则会报错

三、对象属性的操作 

1.访问对象属性

在JavaScript中,我们可以通过点(.)或方括号([])运算符来获取属性的值。

语法:对象.属性名

// 1、访问对象属性  .  []
			console.log(obj.name)
			// 我们通过people2 里面的say方法调用了函数abc
			console.log(people2.say());		
			console.log(people2["sex"]);		
			console.log(obj[1]);
			console.log(obj);

注意:数值键名(特殊属性名)不能使用点运算符(因为会被当成小数点),只能使用方括号运算符。

JavaScript对象是动态的,可新增属性也可删除属性。但注意,我们是通过引用而非值来操作对象

2.对象添加属性

语法:对象.属性名=新增值;

3.对象属性修改

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

4.对象属性删除

语法:delete 对象.属性名;

		delete people2.name;
			console.log(people2);	// 4、对象属性的删除 delete 对象.属性名;
			delete people2.name;
			console.log(people2);

注意:delete运算符只能删除自有属性,不能删除继承属性。

删除一个不存在的属性,delete不报错,而且返回true。

只有一种情况,delete命令会返回false,那就是该属性存在,且不得删除。

5.检测属性是否是该对象的属性

在JavaScript中,有多种方法检测某个属性是否存在于某个对象中

1》In运算in运算符左侧是属性名(字符串),右侧是对象。如果对象的自有属性或继承属性中包含这个属性就返回true。

Var o={name:’张全旦’}
Console.log(‘name’in  o);  //true

2》hasOwnPreperty()方法

Console.log(o.hasOwnPreperty(‘name’));  //true

3》propertyIsEnumerable()方法

Console.log(o.propertyIsEnumerable(‘name’));  //true

 

6.查看所有属性

查看一个对象本身的所有属性,可以使用Object.keys方法,返回一个数组。

Console.log(Object.keys(o));  //[name]

四、内存问题

Js中的变量都是保存在栈内存中存储,值与值之间都是相互独立的修改某个变量不会影响到之前复制过他的变量;

Js中的对象是保存在堆内存中的,每创建一个新的对象就会在堆内存中开辟内存空间,而变量保存的是内存地址(对象的引用),当通过一个变量修改内部属性时,复制或者引用的变量也会被影响。

 

  • 深拷贝和浅拷贝:

浅拷贝:对于引用类型而言,之两个引用类型指向同一个地址,改变一个另一个也会随之改变

深拷贝:对于引用类型而言,复制后引用类型指向一个新的内存地址,两个对象改变相互不影响

五、遍历对象

  • for...in循环用来遍历一个对象的全部属性

Var o={
name:’王二狗’,
age:20,
 gender:’男’}
//for...in 遍历拿到的是对象的索引(键名)
for(var i in o){
Console.log(o[i]);
}

 

六、序列化对象

对象序列化是指将对象的状态转换为字符串,也可将字符串还原为对象

在JavaScript中,提供了内置函数JSON.stringify()和JSON.parse()用来序列化和还原JavaScript对象。
NaN、Infinity和-Infinity序列化的结果是null

注意:JSON.stringify()只能序列化对象可枚举的自有属性。对于一个不能序列化的属性来说,在序列化后的输出字符串中会将这个属性省略掉。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

iced 入门一

📕作者简介: 过去日记,致力于Java、GoLang,Rust等多种编程语言,热爱技术,喜欢游戏的博主。 📘相关专栏Rust初阶教程、go语言基础系列、spring教程等,大家有兴趣的可以看一看 📙Jav…

基于ssm的企业在线培训系统论文

摘 要 传统办法管理信息首先需要花费的时间比较多,其次数据出错率比较高,而且对错误的数据进行更改也比较困难,最后,检索数据费事费力。因此,在计算机上安装企业在线培训系统软件来发挥其高效地信息处理的作用&#x…

每日一题

腐烂的苹果_牛客题霸_牛客网 思路分析:广度优先遍历,找到所有腐烂的苹果同时向四方扩散,就是第一轮把所有腐烂的苹果加入队列中,这就跟MQ的消息队列的原理差不多,第一次记录队列的长度,广度遍历一次,长度--…

第一个STM32F767IGT6核心板

一. 制作原因 起先是因为参加计算机设计大赛准备的板子,其作用是连接OV5640摄像头来识别车牌号,主要外设有摄像头,SDRAM,网口等。 二. 原理图和PCB 原理图 PCB 三. 测试 1. 测试SDRAM功能 按下按键我们可以在串口中看到内存…

【基础IO】谈谈动静态库(怒肝7000字)

文章目录 前言实验代码样例静态库生成一个静态库归档工具ar静态库的链接 动态库创建动态库加载动态库 动静态链接静态链接动态链接动静态链接的优缺点 前言 在软件开发中,库(Library)是一种方式,可以将代码打包成可重用的格式&…

【C语言】内存函数-memcpy-memmove-memset...用法及实现,沉淀自己!

&#x1f525;博客主页&#x1f525;&#xff1a;【 坊钰_CSDN博客 】 欢迎各位点赞&#x1f44d;评论✍收藏⭐ 目录 1. memcpy函数使用和模拟实现 2. memmove使用和模拟实现 3. memset函数的使用 4. memcmp函数的使用 1. memcpy函数使用和模拟实现 <string.h>-------…

机器学习理论基础—神经网络算法公式学习

机器学习理论基础—神经网络公式学习 M-P神经元 M-P神经元&#xff08;一个用来模拟生物行为的数学模型&#xff09;&#xff1a;接收n个输入(通常是来自其他神经 元)&#xff0c;并给各个输入赋予权重计算加权和&#xff0c;然后和自身特有的阈值进行比较 (作减法&#xff0…

pytorch-MNIST测试实战

这里写目录标题 1. 为什么test2. 如何做test3. 什么时候做test4. 完整代码 1. 为什么test 如下图&#xff1a;上下两幅图中蓝色分别表示train的accuracy和loss&#xff0c;黄色表示test的accuracy和loss&#xff0c;如果单纯看train的accuracy和loss曲线就会认为模型已经train…

【优质书籍推荐】Vue.js+Node.js全栈开发实战

大家好&#xff0c;我是爱编程的喵喵。双985硕士毕业&#xff0c;现担任全栈工程师一职&#xff0c;热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。…

von Mises-Fisher Distribution (代码解析)

torch.distribution 中包含了很多概率分布的实现&#xff0c;本文首先通过均匀分布来说明 Distribution 的具体用法, 然后再解释 von Mises-Fisher 分布的实现, 其公式推导见 von Mises-Fisher Distribution. 1. torch.distribution.Distribution 以下是 Uniform 的源码: cl…

怎么使用JMeter进行性能测试?

一、简介 JMeter是Apache软件基金会下的一款开源的性能测试工具&#xff0c;完全由Java开发。它专注于对我们应用程序进行负载测试和性能测量&#xff0c;最初设计用于web应用程序&#xff0c;现在已经扩展到其他测试功能&#xff0c;比如&#xff1a;FTP、Database和LDAP等。…

Vue 3 项目构建与效率提升:vite-plugin-vue-setup-extend 插件应用指南

一、Vue3项目创建 前提是已安装Node.js&#xff08;点击跳转Node官网&#xff09; npm create vuelatest这一指令将会安装并执行 create-vue&#xff0c;它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示&#xff1a; ✔ Projec…

跟着Carl大佬学leetcode之977 有序数组的平方

来点强调&#xff0c;刷题是按照代码随想录的顺序进行的&#xff0c;链接如下https://www.programmercarl.com/本系列是记录一些刷题心得和学习过程&#xff0c;就看到题目自己先上手试试&#xff0c;然后看程序员Carl大佬的解释&#xff0c;自己再敲一遍修修补补&#xff0c;练…

electron打包dist为可执行程序后记【electron-quick-start】

文章目录 目录 文章目录 前言 一、直接看效果 二、实现步骤 1.准备dist文件夹 2.NVM管理node版本 3.准备electron容器并npm run start 4.封装成可执行程序 1.手动下载electron对应版本的zip文件&#xff0c;解决打包缓慢问题 2.安装packager 3.配置打包命令执行内容…

【点云语义分割】弱监督点云语义分割自适应标签分布

Adaptive Annotation Distribution for Weakly Supervised Point Cloud Semantic Segmentation 摘要&#xff1a; 弱监督点云语义分割因其能够减轻对点云细粒度注释的严重依赖而备受关注。然而&#xff0c;在实际应用中&#xff0c;稀疏注释通常在点云中呈现出明显的非均匀分布…

Table表格(关于个人介绍与图片)

展开行&#xff1a; <el-table :data"gainData" :border"gainParentBorder" style"width: 100%"><el-table-column type"expand"><template #default"props"><div m"4"><h3>工作经…

封装个js分页插件

// 分页插件类 class PaginationPlugin {constructor(fetchDataURL, options {}) {this.fetchDataURL fetchDataURL;this.options {containerId: options.containerId || paginationContainer,dataSizeAttr: options.dataSizeAttr || toatalsize, // 修改为实际API返回的数据…

Flutter 的 showDialog 和 showCupertinoDialog 有什么区别?

我将我的 App 里用的 Flutter 升级到了 3.19&#xff0c;没想到&#xff0c;以前我用 showDialog 和 AlertDialog 组合创建的二次确认框&#xff0c;变得无敌难看了&#xff0c;大幅度增加了整个框的圆角和里面默认按钮的圆角。不得已&#xff0c;我必须修改一下&#xff0c;以…

51.基于SpringBoot + Vue实现的前后端分离-校园志愿者管理系统(项目 + 论文)

项目介绍 本站是一个B/S模式系统&#xff0c;采用SpringBoot Vue框架&#xff0c;MYSQL数据库设计开发&#xff0c;充分保证系统的稳定性。系统具有界面清晰、操作简单&#xff0c;功能齐全的特点&#xff0c;使得基于SpringBoot Vue技术的校园志愿者管理系统设计与实现管理工…

偏微分方程算法之二维初边值问题(紧交替方向隐格式)

目录 一、研究对象 二、理论推导 2.1 二维紧差分格式 2.2 紧交替方向格式 2.2.1 紧Peaceman-Rachford格式 2.2.2 紧D’Yakonov格式 2.2.3 紧Douglas格式 三、算例实现 四、结论 一、研究对象 继续以二维抛物型方程初边值问题为研究对象: 为了确保连续性,公式…