JavaScript 入门基础 - 对象(五)

2023-11-09

JavaScript 入门基础 - 对象



1. 对象

1.1 对象的基本理解

我们生活中的每一个事物都是一个对象,比如一片树叶、一只狗、一个人等等都可以是对象,在JavaScript当中,对象则指的是一组无序的相关属性和方法的集合,有字符串、数值、函数等等…总的来讲对象由属性和方法构成:

  • 属性:是指事物的基本特征,常用名词来表示,比如:name、age等等…
  • 方法:是指事物的行为活动,常用动词表示。

1.2 为什么需要变量

有时候我们需要保存一系列人的信息时,变量和数组不好表达,我们就要用到对象,js中对象的表达结构更加清晰,每一条信息都会详细说明是什么,有什么内容:

// name: '郑三',
// gender: '男',
// age: 35;

2. 创建对象的方式

在JavaScript中,现阶段我们创建对象的方式有三种:

  • 利用 字面量 创建
  • 利用 new Object 创建
  • 利用 构造函数 创建

2.1 利用字面量创建对象

对象字面量:就是 {} 里面包含了这个对象的所有属性和方法:

var person = {
	name: '郑三',
	age: 36,
	gender: '男',
	sayHi: function() {
		console.log('你好');
	}
}

console.log(person.name);
console.log(person['age']);
person.sayHi();
  1. 括号中的属性和方法我们采用键值对的形式 键 (属性名) :值 (属性值)。
  2. 多个属性或方法中间用逗号隔开。
  3. 方法冒号后面为匿名函数。
  4. 调用对象的属性 我们采取 对象.属性名 ,还有另一种方法就是 对象名[‘属性名’]
  5. 调用对象的方法我们采取 对象名.方法名()

注意:在调用对象的方法时千万别忘记加小括号。

2.2 变量属性函数方法的区别

  • 变量:是单独声明赋值,单独存在的。
  • 属性:在对象中的变量叫属性,不需要进行声明,描述该对象的特征。
  • 函数:通过 “函数名()” 进行调用,也是单独存在的。
  • 方法:对象中的函数叫做方法,方法也不需要声明,使用 “对象.方法名()” 方式调用,方法用来描述对象的行为功能。

2.3 利用 new Object 创建对象

var person = new Object();
person.name = '郑三';
person.age = 36;
person.gender = '男';
person.sayHi = function() {
	console.log('你好');
}
  1. 利用 等号= 赋值的方法添加对象的属性和方法
  2. 每个属性和方法之间用分号结束

2.4 利用构造函数创建对象

前面两种方法一次只能创建一个对象,我们可以利用函数的方法,重复这些相同的代码,我们把这个函数称为构造函数,构造函数就是把我们对象中相同的属性和方法抽象出来封装到函数里面,具体使用方法如下:

// function 构造函数名() {
//	 this.属性 = 值;
//	 this.方法 = function() {}
// }
// new 构造函数名();
function Person(name, age, gender) {
	this.name = name;
	this.age = age;
	this.gender = gender;
}
var zs = new Person('郑三', 36, '男'); // 返回结果是一个对象
console.log(zs.name);
console.log(zs['gender']);
  1. 构造函数名字首字母要大写
  2. 构造函数不需要使用return就可以返回结果
  3. 调用构造函数必须使用 new
  4. 用new Person() 调用函数就创建一个对象
  5. 属性和方法前面必须添加 this

注意:构造函数是抽象了对象的公共部分,并封装到函数里,而对象特指一个,通过 new 关键字创建对象的过程我们称为对象实例化

3.new关键字

new关键字的执行过程:

  1. 在内存中创建一个新的空对象
  2. 让this指向这个空对象
  3. 执行构造函数里面的代码,给这个新对象添加属性和方法
  4. 返回这个新对象(不需要return)

4. 遍历对象属性

利用for in 遍历我们的对象:

var person = {
	name: '郑三',
	age: 36,
	gender: '男',
}

for (var k in person) {
	console.log(k);	// 输出变量k得到的是属性名
	console.log(person[k]);	// person[k] 得到的是属性值
}

5. JavaScript 内置对象

5.1 内置对象基本理解

js中有三种对象,分别为自定义对象、内置对象、浏览器对象,前两种为js基础,属于ECMAScript,第三种为浏览器独有,内置对象就是指JS语言自带的一些对象,提供了一些必要的属性和方法,方便了我们的开发。学习内置对象的使用,我们可以通过MDN / W3C查询文档

