ホームページ > 見出し > 半分の労力で作業効率を高める 15 のエレガントでシンプルな JS 一行コード!

半分の労力で作業効率を高める 15 のエレガントでシンプルな JS 一行コード!

青灯夜游
リリース: 2022-10-12 19:17:25
転載
3386 人が閲覧しました

JavaScript 非常大的特点容易上手且非常灵活,代码实现方式五花八门;有时候能一行代码解决,就尽量不用两行。

本文整理了非常有用的单行代码,这些需求都是在开发中非常常见的,用单行代码可以帮助你提高工作效率。

数组去重

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

半分の労力で作業効率を高める 15 のエレガントでシンプルな JS 一行コード!

const uniqueArr = (arr) => [...new Set(arr)];

console.log(uniqueArr(["前端","js","html","js","css","html"]));
// ['前端', 'js', 'html', 'css']
ログイン後にコピー

uniqueArr方法将数据转为Set,然后再解构为数组返回。

从url获取参数并转为对象

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

半分の労力で作業効率を高める 15 のエレガントでシンプルな JS 一行コード!

const getParameters = URL => JSON.parse(`{"${decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"')}"}`
  )

getParameters("https://www.google.com.hk/search?q=js+md&newwindow=1");
// {q: 'js+md', newwindow: '1'}
ログイン後にコピー

检查对象是否为空

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

幸运的是,下面的单行代码正是我们想要的。

半分の労力で作業効率を高める 15 のエレガントでシンプルな JS 一行コード!

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
isEmpty({}) // true
isEmpty({a:"not empty"}) //false
ログイン後にコピー

反转字符串

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

半分の労力で作業効率を高める 15 のエレガントでシンプルな JS 一行コード!

const reverse = str => str.split('').reverse().join('');
reverse('this is reverse');
// esrever si siht
ログイン後にコピー

生成随机十六进制

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

半分の労力で作業効率を高める 15 のエレガントでシンプルな JS 一行コード!

const randomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`
console.log(randomHexColor());
// #a2ce5b
ログイン後にコピー

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

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

半分の労力で作業効率を高める 15 のエレガントでシンプルな JS 一行コード!

const isTabActive = () => !document.hidden; 

isTabActive()
// true|false
ログイン後にコピー

检测元素是否处于焦点

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

半分の労力で作業効率を高める 15 のエレガントでシンプルな JS 一行コード!

const elementIsInFocus = (el) => (el === document.activeElement);

elementIsInFocus(anyElement)
// 元素处于焦点返回true,反之返回false
ログイン後にコピー

检查设备类型

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

半分の労力で作業効率を高める 15 のエレガントでシンプルな JS 一行コード!

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

judgeDeviceType()  // PC | Mobile
ログイン後にコピー

文字复制到剪贴板

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

半分の労力で作業効率を高める 15 のエレガントでシンプルな JS 一行コード!

const copyText = async (text) => await navigator.clipboard.writeText(text)
copyText('单行代码 前端世界')
ログイン後にコピー

获取选定的文本

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

半分の労力で作業効率を高める 15 のエレガントでシンプルな JS 一行コード!

const getSelectedText = () => window.getSelection().toString();

getSelectedText();
// 返回选中的内容
ログイン後にコピー

查询某天是否为工作日

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

1半分の労力で作業効率を高める 15 のエレガントでシンプルな JS 一行コード!

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

isWeekday(new Date(2022, 03, 11))
// true
ログイン後にコピー

转换华氏/摄氏

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

1半分の労力で作業効率を高める 15 のエレガントでシンプルな JS 一行コード!

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

fahrenheitToCelsius(50);
// 10
ログイン後にコピー
  • 将摄氏温度转华氏温度
const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;

celsiusToFahrenheit(100)
// 212
ログイン後にコピー

两日期之间相差的天数

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

1半分の労力で作業効率を高める 15 のエレガントでシンプルな JS 一行コード!

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

dayDiff(new Date("2021-10-21"), new Date("2022-02-12"))
// Result: 114
ログイン後にコピー

将 RGB 转换为十六进制

1半分の労力で作業効率を高める 15 のエレガントでシンプルな JS 一行コード!

const rgbToHex = (r, g, b) =>   "#" + ((1 <h3 data-id="heading-14"><strong>计算数组平均值</strong></h3><p>计算平均值的方式很多,计算的逻辑都是一样的, 但是实现方式各不相同,一行代码简单实现:</p><p><img src="https://img.php.cn/upload/image/458/884/487/166557307877065%E5%8D%8A%E5%88%86%E3%81%AE%E5%8A%B4%E5%8A%9B%E3%81%A7%E4%BD%9C%E6%A5%AD%E5%8A%B9%E7%8E%87%E3%82%92%E9%AB%98%E3%82%81%E3%82%8B%2015%20%E3%81%AE%E3%82%A8%E3%83%AC%E3%82%AC%E3%83%B3%E3%83%88%E3%81%A7%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AA%20JS%20%E4%B8%80%E8%A1%8C%E3%82%B3%E3%83%BC%E3%83%89!" title="166557307877065半分の労力で作業効率を高める 15 のエレガントでシンプルな JS 一行コード!" alt="1半分の労力で作業効率を高める 15 のエレガントでシンプルな JS 一行コード!"></p><pre class="brush:php;toolbar:false">const average = (arr) => arr.reduce((a, b) => a + b) / arr.length;
average([1,9,18,36]) //16
ログイン後にコピー

原文地址:https://juejin.cn/post/7145623660680708104

(学习视频分享:web前端开发编程基础视频

関連ラベル:
ソース:juejin.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート