WEB前端05-JavaScrip基本对象

JavaScript对象

1.Function对象
  • 函数的创建
//方法一:自定义函数
function 函数名([参数]) {函数体[return 表达式]
}//方法二:匿名函数
(function([参数]) {函数体[return 表达式]
});
**使用场景一:定义后直接调用使用(只使用一次)
(function(a,b){return a + b;
})(1,2);
**使用场景二:作为其他对象的方法
document.getElementById("p1").onclick = (function(){console.log("鼠标单击了...");
});//方法三:箭头函数
(参数) => {// 函数体return 结果;
}
* 如果只有一个参数,() 可以省略,如果没有参数,() 还是要保留
* 如果函数体内只有一行代码,{} 可以省略
* 如果这一行代码就是结果,return 可以省略
document.getElementById("p1").onclick = () => {console.log("鼠标单击了...");
}//方法四:默认参数的函数
function 函数名(参数1 = 参数值1, 参数2 = 参数值2) {}
此时,传递参数有默认值,如果传递参数会覆盖默认值,不传递则会使用默认值(或者传递undefined)
  • 函数的特点
1.在定义函数的时候无需指定函数的返回值和函数的参数类型
2.函数是一个对象,如果定义同名函数会覆盖函数
3.JS中,方法的调用只与方法的名称有关,和参数列表无关(即可以选择是否有参数列表,调用函数时传入参数个数随便)
4.在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数
function add() {let sum = 0; for (let index = 0; index < arguments.length; index++) {sum += arguments[index];}return sum;
}
  • 函数对象的概述
  1. 可以参与赋值(将对象值赋值给一个变量)
function abc() {console.log("bb");
}
document.getElementById("p1").onclick = abc;
  1. 有属性、有方法,执行 console.dir(abc),输出结果如下
ƒ abc()arguments: nullcaller: nulllength: 0name: "abc"➡prototype: {constructor: ƒ}[[FunctionLocation]]: VM1962:1➡[[Prototype]]: ƒ ()➡[[Scopes]]: Scopes[1]
  1. 可以作为方法参数
function a() {console.log('a')
}function b(f) {          console.log('b')f();                 // 调用函数对象
}
b(a)
  1. 可以作为方法返回值
function c() {console.log("c");function d() {console.log("d");}return d;
}c()()
  • 函数的属性
length:表示定义的形参列表的参数个数
如:function add(a, b, c) {}alert(a.length)
结果:3
  • 函数的作用域
* 以函数为分界线划定作用域,所有函数之外是全局作用域
* 查找变量时,由内向外查找* 在内层作用域找到变量,就会停止查找,不会再找外层* 所有作用域都找不到变量,报错
* 作用域本质上是函数对象的属性,可以通过 console.dir 来查看调试

image-20240715162725269

函数的闭包:函数定义时,它的作用域已经确定好了,因此无论函数将来去了哪,都能从它的作用域中找到当时那些变量。闭包就是指函数能够访问自己的作用域中变量

  • let 与 var作用域

如果函数外层引用的是 let 变量,那么外层普通的 {} 也会作为作用域边界,最外层的 let 也占一个 script 作用域

image-20240715164422856

如果函数外层引用的是 var 变量,外层普通的 {} 不会视为边界

image-20240715164528142

如果 var 变量出现了重名,则他俩会被视为同一作用域中的同一个变量

var e = 10; 
if(true) {var e = 20;console.log(e);	// 打印 20
}
console.log(e);		// 因为是同一个变量,还是打印 20

如果是 let,则视为两个作用域中的两个变量

let e = 10; 
if(true) {let e = 20;	console.log(e);	// 打印 20
}
console.log(e);		// 打印 10

要想里面的 e 和外面的 e 能区分开来,最简单的办法是改成 let,或者用函数来界定作用域范围

var e = 10; 
if(true) {function b() {var e = 20;console.log(e);}b();
}
console.log(e);	
2.字符串对象
  • 字符串对象的定义
方法一:
var 变量名 = "字符串"/'字符串'/`字符串`
方法二:
var 变量名 = new String("字符串")
  • 字符串对象的属性
