DAY58-前端入门-javascript（五）JS常用类
JS常用类
一、Number
1、常用数字
整数：10
小数：3.14
科学计数法：1e5 | 1e-5
正负无穷：Infinity | -Infinity
2、常用进制
二进制：0b1010
八进制：012
十进制：10
十六进制：0xA
3、NaN
非数字类型，通过isNaN()进行判断
4、常用常量
//最大值：MAX_VALUE(1.7976931348623157e+308)
console.log(Number.MAX_VALUE);
//最小值：MIN_VALUE(5e-324)
console.log(Number.MIN_VALUE);
//正负无穷：NEGATIVE_INFINITY | POSITIVE_INFINITY(Infinity | -Infinity)
console.log(Number.NEGATIVE_INFINITY,Number.POSITIVE_INFINITY);
//注
console.log(999999999999998);//999999999999998
console.log(9999999999999989);//9999999999999988 数值太大会出错
console.log(3.1 + 3.2);//6.300000000000001
5、常用实例方法
toExponential(n):先科学计数，在确定精度，n为小数精度
//13.14 => 1.314e+1 =>1.31e+1
console.log(13.14.toExponential(2));
//13.15 => 1.315e+1 =>1.32e+1 默认四舍五入
console.log(13.15.toExponential(2));
//13.145 => 1.3145e+1 =>1.31e+1 五舍六入 13.145bug数字
console.log(13.145.toExponential(2));
toFixed(n):先确定精度，在普通计数，n为小数精度
//3.1 四舍五入保留一位小数
console.log(3.14.toFixed(1));
toPrecision(n):先确定精度，再计数，n为位数精度
console.log(13.14.toPrecision(1)); //1e+1 n小于整数位数时，以科学记数法
console.log(13.14.toPrecision(2)); //13 n大于等于整数位数时，以普通记数法
console.log(13.14.toPrecision(3)); //13.1
console.log(156.14.toPrecision(1)); //2e+2 四舍五入
toString(n)：转换为指定进制，n为进制
var num=10;
console.log(num.toString(2));
console.log(10..toString(2));
二、时间
1、创建并获取时间
var date = new Date();
2、时间戳
date.getTime();
3、获取时间
年：date.getFullYear()
月：date.getMonth() + 1 //月份从0开始
日：date.getDate()
星期：date.getDay()
小时：date.getHours()
分钟：date.getMinutes()
秒：date.getSeconds()
毫秒：date.getMilliseconds()
4、常见格式时间
getUTCFullYear()
getUTCDate()
getUTCHours()
案例：电子表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电子表</title>
<style>
div{
width: 120px;
height: 40px;
font:normal 22px/40px 'STSong';
margin: 50px auto;
text-align: center;
color: brown;
border:3px solid black;
border-radius: 4px;
}
</style>
</head>
<body>
<div>13:25:30</div>
</body>
<script type="text/javascript">
var div = document.querySelector('div');
function getNeedDate() {
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
return [hour,minute,second]
}
var n_date = getNeedDate();
div.innerText = n_date[0] + ':' + n_date[1] + ':' + n_date[2];
setInterval(
function () {
n_date = getNeedDate();
for (var i = 0; i < n_date.length; i++) {
n_date[i] = n_date[i] < 10?'0'+n_date[i]:n_date[i];
}
div.innerText = n_date[0] + ':' + n_date[1] + ':' + n_date[2];
},300
)
</script>
</html>
三、字符串
1、常用字符串
'string' | "string" | 'my name is "zero"' | "I'm boy" | "I \"love\" you"
2、常用属性
length：字符串长度
3、常用方法
chartAt(n)：指定索引字符，同[n]
concat(str)：将目标字符串拼接到指定字符串之后
indexOf(str)：指定字符串第一次出现的位置
lastIndexOf(str)：指定字符串最一次出现的位置
replace(re, str)：将正则匹配到的字符串替换为指定字符串
substr(n, m)：从索引n开始，截取m个字符长度(m省略代表截取到最后)
substring(n, m)：从索引n开始，截取到索引m(m省略代表截取到最后)
slice(n, m)：同substring(n, m)
split(re)：以指定正则将字符串拆分为数组
toUpperCase()：转换为大写
toLowerCase()：转换为小写
trim()：去除首尾空白字符
chartAt(n)：指定索引字符，同[n]
str = "abc123hello123GOOD123嘿嘿";
console.log(str.charAt(1));//b
console.log(str[1]);//b
concat(str)：将目标字符串拼接到指定字符串之后
var newStr = str.concat(123);
console.log(str,'\n', newStr);
/*
abc123hello123GOOD123嘿嘿
abc123hello123GOOD123嘿嘿123
*/
indexOf(str)：指定字符串第一次出现的位置
console.log(str.indexOf("123")); // 3
replace(re, str)：将正则匹配到的字符串替换为指定字符串
newStr = str.replace("hello", "world");
console.log(str, newStr);
//abc123hello123GOOD123嘿嘿 abc123world123GOOD123嘿嘿
substr(n, m)：从索引n开始，截取m个字符长度(m省略代表截取到最后)
// 索引3开始,截取3个字符长度
newStr = str.substr(3, 3);
console.log(newStr);//123
slice(n, m)：同substring(n, m)
// 索引3开始,6结束(不包含6) [3, 6)
newStr = str.slice(3, 6);
console.log(newStr);//123
split(re,n)：以指定正则将字符串拆分为数组,n可选为截取后得到的数组最大长度
var arr = str.split("123", 2);
console.log(arr);// ["abc", "hello"]
trim()：去除首尾空白字符
str = " 123 abc "
console.log(str.trim());//123 abc
四、数组
1、常见数组
[1, 2, 3] | ['1', '2', '3'] | [1, '2', true]
2、常用属性
length：数组元素个数
3、常用基础方法
var arr = [1, 2, 3]
// concat(arr)：将目标数组拼接到指定数组之后
console.log([1, 2, 3].concat(["4", "5", "6"])); // 结果是新数组
// indexOf(ele)：指定元素第一次出现的位置
// lastIndexOf(ele)：指定元素最一次出现的位置
console.log(arr.indexOf(1)); // 0
// reverse()：反转数组
console.log(arr.reverse()); // 反转的到新数组
// includes(ele, n)：从索引n开始往后，元素ele是否在数组中，做全等匹配，索引从头开始n可以省略(in只做值匹配)
arr = ["1", "2"];
console.log(1 in arr);//false
console.log(arr.includes(1, 1)); //true 只匹配数字1,从索引1开始
// fill(ele)：以指定元素填充整个数组
arr.fill(null);
console.log(arr); // 操作原数组,一般用来清空数组中的数据(不操作长度)
// slice(n, m)：从索引n开始，截取到索引m(m省略代表截取到最后)
arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1, 3)); // [1, 3)
// join(str)：以指定字符串连接成字符串
var str = arr.join("@");
console.log(str);
4、增删改方法
var arr = [1,2,3,4,5]
// 增删改操作方法: 操作的都是原数组
// push() 尾加 | unshift() 头加
// pop() 尾删 | shift() 头删
arr.push(6)//[1, 2, 3, 4, 5, 6]
console.log(arr);//由于增删改操作的时原数组，所以都是[1, 2, 3, 4, 5]
arr.unshift(0);//[0, 1, 2, 3, 4, 5, 6]
console.log(arr);//由于增删改操作的时原数组，所以都是[1, 2, 3, 4, 5]
// 一次操作一个元素
arr.pop();
arr.shift();
console.log(arr);//[1, 2, 3, 4, 5]
splice(begin, length, ...eles)：完成增删改
// begin开始索引
// length长度
// 新元素们(可以省略)
// 从头加
arr.splice(0, 0, 0);
// 从索引0前方开始操作,操作原数组0个长度,结果多了个元素0
console.log(arr);
// 0, 1, 2, 3, 4, 5
// 从尾加
arr.splice(arr.length, 0, 6);
console.log(arr);
// 0, 1, 2, 3, 4, 5, 6
// 从头删
arr.splice(0, 1) // 从索引0开始,操作原数组一位,替换的新值省略代表删除
console.log(arr);
// 1, 2, 3, 4, 5, 6
// 从尾删
arr.splice(arr.length - 1, 1)
console.log(arr);
// 1, 2, 3, 4, 5
// 替换
arr.splice(2, 1, "3", [0, 0], "3"); // 从索引2开始,用"3", [0, 0], "3"替换掉1位
console.log(arr);
// 1, 2, "3", [0, 0], "3", 4, 5
5、回调函数方法
过滤器: filter
// filter(function(value, index){ return true | false})
// 参数: 值, 索引, 所属数组
// 返回值: true | false
// 过滤器返回值: 过滤后得到的新数组
// 过滤掉不满足条件的数据
// 合为满足条件的数据
// 过滤器回调函数的执行次数 = 被过滤数组的元素个数
// 需要回调的函数
var arr = [4, 6, 2, 1, 5, 3];
var getResult = function (v, i) {
if (v < 5) {
return true;
}
}
var newArr = arr.filter(getResult);
console.log(arr);
console.log(newArr);
全部满足: every
// every(function(value, index){ return 条件表达式; })
// 参数: 值, 索引, 所属数组
// 返回值: 值得条件表达式
// 过滤器返回值: true | false
// true:所有元素都满足条件
// false:有一个不满足条件即可
var arr = [4, 6, 2, 1, 5, 3];
var res = arr.every(function(v) {
return v > 3;
});
console.log(res);
部分满足: some
//some(function(value, index){ return 条件表达式; })
var arr = [4, 6, 2, 1, 5, 3];
res = arr.some(function(v) {
return v > 3;
});
console.log(res);
累积: reduce
// reduce(function(prev,value,index){ return prev * value; })
var arr = [4, 6, 2, 1, 5, 3];
res = arr.reduce(function(prev,value,index){
return prev * value;
})
console.log(res); // 0*4*2*1*3*5
排序: sort
newArr = arr.sort(function(o, n) {
// return o > n; // 升序, 没有回调函数
return o < n; // 降序
})
console.log(newArr);
五、Math
1、常用常量
E：返回算术常量 e，即自然对数的底数（约等于2.718）
LN2：返回 2 的自然对数（约等于0.693）
LN10：返回 10 的自然对数（约等于2.302）
LOG2E：返回以 2 为底的 e 的对数（约等于 1.4426950408889634）
LOG10E：返回以 10 为底的 e 的对数（约等于0.434）
PI：返回圆周率（约等于3.14159）
2、常用方法
abs(x)：返回 x 的绝对值
ceil(x)：向上取整
floor(x)：向下取整
max(...n)：求最大值
min(...n)：求最小值
pow(x,y)：返回 x 的 y 次幂
random()：返回 0 ~ 1 之间的随机数
round(x)：四舍五入
六、正则
正则的两种写法
构造函数
var re = new RegExp('\\w');
var res = re.test("abc");
console.log(res);
字面量
re = /\w/;
res = re.test("abc");//test方法的返回时是布尔值TRUE或FALSE
console.log(res);
res = re.exec("abc");//exec方法的返回时是一个数组
console.log(res);
修饰符
i: 不区分大小写
g: 全文匹配(多匹配)
m: 多行匹配
字符串的match方法
match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。
str = "ABCABC";
re = /a/; // null => test
var arr = str.match(re);
console.log(arr);
re = /a/i; // 非多文匹配类似于exec
var arr = str.match(re);
console.log(arr);
re = /a/ig; // 所有满足结构的结果数组
var arr = str.match(re);
console.log(arr);
str = "abc123x9y8z7\n123";
re = /^\d/m;
arr = str.match(re);
console.log(arr);
