js 随笔记录
获取当前日期的前后日期
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
export function getAfterDateStr(i = 0) {
let date = new Date();
const curDateAfter = date.setDate(date.getDate() + i);
date = new Date(curDateAfter);
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
return `${year}-${(month < 10 ? '0' + (month) : month)}-${(day < 10 ? '0' + day : day)}`;
}
|
js 中去除字符串中所有HTML标签
适用场景：对于获取了一大堆字符串又不想要里面的 html 标签
1
2
3
4
5
6
7
| const chars = '<p align="center"><br></p><p align="center"></p><p align="center"></p><p><b>产品特点</b></p><p>主要用于基坑内支撑，采矿支柱及其他支撑设备的内力监测。</p><p><b> </b></p><p><b>技术参数</b></p><table border="1" cellspacing="0" cellpadding="0" align="left" width="423"><tbody><tr><td width="168">'
const detail = chars.replace(/<[^>]+>/g,"").replace(/ /ig,"").substring(0, 55);
console.log(detail);
|
过滤掉数组里的重复值
ES6 新特性 Set，不过它并不能很好处理非基本类型的数组，以下只针对基本数据类型
1
2
3
4
5
6
7
8
9
| const chars = [
'AAA'
'BBB'
'AAA'
'CCC'
'DDD'
]
const filter = Array.form(new Set(chars));
const filter2 = [...new Set(chars)]
|
箭头函数与普通函数对比
1
2
3
4
5
| return this.allLinesXY.filter((item) => item.itemIndex === 0);
return this.allLinesXY.filter(function test(item) {
return item.itemIndex === 0;
});
|
ES6 剩余参数学习记录
剩余参数将多个元素合并成一个数组
应用场景一：假设我们有这么一组数据，将第一个值赋值给班主任变量，第二个值赋值给班长变量，剩下的归为学生这时我们就可以使用剩余参数...
1
2
3
4
5
6
| const list = ['班主任','班长','学生1','学生2','学生3','学生4'];
const [classTeacher, Monitor, students] = list;
console.log(classTeacher, Monitor, students);
const [classTeacher, Monitor, ...students] = list;
console.log(classTeacher, Monitor, students);
|
应用场景二：将传入的多个数字进行排序（因为传入的参数个数是不确定的，所以剩余参数就派上用场了）
1
2
3
4
5
6
7
8
9
10
|
function sortNums(...nums){
if(nums.length === 0) {
return []
}else{
return nums.sort((a,b) => a - b )
}
}
console.log(sortNums(1,2,10))
|
扩展参数（将一个数组打散）
应用场景一：将班主任、班长、学生数组合并成一个数组
1
2
3
4
5
| const classTeacher = '班主任'
const monitor = '班长'
const students = ['学生1','学生2','学生3','学生4']
const team = [boss,monitor,...students]
console.log(team)
|
应用场景二：将两个数组合并为一个数组
1
2
3
4
5
6
7
| const food = ["香辣鸡腿堡", "墨西哥鸡肉卷", "香辣烤翅"]
const drink = ["百事可乐", "橙汁"]
const kfc = [...food, ...drink]
console.log(kfc)
|
还可以在新生成的数组中添加数据：
1
2
| const kfc = [...food,"圣代", "吗媞娜", ...drink]
console.log(kfc)
|
const 声明
const与let的行为一样，区别的是：使用const声明的时候必须同时初始化变量，且不能修改定以后的变量值，否则报错
但是const声明限制只适用于它指向的变量引用。如果const声明的变量是对象，改变他内部的属性是不会违反const的限制。
1
2
3
4
5
6
7
8
9
10
11
12
13
| const phone = 'IPhone 12';
phone = 'IPhone 13'
console.log(phone)
const obj = {
name: '张小飞',
age:22
}
obj.name = '张飞';
console.log(obj)
|
JS基础类型和引用类型
JS的数据类型分为基础类型和引用类型
区别：
ES5中的基础类型包括：number、string、null、undefined、boolean。ES6新增了一种基础类型symbol,基础类型的存储是存放在栈中，原因是基础类型存储的空间很小，存放在栈中方便查找，且不易于改变
1
2
3
4
| const a = 10;
let b = a;
b = 20;
console.log(a);
|
引用类型使之多个值构成的对象，也就是对象类型比如：Object、Array、Function、Data等，JS的引用数据类型是存储在堆中，也就是说存储的变量处的值是一个指针（point），指向存储对象的内存地址。存在堆中的原因是：引用的值的大小会改变，所以不能放在栈中，否则会降低变量查询的速度
1
2
3
4
| const obj1 = new Object();
const obj2 = obj1;
obj2.name = "我有名字了";
console.log(obj1.name);
|
类型推断
判断一个变量的类型是什么类型的时候可以通过typeof判断
但是typeof对引用类型是没有作用的，当我们想知道一个对象实例是什么对象类型时，可以通过instanceof来判断
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| var name = '张三'
var price = 222
console.log(typeof name)
console.log(typeof price)
class Student{
constructor(name,age) {
this.name = name;
this.age = age
}
}
class Animal {
constructor(name,age) {
this.name = name;
this.age = age
}
}
const A = new Student('菲菲',22)
const B = new Animal('大黄，2')
console.log(A instanceof Animal)
console.log(B instanceof Animal)
|
字符串截取
保留小数点后六位
第一种：
1
2
3
4
5
6
7
8
9
10
11
12
| const str = "117.19828632156754,39.12896448609261;117.19754514351357,39.12933467928258;";
console.log('第一种：', jiequ(str));
function jiequ(str) {
const list = str.split(/[,;]/);
list.pop();
for (let i = 0; i < list.length; i++) {
const index = list[i].indexOf('.');
list[i] = list[i].substr(0,index + 7);
}
return list
},
|
第二种：
此方法会将 Number 进行四舍五入
1
2
3
4
5
6
7
8
| const str = "117.19828632156754,39.12896448609261;117.19754514351357,39.12933467928258;";
console.log('第二种：', jiequ2(str));
function jiequ2(str) {
const list = str.split(/[,;]/)
list.pop();
return list.map((v) => (v * 1).toFixed(6))
},
|
一维数组转二维数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
function arrTrans(num, arr) {
const newArr = [];
while(arr.length > 0) {
newArr.push(arr.splice(0, num));
}
return newArr;
}
const str = '117.218964,31.842125,117.212655,31.841815,117.208621,31.842726,117.207677,31.843911';
const arr = JSON.parse(JSON.stringify(str.split(',')).replaceAll("\"", ""));
console.log('arrTrans:',arrTrans(2, arr));
|
例子
求数组最大值
apply() 则是参数数组（或者类数组）—— 尽管如此，在这些参数传递给调用函数时，仍然是以参数列表的形式传递的（这一点很重要）。
1
2
3
4
5
6
| const arr = [1, 2, 3, 4, 5];
Math.max.apply(null, arr);
const arr2 = [1, 3, 2];
Math.max(...arr2);
|
借用其他object里的方法
在javascript OOP中，我们经常会这样定义：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
function cat() {
}
cat.prototype = {
food: 'fish',
say: function() {
console.log("I love "+this.food);
}
}
var blackCat = new cat;
blackCat.say();
class cat {
constructor(food){
this.food = food;
}
say() {
return `I love ${this.food}`;
}
}
const blackCat = new cat ("fish");
console.log(blackCat.say());
const whiteDog = {food: "bone"};
console.log(blackCat.say.call(whiteDog));
|
但是如果我们有一个对象 whiteDog = {food:"bone"}，我们不想对它重新定义 say 方法，那么我们可以通过 call() 或 apply() 用 blackCat的 say() 方法：blackCat.say.call(whiteDog)；
所以，可以看出 call() 和 apply() 是为了动态改变 this 而出现的，当一个 object 没有某个方法，但是其他的有，我们可以借助 call() 或apply() 用其它对象的方法来操作。
如何在多个分隔符上分割字符串
假设我们要在分隔符上分割字符串，第一想到的就是使用 split 方法，split 可以同时拆分多个分隔符, 使用正则表达式就可以实现：
1
2
3
4
5
|
const list = "apples,bananas;cherries"
const fruits = list.split(/[,;]/)
console.log(fruits);
|
以YYYY-MM-DD的方式，输出当天的日期
1
2
3
4
5
6
7
| const d = new Date();
const year = d.getFullYear();
let month = d.getMonth() + 1;
month = month < 10 ? `0${month}` : month;
let day = d.getDate();
day = day < 10 ? `0${day}` : day;
console.log(`${year}-${month}-${day}`);
|
未完！
结语
我并不怕死，但若是受伤流血，变成残废，我可不要