constructor:字符串对象的函数模型
length:字符串的长度
prototype:添加字符串对象的属性
  • 字符串对象的方法
方法描述
charAt(索引)返回索引字符
indexOf(要查找的字符串,[起始索引])返回要查找的字符串的首个位置
lastIndexOf()返回要查找的字符串的最终位置
substr(开始位置,[长度])截取字符串的长度
substring(开始位置,结束位置)截取字符串的长度
split(分隔符)分割字符串
replace(要查找的字符串,新字符串)在字符串对象中,将指定的字符串替换为新字符串
toLowerCase()字符串对象转换为小写
toUpperCase()字符串对象转换为大写
//区分三种字符串截取函数
slice:
slice(a,b)的作用是截取a位置(含)到b位置(不含)之间的字符串,被截取的字符串不变,返回截取后获得的子字符串。比如a是0,b是3,则截取012三个位置的字符。b为可选参数,不填则表示截取到字符串的尾部。a或b为负数时表示从右往左排,即-1表示最右侧的位置,依次类推。substring()
a或b为负数时,自动转换为0;a大于b时,编译器会自动对调两者。substr()
a表示开始位置(包含);b表示截取的长度,可选。不填则截取到字符串结尾处;
a为负数时表示从右往左排,即-1表示最右侧的位置,依次类推。
//字符串拼接的两种方法
let name = "张三";
let age = 18;
方法一:使用加号进行拼接
let url = "/text?name=" + name +"&age=" + age;
方法二:使用模板占位进行拼接(使用反引号进行引用)
let url = `/test?name=${name}&age=${age}`;
3.数学对象
  • 数学对象的属性
E/LN2/LN10/PI/SORT2
  • 数学对象的方法

image-20231229154042255

  • 保留小数
数学.toFixed(x)//保留x位小数
数字.toPrecision(x)//保留x位数字
4.日期对象
  • 日期对象的创建
方法一:
var date1 = new Date()//获取本地时间
方法二:
var date2 = new Date(日期字符串)//创建指定的时间对象
方法三:
var date3 = new Date(,,,[,,,毫秒])//多参数创建指定的时间对象
方法四:
var date4 = new Date(100000000)//通过毫秒创建时间(1970:00:00)
  • 日期对象的相关方法

常用日期和时间的获取

image-20231229160950537

设置日期及时间

image-20231229161212844

window对象中和时间有关的方法

①SetTimeout:用于设置一个计时器,在指定的时间间隔后调用函数或计算表达式,且仅执行一次。
setTimeout(函数名,间隔的毫秒数)clearTimeOut:清除由setTimeout()方法所设置的计时器。
clearTimeout(setTimeout返回的id值)
  • 时间对象格式化

image-20231229162641573

5.数组对象

数组对象是一个有序的数据集合,使用单独的变量名来存储 一系列的数据。在JavaScript中,定义数组时不需要指定数组的数据类型,而且可以将不同类型的数据存放到一个数组中

  • 数组对象的创建
//空数组:
var a = new Array();//声明长度为n的数组:
var b = new Array(n);//通过参数列表赋值,创建数组
var c = new Array(元素1,元素2,元素3...)
var d = [1,2,3,4]
  • 数组对象的属性
arr.length//获得数组的长度
  • Js数组特点
1.Js中的数组类型可以变
2.Js中的数组长度可以变
  • 数组的操作

操作1:遍历数组元素

//方法一:返回的i是数组中非undefind的
for (i in arr) {document.write(arr[i] + "<br/>")
}//方法二:返回数组中非undefind的值
arr.forEach(function(e){document.write(e)
})
arr.forEach((e) => document.write(e)})原理:
let arr = [1,2,3,4];
//函数规则
function print(e) {documnet.write(e);
}
//forEach函数
function forEach(fn) {//forEach:高阶函数 fn:回调函数for (let i = 0; i < arr.length; i++) {fn(i);}    
}
//调用forEach函数
forEach(print);//方法三:返回数组中所有的元素
for (let i = 0; i < arr.length; i++) {console.log(arr[i]);
}

操作2:添加数组元素

1.直接修改数组的长度
myArray.length = n2.通过索引添加
a[index] = n