MDN:http://developer.mozilla.org/zh-CN/

学习对象方法:

  1. 先查阅该方法的功能
  2. 查看里面参数的意义和类型
  3. 查看返回值的意义和类型
  4. 通过demo进行测试

5.2 Math 对象

Math对象具有数学常数和函数的属性和方法,跟数学运算有关的可以使用Math中的成员,比如绝对值、最大值、取整等…

// 绝对值
console.log(Math.abs(-34));
console.log(Math.abs('-34'));	// 隐式转换,把字符串型转换为数字型
// 取整
// 1 Math.floor() 向下取整 往小取
console.log(Math.floor(4.2)); // 4
console.log(Math.floor(4.9)); // 4
// 2 Math.ceil() 向上取整 往大取
console.log(Math.ceil(4.2)); // 5
// 3 Math.round() 四舍五入
console.log(Math.round(4.2));	// 4
console.log(Math.round(-1.5));	// -1

更多方法可以查阅文档进行学习

5.3 Date 对象

Date对象是一个构造函数,必须使用new来调用我们创建的日期对象

// 1.使用Date 如果没有参数,则返回系统当前的时间
var time = new Date();
console.log(time);
// 2.参数一般写成数字型或者字符串型
var time1 = new Date(2023, 12, 4); 
console.log(time1);	// 返回的是2月4号
var time2 = new Date('2023-1-4 10:08:23');
console.log(time2);

5.4 数组对象

5.4.1 数组对象的创建

数组对象可以通过字面量或者 new Array() 进行创建

// 1.利用字面量创建数组
var arr = [3, 5, 6];
console.log(arr[1]);

// 2.利用new Array()
var arr1 = new Array();	// 创建了一个空的数组
var arr2 = new Array(2);	// 创建一个长度为2的数组
var arr3 = new Array(2, 3); // 两个数组元素 2 和 3
5.4.2 检测是否为数组的方法

1 利用 instanceof 运算符,它可以检测是否为数组

var arr = [1, 6, 7];
console.log(arr instanceof Array);	// true

2 利用 Array.isArray(参数);

var arr = [1, 6, 7];
console.log(Array.isArray(arr));
5.4.3 添加删除数组元素的方法

在这里插入图片描述
添加元素

  • push 是可以给数组追加新的元素,参数直接写数组元素。
  • push完毕之后,返回结果是新数组的长度,原数组会发生变化。
  • unshift可以给数组前面追加新的元素参数直接写数组元素。
  • unshift完毕之后,返回结果是新数组的长度,原数组会发生变化。。

删除元素

  • pop()可以删除数组的最后一个元素,且只能删除一个元素,参数直接写数组元素
  • pop完毕之后,返回结果是 删除的那个元素,原数组发生变化
5.4.4 数组排序

(1) 翻转数组
使用 reverse() 可以对数组进行翻转:

var person = ['tom', 'mike', 'mary'];
person.reverse();
console.log(person);	// 结果为['mary', 'mike', 'tom']

(2) 冒泡排序
sort() 方法用原地算法对数组进行排序,并且返回数组:

var arr = [1, 4, 3, 7];
arr.sort();
console.log(arr);

注意 sort() 方法单用只对部分数有效,比如个位数,但出现两位及以上很难实现排序,我们可以在sort中加入一个函数实现排序:

var arr = [14, 414, 334, 74];
arr.sort(function(a, b) {
	// return a - b; // 升序排列
	return b - a;	// 降序排列
});
console.log(arr);
5.4.5 数组转换为字符串

要实现数组转换为字符串我们可以使用两个方法:

  1. toString() 实现数组转换为字符串
var arr = [4, 5, 8, 9];
console.log(arr.toString());	// 4,5,8,9
  1. 还可以利用 join(‘分隔符’) 的方法,如果括号内什么都不写默认用逗号分隔
var colorArr = ['pink', 'bule', 'yellow'];
console.log(colorArr.join());	// pink,bule,yellow
console.log(colorArr.join('-'));	// pink-bule-yellow
5.4.6 其余重要方法

在这里插入图片描述
数组方法很多,建议大家查阅文档进行学习。

5.5 字符串对象

5.5.1 基本包装类型

对象、复杂数据类型才有属性和方法,要让简单数据类型拥有属性方法,就可以把简单数据类型包装成复杂数据类型:

