JS单行代码
生成数组
生成一个0-99的数组
const createArr = (n) => Array.from(new Array(n), (v, i) => i)
const arr = createArr(100) // 0 - 99 数组
const createArr = (n) => new Array(n).fill(0).map((v, i) => i)
createArr(100) // 0 - 99数组
打乱数组
const randomSort = arrList => arrList.sort(()=>Math.random() - 0.5)
randomSort([0,1,2,3,4,5,6,7,8,9,10]) // 随机排列结果
数组简单数据去重
const removeDuplicates = arrList => [...new Set(arrList)]
removeDuplicates([1,1,45,6,7,3,3,4,7])
数组唯一值去重
const arrList = [
{ id: 1, name: '秦始皇' },
{ id: 2, name: '汉武帝' },
{ id: 1, name: '秦始皇' },
{ id: 3, name: '汉高祖' },
];
const duplicateById = (list) => [
...list.reduce((prev, cur) => prev.set(cur.id, cur), new Map()).values(),
];
const arr = duplicateById(arrList);
console.log(arr, 'arr---');
逐步解释代码的实现:
- list.reduce((prev, cur) => prev.set(cur.id, cur), new Map()):使用reduce方法对输入列表进行遍历,并利用Map来存储去重后的结果。在reduce的回调函数中,我们使用prev.set(cur.id, cur)来将cur对象按照其id值存储在Map中,prev是累积的Map对象。
- new Map().values():在reduce结束后,我们得到了一个Map对象。通过调用values()方法,我们将Map中的值(即去重后的对象)转换为一个Iterator对象。
- […Iterator]:最后,使用扩展运算符[…]将Iterator对象转换为一个数组,从而得到最终的去重列表。
多数组取交集
这段代码定义了一个函数intersection,用于找到多个数组的交集。它的实现使用了ES6的扩展运算符和Set数据结构。
、const intersection = (a, ...arr) => [...new Set(a)].filter((v) => arr.every((b) => b.includes(v)))
intersection([1, 2, 3, 4], [2, 3, 4, 7, 8], [1, 3, 4, 9])
逐步解释代码的功能:
- (a, …arr) =>:这是一个箭头函数的定义,它接收一个单独的参数a和使用剩余参数…arr来接收多个数组。
- […new Set(a)]:使用扩展运算符和Set数据结构对数组a进行去重。Set是一种集合数据结构,可以确保元素的唯一性。通过将数组a转换为Set,重复的元素会被自动去除。
- .filter((v) => arr.every((b) => b.includes(v))):使用filter方法过滤出在所有输入数组中都存在的元素。首先,我们遍历去重后的数组a中的每个元素v,然后使用arr.every()方法来检查该元素是否同时存在于其他所有数组b中。如果存在于所有输入数组中,则保留该元素,否则过滤掉。
查找最大索引值
这段代码定义了一个函数indexOfMax,用于找到数组中最大元素的索引。它使用了reduce方法来实现这个功能。
const indexOfMax = (arr) => arr.reduce((prev, curr, i, a) => (curr > a[prev] ? i : prev), 0);
indexOfMax([1, 3, 9, 7, 5]); // 2
逐步解释代码的实现:
- (arr) =>:这是一个箭头函数的定义,它接收一个数组arr作为输入。
- arr.reduce((prev, curr, i, a) => (curr > a[prev] ? i : prev), 0):使用reduce方法对数组arr进行迭代,并返回最大元素的索引。
- prev:表示累积的结果,即当前找到的最大元素的索引。
- curr:表示当前正在比较的元素。
- i:表示当前元素的索引。
- a:表示原始数组arr。
- 在reduce的回调函数中,我们比较当前元素curr与累积的最大元素a[prev],如果当前元素curr比累积的最大元素大,则返回当前元素的索引i,否则返回累积的结果prev。
- reduce方法的第二个参数0表示初始的累积结果,即初始的最大元素索引。在这里,我们将初始索引设为0,表示初始的最大元素索引为数组的第一个元素。
查找最小索引值
原理同找出最大索引值
const indexOfMin = (arr) => arr.reduce((prev, curr, i, a) => (curr < a[prev] ? i : prev), 0)
indexOfMin([2, 5, 3, 4, 1, 0, 9]) // 5
强制等待
当需要等待一段时间,但又不想写在setTimeout函数中,造成回调地狱,可以采用以下写法
const sleep = async (t) => new Promise((resolve) => setTimeout(resolve,t));
sleep(1000).then(()=>{console.log('执行')});
这段代码定义了一个
sleep
函数,它使用了async/await
和Promise
来实现一个延时操作。sleep
函数会等待一段时间,然后在指定的时间后输出'time'
。
让我们逐步解释代码的实现:
(t) =>
:这是一个箭头函数的定义,它接收一个参数t
,表示等待的时间(以毫秒为单位)。new Promise((resolve) => setTimeout(resolve, t))
:在sleep
函数中创建一个Promise
对象,这个Promise
在指定的时间(t
)后自动解决(resolve)。setTimeout
函数用于在指定的时间后调用resolve
函数,实际上就是模拟了一个延时操作。async (t) => new Promise(...)
:由于我们在函数内部使用了await
关键字,所以将这个函数标记为async
,表示它是一个异步函数,可以在其中使用await
。sleep(2000).then(() => {console.log('time')})
:调用sleep
函数,并等待它返回的Promise
被解决。在Promise
被解决后(即经过了指定的延时时间),会执行then
方法中的回调函数,输出'time'
。
所以,这段代码的执行流程是:调用sleep(2000)
后,会等待2秒钟(2000毫秒),然后在延时结束后输出'time'
。
请注意,由于sleep
函数使用了async/await
,因此在调用它时,最好将调用它的代码也放在一个async
函数中,或者使用.then()
方法处理异步操作的结果。在本例中,使用了.then()
来输出'time'
,表示在延时操作完成后执行的后续逻辑。
获取cookie
const getCookie = () =>
document.cookie
.split(';')
.map((itme) => itme.split('='))
.reduce((acc, [k, v]) => (acc[k.trim().replace('"', '')] = v) && acc, {});
getCookie();
这段代码定义了一个函数
getCookie
,用于获取当前文档中的所有cookie,并将其解析为一个对象。
让我们逐步解释代码的实现:
document.cookie
:document.cookie
是一个字符串,包含当前文档中所有cookie。每个cookie由分号;
分隔,形如key=value
。.split(';')
:将document.cookie
字符串根据分号;
进行拆分,得到一个数组,其中每个元素是一个cookie字符串。.map((item) => item.split('='))
:对上一步得到的数组中的每个元素进行拆分,根据等号=
分隔每个cookie的键名和键值,得到一个嵌套数组。.reduce((acc, [k, v]) => (acc[k.trim().replace('"', '')] = v) && acc, {})
:使用reduce
方法将嵌套数组转换为一个对象。
acc
:表示累积的结果,即最终生成的cookie对象。[k, v]
:解构赋值,表示当前cookie的键名和键值。acc[k.trim().replace('"', '')] = v
:将当前cookie的键名和键值存储为对象的属性和值。k.trim().replace('"', '')
用于去除键名两端可能存在的空格和双引号(有些cookie可能带有额外的空格或双引号)。&& acc
:由于reduce
的回调函数必须返回累积结果,这里使用逻辑与操作符&&
确保返回acc
对象。
reduce
方法的第二个参数{}
表示初始的累积结果为空对象,这样在处理第一个cookie时,累积结果就是一个空对象。
最后,调用getCookie()
函数将返回一个对象,其中包含当前文档中的所有cookie的键值对。注意,该函数返回的cookie对象中的键名是去除了空格和双引号的。
请注意,这段代码在浏览器环境中才能正确运行,因为它依赖于document.cookie
对象。在Node.js环境中无法直接使用。
uuid 生成一个id
const uuid = (a) => (a ? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16) : ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, uuid))
uuid()
获取随机ip
const randomIp = () => Array(4)
.fill(0)
.map((_, i) => Math.floor(Math.random() * 255) + (i === 0 ? 1 : 0))
.join('.');
randomIp();
颜色格式转换
16进制颜色转换成rgb
const hexToRgb = hex => hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (_, r, g, b) => `#${r}${r}${g}${g}${b}${b}`).substring(1).match(/.{2}/g).map((x) => parseInt(x, 16));
hexToRgb('#00ffff'); // [0, 255, 255]
hexToRgb('#0ff'); // [0, 255, 255]
随机颜色生成
const getRandomColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`
getRandomColor() // '#4c2fd7'
比较两个对象
当你需要比较两个对象,js的等于只能判断对象的地址是否相同,当地址不相同的时候无法判断两个对象的键值对是否一致
const isEqual = (...objects) => objects.every(obj => JSON.stringify(obj) === JSON.stringify(objects[0]))
isEqual({name: 'jack'}, {name: 'jack'}) // true
isEqual({name: 'jack'}, {name: 'jack1'}, {name: 'jack'}) // false