操作3:删除元素的值

1.直接修改数组的长度
myArray.length = n2.通过delete删除
delete myArray[1]
  • 数组对象的方法
方法描述
concat()连接两个或多个数组,并返回已连接数组的副本。
copyWithin()将数组中的数组元素复制到指定位置或从指定位置复制。
entries()返回键/值对数组迭代对象。
every()检查数组中的每个元素是否通过测试。
fill()用静态值填充数组中的元素。
filter()使用数组中通过测试的每个元素创建新数组。
find()返回数组中第一个通过测试的元素的值。
findIndex()返回数组中通过测试的第一个元素的索引。
forEach()为每个数组元素调用函数。
from()从对象创建数组。
includes()检查数组是否包含指定的元素。
indexOf()在数组中搜索元素并返回其位置。
isArray()检查对象是否为数组。
join()将数组的所有元素连接成一个字符串。
keys()返回 Array Iteration 对象,包含原始数组的键.
lastIndexOf()在数组中搜索元素,从末尾开始,并返回其位置。
map()使用为每个数组元素调用函数的结果创建新数组。
pop()删除数组的最后一个元素,并返回该元素。
push()将新元素添加到数组的末尾,并返回新的长度。
reduce()将数组的值减为单个值(从左到右)。
reduceRight()将数组的值减为单个值(从右到左)。
reverse()反转数组中元素的顺序。
shift()删除数组的第一个元素,并返回该元素。
slice()选择数组的一部分,并返回新数组。
some()检查数组中的任何元素是否通过测试。
sort()对数组的元素进行排序。
splice()从数组中添加/删除元素。
toString()将数组转换为字符串,并返回结果。
unshift()将新元素添加到数组的开头,并返回新的长度。
valueOf()返回数组的原始值。
6.RegExp正则表达式对象

**正则表达式:**定义字符串的组成规则

  • 单个字符规则
[规则]:表示对单个字符的限制
[a]//表示字符串必须是a
[ab]//表示字符串为a或b
[a-bA-Z0-9_]//表示单个字符可以是a~b A~Z 0~9 _
* 特殊符号代表特殊含义的单个字符:
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_]
  • 量词的规则
?:表示出现0次或1*:表示出现0次或多次
+:出现1次或多次
{m,n}:表示 m<= 数量 <= n* m如果缺省: {,n}:最多n次* n如果缺省:{m,} 最少m次
  • 开始与结束
^开始,以$结束
  • 正则对象的创建
//方法一:
let reg = new RegExp("正则表达式");
//方法二:
let reg = /正则表达式/
例子:
let regExp = new RegExp("\\w{6,12}");
let regExp2 = /^\w{6,12}$/;
  • 正则对象的方法
正则对象.text(字符串);//用于检验正则表达式是否合法,返回true或者false
8.Global全局对象

全局对象,这个Global中封装的方法不需要对象就可以直接调用: 方法名()

eval(“字符串”)函数

功能:将eval中的字符串参数作为脚本代码去执行

isFinite(数字)函数

检查某个值是否为有穷大的数。
➢参数为有限值,返回值为ture。
➢参数为非数字或者正、负无穷大,返回值为false。

isNaN()函数

检查某个值是否为数字(NaN与任何数逻辑运算均为NaN)
➢参数为数字,返回值为false 。
➢参数为非数字,返回值为ture 。

parseInt(任意参数,[转换的进制])函数

➢参数第一个字符为数字字符串,返回值为number 。
➢参数为非数字,返回值为NAN
➢将参数为非数字前的数字转成NaN返回

encodeURI():url编码
decodeURI():url解码

encodeURIComponent():url编码,编码的字符更多

decodeURIComponent():url解码

根据meta标签中charset编码方式对文字进行编码
decodeURI对服务器发送的内容进行解码
9.Object对象
  • 定义格式
//方法一:在对象内部定义方法和属性
let 对象名 = {//定义属性属性名1:属性值1,属性名2:属性值2//定义方法/*1.可以采用匿名函数定义方法*/函数名称:function(形参列表){}/*2.简化的定义方式*/函数名称(形参列表){}
}//方法二:在对象外部定义属性和方法
let 属性名1 = 属性值;
let 属性名2 = 属性值;
let 方法名 = function(形参列表){}let 对象名 = {属性名1,属性名2,方法名}
  • get和set方法