var str = 'tom'; // 这是个简单数据类型
console.log(str.length);	// 简单数据类型拥有length属性是进行了包装

// 上述两行代码的内部操作
// var temp = new String('andy');	第一步,把简单数据类型包装为复杂数据类型
// str = temp;	第二步,把临时变量值给 str
// temp = null;	最后,销毁临时变量
5.5.2 根据字符返回位置

字符串本身不会因为方法而改变,方法等操作完成会返回一个新的字符串,查找字符位置用到两个常用方法:

方法名 解释
indexOf(‘查找的字符’,起始位置) 返回查找字符在字符串中的位置,如没有找到返回-1,起始位置可选
lastIndexOf() 从后往前查找,找第一个匹配的字符
var str = '我亦无他,唯手熟尔。有心栽花花不开,无心插柳柳成荫';
console.log(str.indexOf('无'));	// 2
console.log(str.indexOf('无', 3));	// 指定从索引号为 3 的位置向后查找,结果为 18

案例:统计a在字符串中出现的位置以及次数

var str = 'asdgbnhaasgtasa';
var index = str.indexOf('a');
var num = 0;	// 初始次数为零
while (index !== -1) {	// 判断是否找到a
	console.log(index);
	index = str.indexOf('a', index + 1);	// 实现索引加一操作,继续向下查找
}
console.log('a出现的次数为' + num);
5.5.3 根据位置返回字符

根据索引位置也可以返回字符,主要有以下方法:

方法 解释
charAt(索引号) 根据所提供的索引号返回字符
charCodeAt(索引号) 返回相应索引号字符的ASCII码值
str[索引号] H5新增,通过索引号返回字符
var str = 'result';
console.log(str.charAt(2));	// s
console.log(str.charCodeAt(2));	// 返回相应索引号字符的ASCII码值,结果为115
console.log(str[1]);	// e
5.5.4 字符串操作方法
方法名 解释说明
concat(str1,str2,…) 将多个字符串进行拼接,作用相当于+
substr(‘‘要截取的起始位置’’,“截取的字符长度”) 从起始位置(索引号)开始截取指定的字符串长度(length)
slice(开始位置,结束位置) 从开始位置取到结束位置前一个,结束位置不取(都为索引号)
replace(‘被替换的字符’,‘新字符’) 将新字符替换掉被替换的字符,这种方法只会替换一个符合条件的字符
split(‘分隔符’) 将字符转换为数组
var str = 'come';
var str1 = '三人行,必有我师焉';
var str2 = 'came';
var colorStr = 'pink, black, blue';
console.log(str.concat(' ', 'on'));	
console.log(str1.substr(4, 4));
console.log(str1.slice(0, 8));
console.log(str2.replace('a', 'o'));
console.log(colorStr.split(','));

