细说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.mfbz.cn/a/323787.html

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

相关文章

基于Python+Django,我搭建一个视频点播平台

学习过程中,遇到问题可以咨询作者 功能介绍 平台采用B/S结构,后端采用主流的Python语言进行开发,前端采用主流的Vue.js进行开发。 整个平台包括前台和后台两个部分。 前台功能包括:首页、视频列表页面、视频详情页、用户中心模…

VMware workstation安装Fedora-Server-39-1.5虚拟机并配置网络

VMware workstation安装Fedora-Server-39-1.5虚拟机并配置网络 Fedora包含的软件以自由及开放源码许可来发布,并旨在成为该技术领域的领先者。Fedora在专注创新、抢先集成新技术、与上游Linux社区紧密工作方面拥有良好名声。该文档适用于在VMware workstation平台安…

一篇文章掌握负载均衡Ribbon作用和架构以及核心组件

目录 1、Ribbon是什么 2、Ribbon的作用 1.集中式LB 2.进程式LB 3、Ribbon负载均衡架构 总结: 4、Ribbon核心组件IRule 1、Ribbon是什么 Spring Cloud Ribbon是基于Netflix Ribbon实现的一套客户端负载均衡的工具。 简单的说,Ribbon是Netflix发布…

消失的水母-第15届蓝桥第三次STEMA测评Scratch真题精选

[导读]:超平老师的《Scratch蓝桥杯真题解析100讲》已经全部完成,后续会不定期解读蓝桥杯真题,这是Scratch蓝桥杯真题解析第165讲。 第15届蓝桥杯第3次STEMA测评已于2023年12月17日落下帷幕,编程题一共有6题,分别如下&…

【野火i.MX6NULL开发板】Linux系统下的Hello World

0、前言 参考资料: 《野火 Linux 基础与应用开发实战指南基于 i.MX6ULL 系列》PDF 第25章 本章比较抽象,涉及理论知识,不明白,可以看看视频讲解: https://www.bilibili.com/video/BV1JK4y1t7io?p29&vd_sourcef…

Day6 Qt

思维导图 1.数据库增删改查 头文件widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QSqlDatabase> //数据库管理类 #include <QSqlQuery> // 执行sql语句类 #include <QSqlRecord> //数据库记录类 #include <QSqlErro…

程序员的健康手册

大家好&#xff0c;我是 javapub。 马上迎来 2024 农历新年&#xff0c;这个是 COVID-19 后的第一个春节。用女朋友的话来说&#xff0c;这几年像在梦里一样&#xff0c;可能生活了几十年的人都想象不到会发生这样的事。不过不论世界怎么变&#xff0c;我们都要过生活、过好当…

leetcode 349 两个数组的集合

题目 给定两个数组 nums1 和 nums2 &#xff0c;返回 它们的交集 。输出结果中的每个元素一定是 唯一 的。我们可以 不考虑输出结果的顺序 。 示例 1&#xff1a; 输入&#xff1a;nums1 [1,2,2,1], nums2 [2,2] 输出&#xff1a;[2] 示例 2&#xff1a; 输入&#xff1a…

LeetCode 0082.删除排序链表中的重复元素 II:模拟

【LetMeFly】82.删除排序链表中的重复元素 II&#xff1a;模拟 力扣题目链接&#xff1a;https://leetcode.cn/problems/remove-duplicates-from-sorted-list-ii/ 给定一个已排序的链表的头 head &#xff0c; 删除原始链表中所有重复数字的节点&#xff0c;只留下不同的数字…

windows的换行符与linux风格的换行符不同的问题

问题展示&#xff1a; 说明&#xff1a; 出现这个错误的原因是脚本文件包含了windows风格换行符&#xff08;‘\r\n’&#xff09;&#xff0c;而在linux环境下&#xff0c;通常使用unix风格的换行符&#xff08;‘\n’&#xff09;.这个问题通常在windows环境下编辑脚本文件然…

leetcode 17 电话号码字母组合

题目 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 示例 1&#xff1a; 输入&#xff1a;digits “23” 输出&#xf…

模拟瑞幸的购物车

是根据渡一大师课来写的&#xff0c;如有什么地方存在问题&#xff0c;还请大家在评论区指出来。ど⁰̷̴͈꒨⁰̷̴͈う♡&#xff5e; index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http…

《产业结构调整指导目录(2024年本)》发布,模糊测试首次纳入

近日&#xff0c;第6次委务会议通过了新版的《产业结构调整指导目录&#xff08;2024年本&#xff09;》&#xff0c;该目录自2024年2月1日起正式实施。 与之前的版本相比&#xff0c;本次目录在行业设置上进行了全面升级&#xff0c;新增了“网络安全”这一重要行业大类&#…

数据管理-首选项

文章目录 1 概述2 什么是首选项3 首选项运作机制4 常用接口介绍常用接口使用前提保存数据&#xff08;put&#xff09;获取数据&#xff08;get&#xff09;是否包含指定的key&#xff08;has&#xff09;数据持久化&#xff08;flush&#xff09;删除数据&#xff08;delete&a…

spring cloud nacos注册与配置中心

简介 一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。 Nacos: Dynamic Naming and Configuration Service Nacos就是注册中心&#xff0b;配置中心的组合 -> Nacos EurekaConfigBus docker安装 https://nacos.io/zh-cn/docs/quick-start-docker.html…

手把手教你如何搭建Spring本地编译环境

大家好&#xff0c;我是极客涛&#xff0c;不知道小伙伴有没有和我一样的情况&#xff0c;在阅读Spring源码时&#xff0c;只通过静态的代码阅读很难有更深刻的理解&#xff0c;所以建议通过写测试类进行debug的方式&#xff0c;对核心的代码进行运行时的状态调试&#xff0c;这…

Python简介-Python入门到精通

Python的创始人为荷兰人吉多范罗苏姆&#xff08;Guido van Rossum&#xff09;。1989年圣诞节期间&#xff0c;在阿姆斯特丹&#xff0c;Guido为了打发圣诞节的无趣&#xff0c;决心开发一个新的脚本解释程序&#xff0c;作为ABC语言的一种继承。之所以选中Python&#xff08;…

深入浅出Pytorch宝典1.0

文章目录 前言1. 张量操作2. 自动微分3. 数据加载和处理4. 模型构建和训练5. 预训练模型和迁移学习6. 调试和性能7. 高级特性总结 torch中主要的数据对象主要特点和功能张量的创建 数据处理和转换1.torch.tensor() 创建一个新的张量&#xff08;Tensor&#xff09;2.torch.zero…

数据结构学习 jz39 数组中出现次数超过一半的数字

关键词&#xff1a;排序 摩尔投票法 摩尔投票法没学过所以没有想到&#xff0c;其他的都自己想。 题目&#xff1a;库存管理 II 方法一&#xff1a; 思路&#xff1a; 排序然后取中间值。因为超过一半所以必定在中间值是我们要的结果。 复杂度计算&#xff1a; 时间复杂度…

【docker笔记】DockerFile

DockerFile Docker镜像结构的分层 镜像不是一个单一的文件&#xff0c;而是有多层构成。 容器其实是在镜像的最上面加了一层读写层&#xff0c;在运行容器里做的任何文件改动&#xff0c;都会写到这个读写层。 如果删除了容器&#xff0c;也就是删除了其最上面的读写层&…
最新文章