JS 6个实用小知识(第四更)

222 阅读2分钟

「这是我参与11月更文挑战的第5天,活动详情查看:2021最后一次更文挑战

前言

代码写出来是给人看的,只是恰好电脑可以运行~让我们一起努力!

正文

数组排序

sort排序相信大家应该都清楚了吧,比方 Array<number>.sort()

那么关于Array<ObjectType>的自定义排序呢?

数据如果是嵌套的对象结构,那么我们也可以用sort来进行排序,例如:

const arr = [
    {
        age: 20
    },
    {
        age: 19
    },
    {
        age: 18
    }
]

// 你可以复制试试哦~
console.log(arr.sort((x, y) => x.age - y.age))

用对象的特点来代替if else以及switch

大家直接来看代码吧,这样写。是否能让逻辑更清晰一点呢?

const fun = (funName = 'default') => {
  return({
        funA: () => {console.log('funA');},
        funB: () => {console.log('funB');},
        funC: () => {console.log('funC');},
        default: () => {console.log('fun Default');}
    }[funName])()
};

fun()

用!== 代替 !=

== 操作符 或者是 != 操作符大多数情况下会自动转换数据类型并进行判断比较。但 === 和 !== 不会,它们会同时比较值和数据类型, 避免了多余的转换和判断,这样也使得它们要比 == 和 != 的运行速度更快。

多条件分割字符串

前几天遇到一个需求,需要将一段英语中包含 敏感词汇 的单词标红,咋一眼看上去好像很简单我们只需要repalce替换就好了, 事实难道真的是这样么?

比方:(替换这句话中的单词 a, 而不是所有a)

const str = 'This is a apple!'
const newStr = str.replace(/a/g, '<font color="red">$1</font>')
console.log(newStr) // This is <font color="red">$1</font> <font color="red">$1</font>pple!

这样明显是不符合我们的要求的,那么我们有没有好点的方法呢?答案是有的,请往下看:

const str = 'This is a apple!'

// 先对数据进行占位操作,方便后面的操作
const newStrBefore = str.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘',。、\s*]/g, "__cut__$&")
console.log(newStrBefore) // This__cut__ is__cut__ a__cut__ apple__cut__!

const newStr = newStrBefore.replace(/a__cut__/g, '<font color="red">a</font>').replace(/__cut__/g, '')
console.log(newStr) // This is <font color="red">a</font> apple!

用Object.prototype.toString.call 代替 typeOf判断类型

typeOf 能否准确的判断类型呢?答案是否定的,例如:

console.log(typeof {a: 1}) // object
console.log(typeof [1,2]) // object

因此我们需要用另外一个去做判断:

console.log(Object.prototype.toString.call({a: 1})) // [object object]
console.log(Object.prototype.toString.call([1,2,3])) // [object Array]

每次都写这么长,感觉有点麻烦,有么有简单点的呢?当然有了:

const realTypeof = context => {
  return Object.prototype.toString.call(context).match(/(\w+)\]$/)[1].toLowerCase();
}

console.log(realTypeof({a: 1})) // object
console.log(realTypeof([1,2,3])) // array

优化快速交换变量(不需要第三者)

今天学到一个快速交换变量的位运算方式(只适用于number类型),分享给大家:

let a = 123
let b = 321
a = a ^ b
b = a ^ b
a = a ^ b
console.log(a) // 321
console.log(b) // 123

结语:

大家都学会了么?让我们一起期待下一次的更新~