学会这10个javascript单行代码,让你的代码更优雅

Posted 勇敢*牛牛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学会这10个javascript单行代码,让你的代码更优雅相关的知识,希望对你有一定的参考价值。

干货推荐:

学会这10个javascript单行代码,让你的代码更优雅

数组去重

从数组中删除所有重复值,实现方式非常多,我们这里就说最简单的方式,一行代码搞定:

const uniqerArr = (arr)=>[...new Set(arr)] 
console.log(uniqerArr(["js","css","html","js","css"]));

从url获取参数并转为对象

网页路径经常是:www.baidu.com?search=js&xxx=kkk这种形式的,我们是经常需要取参数的,可以使用第三方的qs包实现,如果你只是要实现取参数,这一句代码就可以实现,不用再引入qs了。

const getParameters = URL => JSON.parse(`"$decodeURI(URL.split("?")[1]).replace(/"/g, '\\\\"').replace(/&/g, '","').replace(/=/g, '":"')"`)
let obj = getParameters("https://www.google.com.hk/search?q=js+md&newwindow=1");
console.log(obj);

检查对象是否为空

检查对象是否为空,实际上并不那么简单,即使对象为空,每次检查对象是否等于 也会返回 false。

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
isEmpty() // true
isEmpty(a:"not empty") //false

反转字符串

反转字符串可以使用split结合reverse和join方法轻松实现。

const reverse = str => str.split('').reverse().join('');
reverse('this is reverse');
// esrever si siht

生成随机十六进制

生成随机数相信你能信手拈来,那随机生成十六进制,例如生成十六进制颜色值。

const randomHexColor = () => `#$Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")`
console.log(randomHexColor());

检查当前选项卡是否在后台

浏览器使用选项卡式浏览,任何网页都有可能在后台,此时对用户来说是没有在浏览的, 知道怎么快速检测到,你的网页对用户是隐藏还是可见吗?

const isTabActive = () => !document.hidden; 
console.log(isTabActive());// true|false

检测元素是否处于焦点

activeElement 属性返回文档中当前获得焦点的元素。

const elementIsInFocus = (el) => (el === document.activeElement);
elementIsInFocus(anyElement)
// 元素处于焦点返回true,反之返回false

检查设备类型

使用navigator.userAgent 判断是移动设备还是电脑设备:

const judgeDeviceType = () => /android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ? 'Mobile' : 'PC';
console.log(judgeDeviceType() ); // PC | Mobile

文字复制到剪贴板

Clipboard API 它的所有操作都是异步的,返回 Promise 对象,不会造成页面卡顿。而且,它可以将任意内容(比如图片)放入剪贴板。

const copyText = async (text) => await navigator.clipboard.writeText(text);
copyText('单行代码 前端世界,请打开剪贴板查看')

获取选定的文本

使用内置的 getSelection 获取用户选择的文本

<body>
    你好勇敢牛牛
    <hr>
    <button onclick="add()">获取</button>
    <script>
        function add() 
            const getSelectedText = () => window.getSelection().toString();
            console.log(getSelectedText());//返回选中内容
        
    </script>
</body>

查询某天是否为工作日

我们自己写日历组件时经常会用到,判断某个日期是否为工作日;周一至周五为工作日:

const isWeekday = (date) => date.getDay() % 6 !== 0;

isWeekday(new Date(2022, 03, 11))
// true

转换华氏/摄氏

处理温度有时会晕头转向。这两个函数则能帮助大家将华氏温度转换为摄氏温度,以及将摄氏温度转换为华氏温度。

将华氏温度转换为摄氏温度
        const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5 / 9;

        fahrenheitToCelsius(50);
        // 10
将摄氏温度转华氏温度
        const celsiusToFahrenheit = (celsius) => celsius * 9 / 5 + 32;

        celsiusToFahrenheit(100)
        // 212

两日期之间相差的天数

日常开发中经常遇到需要显示剩余天数, 一般我们就需要计算两日期之间相差天数:

const dayDiff = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000);

dayDiff(new Date("2021-10-21"), new Date("2022-02-12"))

将 RGB 转换为十六进制

const rgbToHex = (r, g, b) =>   "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
rgbToHex(255, 255, 255); 

计算数组平均值

计算平均值的方式很多,计算的逻辑都是一样的, 但是实现方式各不相同,一行代码简单实现:

const average = (arr) => arr.reduce((a, b) => a + b) / arr.length;
average([1,9,18,36]) //16

以上是关于学会这10个javascript单行代码,让你的代码更优雅的主要内容,如果未能解决你的问题,请参考以下文章

学会这20+个JavaScript单行代码,可以让你的代码更加骚气

学会这12个Python装饰器,让你的代码更上一层楼

10种JavaScript特效实例让你的网站更吸引人

学会JavaScript函数式编程(第1部分)

理解这12个概念,让你的JavaScript开发更上一层楼

学会这二十个正则表达式,能让你少些1000行代码!