执行结果如下:
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript 入门基础 - 对象(五) 的相关文章

  • 单击输入[复选框]的标签将触发父级单击事件两次(淘汰)

    考虑这把小提琴 http jsfiddle net 9rkrahm6 我有一个
  • 从 thymeleaf 获取数据到模态引导程序、jquery

    我正在尝试获取模态视图的 id 这是为了更新 onclick 元素 但我找不到方法 知道如何为 boostrap 5 完成此操作 或我可以用其他方法吗 谢谢 tr a inactivate a div class modal fade mo
  • dojo dijit.form.DateTextBox 约束不起作用,datetextbox

    嗨 我是 javascript 和 dojo 的新手 我正在尝试使用两个带有下拉日历的 dijit DateTextBox 来建立数据库查询的日期范围 一旦选择了开始日期或结束日期 我想限制可用的日期 以便不可能选择按时间顺序排列在开始日期
  • 将 OoXml 插入单词抛出错误:未知

    我一直在尝试通过office js将OOXML插入到word文档的正文内容中insertOoXML 方法 我什至尝试过最简单的实现 认为我在尝试替换 XML 本身中的 fieldCodes 时做了一些不正确的事情 所有结果都是这样Error
  • 解析“流”JSON

    我在浏览器中有一个网格 我想通过 JSON 将数据行发送到网格 但浏览器应该在接收到 JSON 时不断解析它 并在解析时将行添加到网格中 换句话说 在接收到整个 JSON 对象后 不应将行全部添加到网格中 应该在接收到行时将其添加到网格中
  • 检查 JavaScript 字符串是否为 URL

    JavaScript 有没有办法检查字符串是否是 URL 正则表达式被排除在外 因为 URL 很可能是这样写的stackoverflow 也就是说它可能没有 com www or http 如果你想检查一个字符串是否是有效的 HTTP UR
  • 使用 Angular 下载具有动态 src 的脚本

    Angular 提供了通过动态名称动态加载模板的方法ng include 该部分中的内联 JS 和 CSS 可以正常加载 但没有一个好的方法来下载带有动态 url 的脚本 我们需要下载脚本 相对于调用它们的 html 部分的路径 即我们有一
  • 在 Wordpress 站点中进行 AJAX 调用时出现问题

    我在使用 Wordpress 站点功能的 AJAX 部分时遇到了一些问题 该功能接受在表单上输入的邮政编码 使用 PHP 函数来查找邮政编码是否引用特定位置并返回到该位置的永久链接 我的第一个问题是关于我构建的表单 现在我的表单操作是空白的
  • Google App Engine:修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy
  • 可以使用 jQuery 或 Javascript 将图片的特定部分用作链接吗?

    我有这个想法 将图片 而不是文本 的各个部分链接到不同的页面或网站 并且我想在不实际创建不同的照片并将它们彼此靠近的情况下完成 这样看起来就像是一张完整的图片 这里有人知道如何使用 JavaScript 的变体 例如 jQuery 或纯 J
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的
  • Javascript 数组到 VBScript

    我有一个使用 Javascript 构建的对象数组 我需要使用 VBScript 读取它 如下例所示 我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化 我无法更改页面的默认语言 这
  • 为什么在 Internet Explorer 中访问 localStorage 对象会引发错误?

    我正在解决一个客户端问题 Modernizr 意外地没有检测到对localStorageInternet Explorer 9 中的对象 我的页面正确使用 HTML 5 文档类型 并且开发人员工具报告该页面具有 IE9 的浏览器模式和 IE
  • 如何在类似控制台的环境中运行 JavaScript?

    我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时
  • 有没有办法阻止 prettier / prettier-now 将函数参数分解为新行

    当使用 prettier prettier now 在保存时进行格式化时 当一个函数包装另一个函数时 它会中断到一个新行 我想知道是否有办法阻止这种行为 例如 期望的输出 app get campgrounds id catchAsync
  • 在 vue.js 中访问数组对象属性

    给定以下数组vue js packageMaps Object packageMap 0 Object Id 16 PackageType flag list ProductCode F BannerBase packageMap 1 Ob
  • 为什么 jquery 没有检测到单选按钮未被选中的情况? [复制]

    这个问题在这里已经有答案了 可能的重复 JQuery radioButton change 在取消选择期间不会触发 https stackoverflow com questions 5176803 jquery radiobutton c
  • 使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

    我想做的事 我想使用 jquery 自动完成函数创建一个输入文本字段 该函数从跨域curl 请求获取源数据 结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a
  • 如何从图像输入中获取 xy 坐标?

    我有一个输入设置为图像类型

