🌹作者主页：青花锁 🌹简介：Java领域优质创作者🏆、Java微服务架构公号作者😄
🌹简历模板、学习资料、面试题库、技术互助🌹文末获取联系方式 📝
![[JavaScript] 第七章 对象,前端小知识分享,javascript,开发语言,ecmascript,js对象](https://imgs.yssmx.com/Uploads/2024/01/785560-1.png)
系列专栏目录
[Java项目实战] 介绍Java组件安装、使用；手写框架等
[Aws服务器实战] Aws Linux服务器上操作nginx、git、JDK、Vue等
[Java微服务实战] Java 微服务实战，Spring Cloud Netflix套件、Spring Cloud Alibaba套件、Seata、gateway、shadingjdbc等实战操作
[Java基础篇] Java基础闲聊，已出HashMap、String、StringBuffer等源码分析，JVM分析，持续更新中
[Springboot篇] 从创建Springboot项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回、全局异常处理、Swagger文档
[Spring MVC篇] 从创建Spring MVC项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回
[华为云服务器实战] 华为云Linux服务器上操作nginx、git、JDK、Vue等，以及使用宝塔运维操作添加Html网页、部署Springboot项目/Vue项目等
[Java爬虫] 通过Java+Selenium+GoogleWebDriver 模拟真人网页操作爬取花瓣网图片、bing搜索图片等
[Vue实战] 讲解Vue3的安装、环境配置，基本语法、循环语句、生命周期、路由设置、组件、axios交互、Element-ui的使用等
[Spring] 讲解Spring(Bean)概念、IOC、AOP、集成jdbcTemplate/redis/事务等
前言
今天给大家带来JavaScript的对象知识讲解，包括对象的创建和使用、Number对象、String对象、Dom对象、Element对象、数组兑现个、Math对象等。
1、对象的创建和使用
对象看作是一个属性的无序集合，每个属性都有一个名称和值（键/值对）
1.1、创建对象
使用花括号{ }来创建对象，{ }中用来定义对象中的属性。属性是一个个键:值对的组合，其中键（属性名称）始终是字符串类型的，而值（属性值）则可以是任意类型。
var news={
title:"深圳下暴雨",
content:"暴雨，堵车",
newsType:1,
displayTitle: function(){
document.write(this.title);
}
}
1.2、访问对象属性
console.log(news.content);
console.log(news["content"]);
要访问或获取属性的值，您可以使用对象名.属性名或者对象名[“属性名”]的形式
1.3、设置修改对象属性
使用对象名.属性名或者对象名[“属性名”]的形式除了可以获取对象的属性值外，也可以用来设置或修改对象的属性值
news.title = "放晴了";
console.log(news.title);
1.4、删除对象属性
delete 语句来删除对象中的属性
delete news.title;
console.log('******' + news.title);
1.5、调用对象的方法
news.displayName();
news["displayName"]();
2、Number对象
Infinity无穷
var i = 1/0;
NaN 非数字
使用 isNaN() 函数可以判断一个数是否为 NaN
NaN 不等于（通过 ==、!=、===、!== 比较）其它任何值（包括另外一个 NaN 值）
2.1、Number属性
| 属性 | 描述 |
|---|---|
| Number.MAX_VALUE | JavaScript 中所能表示的最大值 |
| Number.MIN_VALUE | JavaScript 中所能表示的最小值 |
| Number.NaN | 非数字 |
| Number.NEGATIVE_INFINITY | 负无穷，在溢出时返回 |
| Number.POSITIVE_INFINITY | 正无穷，在溢出时返回 |
| Number.EPSILON | 表示 1 与 Number 所能表示的大于 1 的最小浮点数之间的差 |
| Number.MIN_SAFE_INTEGER | 最小安全整数，即 -9007199254740991 |
| Number.MAX_SAFE_INTEGER | 最大安全整数，即 9007199254740991 |
2.2、Number方法
| 方法 | 描述 |
|---|---|
| Number.parseFloat() | 将字符串转换成浮点数，和全局方法 parseFloat() 作用相同 |
| Number.parseInt() | 将字符串转换成整型数字，和全局方法 parseInt() 作用相同 |
| Number.isFinite() | 判断 Number 对象是否为有穷数 |
| Number.isInteger() | 判断 Number 对象是否为整数 |
| Number.isNaN() | 判断 Number 对象是否为 NaN 类型 |
| Number.isSafeInteger() | 判断 Number 对象是否为安全整数，即范围为 -(2⁵³ - 1)到 2⁵³ - 1 之间的整数 |
| Number.toString() | 把 Number 对象转换为字符串，使用指定的基数 |
| Number.toLocaleString() | 把 Number 对象转换为字符串，使用本地数字格式顺序 |
| Number.valueOf() | 返回一个 Number 对象的基本数字值 |
3、String对象
3.1、创建 String 对象的语法格式如下
var val = new String(value);
var val = String(value);
var val = "str";
3.2、属性
| 属性 | 描述 |
|---|---|
| constructor | 获取创建此对象的 String() 函数的引用 |
| length | 获取字符串的长度 |
| prototype | 通过该属性您可以向对象中添加属性和方法 |
var str =new String('JavaScript');
String.prototype.name =null;
str.name ="Hello World!";
3.3、对象中的方法：
| 方法 | 描述 |
|---|---|
| anchor() | 创建一个 HTML 锚点，即生成一个标签，标签的 name 属性为 anchor() 方法中的参数 |
| big() | 用大号字体显示字符串 |
| blink() | 显示闪动的字符串 |
| bold() | 使用粗体显示字符串 |
| charAt() | 返回在指定位置的字符 |
| charCodeAt() | 返回指定字符的 Unicode 编码 |
| concat() | 拼接字符串 |
| fixed() | 以打字机文本显示字符串 |
| fontcolor() | 使用指定的颜色来显示字符串 |
| fontsize() | 使用指定的尺寸来显示字符串 |
| fromCharCode() | 将字符编码转换为一个字符串 |
| indexOf() | 检索字符串，获取给定字符串在字符串对象中首次出现的位置 |
| italics() | 使用斜体显示字符串 |
| lastIndexOf() | 获取给定字符串在字符串对象中最后出现的位置 |
| link() | 将字符串显示为链接 |
| localeCompare() | 返回一个数字，并使用该数字来表示字符串对象是大于、小于还是等于给定字符串 |
| match() | 根据正则表达式匹配字符串中的字符 |
| replace() | 替换与正则表达式匹配的子字符串 |
| search() | 获取与正则表达式相匹配字符串首次出现的位置 |
| slice() | 截取字符串的片断，并将其返回 |
| small() | 使用小字号来显示字符串 |
| split() | 根据给定字符将字符串分割为字符串数组 |
| strike() | 使用删除线来显示字符串 |
| sub() | 把字符串显示为下标 |
| substr() | 从指定索引位置截取指定长度的字符串 |
| substring() | 截取字符串中两个指定的索引之间的字符 |
| sup() | 把字符串显示为上标 |
| toLocaleLowerCase() | 把字符串转换为小写 |
| toLocaleUpperCase() | 把字符串转换为大写 |
| toLowerCase() | 把字符串转换为小写 |
| toUpperCase() | 把字符串转换为大写 |
| toString() | 返回字符串 |
| valueOf() | 返回某个字符串对象的原始值 |
3.4、转义字符
| 代码 | 输出 | 代码 | 输出 |
|---|---|---|---|
| ’ | 单引号 | \r | 回车 |
| " | 双引号 | \t | tab |
| \ | 反斜线本身 | \b | 空格 |
| \n | 换行 | \f | 换页 |
4、dom对象
文档对象模型（Document Object Model，简称 DOM）；当浏览器加载一个 HTML 文档时，会创建一个 Document 对象，Document 对象是 DOM 树中所有节点的根节点。
4.1、dom对象中的属性
| 属性 | 描述 |
|---|---|
| document.activeElement | 返回当前获取焦点的元素 |
| document.anchors | 返回对文档中所有 Anchor 对象的引用 |
| document.applets | 返回对文档中所有 Applet 对象的引用。注意: HTML5 已不支持 元素 |
| document.baseURI | 返回文档的基础 URI |
| document.body | 返回文档的 body 元素 |
| document.cookie | 设置或返回与当前文档有关的所有 cookie |
| document.doctype | 返回与文档相关的文档类型声明 (DTD) |
| document.documentElement | 返回文档的根节点 |
| document.documentMode | 返回浏览器渲染文档的模式 |
| document.documentURI | 设置或返回文档的位置 |
| document.domain | 返回当前文档的域名 |
| document.domConfig | 已废弃，返回 normalizeDocument() 被调用时所使用的配置 |
| document.embeds | 返回文档中所有嵌入内容（embed）的集合 |
| document.forms | 返回文档中所有 Form 对象的引用 |
| document.images | 返回文档中所有 Image 对象的引用 |
| document.implementation | 返回处理该文档的 DOMImplementation 对象 |
| document.inputEncoding | 返回文档的编码方式 |
| document.lastModified | 返回文档的最后修改日期 |
| document.links | 返回对文档中所有 Area 和 Link 对象的引用 |
| document.readyState | 返回文档状态（载入中） |
| document.referrer | 返回载入当前文档的 URL |
| document.scripts | 返回页面中所有脚本的集合 |
| document.strictErrorChecking | 设置或返回是否强制进行错误检查 |
| document.title | 返回当前文档的标题 |
| document.URL | 返回文档的完整 URL |
4.2、方法
| 方法 | 描述 |
|---|---|
| document.addEventListener() | 向文档中添加事件 |
| document.adoptNode(node) | 从另外一个文档返回 adapded 节点到当前文档 |
| document.close() | 关闭使用 document.open() 方法打开的输出流，并显示选定的数据 |
| document.createAttribute() | 为指定标签添加一个属性节点 |
| document.createComment() | 创建一个注释节点 |
| document.createDocumentFragment() | 创建空的 DocumentFragment 对象，并返回此对象 |
| document.createElement() | 创建一个元素节点 |
| document.createTextNode() | 创建一个文本节点 |
| document.getElementsByClassName() | 返回文档中所有具有指定类名的元素集合 |
| document.getElementById() | 返回文档中具有指定 id 属性的元素 |
| document.getElementsByName() | 返回具有指定 name 属性的对象集合 |
| document.getElementsByTagName() | 返回具有指定标签名的对象集合 |
| document.importNode() | 把一个节点从另一个文档复制到该文档以便应用 |
| document.normalize() | 删除空文本节点，并合并相邻的文本节点 |
| document.normalizeDocument() | 删除空文本节点，并合并相邻的节点 |
| document.open() | 打开一个流，以收集来自 document.write() 或 document.writeln() 方法的输出 |
| document.querySelector() | 返回文档中具有指定 CSS 选择器的第一个元素 |
| document.querySelectorAll() | 返回文档中具有指定 CSS 选择器的所有元素 |
| document.removeEventListener() | 移除文档中的事件句柄 |
| document.renameNode() | 重命名元素或者属性节点 |
| document.write() | 向文档中写入某些内容 |
| document.writeln() | 等同于 write() 方法，不同的是 writeln() 方法会在末尾输出一个换行符 |
5、Element 对象
Document 对象中提供的方法（例如 getElementsByTagName()、getElementById()、getElementsByClassName() 等）可以得到 Element 对象
5.1、属性
| 属性 | 描述 |
|---|---|
| element.accessKey | 设置或返回一个访问单选按钮的快捷键 |
| element.attributes | 返回一个元素的属性数组 |
| element.childNodes | 返回元素的一个子节点的数组 |
| element.children | 返回元素中子元素的集合 |
| element.classList | 返回元素中类名组成的对象 |
| element.className | 设置或返回元素的 class 属性 |
| element.clientHeight | 返回内容的可视高度（不包括边框，边距或滚动条） |
| element.clientWidth | 返回内容的可视宽度（不包括边框，边距或滚动条） |
| element.contentEditable | 设置或返回元素的内容是否可编辑 |
| element.dir | 设置或返回一个元素中的文本方向 |
| element.firstChild | 返回元素中的第一个子元素 |
| element.id | 设置或者返回元素的 id |
| element.innerHTML | 设置或者返回元素的内容 |
| element.isContentEditable | 返回元素内容是否可编辑，如果可编辑则返回 true，否则返回 false |
| element.lang | 设置或者返回一个元素的语言 |
| element.lastChild | 返回元素的最后一个子元素 |
| element.namespaceURI | 返回命名空间的 URI |
| element.nextSibling | 返回指定元素之后的兄弟元素，两个元素在 DOM 树中位于同一层级（包括文本节点、注释节点） |
| element.nextElementSibling | 返回指定元素之后的兄弟元素，两个元素在 DOM 树中位于同一层级（不包括文本节点、注释节点） |
| element.nodeName | 返回元素名称（大写） |
| element.nodeType | 返回元素的节点类型 |
| element.nodeValue | 返回元素的节点值 |
| element.offsetHeight | 返回元素的高度，包括边框和内边距，但不包括外边距 |
| element.offsetWidth | 返回元素的宽度，包括边框和内边距，但不包括外边距 |
| element.offsetLeft | 返回元素在水平方向的偏移量 |
| element.offsetParent | 返回距离该元素最近的进行过定位的父元素 |
| element.offsetTop | 返回元素在垂直方向的偏移量 |
| element.ownerDocument | 返回元素的根元素（文档对象） |
| element.parentNode | 返回元素的父节点 |
| element.previousSibling | 返回元素之前的兄弟元素，两个元素在 DOM 树中位于同一层级（包括文本节点、注释节点） |
| element.previousElementSibling | 返回元素之前的兄弟元素，两个元素在 DOM 树中位于同一层级（不包括文本节点、注释节点） |
| element.scrollHeight | 返回元素的完整高度（包括被滚动条隐蔽的部分） |
| element.scrollLeft | 设置或返回元素滚动条距离元素左侧的距离 |
| element.scrollTop | 设置或返回元素滚动条距离元素上方的距离 |
| element.scrollWidth | 返回元素的完整宽度（包括被滚动条隐蔽的部分） |
| element.style | 设置或返回元素的样式属性 |
| element.tabIndex | 设置或返回元素的标签顺序 |
| element.tagName | 以字符的形式返回元素的名称（大写） |
| element.textContent | 设置或返回某个元素以及其中的文本内容 |
| element.title | 设置或返回元素的 title 属性 |
| element.length | 返回对象的长度 |
5.2、方法
| 方法 | 描述 |
|---|---|
| element.addEventListener() | 为指定元素定义事件 |
| element.appendChild() | 为元素添加一个新的子元素 |
| element.cloneNode() | 克隆某个元素 |
| element.compareDocumentPosition() | 比较当前元素与指定元素在文档中的位置，返回值如下： ● 1：表示两个元素没有关系，不属于同一文档； ● 2：表示当前元素在指定元素之后； ● 4：当前元素在指定元素之前； ● 8：当前元素在指定元素之内； ● 16：指定元素在当前元素之内； ● 32：两个元素没有关系，或者它们是同一元素的两个属性。 |
| element.focus() | 使元素获得焦点 |
| element.getAttribute() | 通过属性名称获取指定元素的属性值 |
| element.getAttributeNode() | 通过属性名称获取指定元素得属性节点 |
| element.getElementsByTagName() | 通过标签名获取当前元素下的所有子元素的集合 |
| element.getElementsByClassName() | 通过类名获取当前元素下的子元素的集合 |
| element.hasAttribute() | 判断元素是否具有指定的属性，若存在则返回 true，不存在则返回 false |
| element.hasAttributes() | 判断元素是否存在任何属性，若存在则返回 true，不存在则返回 false |
| element.hasChildNodes() | 判断一个元素是否具有子元素，有则返回 true，没有则返回 false |
| element.hasFocus() | 判断元素是否获得了焦点 |
| element.insertBefore() | 在已有子元素之前插入一个新的子元素 |
| element.isDefaultNamespace() | 如果指定 namespaceURI 是默认的则返回 true，否则返回 false。 |
| element.isEqualNode() | 检查两个元素是否相等 |
| element.isSameNode() | 检查当前元素与指定元素是否为同一元素 |
| element.isSupported() | 判断当前元素是否支持某个特性 |
| element.normalize() | 合并相邻的文本节点，并删除空的文本节点 |
| element.querySelector() | 根据 CSS 选择器，返回第一个匹配的元素 |
| document.querySelectorAll() | 根据 CSS 选择器，返回所有匹配的元素 |
| element.removeAttribute() | 从元素中删除指定的属性 |
| element.removeAttributeNode() | 从元素中删除指定的属性节点 |
| element.removeChild() | 删除一个子元素 |
| element.removeEventListener() | 移除由 addEventListener() 方法添加的事件 |
| element.replaceChild() | 替换一个子元素 |
| element.setAttribute() | 设置或者修改指定属性的值 |
| element.setAttributeNode() | 设置或者修改指定的属性节点 |
| element.setUserData() | 在元素中为指定键值关联对象 |
| element.toString() | 将元素转换成字符串 |
| nodelist.item() | 返回某个元素基于文档树的索引 |
6、数组对象
JavaScript的数组（Array）是一种内置的数据结构，用于在单个变量中存储多个值。它是一个容器，可以存储任意数据类型的元素，例如数字、字符串、对象，甚至其他数组。JavaScript的数组是从0开始索引的，这意味着第一个元素的索引为0，第二个元素的索引为1，依此类推。
以下是如何在JavaScript中声明和初始化数组的示例：
// 空数组
var emptyArray = [];
// 包含值的数组
var fruits = ['apple', 'banana', 'orange'];
// 不同数据类型的数组
var mixedArray = [42, 'Hello', true, { name: 'John' }];
// 嵌套数组
var nestedArray = [[1, 2], [3, 4, 5], [6]];
// 访问元素
console.log(fruits[0]); // 输出：'apple'
console.log(mixedArray[2]); // 输出：true
// 修改元素
fruits[1] = 'grape'; // 将第二个元素修改为'grape'
// 数组长度
console.log(fruits.length); // 输出：3
// 在末尾添加元素
fruits.push('pear'); // 在数组末尾添加'pear'
// 从末尾删除元素
var lastElement = fruits.pop(); // 删除并返回最后一个元素（'pear'）
// 遍历元素
for (var i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
7、Math对象
JavaScript Math 数学函数及其分类文章来源：https://www.toymoban.com/news/detail-785560.html
7.1、三角函数
- Math.sin(x)：正弦函数，返回 x 的正弦值。
- Math.cos(x)：余弦函数，返回 x 的余弦值。
- Math.tan(x)：正切函数，返回 x 的正切值。
示例用法：
let x = Math.PI / 4;
console.log(Math.sin(x)); // 输出：0.7071067811865475
console.log(Math.cos(x)); // 输出：0.7071067811865476
console.log(Math.tan(x)); // 输出：0.9999999999999999
7.2、对数和指数函数
- Math.log(x)：自然对数函数，返回 x 的自然对数。
- Math.exp(x)：指数函数，返回 e 的 x 次幂。
示例用法：
let x = 2;
console.log(Math.log(x)); // 输出：0.6931471805599453
console.log(Math.exp(x)); // 输出：7.3890560989306495
7.3、舍入函数
- Math.round(x)：四舍五入函数，将 x 四舍五入为最接近的整数。
- Math.ceil(x)：向上取整函数，返回大于或等于 x 的最小整数。
- Math.floor(x)：向下取整函数，返回小于或等于 x 的最大整数。
示例用法：
let x = 3.7;
console.log(Math.round(x)); // 输出：4
console.log(Math.ceil(x)); // 输出：4
console.log(Math.floor(x)); // 输出：3
7.4、平方根和指数运算
- Math.sqrt(x)：平方根函数，返回 x 的平方根。
- Math.pow(x, y)：幂函数，返回 x 的 y 次幂。
示例用法：
let x = 16;
let y = 3;
console.log(Math.sqrt(x)); // 输出：4
console.log(Math.pow(x, y)); // 输出：4096
7.5、常量
- Math.PI：圆周率 π，约为 3.14159。
0 Math.E：自然常数 e，约为 2.71828。
示例用法：
console.log(Math.PI); // 输出：3.141592653589793
console.log(Math.E); // 输出：2.718281828459045
联系方式
微信公众号：Java微服务架构
![[JavaScript] 第七章 对象,前端小知识分享,javascript,开发语言,ecmascript,js对象](https://imgs.yssmx.com/Uploads/2024/01/785560-2.jpeg)
文章来源地址https://www.toymoban.com/news/detail-785560.html
到了这里，关于[JavaScript] 第七章 对象的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![C国演义 [第七章]](https://imgs.yssmx.com/Uploads/2024/02/498521-1.png)
