我们日常经常使用结构赋值,一般都是先结构,再赋值,当然我们也可以一行就完成解构加赋值操作,看起来非常简化,当然可读性你懂得!
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; // 1last; // 3length; // 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}
@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}
和上个原理相同,通过随机数获取,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());}
function uniqueArr(arr){ return [...new Set(arr)]}
原生的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值定义为场景,但是在js中非空的字符串都会被认为是true
function toBoolean(value, truthyValues = ['true']){ const normalizedValue = String(value).toLowerCase().trim(); return truthyValues.includes(normalizedValue);}toBoolean('TRUE'); // truetoBoolean('FALSE'); // falsetoBoolean('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());}
时间格式化轻松解决,一步获取到年月日时分秒毫秒,由于toISOString会丢失时区,导致时间差八小时,所以在格式化之前我们加上八个小时时间即可
function extract(date){ const d = new Date(new Date(date).getTime() + 8*3600*1000); return new Date(d).toISOString().split(/[^0-9]/).slice(0, -1);}console.log(extract(new Date())) // ['2022', '09', '19', '18', '06', '11', '187']
有时候我们的方法需要传入一个函数回调,但是需要检测其类型,我们可以通过Object的原型方法去检测,当然这个方法可以准确检测任何类型。
function isFunction(v){ return ['[object Function]', '[object GeneratorFunction]', '[object AsyncFunction]', '[object Promise]'].includes(Object.prototype.toString.call(v));}
function distance(p1, p2){ return `Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));}
有些场景下我们需要判断dom是否发生碰撞了或者重叠了,我们可以通过getBoundingClientRect获取到dom的x1,y1,x2,y2坐标然后进行坐标比对即可判断出来
function overlaps = (a, b) { return (a.x1 < b.x2 && b.x1 < a.x2) || (a.y1 < b.y2 && b.y1 < a.y2);}
前端的日常开发是离不开nodeJs的,通过判断全局环境来检测是否是nodeJs环境
function isNode(){ return typeof process !== 'undefined' && process.versions != null && process.versions.node != null;}
之前看到有通过函数柯理化形式来求和的,通过reduce一行即可
function sum(...args){ args.reduce((a, b) => a + b);}