目录
数组
数组的创建
- 使用
new
创建数组 - 直接使用数组字面量创建数组
var arr1 = new Array(1, 2, 3);
var arr2 = [];
var arr3 = [1, 'abc', true];
console.log(arr3.length); // 3
// 访问数组元素
console.log(arr3[2]); // true
console.log(arr3[3]); // undefined(超出length-1)
数组新增元素
- 修改
length
扩容数组
var arr = [123];
arr.length = 3;
console.log(arr); // [123, 空属性 × 2]
console.log(arr[1]); // undefined
var arr1 = [123, 2323, 888];
arr1.length = 2;
console.log(arr1); // [123, 2323]
console.log(arr1[2]); // undefined
- 通过索引号追加元素
var arr = [123];
arr[3] = 'test';
console.log(arr); // [123, 空属性 × 2, 'test']
console.log(arr[1]); // undefined
数组常用方法
push()
push()
: 在数组末尾添加一个或多个元素,并返回数组的新长度
var arr = [];
var len = arr.push(1, 2, 3);
console.log(len); // 3
console.log(arr); // [1, 2, 3]
pop()
pop()
: 删除数组的最后一个元素,并返回被删除的元素
var arr = [1];
console.log(arr.pop()); // 1
console.log(arr.pop()); // undefined
unshift()
unshift()
: 在数组头部添加一个或多个元素,并返回数组的新长度
var arr = [1, 2, 3];
console.log(arr.unshift('a', 'b')); // 5
console.log(arr); // ["a", "b", 1, 2, 3]
shift()
shift()
: 删除数组的第一个元素,并返回被删除的元素
var arr = [1, 2, 3];
console.log(arr.shift()); // 1
console.log(arr.shift()); // 2
forEach()
forEach()
方法需要一个函数作为参数(回调函数):
- 数组中有几个元素,就会执行该函数几次
- 每次执行时,会有3个参数传入:当前遍历的元素、当前遍历元素的索引、当前遍历的数组
var arr = ['a', 'b', 'c'];
arr.forEach(function(e, i, a) {
console.log(e, i, a);
});
// a 0 ["a", "b", "c"]
// b 1 ["a", "b", "c"]
// c 2 ["a", "b", "c"]
slice()
用来给数组切片:
- 切片后的数组会被返回
- 原数组不会被改变
var arr = ['a', 'b', 'c'];
var newArr = arr.slice(1, 2); // 左闭右开
console.log(arr); // ["a", "b", "c"]
console.log(newArr); // ["b"]
// 第二个参数可以省略
console.log(arr.slice(1)); // ["b", "c"]
splice()
用来删除数组的指定元素,并且可以往数组添加一些新元素:
- 会影响到原数组
- 被删除的元素会被返回
- 第一个参数表示删除开始的索引
- 第二个参数表示删除元素的数量,不写则表示从开始索引之后的所有元素都被删除
var arr = ['a', 'b', 'c', 'd', 'e'];
var result = arr.splice(1);
console.log(arr); // ["a"]
console.log(result); // ["b", "c", "d", "e"]
- 第三个及以后的元素,表示新添加的元素
var arr = ['a', 'b', 'c', 'd', 'e'];
var result = arr.splice(1, 3, 123, 'test', true);
console.log(arr); // ["a", 123, "test", true, "e"]
console.log(result); // ["b", "c", "d"]
concat()
用来将当前数组和一个或多个数组连接,返回新的数组:
- 不会对原数组产生影响
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var newArr = arr2.concat(arr1);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [4, 5, 6]
console.log(newArr); // [4, 5, 6, 1, 2, 3]
- 可以有多个参数,参数也可以不是数组
var arr3 = arr2.concat(arr2, 'abc', false);
console.log(arr3); // [4, 5, 6, 4, 5, 6, "abc", false]
join()
把数组的所有元素放入一个字符串,元素通过指定的字符串连接:
- 不会对原数组产生影响,产生的字符串被返回
var arr = [1, 2, 3];
var result = arr.join();
console.log(result); // 1,2,3
console.log(typeof result); // string
console.log(arr); // [1, 2, 3]
- 可以指定连接符,默认为
,
var arr = [1, 2, 3];
var result = arr.join('-=-');
console.log(result); // 1-=-2-=-3
reverse()
用来反转数组:
- 会对原数组产生影响
var arr = [1, 2, 3];
var result = arr.reverse();
console.log(arr); // [3, 2, 1]
console.log(result); // [3, 2, 1]
sort()
对数组排序:
- 会对原数组产生影响
var arr = ['ad', 'zddf', 123, 'test', false, 'fals'];
var result = arr.sort();
console.log(arr); // [123, "ad", false, "test", "zddf"]
console.log(result); // [123, "ad", false, "test", "zddf"]
- 默认按照Unicode编码进行排序,即便是纯数字的数组
var arr = [4, 6, 2, 3, 111, 123, 255];
arr.sort();
console.log(arr); // [111, 123, 2, 255, 3, 4, 6]
- 通过添加一个回调函数作为参数来解决,该回调函数有2个形参,在数组中,第一个形参的出现位置比第二个形参更靠前
- 如果回调函数返回正数,则这两个元素会交换位置
- 如果回调函数返回负数,则不交换位置
- 如果回调函数返回0,则认为这两个函数相等,也不交换位置
var arr = [4, 6, 2, 3, 111, 123, 255];
function compare(a, b) {
return a - b;
}
arr.sort(compare);
console.log(arr); // [2, 3, 4, 6, 111, 123, 255]
// 降序排序
arr.sort(function(a, b) {
return b - a;
});
console.log(arr); // [255, 123, 111, 6, 4, 3, 2]
Date对象
在JS中使用Date
类的对象来表示一个时间。
Date实例初始化
- 直接创建,为当前代码执行的时间
var date = new Date();
console.log(date); // Tue Jan 18 2022 16:11:45 GMT+0800 (CST)
- 使用字符串创建指定的时间
- 标准格式:月/日/年 时:分:秒
var date = new Date('2022/1/1');
console.log(date); // Sat Jan 01 2022 00:00:00 GMT+0800 (CST)
date = new Date('12/30/21 22:59:15')
console.log(date); // Thu Dec 30 2021 22:59:15 GMT+0800 (CST)
Date常用方法
var date = new Date('12/18/2021 22:59:15')
console.log(date); // Sat Dec 18 2021 22:59:15 GMT+0800 (CST)
getDate()
获取当前日期是第几日:
console.log(date.getDate()); // 18
getDay()
获取当前日期是星期几:
- 会返回一个0-6的值,1-6对应星期一到星期六,0对应星期日
console.log(date.getDay()); // 6
var nextDay = new Date('12/19/2021');
console.log(nextDay); // Sun Dec 19 2021 00:00:00 GMT+0800 (CST)
console.log(nextDay.getDay()); // 0
getMonth()
获取当前日期的月份:
- 返回0-11对应1月至12月
console.log(date.getMonth()); // 返回11表示12月
getFullYear()等方法
-
getFullYear()
方法用来获取当前日期的年份:
console.log(date.getFullYear()); // 2021
-
getHours()
方法用来获取当前日期的小时信息:
console.log(date.getHours()); // 22
-
getMinutes()
方法用来获取当前日期的分钟信息:
console.log(date.getMinutes()); // 59
-
getSeconds()
方法用来获取当前日期的秒数信息:
console.log(date.getSeconds()); // 15
-
getMilliseconds()
方法用来获取当前日期的毫秒信息:
console.log(date.getMilliseconds()); // 0
getTime()与now()获取时间戳
getTime()
方法获取当前日期的时间戳(自格林威治标准时间1970年1月1日 00:00:00 到当前日期所花费的毫秒数):
- 1秒 = 1000毫秒
- 计算机底层使用时间戳保存时间
console.log(date.getTime()); // 1639839555000
var test = new Date('1/1/1970 0:0:0'); // 北京时间
console.log(test); // Thu Jan 01 1970 00:00:00 GMT+0800 (CST)
console.log(test.getTime()); // -28800000 北京时间比格林威治时间早8小时
now()
方法获取程序运行时的时间戳:
var nowDate = Date.now();
console.log(nowDate); // 1642574363227
console.log(new Date(nowDate)); // Wed Jan 19 2022 14:39:23 GMT+0800 (CST)
Math对象
Math
和其他的类不同,不需要实例化,直接使用Math
封装好的数学运算属性和方法即可。
Math常用属性
- 自然常数\(e\)
- 圆周率\(\pi\)
console.log(Math.E); // 2.718281828459045
console.log(Math.PI); // 3.141592653589793
- 2的自然对数 \(\ln{2}\)
- 10的自然对数 \(\ln{10}\)
- 以2为底\(e\)的对数 \(\log_{2}{e}\)
- 以10为底\(e\)的对数 \(\log_{10}{e}\)
console.log(Math.LN2); // 0.6931471805599453
console.log(Math.LN10); // 2.302585092994046
console.log(Math.LOG2E); // 1.4426950408889634
console.log(Math.LOG10E); // 0.4342944819032518
console.log(1 / Math.LN2); // 1.4426950408889634
console.log(1 / Math.LN10); // 0.4342944819032518
- 2的平方根 \(\sqrt{2}\)
- \(\dfrac{1}{2}\)的平方根,即\(\sqrt{2}\)的倒数\(\dfrac{\sqrt{2}}{2}\)
console.log(Math.SQRT2); // 1.4142135623730951
console.log(Math.SQRT1_2); // 0.7071067811865476
Math常用方法
-
max(x, y)
返回x
与y
之间的较大值 -
min(x, y)
返回x
与y
之间的较小值
console.log(Math.max(123, 456)); // 456
console.log(Math.min(123, 456)); // 123
-
random()
返回一个0~1之间的随机数
console.log(Math.random()); // 0.3478975537731721
-
abs(x)
用来计算绝对值,即 \(|x|\)
var a = 123;
var b = -234;
console.log(Math.abs(a)); // 123
console.log(Math.abs(b)); // 234
-
exp(x)
计算e
的指数,即 \(e^{x}\) -
log(x)
计算自然对数,即 \(\ln{x}\)
console.log(Math.exp(1)); // 2.718281828459045
console.log(Math.log(Math.E)); // 1
console.log(Math.log(2)); // 0.6931471805599453
-
sqrt(x)
计算平方根,即 \(\sqrt{x}\) -
pow(x, y)
返回x
的y
次幂,即 \(x^{y}\)
console.log(Math.sqrt(2)); // 1.4142135623730951
console.log(Math.pow(2, 5)); // 32
-
round(x)
计算x
四舍五入最接近的整数 -
floor(x)
对x
向下取整 -
ceil(x)
对x
向上取整
var x = 11.45;
console.log(Math.round(x)); // 11
console.log(Math.floor(x)); // 11
console.log(Math.ceil(x)); // 12
x = -14.5;
console.log(Math.round(x)); // -14
console.log(Math.floor(x)); // -15
console.log(Math.ceil(x)); // -14
-
sin(x)
计算正弦值,即 \(\sin{x}\) -
asin(x)
计算反正弦值,即 \(\arcsin{x}\) -
cos(x)
计算余弦值,即 \(\cos{x}\) -
acos(x)
计算反余弦值,即 \(\arccos{x}\) -
tan(x)
计算正切值,即 \(\tan{x}\) -
atan(x)
以\(-\dfrac{\pi}{2}\)与\(\dfrac{\pi}{2}\)之间的弧度返回反正切值,即 \(\arctan{x}\)
console.log(Math.sin(Math.PI / 6)); // 0.49999999999999994
console.log(Math.asin(1)); // 1.5707963267948966
console.log(Math.cos(Math.PI / 3)); // 0.5000000000000001
console.log(Math.acos(0)); // 1.5707963267948966
console.log(Math.tan(Math.PI / 4)); // 0.9999999999999999
console.log(Math.atan(1)); // 0.7853981633974483
包装类
将基础数据类型转换为对象。
console.log(typeof 123); // number
var num = new Number(123);
console.log(typeof num); // object
console.log(typeof 'hello!'); // string
var str = new String('hello!');
console.log(typeof str); // object
console.log(typeof true); // boolean
var bool = new Boolean(true);
console.log(typeof bool); // object
- 可以给包装类对象直接添加属性:
var num = new Number(123);
num.name = 'one two three';
console.log(num.name); // one two three
- 由于是对象,在比较时主要注意:
var num1 = new Number(123);
var num2 = new Number(123);
console.log(num1 == num2); // false
console.log(num1 == 123); // true
console.log(num1 === 123); // false
var bool = new Boolean(true);
console.log(bool == true); // true
console.log(bool === true); // false
// 由于传进去的参数是对象,所以判断为true
function test(b) {
if(b) {
console.log('Hello!');
}
}
var bool = new Boolean(false);
test(bool); // Hello!
- 基本数据类型不能被添加方法和属性,当调用基本数据类型的属性和方法时,浏览器会临时将其转为包装类对象,再调用对象的属性和方法:
var num = 123;
num = num.toString();
console.log(num); // 123
console.log(typeof num); // string
/* num会被临时转化为包装类对象,被添加hello属性后,被销毁 */
num.hello = 'hello!';
/* 此时num会再次被临时转化为包装类对象,之前的临时对象已被销毁 */
console.log(num.hello); // undefined
console.log(typeof num); // string
String类
String
是最常用的包装类。
- 字符串在底层是以字符串数组的形式保存的,可以用索引操作
var str = 'Hello world.';
console.log(str[6]); // w
console.log(str.length); // 12
-
charAt()
用来根据索引获取字符串指定位置的字符
var ch = str.charAt(6);
console.log(ch); // w
console.log(typeof ch); // string
-
charCodeAt()
用来根据索引获取字符串指定位置的字符的Unicode编码
var code = str.charCodeAt(6);
console.log(code); // 119
console.log(typeof code); // number
var hello = '你好!';
console.log(hello.charCodeAt(0)); // 20320
-
fromCharCode()
根据字符编码获取字符
var ch = String.fromCharCode(20320);
console.log(ch); // 你
-
concat()
用来连接两个或多个字符串,效果和+
一样
var str = '123';
var result = str.concat('abc', '456');
console.log(str); // 123
console.log(result); // 123abc456
-
indexOf()
检索字符串是否有指定内容,没找到返回-1
var str = 'Hello world!!!';
console.log(str.indexOf('你好')); // -1
console.log(str.indexOf('wor')); // 6
/* 第二个参数指定搜索开始的索引值 */
str = 'Hello world!Hello world!';
console.log(str.indexOf('wor', 10)); // 18
-
lastIndexOf()
与indexOf()
类似,但是是从后往前搜索
var str = 'Hello world!Hello world!';
console.log(str.lastIndexOf('wor')); // 18
console.log(str.lastIndexOf('wor', 10)); // 6
-
slice()
字符串切片,可以使用负数,表示倒数第几个字符
var str = 'Hello world!Hello world!';
var subStr = str.slice(0, 5);
console.log(subStr); // Hello
subStr = str.slice(0, -5);
console.log(subStr); // Hello world!Hello w
-
substring()
截取子串,功能和slice()
类似,不同的是:- 不接收负值,如果有参数为负值,则被修改为
0
- 如果第一个参数的值大于第二个参数,则自动交换
- 不接收负值,如果有参数为负值,则被修改为
var str = 'Hello world!Hello world!';
var subStr1 = str.substring(0, 4);
var subStr2 = str.substring(4, -1);
console.log(subStr1); // Hell
console.log(subStr2); // Hell
-
substr()
截取子串,第一个参数表示开始索引,第二个参数可选,表示截取字符的个数,需要注意:- ECMAscript 没有对该方法进行标准化,因此反对使用它
var str = 'Hello world!Hello world!';
console.log(str.substr(15)); // lo world!
console.log(str.substr(15, 2)); // lo
-
split()
根据指定分隔符将字符串拆分为一个数组
var str = '123 456 789 1111 234234';
var result = str.split(' ');
console.log(Array.isArray(result)); // true
console.log(result); // ["123", "456", "", "789", "", "1111", "", "", "234234"]
/* 如果没有参数,则字符串不会被拆分; 如果参数为空串,则每个字符都被拆分 */
console.log('abdef'.split()); // ["abdef"]
console.log('abdef'.split('')); // ["a", "b", "d", "e", "f"]
-
toLowerCase()
将字符串转为小写,toUpperCase()
将字符串转为大写
var str = 'HelloWorld';
console.log(str.toLowerCase()); // helloworld
console.log(str.toUpperCase()); // HELLOWORLD
正则表达式
String
的一些其他常用方法与正则表达式相关。
- 正则表达式初始化
-
i
表示忽略大小写
-
/* var reg = new RegExp('正则表达式', '匹配模式') */
var reg = new RegExp('ab+c', 'i');
console.log(reg); // /ab+c/i
console.log(typeof reg); // object
-
test()
方法用来检查一个字符串是否符合当前正则表达式的标准
console.log(reg.test('abbbbbcd')); // true
正则语法
使用字面量直接创建正则表达式
/* var reg = /正则表达式/匹配模式; */
var reg = /a/i; // 匹配含有字母a的表达式,忽略大小写
console.log(reg.test('ABC')); // true
或
使用|
表示或:
var reg = /a|b/; // 字符串包含a或b
console.log(reg.test('cccac')); // true
console.log(reg.test('bbbbbb')); // true
使用方括号也是或的关系,/a|b|c/
等价于/[abc]/
:
var reg = /[abc]/; // 字符串包含a或b或c
console.log(reg.test('eeeggggewwe')); // false
console.log(reg.test('test c')); // true
如果有多个相邻的字母,可以简化表达:
/*
[A-Z]: 任意大写字母
[A-z]: 任意字母
[0-9]: 任意数字
*/
var reg = /[a-z]/; // 字符串包含小写字母
console.log(reg.test('1238789')); // false
console.log(reg.test('991237f')); // true
/*
查找是否含有abc或adc或afc
与 /a[bdf]c/ 等价
*/
var reg1 = /abc|adc|afc/;
console.log(reg1.test('sdfjiabc123')); // true
console.log(reg1.test('dafc')); // true
表达式/[^abc]/
表示查找不在方括号里的字符:
var reg = /[^a-z]/; // 字符串包含除了小写字母外的其他字符
console.log(reg.test('asdiowebn')); // false
console.log(reg.test('123123a123')); // true
console.log(reg.test('asCXdiowebn')); // true
量词
通过量词设置一个内容出现的次数。
-
{n}
表示出现n次 -
{m,n}
表示出现m~n次 -
{m,}
表示出现m次及以上
var reg = /ab{2}c/;
console.log(reg.test('abbbc')); // false
console.log(reg.test('abbc')); // true
reg = /ab{2,3}c/;
console.log(reg.test('abbbc')); // true
console.log(reg.test('abbc')); // true
var reg = /ab{2,}c/;
console.log(reg.test('abbbbbc')); // true
console.log(reg.test('abbbc')); // true
console.log(reg.test('abbc')); // true
- 只对前面一个内容起作用,例如
/ab{3}c/
等价于/abbbc/
var reg = /ab{3}c/;
console.log(reg.test('abbc')); // false
console.log(reg.test('abbbc')); // true
console.log(reg.test('aabbbcc')); // true
- 使用小括号,来使得两次对多个内容起作用,例如
/(ab){2}c/
等价于/ababc/
var reg = /(ab){2}c/;
console.log(reg.test('abbc')); // false
console.log(reg.test('abababcab')); // true
- 以下3个量词表达形式接近,注意区分:
量词 | 描述 |
---|---|
n+ |
匹配包含至少一个的字符串n ,等价于n{1,}
|
n* |
匹配包含零个或以上的的字符串n ,等价于n{0,}
|
n? |
匹配包含零个或一个的字符串n ,等价于n{0,1}
|
var reg = /ab+c/;
console.log(reg.test('--ac--')); // false
console.log(reg.test('--abc--')); // true
console.log(reg.test('--abbbc--')); // true
reg = /ab*c/;
console.log(reg.test('--ac--')); // true
console.log(reg.test('--abc--')); // true
console.log(reg.test('--abbbc--')); // true
reg = /ab?c/;
console.log(reg.test('--ac--')); // true
console.log(reg.test('--abc--')); // true
console.log(reg.test('--abbbc--')); // false
- 与开头结尾有关的量词:
量词 | 描述 |
---|---|
^a |
匹配以a 开头的字符串 |
a$ |
匹配以a 结尾的字符串 |
/* 匹配以2020开头, .cn结尾的邮箱 */
var reg = /^(2020)[0-9]+@[a-z.]+(.cn)$/;
console.log(reg.test('2020@abc.edu.cn')); // false
console.log(reg.test('2020123@abc.edu.cn')); // true
console.log(reg.test('202000@test.cn')); // true
/* 以ab开头或结尾 */
reg = /^(ab)|(ab)$/;
console.log(reg.test('abc')); // true
console.log(reg.test('qweab')); // true
console.log(reg.test('baabb')); // false
/* 匹配合法手机号 */
var reg = /^1[3-9][0-9]{9}$/;
console.log(reg.test('13123123123')); // true
console.log(reg.test('13123123123a')); // false
console.log(reg.test('13123')); // false
-
.
用来匹配任意一个字符,出了换行符和行结束符
var reg = /a.c/;
console.log(reg.test('11abcd22')); // true
console.log(reg.test('a1c')); // true
console.log(reg.test('a.c')); // true
console.log(reg.test('ac')); // false
- 如果要匹配
.
,需要转义字符
var reg = /a\.c/;
console.log(reg.test('a1c')); // false
console.log(reg.test('a.c')); // true
console.log(reg.test('abc')); // false
元字符
元字符 | 描述 |
---|---|
\w |
查找单词字符,匹配任意字母、数字以及下划线,等价于[A-z0-9_]
|
\W |
查找非单词字符,等价于[^A-z0-9_]
|
\d |
查找数字,等价于[0-9]
|
\D |
查找非数字,等价于[^0-9]
|
\s |
查找空格字符 |
\S |
查找非空格字符 |
\b |
匹配单词边界 |
\B |
匹配非单词边界 |
- 去除字符串中的空格
/* 去除字符串中所有空格 */
var str = ' hello test space !!! ';
str = str.replace(/\s/g, ''); // 使用全局匹配模式, 替换所有空格, 否则只对第一个起效
console.log(str); // hellotestspace!!!
/*
仅去除字符串开头和结尾的空格, 等价于trim()方法
不能使用/^\s*$/, 否则只会匹配全是空格的字符串
*/
str = ' hello test space !!! ';
// str = str.trim();
str = str.replace(/^\s*|\s*$/g, ''); // 不能使用/^\s*$/,
console.log(str); // hello test space !!!
- 检查字符串是否含有单词
var reg = /child/;
console.log(reg.test('weoi hello children!')); // true
/* 查找单词, 可以是被除了字母、数字、下划线的任意其他字符分隔 */
reg = /\bchild\b/;
console.log(reg.test('weoi hello children!')); // false
console.log(reg.test('weoi hello child')); // true
console.log(reg.test('weoi hello##child$')); // true
console.log(reg.test('weoi hello_child$')); // false
支持正则表达式的String方法
split()
使用正则表达式作为分隔符:
var str = '1ab5sd888sasd00a';
var result = str.split(/[0-9]/); // 以数字作为分隔符
console.log(result); // ["", "ab", "sd", "", "", "sasd", "", "a"]
search()
搜索字符串中是否含有指定内容,如果有,返回第一次出现的索引,否则返回-1
:
- 只会找到第一个符合要求的字符串,即使设置全局匹配也没用
var str = 'abc hello adc world afc hello';
console.log(str.search('hello')); // 4
console.log(str.search('abcd')); // -1
console.log(str.search(/a[bdf]c/)); // 0
match()
根据正则表达式,从一个字符串中将符合条件的内容提取出来,返回一个数组。
- 默认情况下,
match()
方法只会找第一个符合要求的字符串:
var str = 'abc hello adc world AFC hello';
var result = str.match(/a[bdf]c/);
console.log(result); // ["abc"]
console.log(Array.isArray(result)); // true
- 可以将正则表达式设置为全局模式
var str = 'abc hello adc world AFC hello';
var result = str.match(/a[bdf]c/g);
console.log(result); // ["abc", "adc"]
/* 可以同时设置多种匹配模式, 顺序无影响 */
console.log(str.match(/a[bdf]c/ig)); // ["abc", "adc", "AFC"]
replace()
将字符串的指定内容替换为新的内容。
- 默认情况下,
replace()
方法只会找第一个符合要求的字符串:
var str = 'abc hello adc world AFC hello';
var result = str.replace('hello', '1');
console.log(result); // abc 1 adc world AFC hello
- 使用全局模式匹配所有字符串:
var str = 'abc hello adc world AFC hello';
var result = str.replace(/hello/g, '1');
console.log(result); // abc 1 adc world AFC 1