这十几个函数,对于前端的开发的同学来说,非常实用,比如,如何生成一个唯一的字符串ID,如何转义HTML特殊字符。而对于想提升JS基础能力及面试能力的同学来讲,也非常有用,每一个功能考的都是你的基本功扎不扎实的问题。能学东西
01. 如何生成随机数?
我们可以使用Math.random方法来生成 一个随机字符中,比如,当我们需要生成一个唯一字符串ID的时候,这就非常适合。
代码如下:
const randomString = () => Math.random().toString(36).slice(2);
console.log(randomString()); // l37qpnvapi
console.log(randomString()); // p2osmowm0b
console.log(randomString()); // mbxjf3k8ldr
02. 如何转义HTML特殊字符?
转义HTML特殊字符有什么作用,我相信大家都知道,防XSS攻击。那如何实现这个函数呢?
代码如下:
const escape = (str) => str.replace(/[&<>"']/g, (m) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[m]))
console.log(escape('<div class="medium">Hi Medium.</div>'));
// <div class="medium">Hi Medium.</div>
03. 如何将字符串中每个单词的第一个字符大写?
正则是最厉害的处理方法
代码如下:
const uppercaseWords = (str) => str.replace(/^(.)|\s+(.)/g, (c) => c.toUpperCase())
uppercaseWords('hello world'); // 'Hello World'
04. 如何将字符串转换为驼峰命名法?
自动转成驼峰命名,这个函数该如何实现了。
代码如下:
const toCamelCase = (str) => str.trim().replace(/[-_\s]+(.)?/g, (_, c) => (c ? c.toUpperCase() :''));
console.log(toCamelCase('background-color')); // backgroundColor
toCamelCase('-webkit-scrollbar-thumb'); // WebkitScrollbarThumb
toCamelCase('_hello_world'); // HelloWorld
toCamelCase('hello_world'); // helloWorld
05. 如何删除数组中的重复值?
删除重复值,这个功能函数的实现是比较简单,但是非常实用
代码如下:
const removeDuplicates = (arr) => [...new Set(arr)]
console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]))
06. 如何展平一个数组?
有时在面试新同学的时候,我也会问这道题,其实硬写也能实现,但是使用reduce就非常赞了。
代码如下:
const flat = (arr) => arr.reduce((a, b) => (Array.isArray(b) ? [...a, ...flat(b)] : [...a, b]), [])
flat(['cat', ['lion', 'tiger']])
// 输出:['cat', 'lion', 'tiger']
07. 如何从数组中删除假值?
这个方法,教你如何过滤掉数组中的所有虚假值。
代码如下:
const removeFalsy = (arr) => arr.filter(Boolean)
removeFalsy([0, 'a string', '', NaN, true, 5, undefined, 'another string', false])
// 输出:['a string', true, 5, 'another string']
08. 如何检查数字是偶数还是奇数?
比较简单实现方式就是使用%来解决
代码如下:
const isEven = num => num % 2 === 0
isEven(2) // 输出:true
09. 如何获取两个数字之间的随机整数?
可以考虑用现成的方法来处理,比如Math.floor + Math.random
代码如下:
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
console.log(random(1, 50)) // 输出:25
random(1, 50) // 34
10. 如何获取参数的平均值?
如果一个函数的参数是多个数字,我需要得到他们的平均值。是的,使用reduce方法来解决。
代码如下:
const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4, 5); // 输出:3
11. 如何四舍五入取小数点位数?
使用Math.round来封装一个
代码如下:
const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)
console.log(round(1.005, 2)) // 输出:1.01
round(1.555, 2) // 1.56
12. 如何计算两个日期相差天数?
计算两个日期相差多少天这个功能,在特殊的场合也是非常有用的,怎么封装了。
代码如下:
const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));
console.log(diffDays(new Date("2021-11-3"), new Date("2022-2-1"))) // 输出:90
13. 如何计算一个日期是一年中的第几天?
关于日期的计算总是需要借助new Date来处理
代码如下:
const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24))
console.log(dayOfYear(new Date())) // 输出:74
14. 如何生成随机的十六进制颜色?
如果有面试官让你实现一个随机生成十六进制颜色的功能,那这样写就行了。
代码如下:
const randomColor = () => `#${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}`
console.log(randomColor()) // 输出:#9dae4f
randomColor() // #6ef10e
15. 如何将RGB颜色转换为十六进制?
这个功能的实现有一定的理解成本,不然怎么说JS的基础很重要了
代码如下:
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
console.log(rgbToHex(255, 255, 255)) // 输出:'#ffffff'
16. 如何清除所有cookie?
清除cookie是我们常用的功能,也是面试中经常会问到的一些实现的功能函数。
代码如下:
const clearCookies = () => document.cookie.split(';')
.forEach((c) => (document.cookie = c.replace(/^ +/, '')
.replace(/=.*/, `=;expires=${new Date().toUTCString()};path=/`)))
17. 如何交换两个变量?
这个问题我之前也分享过,最简单的方式就是利用解构能力
代码如下:
[foo, bar] = [bar, foo]
18. 如何封装一个暂停固定时间的功能?
使用Promise来封装,是非常容易实现的
代码如下:
const pause = (millis) => new Promise(resolve => setTimeout(resolve, millis))
const fn = async () => {
await pause(1000)
console.log('fatfish') // 1s later
}
fn()