學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼
這篇文章要為大家介紹20 個JavaScript單行程式碼,可以幫助你像專業人士一樣寫程式碼。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
JavaScript不斷發展壯大,
因為它是最容易上手的語言之一,因此為市場上的新成為技術怪才
打開了大門。 (問號臉?)
的確,JavaScript可以做很多出色的事情!還有很多東西要學。
而且,無論你是JavaScript的新手還是更多的專業開發人員,學習新知識總是一件好事。
本文整理了一些非常有用的單行程式碼(20 ),這些單行程式碼可以幫助你提高工作效率並可以幫助偵錯程式碼。
什麼是單行程式碼?
單行程式碼是一種程式碼實踐,其中我們只用一行程式碼執行某些功能。
01-隨機取得布林值
此函數將使用Math.random()
方法傳回布林值(真或假)。 Math.random
建立一個介於0和1之間的隨機數,然後我們檢查它是否大於或小於0.5。
這意味著有50/50的機會會得到對或錯。
const getRandomBoolean = () => Math.random() >= 0.5; console.log(getRandomBoolean()); // a 50/50 chance of returning true or false
02-檢查日期是否為週末
通過此功能,你將能夠檢查提供的日期是工作日還是週末。
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-檢查數字是偶數還是奇數
簡單的實用程式功能,用於檢查數字是偶數還是奇數。
const isEven = (num) => num % 2 === 0; console.log(isEven(5)); // false console.log(isEven(4)); // true
04-取得陣列中的唯一值(陣列去重)
從陣列中刪除所有重複值的非常簡單的方法。此函數將陣列轉換為Set,然後傳回陣列。
const uniqueArr = (arr) => [...new Set(arr)]; console.log(uniqueArr([1, 2, 3, 1, 2, 3, 4, 5])); // [1, 2, 3, 4, 5]
05-檢查變數是否為陣列
一種檢查變數是否為陣列的乾淨簡單的方法。
當然,也可以有其他方法
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,這是一個技巧,你可以使用它在旅途中產生隨機字串。
const randomString = () => Math.random().toString(36).slice(2); console.log(randomString()); // could be anything!!!
08-滾動到頁面頂部
#window.scrollTo()
方法把一個 X
和Y
座標滾動到。
如果將它們設為零和零,我們將滾動到頁面頂部。
const scrollToTop = () => window.scrollTo(0, 0); scrollToTop();
09-切換布林
切換布林值是非常基本的程式設計問題之一,可以透過許多不同的方法來解決。
取代使用if語句來決定將布林值設為哪個值,你可以使用函數使用!翻轉當前值。 非
運算子。
// bool is stored somewhere in the upperscope const toggleBool = () => (bool = !bool); //or const toggleBool = b => !b;
10-交換兩個變數
#下面的程式碼是不使用第三個變數而只使用一行程式碼即可交換兩個變數的更簡單方法之一。
[foo, bar] = [bar, foo];
11-計算兩個日期之間的天數
要計算兩個日期之間的天數,
我們首先找出兩個日期之間的絕對值,然後將其除以86400000(等於一天中的毫秒數),最後將結果四捨五入並返回。
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
const copyTextToClipboard = async (text) => { await navigator.clipboard.writeText(text); };
13-合併多個陣列的不同方法
有兩種合併陣列的方法。其中之一是使用concat
方法。另一個使用擴充運算子(…
)。
PS:我們也可以使用「設定」物件從最終數組複製任何內容。
// 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中某些内容的实际类型,这一小技巧可以节省你的时间(和代码大小)。
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-在结尾处截断字符串
需要从头开始截断字符串,这不是问题!
const truncateString = (string, length) => { return string.length < length ? string : `${string.slice(0, length - 3)}...`; }; console.log( truncateString('Hi, I should be truncated because I am too loooong!', 36), ); // Hi, I should be truncated because...
16-从中间截断字符串
从中间截断字符串怎么样?
该函数将一个字符串作为第一个参数,然后将我们需要的字符串大小作为第二个参数,然后从第3个和第4个参数开始和结束需要多少个字符
const truncateStringMiddle = (string, length, start, end) => { return `${string.slice(0, start)}...${string.slice(string.length - end)}`; }; console.log( truncateStringMiddle( 'A long story goes here but then eventually ends!', // string 25, // 需要的字符串大小 13, // 从原始字符串第几位开始截取 17, // 从原始字符串第几位停止截取 ), ); // A long story ... eventually ends!
17-大写字符串
好吧,不幸的是,JavaScript
没有内置函数来大写字符串,但是这种解决方法可以实现。
const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1); console.log(capitalize('hello world')); // Hello world
18-检查当前选项卡是否在视图/焦点内
此简单的帮助程序方法根据选项卡是否处于视图/焦点状态而返回true
或false
const isTabInView = () => !document.hidden; // Not hidden isTabInView(); // true/false
19-检查用户是否在Apple设备上
如果用户使用的是Apple
设备,则返回true
const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform); console.log(isAppleDevice); // true/false
20-三元运算符
当你只想在一行中编写if..else
语句时,这是一个很好的代码保护程序。
// Longhand const age = 18; let greetings; if (age < 18) { greetings = 'You are not old enough'; } else { greetings = 'You are young!'; } // Shorthand const greetings = age < 18 ? 'You are not old enough' : 'You are young!';
21-短路评估速记
在将变量值分配给另一个变量时,可能要确保源变量不为null,未定义或为空。
可以编写带有多个条件的long if语句,也可以使用短路评估。
// Longhand if (name !== null || name !== undefined || name !== '') { let fullName = name; } // Shorthand const fullName = name || 'buddy';
希望对你有所帮助!
英文原文地址:https://dev.to/ovi/20-javascript-one-liners-that-will-help-you-code-like-a-pro-4ddc
更多编程相关知识,请访问:编程入门!!
以上是學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

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

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

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

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

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

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

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

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

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

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

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