let stu = {name: null,get name() {console.log("进入了get");return this._name;},set name(name) {console.log("进入了set");this._name = name;}
}
//在定义get和set方法的,在修改name属性的时候会自动调用get和set方法
stu.name = "yhw"
console.log(stu.name)
//在实践中,开发者经常使用_开头来表示某个属性是私有的,以便区分公共属性。这是一种约定俗成的做法,并没有强制规定。将name改为_name也可正常运行
  • 属性的增删改

js 的对象,它的属性和方法可以随时加减

let stu = {name:'张三'};
// 添加属性
stu.age = 18;					
// 删除属性
delete stu.age;					
// 添加方法
stu.study = function() {		console.log(this.name + "在学习");
}
// 添加get和set方法:需要借助 Object.definePropery
Object.defineProperty(对象名, "属性名", {
//因为Object.definePropery方法已经定义了属性名,所以,无需再次在get和set方法定义属性名get(){return this.属性名;},set(a){this.属性名 = a;}
});
  • this关键字

js 中的 this 也是隐式参数,但它与函数运行时上下文相关

//情况一:当单独定义一个函数,使用this关键字全局对象 window被当作了this
function study() {console.log(this.name);
}//此时this.name为空字符串(==window.name)//情况二:如果作为对象的方法,this表示的是对象本身
let stu = {name:"lisi";study() {console.log(this.name);}
}//此时this.name为lisi(==stu.name)//情况三:动态指定this
let stu = {name:"zhangsan"};
study.call(stu);//通过call指定study函数内的this为stu对象,因此会输出zhangsan

this关键字的一种易错情况

image-20240716163754661

但是可以通过箭头函数解决这一问题,在**箭头函数**内出现的 this和它外层 this相同
let stu = {name: "小花",friends: ["小白","小黑","小明"],play() {this.friends.forEach(e => {console.log(this.name + "与" + e + "在玩耍");})}    
}
  • 继承:原型继承
let father = {f1: '父属性',m1: function() {console.log("父方法");}
}let son = Object.create(father);console.log(son.f1);  // 打印 父属性
son.m1();			  // 打印 父方法
  • father 是父对象,son 去调用 .m1 或 .f1 时,自身对象没有,就到父对象找
  • son 自己可以添加自己的属性和方法
  • son 里有特殊属性 __proto__ 代表它的父对象,js 术语: son 的原型对象
  • 不同浏览器对打印 son 的 __proto__ 属性时显示不同
    • Edge 打印 console.dir(son) 显示 [[Prototype]]
    • Firefox 打印 console.dir(son) 显示 <prototype>

出于方便的原因,js 又提供了一种基于函数的原型继承

函数职责

  1. 负责创建子对象,给子对象提供属性、方法,功能上相当于构造方法

  2. 函数有个特殊的属性 prototype,它就是函数创建的子对象的父对象

    **注意!**名字有差异,这个属性的作用就是为新对象提供原型

function cons(f2) {// 创建子对象(this), 给子对象提供属性和方法this.f2 = f2;this.m2 = function () {console.log("子方法");}
}
// cons.prototype 就是父对象
cons.prototype.f1 = "父属性";
cons.prototype.m1 = function() {console.log("父方法");
}

配合 new 关键字,创建子对象

let son = new cons("子属性")

子对象的 __proto__ 就是函数的 prototype 属性

10.JSON对象

概念:JavaScript Object Notation, Javascript 对象标记法,是通过JavsScript对象标记法书写的文本

**作用:**多用于数据载体,在网络中进行数据传输

格式:

var 变量名 ={"key1":value1, "key2":value2}';
value的数据类型为:
数字(整数或浮点数)
字符串(在双引号中)
逻辑值(true or false)
数组(在方括号中)
对象(在花括号中)
null

方法:

  • 将JSON转换为JS对象
var obj  = JSON.parse(userString);
  • 将JS对象转换为JSON字符串
