首頁  >  文章  >  web前端  >  學會這20+個JavaScript單行程式碼,讓你像專業人士一樣寫程式碼

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

青灯夜游
青灯夜游轉載
2021-05-14 10:51:032065瀏覽

這篇文章要為大家介紹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.com。如有侵權,請聯絡admin@php.cn刪除