目錄
01-隨機取得布林值
02-檢查日期是否為週末
03-檢查數字是偶數還是奇數
04-取得陣列中的唯一值(陣列去重)
05-檢查變數是否為陣列
06-在兩個數字之間產生一個隨機數字
07-產生隨機字串(唯一ID?)
08-滾動到頁面頂部
09-切換布林
10-交換兩個變數
11-計算兩個日期之間的天數
12-將文字複製到剪貼簿
13-合併多個陣列的不同方法
14-获取javascript语言的实际类型
15-在结尾处截断字符串
16-从中间截断字符串
17-大写字符串
18-检查当前选项卡是否在视图/焦点内
19-检查用户是否在Apple设备上
20-三元运算符
21-短路评估速记
首頁 web前端 js教程 學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

May 14, 2021 am 10:51 AM
javascript 前端

這篇文章要為大家介紹20 個JavaScript單行程式碼,可以幫助你像專業人士一樣寫程式碼。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

JavaScript不斷發展壯大,

因為它是最容易上手的語言之一,因此為市場上的新成為技術怪才打開了大門。 (問號臉?)

的確,JavaScript可以做很多出色的事情!還有很多東西要學。

而且,無論你是JavaScript的新手還是更多的專業開發人員,學習新知識總是一件好事。

本文整理了一些非常有用的單行程式碼(20 ),這些單行程式碼可以幫助你提高工作效率並可以幫助偵錯程式碼。

什麼是單行程式碼?

單行程式碼是一種程式碼實踐,其中我們只用一行程式碼執行某些功能。

01-隨機取得布林值

此函數將使用Math.random()方法傳回布林值(真或假)。
Math.random建立一個介於0和1之間的隨機數,然後我們檢查它是否大於或小於0.5。
這意味著有50/50的機會會得到對或錯。

學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

const getRandomBoolean = () => Math.random() >= 0.5;

console.log(getRandomBoolean());
// a 50/50 chance of returning true or false
登入後複製

02-檢查日期是否為週末

通過此功能,你將能夠檢查提供的日期是工作日還是週末。

學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

const isWeekend = (date) => [0, 6].indexOf(date.getDay()) !== -1;

console.log(isWeekend(new Date(2021, 4, 14)));
// false (Friday)
console.log(isWeekend(new Date(2021, 4, 15)));
// true (Saturday)
登入後複製

03-檢查數字是偶數還是奇數

簡單的實用程式功能,用於檢查數字是偶數還是奇數。

學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

const isEven = (num) => num % 2 === 0;

console.log(isEven(5));
// false
console.log(isEven(4));
// true
登入後複製

04-取得陣列中的唯一值(陣列去重)

從陣列中刪除所有重複值的非常簡單的方法。此函數將陣列轉換為Set,然後傳回陣列。

學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

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

console.log(uniqueArr([1, 2, 3, 1, 2, 3, 4, 5]));
// [1, 2, 3, 4, 5]
登入後複製

05-檢查變數是否為陣列

一種檢查變數是否為陣列的乾淨簡單的方法。

當然,也可以有其他方法

學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

const isArray = (arr) => Array.isArray(arr);

console.log(isArray([1, 2, 3]));
// true
console.log(isArray({ name: 'Ovi' }));
// false
console.log(isArray('Hello World'));
// false
登入後複製

06-在兩個數字之間產生一個隨機數字

這將以兩個數字為參數,並將在這兩個數字之間產生一個隨機數字!

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

console.log(random(1, 50));
// could be anything from 1 - 50
登入後複製

07-產生隨機字串(唯一ID?)

也許你需要臨時的唯一ID,這是一個技巧,你可以使用它在旅途中產生隨機字串。

學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

const randomString = () => Math.random().toString(36).slice(2);

console.log(randomString());
// could be anything!!!
登入後複製

08-滾動到頁面頂部

#window.scrollTo()方法把一個 XY座標滾動到。
如果將它們設為零和零,我們將滾動到頁面頂部。

學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

const scrollToTop = () => window.scrollTo(0, 0);