var jsonStr = JSON.stringify(jsObject);
  • json 中只能有 null、true|false、数字、字符串(只有双引号)、对象、数组
  • json 中不能有除以上的其它 js 对象的特性,如方法等
  • json 中的属性必须用双引号引起来

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

成为git砖家(1): author 和 committer 的区别

大家好&#xff0c;我是白鱼。一直对 git author 和 committer 不太了解&#xff0c; 今天通过 cherry-pick 的例子搞清楚了区别。 原理 例如我克隆了著名开源项目 spdlog 的源码&#xff0c; 根据某个历史 commit A 创建了分支&#xff0c; 然后 cherry-pick 了这个 commit …

《系统架构设计师教程(第2版)》第11章-未来信息综合技术-06-云计算(Cloud Computing) 技术概述

文章目录 1. 相关概念2. 云计算的服务方式2.1 软件即服务 (SaaS)2.2 平台即服务 (PaaS)2.3 基础设施即服务 (IaaS)2.4 三种服务方式的分析2.4.1 在灵活性2.4.2 方便性方 3. 云计算的部署模式3.1 公有云3.2 社区云3.3 私有云3.4 混合云 4. 云计算的发展历程4.1 虚拟化技术4.2 分…

python课设——宾馆管理系统

python课设——宾馆管理系统 数据库课设-宾馆管理系统-python3.7pyqt5 简介 大二数据库课程设计&#xff08;3-4天工作量&#xff09;的项目&#xff0c;登录界面的ui设计参考了他人成果&#xff0c;其余ui以及所有后端部分全部独立完成&#xff0c;详细功能见功能模块图使用…

防火墙NAT地址转换和智能选举综合实验

一、实验拓扑 目录 一、实验拓扑 二、实验要求&#xff08;接上一个实验要求后&#xff09; 三、实验步骤 3.1办公区设备可以通过电信链路和移动链路上网(多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换) 3.2分公司设备可以通过总公司的移动链路和电信链路访…

简单爬虫案例

准备工作&#xff1a; 1. 安装好python3 最低为3.6以上&#xff0c; 并成功运行pyhthon3 程序 2. 了解python 多进程原理 3. 了解 python HTTP 请求库 requests 的基本使用 4. 了解正则表达式的用法和python 中 re 库的基本使用 爬取目标 目标网站&#xff1a; https://…

scrapy框架爬取豆瓣top250电影排行榜(下)

&#xff08;3&#xff09;在 pipeline.py 文件中对数据进行存储&#xff0c;此程序先写 入 txt 文件中&#xff0c;是为了判断该程序是否能正确爬取出数据。 此处使用了 json 库&#xff0c;使用 ensure_ascii False&#xff0c;能够确 保非 ASCII 字符&#xff08;如中文&am…

贪心算法(2024/7/16)

1合并区间 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 。 示例 1&#xff1a; 输入&#xff1a;inter…

SpringCloud网关的实现原理与使用指南

Spring Cloud网关是一个基于Spring Cloud的微服务网关&#xff0c;它是一个独立的项目&#xff0c;可以对外提供API接口服务&#xff0c;负责请求的转发和路由。本文将介绍Spring Cloud网关的实现原理和使用指南。 一、Spring Cloud网关的实现原理 Spring Cloud网关基于Spring…

5.操作led

模版使用之前的hello驱动程序。 想要操作led&#xff0c;首先要找到原理图&#xff0c;查找GPIO对应的GPIO引脚 从图中能看出来LED2对应的GPIO是GPIO5_3&#xff0c;同时可以得知这个LED2是低电平点亮。查看cat /sys/kernel/debug/gpio可得知GPIO5_3&#xff08;第四组GPIO的第…

【深度学习入门篇 ⑧】关于卷积神经网络

【&#x1f34a;易编橙&#xff1a;一个帮助编程小伙伴少走弯路的终身成长社群&#x1f34a;】 大家好&#xff0c;我是小森( &#xfe61;ˆoˆ&#xfe61; ) &#xff01; 易编橙终身成长社群创始团队嘉宾&#xff0c;橙似锦计划领衔成员、阿里云专家博主、腾讯云内容共创官…

