搜尋
首頁web前端js教程學會這20+個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中文網其他相關文章!

陳述
本文轉載於:segmentfault。如有侵權,請聯絡admin@php.cn刪除
JavaScript的演變:當前的趨勢和未來前景JavaScript的演變:當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript:它的作用以及為什麼重要神秘的JavaScript:它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

Python還是JavaScript更好?Python還是JavaScript更好?Apr 06, 2025 am 12:14 AM

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。1.Python以简洁语法和丰富库生态著称,适用于数据分析和Web开发。2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。

如何安裝JavaScript?如何安裝JavaScript?Apr 05, 2025 am 12:16 AM

JavaScript不需要安裝,因為它已內置於現代瀏覽器中。你只需文本編輯器和瀏覽器即可開始使用。 1)在瀏覽器環境中,通過標籤嵌入HTML文件中運行。 2)在Node.js環境中,下載並安裝Node.js後,通過命令行運行JavaScript文件。

在Quartz中如何在任務開始前發送通知?在Quartz中如何在任務開始前發送通知?Apr 04, 2025 pm 09:24 PM

如何在Quartz中提前發送任務通知在使用Quartz定時器進行任務調度時,任務的執行時間是由cron表達式設定的。現�...

在JavaScript中,如何在構造函數中獲取原型鏈上函數的參數?在JavaScript中,如何在構造函數中獲取原型鏈上函數的參數?Apr 04, 2025 pm 09:21 PM

在JavaScript中如何獲取原型鏈上函數的參數在JavaScript編程中,理解和操作原型鏈上的函數參數是常見且重要的任�...

微信小程序webview中Vue.js動態style位移失效是什麼原因?微信小程序webview中Vue.js動態style位移失效是什麼原因?Apr 04, 2025 pm 09:18 PM

在微信小程序web-view中使用Vue.js動態style位移失效的原因分析在使用Vue.js...

在Tampermonkey中如何實現對多個鏈接的並發GET請求並依次判斷返回結果?在Tampermonkey中如何實現對多個鏈接的並發GET請求並依次判斷返回結果?Apr 04, 2025 pm 09:15 PM

在Tampermonkey中如何對多個鏈接進行並發GET請求並依次判斷返回結果?在Tampermonkey腳本中,我們經常需要對多個鏈...

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用