数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script text="javascript">
/*
数组(Array)：
数组也是一个对象
它和我们普通对象功能类似,也是用来存储一些值的
不同的是普通对象是使用字符串作为属性名的,而数组时使用数字来作为索引操作元素
从0开始的整数就是索引
数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据|
创建数组对象
var arr = new Array();
向数组中添加元素
语法：
数组[索引] = 值;
读取数组中的元素
语法：
数组[索引]
如果读取不存在的索引,他不会报错而是返回undefined
获取数组的长度
可以使用length属性来获取数组的长度(元素的个数)
语法：
数组.length
对于连续的数组,使用length可以获取到数组的长度（元素的个数）
对于非连续的数组,使用length会获取到数组的最大的索引+1
修改length
如果修改的length大于原长度,则多出部分会空出来
如果修改的length小于原长度,则多出的元素会被删除
向数组的最后一个位置添加元素
语法:
数组[数组.length] = 值;
使用字面量创建数组
语法:
[]
var arr = [];
数组中的元素可以是任意的数据类型，也可以是对象、函数、数组
*/
// 创建数组对象
var arr = new Array();
console.log(arr);//输出 ""
// 向数组中添加元素
arr[0] = 1;
arr[1] = 2;
arr[5] = 3;
// 读取数组中的元素
console.log(arr[0]);//输出 1
console.log(arr[2]);//输出 undefined
// 获取数组的长度
console.log(arr.length);//输出 6
console.log(arr);//输出 6
// 使用字面量创建数组时,可以在创建时就指定数组中的元素
var arr1 = [1, 2, 3];
// 使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作为构造函数的参数传递
var arr2 = new Array(1, 2, 3)
// 创建一个指定长度的数组
var arr3 = new Array(10);//长度为10的数组
/*
数组的方法：
push()
该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
可以将要添加的元素作为方法的参数传递,
这样这些元素将会自动添加到数组的末尾
该方法会将数组新的长度作为返回值返回
pop()
该方法可以删除数组的最后一个元素
并将被删除的元素作为返回值返回
unshift()
向数组开头添加一个或多个元素,并返回新的数组长度
向前边插入元素以后，其他的元索索引会依次调整
shift()
可以删除数组的第一个元素,并将被删除的元素作为返回值返回
slice()
可以用来从数组提取指定元素
该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
参数:
截取开始的位置的索引(包含)
截取结束的位置的索引(不包含)
第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
索引可以传递一个负值，如果传递一个负值，则从后往前计算
1 倒数第一个
2 倒数第二个
splice()
可以用于删除数组中的指定元素
使用splice()会影响到原数组,会将指定元素从原数组中删除
并将被删除的元素作为返回值返回
参数:
表示开始位置的素引
表示删除的数量
第三个及以后
可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边
concat()
可以连接两个或多个数组,并将新的数组返回
该方法不会对原数组产生影响
join()
该方法可以将数组转换为一个字符串
该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符
reverse()
该方法用来反转数组（前边的去后边,后边的去前边)
该方法会直接修改原数组
sort()
可以用来对数组中的元素进行排序
也会影响原数组,默认会按照Unicode编码进行排序
即使对于纯数字的数组，使用sort()排序时，
也会按照Unicode编码来排序，
所以对数字进排序时,可能会得到错误的结果
我们可以目己来指定排行的规则
我们可以在sort()添加一个回调函数,来指定排序规则,
回调函数中需要定义两个形参,
浏览器将会分别使用数组中的元素作为实参去调用回调函数
使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边
浏览器会根据回调函数的返回值来决定元素的顺序，
如果返回一个大于8的值，则元素会交换位置
如果返回一个小于e的值，则元素位置不变
如果返回一个日，则认为两个元素相等，也不交换位置
如果需要升序排列,则返回a-b
如果需要降序排列，则返回b-a
*/
var arr4 = [];
var result1 = arr4.push("1", "2", "3");
console.log(result1);//输出 3
var result2 = arr4.pop();
console.log(result2);//输出 3
var result3 = arr4.unshift("4");
console.log(result3);//输出 3
var result4 = arr4.shift();
console.log(result4);//输出 4
var sliceArr = arr4.slice(0, 2);
console.log(sliceArr);//输出 1,2
var spliceArr = arr4.slice(0, 2);
console.log(spliceArr);//输出 1,2
var sortArr = arr4.sort(function (a, b) {
// 升序
// return a - b;
// 降序
return b - a;
});
console.log(sortArr);//输出 2,1
/*
数组的遍历：
所谓的遍历数组,就是将数组中所有的元素都取出来
变量方法：
for()
forEach()
forEach()方法需要一个函数作为参数
像这种函数，由我们创建但是不由我们调用的,我们称为回调函数
数组中有几个元素函数就会执行几次，
每次执行时，浏览器会将遍历到的元素,
以实参的形式传递进来,我们可以来定义形参，来读取这些内容
浏览器会在回调函数中传递三个参数：
第一个参数,就是当前正在遍历的元素
第二个参数,就是当前正在遗历的元素的索引
第三个参数,就是正在遍历的数组
*/
var arr5 = [1, 2, 3, 4, 5];
for (var i = 0; i < arr5.length; i++) {
console.log(arr5[i]);//输出 1,2,3,4,5
}
arr5.forEach(function (value, index, arr) {
console.log(arr + index + value);//输出 1,2,3,4,5 0 1
});
</script>
</head>
<body>
</body>
</html>
call和apply
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script text="javascript">
/*
call()和apply()
这两个方法都是函数对象的方法,需要通过函数对象来调用
当对函数调用call()和apply()都会调用函数执行
在调用call和apply()可以将一个对象指定为第一个参数
此时这个对象将会成为函数执行时的this
可以通过这个来修改方法中的this
区别：
call()方法可以将实参在对象之后依次传递
apply()方法需要将实参封装到一个数组中统一传递
this的情况:
1.以函数形式调用时,this永远都是window
2.以方法的形式调用时，this是调用方法的对象
3.以构造函数的形式调用时，this是新创建的那个对象
4.使用call和apply调用时,this是指定的那个对象
*/
function fun() {
console.log("我是fun方法");
}
//调用函数对象的方法
fun.call();//输出 我是fun方法
fun.apply();//输出 我是fun方法
function fun1() {
console.log(this);
}
fun1.call();//输出 window
fun1.apply();//输出 window
var obj = {};
// 调用函数对象的方法,将对象指定为第一个参数
fun1.call(obj);//输出 {}
fun1.apply(obj);//输出 {}
function fun2(a, b) {
console.log(a);
console.log(b);
}
fun2.call(obj, 1, 2);//输出 1,2
fun2.apply(obj, [1, 2]);//输出 1,2
</script>
</head>
<body>
</body>
</html>
arguments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script text="javascript">
/*
arguments:
在调用函数时,浏览器每次都会传递进两个隐含的参数:
1.函数的上下文对象this
2.封装实参的对象arguments
arguments.length可以用来获取实参的长度
我们即使不定义形参,也可以通过arguments来使用实参,
arguments[0]表示第一个实参
arguments[1]表示第二个实参
它里边有一个属性叫做callee,
这个属性对应一个函数对象，就是当前正在指向的函数的对象
*/
function fun(){
console.log(arguments);//输出 arguments
// 输出实参的数量
console.log(arguments.length);//输出 1
}
fun(1);
</script>
</head>
<body>
</body>
</html>
Date和Math
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script text="javascript">
/*
Date对象
在JS中使用Date对象来表示一个时间
getDate()
获取当前日期对象是几日
getDay()
获取当前日期对象时周几
会返回一个0-6的值
0表示周日
1表示周一
getMonth()
获取当前时间对象的月份
会返回一个0-11的值
0表示1月
1表示2月
getFullYear()
获取当前日期对象的年份
getTime()
获取当前日期对象的时间戳
时间戳,指的是从格林威治标准时间的1970年1月1日，0时0分0秒
到当前日期所花费的亳秒数(1秒=1000亳秒)
计算机底层在保存时间时使用都是时间戳
*/
// 创建一个Date对象
// 如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间
var d1 = new Date();
console.log(d1);
// 创建指定时间Date对象
// 需要在构造函数中传递一个表示时间的字符串作为参数
// 日期的格式： 月份/日/年 时:分:秒
var d2 = new Date("01/01/2022 00:00:00");
console.log(d2);
console.log(d2.getDate());//输出 1
console.log(d2.getDay());//输出 6
console.log(d2.getMonth());//输出 1
console.log(d2.getFullYear());//输出 2022
console.log(d2.getTime());//输出 1640966400000
/*
Math对象
Math和其他的对象不同,它不是一个构造函数
它属于一个工具类，不用创建对象
它里边封装了数学运算相关的属性和方法
Math.PI表示的圆周幸
Math.abs()可以用来计算一个数的绝对值
Math.ceil()可以对一个数进行向上取整,小数位只要有值就自动进1
Math.floor()可以对一个数进行向下取整，小数部分会被舍掉
Math.round()可以对一个数进行四舍五入取整
Math.random()可以用来生成一个(0,1)之间的随机数
Math.max()可以获取多个数中的最大值
Math.min()可以获取多个数中的最小值
Math.pow(x,y)可以返回×的y次幕
Math.sqrt()用于对一个数进行开方运算
*/
console.log(Math.PI);//输出 3.141592653589793
console.log(Math.abs(1));//输出 1
console.log(Math.ceil(1.1));//输出 2
console.log(Math.floor(1.99));//输出 1
console.log(Math.round(1.99));//输出 2
console.log(Math.random());//输出 (0,1)之间的随机数
console.log(Math.max(1,2,3));//输出 3
console.log(Math.min(1,2,3));//输出 1
console.log(Math.pow(2,2));//输出 4
console.log(Math.sqrt(9));//输出 3
</script>
</head>
<body>
</body>
</html>
包装类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script text="javascript">
/*
包装类：
在JS中为我们提供了三个包装类
通过这三个包装类可以将基本数据类型的数据转换为对象
String()
可以将基本数据类型字符串转换为String对象
Number()
可以将基本数据类型的数字转换为Number对象
Boolean()
可以将基本数据类型的布尔值转换为Boolean对象
我们在实际应用中不会使用基本数据类型的对象，
如果使用基本数据类型的对象,在做一些比校时可能会带来一些不可预估的结果
方法和属性只能添加给对象，不能添加给基本数据类型
当我们对一些基本数据类型的值去调用属性和方法时,
浏览器会临时使用包装类将其转换为对象，
然后在调用对象的属性和方法调用完以后,再将其转换为基本数据类型
*/
var str = new String("BanQ");
var num = new Number(22);
var bool = new Boolean(true);
console.log(str);//输出 String
console.log(num);//输出 Number
console.log(bool);//输出 Boolean
</script>
</head>
<body>
</body>
</html>
字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script text="javascript">
/*
字符串：
在底层字符串是以字符数组的形式保存的
length属性 可以用来获取字符串的长度
charAt()可以返回字符串中指定位置的字符
根据索引获取指定的字符
charCodeAt()获取指定位置字符的字符编码(Unicode编码)
String.fromCharCode() 可以根据字符编码去获取字符
concat()可以用来连接两个或多个字符串
作用和 + 一样
indexof()该方法可以检索一个字符串中是否含有指定内容
如果字符串中含有该内容,则会返回其第一次出现的索引
如果没有找到指定的内容，则返回-1
lastIndexOf()该方法的用法和indexOf()一样
不同的是indexOf是从前往后找,而lastIndexOf是从后往前找
也可以指定开始查找的位置
slice()可以从字符串中截取指定的内容
不会影响原字符串，而是将截取到内容返回
参数:
第一个,开始位置的索引(包括开始位置)
第二个,结束位置的索引(不包括结束位置)
如果省略第二个参数，则会截取到后边所有的
也可以传递一个负数作为参数，负数的话将会从后边计算
substring()可以用来截取一个字符串,可以slice()类似
参数:
第一个:开始截取位置的索引(包括开始位置)
第二个:结束位置的素引(不包括结束位置)
不同的是这个方法不能接受负值作为参数，
如果传递了一个负值,则默认使用0
而且他还自动调整参数的位置，如果第二个参数小于第一个，则自动交换
substr()用来截取字符串
参数:
截取开始位置的索引
截取的长度
split()可以将一个字符串拆分为一个数组
参数:
需要一个字符串作为参数,将会根据该字符串去拆分数组
toUpperCase()将一个字符串转换为大写并返回
toLowerCase()将一个字符串转换为小写并返回
search() 可以搜索字符串中是否含有指定内容
如果搜索到指定内容，则会返回第一次出现的索引
如果没有搜索到返回-1
它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串
match()
可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索
我们可以设置正则表达式为全局匹配模式,这样就会匹配到所有的内容
可以为一个正则表达式设置多个匹配模式，且顺序无所谓
match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
replace()
可以将字符串中指定内容替换为新的内容
参数:
被替换的内容，可以接受一个正则表达式作为参数
新的内容
默认只会替换第一个
*/
var str1 = "BanQ";
console.log(str1.length);//输出 4
console.log(str1.charAt(2));//输出 n
console.log(str1.charCodeAt(2));//输出 110
console.log(String.fromCharCode(110));//输出 n
console.log(str1.concat("Miko"));//输出 BanQMiko
console.log(str1.indexOf("n"));//输出 2
console.log(str1.lastIndexOf("n"));//输出 2
console.log(str1.slice(0,2));//输出 Ba
console.log(str1.substring(0,2));//输出 Ba
console.log(str1.substr(0,2));//输出 Ba
console.log(str1.split(""));//输出 B a n Q
console.log(str1.toUpperCase());//输出 BANQ
console.log(str1.toLowerCase());//输出 banq
</script>
</head>
<body>
</body>
</html>
正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script text="javascript">
/*
正则表达式：
正则表达式用于定义一些字符串的规则,
计算机可以根据正则表达式，来检查一个字符串是否符合规则
将字符串中符合规则的内容提取出来
创建正则表达式的对象
语法:
var 变量 = new RegExp("正则表达式"”,"匹配模式);
使用字面量来创建正则表达式
语法:
var 变量 = /正则表达式/匹配模式
使用字面量的方式创建更加简单
使用构造函数创建更加灵活
使用typeof检查正则对象，会返回object
在构造函数中可以传递一个匹配模式作为第二个参数
i 忽略大小写
g 全局匹配模式
方法：
test()
使用这个方法可以用来查一个字符串是否符合正则表达式的规则，
如果符合则返回true，否则返回false
使用 │ 表示或者的意思
[]里的内容也是或的关系
[ab] == a| b
[a-z]任意小写字母
[A-Z]任意大写字母
[A-z]任意字母
[^ ] 除了
量词
通过量词可以设置一个内容出现的次数
量词只对它前边的一个内容起作用
{n} 正好出现n次
{m,n} 出现m-n次
{m,} 出现m次以上
+ 至少一个,相当于{1,}
* 0个或多个,相当于{0,}
? 0个或1个,相当于{0,1}
^ 表示开头
$ 表示结尾
如果在正则表达式中同时使用^$
则要求字符串必须完全符合正则表达式
．表示任意字符
在正则表达式中使用\作为转义字符
\．表示 .
\\ 表示 \
使用构造函数时，由于它的参数是一个字符串，
而\是字符串中转义字符，如果要使用\则需要使用\\来代替
\W 除了字母、数字、_ [^A-z0-9_]
\d 任意的数字 [0-9]
\D 除了数字[^0-9]
\s 空格
\S 除了空格
\b 单词边界
\B 除了单词边界
*/
//创建正则表达式的对象
var str = "a";
var reg = new RegExp(str);
console.log(reg);//输出 "/a/"
console.log(reg.test(str));//输出 true
// 邮件的正则表达式
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
var email = "1175710161@qq.com";
console.log(emailReg.test(email));//输出 true
</script>
</head>
<body>
</body>
</html>
