JS基本功
# 0.前言
无论是在刷算法题抑或是阅读源码时,存在相当一部分的通用性质的写法,本篇将持续记录或收集这部分的代码。
# 1.数组相关
# [ ]中都是简单对象,搜索也是简单对象
// 只推荐 includes 和 indexOf
const arr = [1, 2, 3, 4, 5, 65, 6]
let index_indexOf = arr.indexOf(65)
console.log(index_indexOf !== -1); // true
console.log(arr.includes(65)) // true
// 区别: includes 更专业,专业性体现在:
console.log([NaN].indexOf(NaN) !== -1); // false
console.log([NaN].includes(NaN)); // true
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# [ ]中存在“复杂对象”,但是搜索简单对象
const arr = [
{ name: "birch", count: 4 },
{ name: "maple", count: 5 },
{ name: "oak", count: 2 }
];
// 使用:find、findIndex、some 完成对复杂数据结构的搜索
let value = arr.find(item => item.count > 4)
let index = arr.findIndex(item => item.count > 4)
let boolean = arr.some(item => item.count > 4)
console.log(value !== undefined); // true
console.log(index !== -1); // true
console.log(boolean); // true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# []中存在“复杂对象”,且搜索“复杂对象”
// 搜索 Object
const arr = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
// 首推还是:find、findIndex、some 去遍历,这里使用some举例:
let boolean = arr.some(item => {
return shallowEqual(item, toSearch)
})
console.log(boolean); // true
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
其中,如果是浅层对象,使用 shallowEqual
对象,深层对象,使用 deepEqual
对象
function shallowEqual(object1, object2) {
const keys1 = Object.keys(object1);
const keys2 = Object.keys(object2);
if (keys1.length !== keys2.length) {
return false;
}
for (let key of keys1) {
if (object1[key] !== object2[key]) {
return false;
}
}
return true;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
在shallowEqual
的基础上,稍微改一下,就是deepEqual
function shallowEqual(object1, object2) {
const keys1 = Object.keys(object1);
const keys2 = Object.keys(object2);
if (keys1.length !== keys2.length) {
return false;
}
for (let key of keys1) {
if (!shallowEqual(object1[key],object2[key])) {
return false;
}
}
return true;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
以上,在面试中,只能得到70分,下面是
stackoverflow
给的更完整的版:var deepEqual = function (x, y) { if (x === y) { return true; } // 如果使用 typeof 去判断 x 是否为复杂对象, // 固定写法就是:1.判断是 object 2.不是 null else if ((typeof x == "object" && x != null) && (typeof y == "object" && y != null)) { if (Object.keys(x).length != Object.keys(y).length) return false; // 遍历 key 值有两种方式 for (var prop in x) { // + 多考虑了原型链 if (y.hasOwnProperty(prop)) { if (!deepEqual(x[prop], y[prop])) return false; } else return false; } return true; } else return false; }
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
# []存在数组,且搜索1维数组
// shallowEqual(数组版):使用 every + includes 的方式来保证
const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [3, 2, 1];
function shallowEqual(a, b) {
return Array.isArray(a) &&
Array.isArray(b) &&
a.length === b.length &&
a.every((val) => b.includes(val));
}
console.log(arrayEquals(a, b));// false
console.log(arrayEquals(a, c));// true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 2.对象(哈希表)相关
在Array
中有很多遍历方式,而objec
是无序的,所以第一步先解决遍历的问题
# 如果遍历key值的两种方式:
// 1. for...in 写法
for( key in obj){}
// 2. for...of 写法 + Object.keys
for( key of Object.keys(obj))
// 以上两种遍历方法不等价,1方法仍需要加上 Object.hasOwnProperty 过滤下
1
2
3
4
5
6
2
3
4
5
6
# 判断是否为复杂对象
// 1. 使用 typeof
for( typeof x === "object" && x !===null )
1
2
2
# 3.Node相关
// 读文件
import * as fs from "fs";
fs.readFileSync(path.resolve(__dirname,"test.js"))
fs.writeFielSync(path.resolve(__dirname,"test.es5.js"),es5Code) // es5Code 是待输出的代码
1
2
3
4
2
3
4
# 4.正则相关
# 筛选出符合条件的字段
模拟字段:Dev Server started at: http://localhost:3002
const addressExp: any = new RegExp("http://.*?.:.[0-9]*");
pro.stdout?.on("data", (data: any) => {
if (!data) return;
// 假设存在,则使用 data.match 提取。
if (data.indexOf("Dev Server started successfully") !== -1) {
address = data.match(addressExp)[0];
}
})
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
编辑 (opens new window)
上次更新: 2022/04/06, 15:04:00