scrollToTop();
登入後複製

09-切換布林

切換布林值是非常基本的程式設計問題之一,可以透過許多不同的方法來解決。
取代使用if語句來決定將布林值設為哪個值,你可以使用函數使用!翻轉當前值。 運算子。

學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

// bool is stored somewhere in the upperscope
const toggleBool = () => (bool = !bool);
//or
const toggleBool = b => !b;
登入後複製

10-交換兩個變數

#下面的程式碼是不使用第三個變數而只使用一行程式碼即可交換兩個變數的更簡單方法之一。

學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

[foo, bar] = [bar, foo];
登入後複製

11-計算兩個日期之間的天數

要計算兩個日期之間的天數,
我們首先找出兩個日期之間的絕對值,然後將其除以86400000(等於一天中的毫秒數),最後將結果四捨五入並返回。

1學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

const daysDiff = (date, date2) => Math.ceil(Math.abs(date - date2) / 86400000);

console.log(daysDiff(new Date('2021-05-10'), new Date('2021-11-25')));
// 199
登入後複製

12-將文字複製到剪貼簿

PS:你可能需要添加檢查以查看是否存在navigator.clipboard .writeText

1學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

const copyTextToClipboard = async (text) => {
  await navigator.clipboard.writeText(text);
};
登入後複製

13-合併多個陣列的不同方法

有兩種合併陣列的方法。其中之一是使用concat方法。另一個使用擴充運算子()。

PS:我們也可以使用「設定」物件從最終數組複製任何內容。

1學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

// Merge but don't remove the duplications
const merge = (a, b) => a.concat(b);
// Or
const merge = (a, b) => [...a, ...b];

// Merge and remove the duplications
const merge = [...new Set(a.concat(b))];
// Or
const merge = [...new Set([...a, ...b])];
登入後複製

14-获取javascript语言的实际类型

人们有时会使用库来查找JavaScript中某些内容的实际类型,这一小技巧可以节省你的时间(和代码大小)。

1學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

const trueTypeOf = (obj) => {
  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
};

console.log(trueTypeOf(''));
// string
console.log(trueTypeOf(0));
// number
console.log(trueTypeOf());
// undefined
console.log(trueTypeOf(null));
// null
console.log(trueTypeOf({}));
// object
console.log(trueTypeOf([]));
// array
console.log(trueTypeOf(0));
// number
console.log(trueTypeOf(() => {}));
// function
登入後複製

15-在结尾处截断字符串

需要从头开始截断字符串,这不是问题!

1學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

const truncateString = (string, length) => {
  return string.length < length ? string : `${string.slice(0, length - 3)}...`;
};

