[JavaScript] 第七章 对象

这篇具有很好参考价值的文章主要介绍了[JavaScript] 第七章 对象。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🌹作者主页:青花锁 🌹简介:Java领域优质创作者🏆、Java微服务架构公号作者😄
🌹简历模板、学习资料、面试题库、技术互助

🌹文末获取联系方式 📝

[JavaScript] 第七章 对象,前端小知识分享,javascript,开发语言,ecmascript,js对象

系列专栏目录

[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 数学函数及其分类

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://www.toymoban.com/news/detail-785560.html

到了这里,关于[JavaScript] 第七章 对象的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://blog.csdn.net/s445320/article/details/135519014

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • python第七章(字典)

    一。字典(类型为dict)的特点: 1.符号为大括号 2.数据为键值对形式出现 3.各个键值对之间以逗号隔开 格式:str1={\\\'name\\\':\\\'Tom\\\'}  name相当于键值(key),Tom相当于值 二。空字典的创建方法 三。字典的基本操作(增删改查) 1.字典的增加操作:字典序列[key] = 值 注意点:如果存

    2024年01月24日
    浏览(10)
  • 第七章 函数矩阵

    和矩阵函数不同的是,函数矩阵本质上是一个矩阵,是以函数作为元素的矩阵。 矩阵函数本质上是一个矩阵,是以矩阵作为自变量的函数。 函数矩阵和数字矩阵的运算法则完全相同。 不过矩阵的元素 a i j ( x ) a_{ij}(x) a ij ​ ( x ) 需要是闭区间 [ a , b ] [a,b] [ a , b ] 上的实函数

    2024年02月04日
    浏览(6)
  • 数据结构第七章

    2024年02月03日
    浏览(18)
  • 第七章 测试

    7.1.1 选择程序设计语言 1. 计算机程序设计语言基本上可以分为汇编语言和高级语言 2. 从应用特点看,高级语言可分为基础语言、结构化语言、专用语言 01 有理想的模块化机制; 02 可读性好的控制结构和数据结构; 03 便于调试和提高软件可靠性; 04 编译程序发现程序错误的

    2024年02月08日
    浏览(16)
  • Flink第七章:状态编程

    Flink第一章:环境搭建 Flink第二章:基本操作. Flink第三章:基本操作(二) Flink第四章:水位线和窗口 Flink第五章:处理函数 Flink第六章:多流操作 Flink第七章:状态编程 这次我们来学习Flink中的状态学习部分,创建以下scala文件 这个文件里有几个常用的状态创建 按键分区中值状态编程案

    2024年02月06日
    浏览(15)
  • C国演义 [第七章]

    力扣链接 给两个整数数组 nums1 和 nums2 ,返回 两个数组中 公共的 、长度最长的子数组的长度 。 示例 1: 输入:nums1 = [1,2,3,2,1], nums2 = [3,2,1,4,7] 输出:3 解释:长度最长的公共子数组是 [3,2,1] 。 示例 2: 输入:nums1 = [0,0,0,0,0], nums2 = [0,0,0,0,0] 输出:5 提示: 1 = nums1.length, num

    2024年02月10日
    浏览(15)
  • 第七章 正则表达式

    目录 1.1. 概念: 1.2. 基本正则表达式 1.2.1. 常见元字符 1.2.2. POSIX字符类 1.2.3. 示例 1.3. 扩展正则表达式 1.3.1. 概念 1.3.2. 示例 在进行程序设计的过程中,用户会不可避免地遇到处理某些文本的情况。有的时候,用户还需要查找符合某些比较复杂规则的字符串。对于这些情况,如

    2024年03月17日
    浏览(12)
  • 第七章 高级 OOP 特性

    2024年02月11日
    浏览(7)
  • OpenCV:第七章、图像变换

    目录 第七章:图像变换 7.1、基于OpenCV的边缘检测 7.1.1、一般步骤 1、滤波 2、增强 3、检测 7.1.2、canny算子 1、canny算子简介 2、canny边缘检测的步骤 7.2、霍夫变换  7.2.2、OpenCV中的霍夫线变换 7.2.3、霍夫线变换原理        7.2.4、标准霍夫变换:HoughLines()函数    7.2.5、累计概率

    2024年02月03日
    浏览(34)
  • 【OpenCV】第七章: 图像平滑处理

    第七章: 图像平滑处理 1、什么是图像平滑处理 图像平滑处理就是,将图像中与 周围像素点的像素值差异较大的像素点 调整成 和周围像素点像素值 相近的值。 例如: 2、为什么要进行平滑处理? 因为图像在采集(生成)、传输、处理的过程中常常会存在一定的噪声干扰,比如

    2024年02月03日
    浏览(13)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包