Python和C++骨髓细胞进化解析数学模型

&#x1f3af;要点 &#x1f3af; 数学模型邻接矩阵及其相关的转移概率 | &#x1f3af;蒙特卡罗模拟进化动力学 | &#x1f3af;细胞进化交叉图族概率 | &#x1f3af;进化图模型及其数学因子 | &#x1f3af;混合图模式对进化概率的影响 | &#x1f3af;造血干细胞群体的空间…

汇总国内镜像提供了Redis的下载地址

文章目录 1. 清华大学开源软件镜像站&#xff1a;2. 中国科技大学开源软件镜像&#xff1a;3. 阿里云镜像&#xff1a;4. 华为云镜像&#xff1a;5. 腾讯云镜像&#xff1a;6. 网易开源镜像站7. 官方GitHub仓库&#xff08;虽然不是镜像&#xff0c;但也是一个可靠的下载源&…

AI算法19-偏最小二乘法回归算法Partial Least Squares Regression | PLS

偏最小二乘法回归算法简介 算法概述 偏最小二乘法模型可分为偏最小二乘回归模型和偏最小二乘路径模型。其中偏最小二乘回归模型是一种新型的多元统计方法&#xff0c;它集中了主成分分析、典型相关分析和线性回归的特点&#xff0c;特别在解决回归中的共线性问题具有无可比拟…

# Redis 入门到精通(五)-- redis 持久化(2)

Redis 入门到精通&#xff08;五&#xff09;-- redis 持久化&#xff08;2&#xff09; 一、redis 持久化–save 配置与工作原理 1、RDB 启动方式&#xff1a;反复执行保存指令&#xff0c;忘记了怎么办&#xff1f;不知道数据产生了多少变化&#xff0c;何时保存&#xff1…

CNN之图像识别

Inception Inception网络是CNN发展史上一个重要的里程碑。在Inception出现之前&#xff0c;大部分流行CNN仅仅是把卷积层堆叠得越来越多&#xff0c;使网络越来越深&#xff0c;以此希望能够得到更好的性能。但是存在以下问题: 图像中突出部分的大小差别很大。由于信息位置的…

【typedb】例子:药物发现: studio运行

测试8:solution结果 测试1:获取名字为Q9NPB9的protein Let’s start by getting the names of the protein Q9NPB9:测试2:哪个基因编码了Q9NPB9 Now let’s see which gene encodes for protein Q9NPB9: 推理过程:

【Linux】基础I/O——FILE,用户缓冲区

1.FILE里的fd FILE是C语言定义的文件结构体&#xff0c;里面包含了各种文件信息。可以肯定的一点是&#xff0c;FILE结构体内一定封装了 fd 。为什么?来看接下来的思路分析&#xff1a; 1.使用系统接口的必然性   文件存储在磁盘上&#xff0c;属于外设。谁有权限访问…

RabbitMQ:基础篇

1.RabbitMQ是高性能的异步通讯组件 何为异步通讯 打电话就是同步通讯&#xff0c;微信聊天可以理解为异步通讯&#xff0c;不是实时的进行通讯&#xff1a;时效性差。 同步调用的缺点&#xff1a; 拓展性差&#xff08;需求不尽提&#xff09; 性能下降 级联失败 …

带你轻松玩转DevOps

一、DevOps详细介绍 软件开发最开始是由两个团队组成&#xff1a; 开发计划由**开发团队**从头开始设计和整体系统的构建。需要系统不停的迭代更新。**运维团队**将开发团队的Code进行测试后部署上线。希望系统稳定安全运行。 这两个看似目标不同的团队&#xff0c;需要协同完…

HarmonyOS 开发者联盟高级认证最新题库

本篇文章包含 Next 版本更新后高级认证题库中95%的题目。 答案正确率 50-60%&#xff0c;答案仅做参考。 请在考试前重点看一遍题目&#xff0c;勿要盲目抄答案。 欢迎在评论留言正确答案和未整理的题目。 1、下面关于方舟字节码格式PREF_IMM16_v8_v8描述正确的是 16位前缀操作…