架构师大咖
架构师大咖，打造有价值的架构师交流平台。分享架构师干货、教程、课程、资讯。架构师大咖，每日推送。
最近重温了一遍红宝书，发现一些比较好玩的写法，很多东西日常都在用，但是发现还会有不一样的写法,结合一些日常工作中使用的方法，为大家总结一篇日常经常使用可能还不知道的点，希望对你能有所帮助：
一行代码完成结构加赋值
我们日常经常使用结构赋值，一般都是先结构，再赋值，当然我们也可以一行就完成解构加赋值操作，看起来非常简化，当然可读性你懂得！
let people = { name: null, age: null };
let result = { name: '张三', age: 16 };
({ name: people.name, age: people.age} = result);
console.log(people) // {"name":"张三","age":16}###
复制代码
对基础数据类型进行解构
日常中我们应该用不到这样的场景，但是实际上我们也可以对基础数据类型解构
const {length : a} = '1234';
console.log(a) // 4
复制代码
对数组解构快速拿到最后一项值
实际上我们是可以对数组解构赋值拿到
length
属性的，通过这个特性也可以做更多的事情。
const arr = [1, 2, 3];
const { 0: first, length, [length - 1]: last } = arr;
first; // 1
last; // 3
length; // 3
复制代码
将下标转为中文零一二三...
日常可能有的列表我们需要将对应的012345转为中文的一、二、三、四、五...，在老的项目看到还有通过自己手动定义很多行这样的写法，于是写了一个这样的方法转换
export
function
transfromNumber
(
number
)
{
const
INDEX_MAP = [
'零'
，
'一'
.....]
if
(!
number
)
return
if
(
number
===
10
)
return
INDEX_MAP[
number
]
return
[...number.toString()].reduce(
(
pre, cur
) =>
pre + INDEX_MAP[cur] ,
''
)
}
复制代码
判断整数的不同方法
/* 1.任何整数都会被1整除，即余数是0。利用这个规则来判断是否是整数。但是对字符串不准确 */
function
isInteger
(
obj
)
{
return
obj%
1
===
0
}
/* 1. 添加一个是数字的判断 */
function
isInteger
(
obj
)
{
return
typeof
obj ===
'number'
&& obj%
1
===
0
}
/* 2. 使用Math.round、Math.ceil、Math.floor判断 整数取整后还是等于自己。利用这个特性来判断是否是整数*/
function
isInteger
(
obj
)
{
return
Math
.floor(obj) === obj
}
/* 3. 通过parseInt判断 某些场景不准确 */
function
isInteger
(
obj
)
{
return
parseInt
(obj,
10
) === obj
}
/* 4. 通过位运算符*/
function
isInteger
(
obj
)
{
return
(obj |
0
) === obj
}
/* 5.ES6提供了Number.isInteger */
复制代码
通过css检测系统的主题色从而全局修改样式
@media
的属性 prefers-color-scheme就可以知道当前的系统主题，当然使用前需要查查兼容性
@media (prefers-color-scheme: dark) { //... }
@media (prefers-color-scheme: light) { //... }
复制代码
javascript
也可以轻松做到
window.addEventListener(
'theme-mode'
,
event
=>{
if
(
event
.mode ==
'dark'
){}
if
(
event
.mode ==
'light'
){}
})
window.matchMedia(
'(prefers-color-scheme: dark)'
) .addEventListener(
'change'
,
event
=> {
if
(
event
.matches) {}
// dark mode
})
复制代码
数组随机打乱顺序
通过 0.5-Math.random() 得到一个随机数，再通过两次sort排序打乱的更彻底,但是这个方法实际上并不够随机，如果是企业级运用，建议使用第二种洗牌算法
shuffle(arr) {
return
arr.sort(
()
=>
0.5
-
Math
.random()). sort(
()
=>
0.5
-
Math
.random());
},
复制代码
function shuffle(arr) {
for (let i = arr.length - 1; i > 0; i--) {
const randomIndex = Math.floor(Math.random() * (i + 1))
;[arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]]
}
return arr
}
复制代码
随机获取一个Boolean值
和上个原理相同，通过随机数获取，**Math.random()**的区间是0-0.99，用0.5在中间百分之五十的概率
function
randomBool
()
{
return
0.5
-
Math
.random()
}
复制代码
把数组最后一项移到第一项
function
(
arr
)
{
return
arr.push(arr.shift());
}
复制代码
把数组的第一项放到最后一项
function
(
arr
)
{
return
arr.unshift(arr.pop());
}
复制代码
利用set数组去重
function
uniqueArr
(
arr
)
{
return
[...new
Set
(arr)]
}
复制代码
dom节点平滑滚动到可是区域，顶部，底部
原生的scrollTo方法没有动画，类似于锚点跳转，比较生硬，可以通过这个方法会自带平滑的过度效果
function
scrollTo
(element)
{
element.scrollIntoView({ behavior:
"smooth"
, block:
"start"
})
// 顶部
element.scrollIntoView({ behavior:
"smooth"
, block:
"end"
})
// 底部
element.scrollIntoView({ behavior:
"smooth"
})
// 可视区域
}
复制代码
获取随机颜色
日常我们经常会需要获取一个随机颜色，通过随机数即可完成
function
getRandomColor
()
{
return
`#
${
Math
.floor(
Math
.random() *
0xffffff
) .toString(
16
)}
`
;
}
复制代码
检测是否为空对象
通过使用Es6的Reflect静态方法判断他的长度就可以判断是否是空数组了，也可以通过**Object.keys()**来判断
function
isEmpty
(
obj
)
{
return
Reflect
.ownKeys(obj).length ===
0
&& obj.constructor ===
Object
;
}
复制代码
Boolean转换
一些场景下我们会将boolean值定义为场景，但是在js中非空的字符串都会被认为是true
function toBoolean(value, truthyValues = ['true']){
const normalizedValue = String(value).toLowerCase().trim();
return truthyValues.includes(normalizedValue);
}
toBoolean('TRUE'); // true
toBoolean('FALSE'); // false
toBoolean('YES', ['yes']); // true
复制代码
各种数组克隆方法
数组克隆的方法其实特别多了，看看有没有你没见过的！
const clone = (arr) => arr.slice(0);
const clone = (arr) => [...arr];
const clone = (arr) => Array.from(arr);
const clone = (arr) => arr.map((x) => x);
const clone = (arr) => JSON.parse(JSON.stringify(arr));
const clone = (arr) => arr.concat([]);
const clone = (arr) => structuredClone(arr);
复制代码
比较两个时间大小
通过调用getTime获取时间戳比较就可以了
function compare(a, b){
return a.getTime() > b.getTime();
}
复制代码
计算两个时间之间的月份差异
function monthDiff(startDate, endDate){
return Math.max(0, (endDate.getFullYear() - startDate.getFullYear()) * 12 - startDate.getMonth() + endDate.getMonth());
}
复制代码
一步从时间中提取年月日时分秒