console.log(
  truncateString(&#39;Hi, I should be truncated because I am too loooong!&#39;, 36),
);
// Hi, I should be truncated because...
登入後複製

16-从中间截断字符串

从中间截断字符串怎么样?

该函数将一个字符串作为第一个参数,然后将我们需要的字符串大小作为第二个参数,然后从第3个和第4个参数开始和结束需要多少个字符

學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

const truncateStringMiddle = (string, length, start, end) => {
  return `${string.slice(0, start)}...${string.slice(string.length - end)}`;
};

console.log(
  truncateStringMiddle(
    &#39;A long story goes here but then eventually ends!&#39;, // string
    25, // 需要的字符串大小
    13, // 从原始字符串第几位开始截取
    17, // 从原始字符串第几位停止截取
  ),
);
// A long story ... eventually ends!
登入後複製

17-大写字符串

好吧,不幸的是,JavaScript没有内置函数来大写字符串,但是这种解决方法可以实现。

1學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

console.log(capitalize(&#39;hello world&#39;));
// Hello world
登入後複製

18-检查当前选项卡是否在视图/焦点内

此简单的帮助程序方法根据选项卡是否处于视图/焦点状态而返回truefalse

1學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

const isTabInView = () => !document.hidden;  // Not hidden

isTabInView();
// true/false
登入後複製

19-检查用户是否在Apple设备上

如果用户使用的是Apple设备,则返回true

1學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);

console.log(isAppleDevice);
// true/false
登入後複製

20-三元运算符

当你只想在一行中编写if..else语句时,这是一个很好的代码保护程序。

學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

// Longhand
const age = 18;
let greetings;

if (age < 18) {
  greetings = &#39;You are not old enough&#39;;
} else {
  greetings = &#39;You are young!&#39;;
}

// Shorthand
const greetings = age < 18 ? &#39;You are not old enough&#39; : &#39;You are young!&#39;;
登入後複製

21-短路评估速记

在将变量值分配给另一个变量时,可能要确保源变量不为null,未定义或为空。
可以编写带有多个条件的long if语句,也可以使用短路评估。

2學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

// Longhand
if (name !== null || name !== undefined || name !== &#39;&#39;) {
  let fullName = name;
}

// Shorthand
const fullName = name || &#39;buddy&#39;;
登入後複製

希望对你有所帮助!

英文原文地址:https://dev.to/ovi/20-javascript-one-liners-that-will-help-you-code-like-a-pro-4ddc

更多编程相关知识,请访问:编程入门!!

以上是學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

PHP與Vue:完美搭檔的前端開發利器 PHP與Vue:完美搭檔的前端開發利器 Mar 16, 2024 pm 12:09 PM

PHP與Vue:完美搭檔的前端開發利器在當今網路快速發展的時代,前端開發變得愈發重要。隨著使用者對網站和應用的體驗要求越來越高,前端開發人員需要使用更有效率和靈活的工具來創建響應式和互動式的介面。 PHP和Vue.js作為前端開發領域的兩個重要技術,搭配起來可以稱得上是完美的利器。本文將探討PHP和Vue的結合,以及詳細的程式碼範例,幫助讀者更好地理解和應用這兩

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

Django是前端還是後端?一探究竟! Django是前端還是後端?一探究竟! Jan 19, 2024 am 08:37 AM

Django是一個由Python編寫的web應用框架,它強調快速開發和乾淨方法。儘管Django是web框架,但要回答Django是前端還是後端這個問題,需要深入理解前後端的概念。前端是指使用者直接和互動的介面,後端是指伺服器端的程序,他們透過HTTP協定進行資料的互動。在前端和後端分離的情況下,前後端程式可以獨立開發,分別實現業務邏輯和互動效果,資料的交

前端面試官常問的問題 前端面試官常問的問題 Mar 19, 2024 pm 02:24 PM

在前端開發面試中,常見問題涵蓋廣泛,包括HTML/CSS基礎、JavaScript基礎、框架和函式庫、專案經驗、演算法和資料結構、效能最佳化、跨域請求、前端工程化、設計模式以及新技術和趨勢。面試官的問題旨在評估候選人的技術技能、專案經驗以及對行業趨勢的理解。因此,應試者應充分準備這些方面,以展現自己的能力和專業知識。

Go語言前端技術探秘:前端開發新視野 Go語言前端技術探秘:前端開發新視野 Mar 28, 2024 pm 01:06 PM

Go語言作為一種快速、高效的程式語言,在後端開發領域廣受歡迎。然而,很少有人將Go語言與前端開發聯繫起來。事實上,使用Go語言進行前端開發不僅可以提高效率,還能為開發者帶來全新的視野。本文將探討使用Go語言進行前端開發的可能性,並提供具體的程式碼範例,幫助讀者更了解這一領域。在傳統的前端開發中,通常會使用JavaScript、HTML和CSS來建立使用者介面

Django:前端和後端開發都能搞定的神奇框架! Django:前端和後端開發都能搞定的神奇框架! Jan 19, 2024 am 08:52 AM

Django:前端和後端開發都能搞定的神奇框架! Django是一個高效、可擴展的網路應用程式框架。它能夠支援多種Web開發模式,包括MVC和MTV,可以輕鬆地開發出高品質的Web應用程式。 Django不僅支援後端開發,還能夠快速建構出前端的介面,透過模板語言,實現靈活的視圖展示。 Django把前端開發和後端開發融合成了一種無縫的整合,讓開發人員不必專門學習

See all articles