写代码的一些收获和思考
switch case如何匹配多个条件
有时候,我们使用switch case
时,可能有两个或者多个条件执行的内容相同,这个时候就会想少写几遍,例如
function theTest(val: number) {
let answer = "";
switch( val ) {
case 1: case 2: case 3:
answer = "Low";
break;
case 4: case 5: case 6:
answer = "Mid";
break;
case 7: case 8: case 9:
answer = "High";
break;
default:
answer = "Massive or Tiny?";
}
return answer;
}
二维数组创建的疑惑
js
或者ts
创建一个二维数组有很多方法,相信很多刷leetcode的伙伴都遇到过,可是我最近碰到了一些令人烦恼的问题。
在 最长重复子数组中,我尝试用动态规划解决这个问题,dp数组需要初始化,写的代码类似于
const arr1 = new Array(3).fill(new Array(4).fill(0))
可是后面测试的时候,我傻了眼,只要是某个数据修改了,最后返回值就对不上。很奇怪,在 ts playground 测试的时候才发现了问题所在
const arr1 = new Array(3).fill(new Array(4).fill(0))
const arr2 = Array(3).fill(null).map(item => Array(4).fill(0))
arr1[0][2] = 5
arr2[0][2] = 6
console.log(arr1, arr2)
输出结果是:
前两行log的内容是两个数组初始化的值,第三行是修改后的值,问题就在于 Array.prototype.fill() - JavaScript | MDN (mozilla.org) 上面,感兴趣的同学可点击去看看这个api,其中有这样一个测试用例
// 一个简单的对象,被数组的每个空槽所引用
const arr = Array(3).fill({}); // [{}, {}, {}]
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
直接fill引用类型的数据,会导致一处修改,多处变动的问题。解决方式也很简单,可使用map或者Array.from,例如
const arr = Array.from(new Array(m), () => Array(n).fill(0))
正则表达式
正则表达式这个源自于我的一个需求,我需要高亮一些数据,但是后端返回了整体内容和需要高亮的数组,我需要自行切片,然后设置高亮的颜色,举个例子,我想把vue3替换为Angular
数据正常替换了,可是如果我是从后端接收的数据,直接这样替换就会失败,比如
解决的方式是声明一个 (RegExp(正则表达式) - JavaScript | MDN (mozilla.org)
数组随机抽取固定数量的不重复数据
关于这个问题,我最先想到的思路是范围内随机生成数字,然后数组进行删除操作,重复这一动作,直到达到获取数量,返回抽取的内容
function randomSelect<T>(arr: T[], n: number): T[]{
const res: T[] = []
while(res.length < n){
const index = Math.floor(Math.random() * arr.length)
res.push(arr[index])
arr = arr.filter((_item,i) => i !== index)
}
return res
}
后面被导师review代码之后,指出这个代码效率很低,而且会修改原数组,除非刚开始进行了深拷贝,不过数据量比较小可能问题不太大,如果数据量达到了上万条,进行一次深拷贝花费的时间就不能轻视了,尤其是数据还是那种复杂对象。导师给了新的思路,通过Set
解决这个问题,随机生成数字,set没有就添加,直至达到要求输出的数量。
function randomSelect<T>(arr: T[], n: number): T[]{
const set = new Set<number>()
while(n !== set.size){
const num = Math.floor(Math.random() * arr.length)
if(!set.has(num)){
set.add(num)
}
}
return arr.filter((_item,index) => set.has(index))
}
Event Stream
这个是最近写需求的时候发现的内容,返回值的content-type
为text/event-stream
这就让我感觉有点摸不着头脑了,本身这个后端接口可一次查询多个相关数据,但是写angular的时候,我post请求正常传值却控制台报错
去网上查了资料才知道,这时候要修改返回值的类型了(一般为string
)
感兴趣的同学可以去看下 这篇文章
转载自:https://juejin.cn/post/7218379300504420389