22個單行程式碼技巧,不單單只是炫技

語言: CN / TW / HK

「這是我參與11月更文挑戰的第6天,活動詳情檢視:2021最後一次更文挑戰

大家好,我是前端實驗室的大師兄!

簡單的工作絕不復雜化,複雜的程式碼大多都能簡化。今天大師兄就公開珍藏收集已久的單行程式碼絕技

讓人一看就不明覺厲

三元運算子

用三元運算子代替簡單的if else

if (age < 18) { me = '小姐姐'; } else { me = '老阿姨'; }

改用三元運算子,一行就能搞定

me = age < 18 ? '小姐姐' : '老阿姨';

複雜的判斷三元運算子就有點不簡單易懂了

const you = "大帥B" const your = "技術大佬" const me = you ?"點再看":your?"點贊":"分享"

判斷

當需要判斷的情況不止一個時,第一個想法就是使用 || 或運算子

if(   type == 1 ||   type == 2 ||   type == 3 ||   type == 4 || ){   //... }

ES6中的includes一行就能搞定

if( [1,2,3,4,5].includes(type) ){   //... } ​

取值

在寫程式碼的時候,經常會用到取值的操作

const obj = {   a:1,   b:2,   c:3, } //老的取值方式 const a = obj.a; const b = obj.b; const c = obj.c; ​

老的取值方式,直接用物件名加屬性名去取值。如果使用ES6的解構賦值一行就能搞定

const {a,b,c} = obj;

獲取物件屬性值

在程式設計的過程中經常會遇到獲取一個值並賦給另一個變數的情況,在獲取這個值時需要先判斷一下這個物件是否存在,才能進行賦值

if(obj && obj.name){ const name = obj.name }

ES6提供了可選連操作符?.,可以簡化操作

const name = obj?.name;

反轉字串

將一個字串進行翻轉操作,返回翻轉後的字串

``` const reverse = str => str.split('').reverse().join('');

reverse('hello world'); // 'dlrow olleh' ```

生成隨機字串

生成一個隨機的字串,包含字母和數字

const randomString = () => Math.random().toString(36).slice(2); //函式呼叫 randomString();

陣列去重

用於移除陣列中的重複項

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

console.log(unique([1, 2, 2, 2, 3, 4, 4, 5, 6, 6])); ```

陣列物件去重

去除重複的物件,物件的key值和value值都分別相等,才叫相同物件

``` const uniqueObj = (arr, fn) =>arr.reduce((acc, v) => {if (!acc.some(x => fn(v, x))) acc.push(v);return acc;}, []);

uniqueObj([{id: 1, name: '大師兄'}, {id: 2, name: '小師妹'}, {id: 1, name: '大師兄'}], (a, b) => a.id == b.id) // [{id: 1, name: '大師兄'}, {id: 2, name: '小師妹'}] ```

合併資料

當我們需要合併資料,並且去除重複值時,你是不是要用for迴圈? ES6的擴充套件運算子一行就能搞定!!!

const a = [1,2,3]; const b = [1,5,6]; const c = [...new Set([...a,...b])];//[1,2,3,5,6]

判斷陣列是否為空

判斷一個數組是否為空陣列,它將返回一個布林值

``` const notEmpty = arr => Array.isArray(arr) && arr.length > 0;

notEmpty([1, 2, 3]); // true ```

交換兩個變數

``` //舊寫法 let a=1; let b=2; let temp; temp=a a=b b=temp

//新寫法 [a, b] = [b, a]; ```

判斷奇還是偶

``` const isEven = num => num % 2 === 0;

isEven(996); ```

獲取兩個數之間的隨機整數

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

random(1, 50); ```

檢查日期是否為工作日

傳入日期,判斷是否是工作日

const isWeekday = (date) => date.getDay() % 6 !== 0; console.log(isWeekday(new Date(2021, 11, 11))); // false console.log(isWeekday(new Date(2021, 11, 13))); // true

高階

滾動到頁面頂部

不用引入element-ui等框架,一行程式碼就能實現滾動到頂部

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

瀏覽器是否支援觸控事件

通過判斷瀏覽器是否有ontouchstart事件來判斷是否支援觸控

const touchSupported = () => { ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch); } console.log(touchSupported());

當前裝置是否為蘋果裝置

前端經常要相容andriod和ios

const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform); console.log(isAppleDevice); // Result: will return true if user is on an Apple device

複製內容到剪下板

使用 navigator.clipboard.writeText 來實現將文字複製到剪貼簿

``` const copyToClipboard = (text) => navigator.clipboard.writeText(text);

copyToClipboard("雙十一來了~"); ```

檢測是否是黑暗模式

用於檢測當前的環境是否是黑暗模式,返回一個布林值

``` const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

console.log(isDarkMode) ```

網站變成黑白

有時候網站在某種特定的情況下,需要使整個網站變成黑白的顏色

filter:grayscale(100%)

只需要將這一行程式碼filter:grayscale(100%)放到body上,一下就能致黑

進了前端門,便是一家人

原創不易,點贊、留言、分享就是大師兄寫下去的動力!