简单的工作绝不复杂化,复杂的代码大多都能简化。今天大师兄就公开珍藏收集已久的单行代码绝技
让人一看就不明觉厉
三元运算符
用三元运算符代替简单的if else
if (age < 18) { me = '小姐姐';} else { me = '老阿姨';}
复制代码
改用三元运算符,一行就能搞定
me = age < 18 ? '小姐姐' : '老阿姨';
复制代码
复杂的判断三元运算符就有点不简单易懂了
const you = "大帅B"const your = "技术大佬"const me = you ？"点再看":your？"点赞":"分享"
复制代码
判断
当需要判断的情况不止一个时,第一个想法就是使用 || 或运算符
if( type == 1 || type == 2 || type == 3 || type == 4 ||){ //...}
复制代码
ES6 中的 includes 一行就能搞定
if( [1,2,3,4,5].includes(type) ){ //...}
复制代码
取值
在写代码的时候，经常会用到取值的操作
const obj = { a:1, b:2, c:3,}//老的取值方式const a = obj.a;const b = obj.b;const c = obj.c;
复制代码
老的取值方式，直接用对象名加属性名去取值。如果使用 ES6 的解构赋值一行就能搞定
获取对象属性值
在编程的过程中经常会遇到获取一个值并赋给另一个变量的情况，在获取这个值时需要先判断一下这个对象是否存在，才能进行赋值
if(obj && obj.name){ const name = obj.name}
复制代码
ES6 提供了可选连操作符?.，可以简化操作
反转字符串
将一个字符串进行翻转操作，返回翻转后的字符串
const reverse = str => str.split('').reverse().join('');
reverse('hello world'); // 'dlrow olleh'
复制代码
生成随机字符串
生成一个随机的字符串，包含字母和数字
const randomString = () => Math.random().toString(36).slice(2);//函数调用randomString();
复制代码
数组去重
用于移除数组中的重复项
const unique = (arr) => [...new Set(arr)];
console.log(unique([1, 2, 2, 2, 3, 4, 4, 5, 6, 6]));
复制代码
数组对象去重
去除重复的对象，对象的 key 值和 value 值都分别相等，才叫相同对象
const uniqueObj = (arr, fn) =>arr.reduce((acc, v) => {if (!acc.some(x => fn(v, x))) acc.push(v);return acc;}, []); uniqueObj([{id: 1, name: '大师兄'}, {id: 2, name: '小师妹'}, {id: 1, name: '大师兄'}], (a, b) => a.id == b.id)// [{id: 1, name: '大师兄'}, {id: 2, name: '小师妹'}]
复制代码
合并数据
当我们需要合并数据，并且去除重复值时，你是不是要用 for 循环？ES6 的扩展运算符一行就能搞定！！！
const a = [1,2,3];const b = [1,5,6];const c = [...new Set([...a,...b])];//[1,2,3,5,6]
复制代码
判断数组是否为空
判断一个数组是否为空数组，它将返回一个布尔值
const notEmpty = arr => Array.isArray(arr) && arr.length > 0;
notEmpty([1, 2, 3]); // true
复制代码
交换两个变量
//旧写法let a=1;let b=2;let temp;temp=aa=bb=temp
//新写法[a, b] = [b, a];
复制代码
判断奇还是偶
const isEven = num => num % 2 === 0;
isEven(996);
复制代码
获取两个数之间的随机整数
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
random(1, 50);
复制代码
检查日期是否为工作日
传入日期，判断是否是工作日
const isWeekday = (date) => date.getDay() % 6 !== 0;console.log(isWeekday(new Date(2021, 11, 11)));// false console.log(isWeekday(new Date(2021, 11, 13)));// true
复制代码
高级
滚动到页面顶部
不用引入 element-ui 等框架，一行代码就能实现滚动到顶部
const goToTop = () => window.scrollTo(0, 0);goToTop();
复制代码
浏览器是否支持触摸事件
通过判断浏览器是否有ontouchstart事件来判断是否支持触摸
const touchSupported = () => { ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);}console.log(touchSupported());
复制代码
当前设备是否为苹果设备
前端经常要兼容 andriod 和 ios
const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);console.log(isAppleDevice);// Result: will return true if user is on an Apple device
复制代码
复制内容到剪切板
使用 navigator.clipboard.writeText 来实现将文本复制到剪贴板
const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("双十一来了~");
复制代码
检测是否是黑暗模式
用于检测当前的环境是否是黑暗模式，返回一个布尔值
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode)
复制代码
网站变成黑白
有时候网站在某种特定的情况下，需要使整个网站变成黑白的颜色
只需要将这一行代码filter:grayscale(100%)放到 body 上，一下就能致黑
评论