随机推荐

  • 论文简读 LORA: LOW-RANK ADAPTATION OF LARGE LANGUAGE MODELS

    论文地址 https arxiv org pdf 2106 09685 pdf 项目地址 https github com microsoft LoRA 全文翻译地址 https zhuanlan zhihu com p 611557340
  • kyrieboot管理系统开发记录------前端相关

    一直想要自己动手写一个管理系统 在这之前只是搭建了简单的项目框架和一部分简单功能 但是由于工作等种种原因一直没能完善功能 趁着今年五一假期 补上一些目前想到的功能 后续会补上一些快捷开发的功能 比如代码生成器等 但由于五一后要进入封闭开发
  • 10个算法从业人员必须知道的TensorFlow技巧

    作者 Rohan Jagtap 编译 ronghuaiyang 导读 掌握这些可以更高效的模型的提高开发效率 TensorFlow 2 x在构建模型和TensorFlow的整体使用方面提供了很多简单性 那么TF2有什么新变化呢 使用Kera
  • STL(标准模板库)的使用

    1 STL初识 1 1 STL的诞生 C 的面向对象和泛型编程思想 目的就是复用性的提高 为了建立数据结构和算法的一套标准 诞生了STL 1 2 STL基本概念 STL 标准模板库 STL从广义上分为 容器 算法 迭代器 容器和算法之间通过
  • springboot + 读写分离+redis集群+集群部署

    记录一次 集群部署springboot 项目 1 nginx 使用 upstream 进行集群管理 upstream serviceGroup server 127 0 0 1 9090 server xxxxx 9090 server x
  • JS 中的自定义对象加 js 中的事件的详细讲解

    JS 中的自定义对象 Object 形式的自定义对象 对象的定义 var 变量名 new Object 对象实例 空对象 变量名 属性名 值 定义一个属性 变量名 函数名 function 定义一个函数 对象的访问 变量名 属性 函数名
  • 一个不错的选色网站 color picker

    进入后 右上角点击进入 点击进入 转载于 https www cnblogs com sofire archive 2010 10 12 1849141 html
  • 通用图片分类项目

    generalImageClassification 文章目录 generalImageClassification 1 数据准备 1 1 开源数据集 1 2 利用特定网站爬数据 2 分类模型的选择 3 代码结构及使用方法 3 1 代码结构
  • python基础练习题--变量

    01计算下列表达式 30 32 8 3210 342 8 5 22 3 2 4 7 34 5 1 3 2 16mod7 7 30 3 2 8 3 2 10 result1 30 pow 3 2 8 pow 3 2 10 print resu
  • Delphi集合数据类型的应用

    集合类型的一般形式为 set of 基类型 type 集合类型名称 Set of 基类型 基类型可以为 字符型 布尔型 枚举型和子界型 不能是整型 实型 1集合中的元素是相异的 不重复 2集合中的元素是没有顺序的 3集合中的元素不能超过25
  • Java对象的比较

    在Java中的比较有两种 基本类型之间的比较和引用类型之间的比较 对于基本类型来说 可以进行直接的比较 int long short byte 可以用 lt gt 进行比较 返回值为 true 或者 false char 也是用 lt gt
  • UFT 自动化测试工具

    QTP是一种基于GUI录制的自动化测试工具 用于在回归测试阶段的时候自动批量执行回归测试用例 和HP 的 Loadrunner 差不多 了解过Loadrunner的学起来很轻松 但又有区别 QTP是记录用户浏览器的操作步骤数据等去达到录制回
  • cmd命令行访问远程mysql数据库

    mysql uhello pworld h192 168 1 88 P3306 Dmysql oa mysql u用户名 p密码 h远程数据库IP地址 P端口 D数据库名
  • ElementUI使用按钮进行图片预览

    使用ElementUI组件进行图片预览 Element官网给出的组件为el image组件 该组件是点击图片时进行预览 而我需要的是点击按钮进行预览图片 需求是点击预览按钮后先去请求接口返回图片 等图片返回后直接将图片预览展示 找到了el
  • elasticsearch-索引分片和副本设置

    索引设置 你可以通过修改配置来自定义索引行为 详细配置参照 ref index modules html 索引模块 Tip Elasticsearch 提供了优化好的默认配置 除非你理解这些配置的作用并且知道为什么要去修改 否则不要随意修改
  • 抖音壁纸表情包小程序流量主收益怎么样?

    壁纸小程序源码 后台 注意注意此处是原作者 注意注意此处是原作者 注意注意此处是原作者 抖音壁纸小程序源代码 此次新增和优化功能如下 达人入住 达人审核 收益管理 下载壁纸页面UI优化 素材管理 素材上传 新增抖音图片检测接口 消息通知 达
  • 哈希表(带图解)

    哈希表 常见的搜索方式 1 顺序搜索 O N 2 二分搜索 O log N 3 搜索树结构中的查找 二叉树搜索 O N AVL O log N 红黑树 O log N 以上都需要比较 那有没有不需要比较就能查找的方法呢 概念 顺序结构以及平
  • 前端面试之---link 引入css文件和@import引入css文件的区别

    css引入方式link与import的区别 1 link属于html标签 而 import是css提供的 只能加载CSS2 加载顺序 link在页面加载时被加载 import在页面加载完之后再加载3 link是html标签 因此没有兼容性
  • mysql中进行md5加密

    如果数据库表User中有一列为passwd 存放的是md5加密的数据 如何更新新的数据 update user set passwd md5 123321 where uName lihua 插入新的数据 insert into user
  • JavaScript 入门基础 - 对象(五)

    JavaScript 入门基础 对象 文章目录 JavaScript 入门基础 对象 1 对象 1 1 对象的基本理解 1 2 为什么需要变量 2 创建对象的方式 2 1 利用字面量创建对象 2 2 变量属性函数方法的区别 2 3 利用 n