22個不能錯過的 JavaScript 技巧

在最新版的JavaScript 中，JavaScript 語言引入了更多的有用語法。在本文中，我將介紹幾個在JavaScript新舊版本中易于閱讀的技巧。

1、短循環(huán)

你知道在 JavaScript 中你可以在一行中縮短循環(huán)嗎？這意味著你現(xiàn)在可以為循環(huán)編寫更少的代碼。

var names = ["John", "Trevor", "Steve", "Jacob"]
// long method
for(var i = 0;  i < names.length; i++) { 
  console.log(names[i])
}
//short single line method
for(let name of names) console.log(name)

2、三元運算符
我們可以使用三元運算符以簡潔的方式編寫 if...else 語句。而不是寫：

const x = 20;
let grade;
if (x >= 50) {
  grade = "pass";
} else {
  grade = "fail";
}

我們可以寫：

const x = 20;
let grade = (x >= 50) ? "pass" : "fail";

他們都檢查 x 是否大于或等于 50，然后分配字符串 'pass' 如果為真，否則為假。

我們還可以使用三元運算符編寫嵌套的 if 語句，如下所示：

const x = 20;
let grade = (x >= 50) ? "pass" : (x >= 25) ? "good fail" : 'bad fail';

這與下面代碼一樣：

const x = 20;
let grade;
if (x >= 50) {
  grade = "pass";
} else {
  if (x >= 25) {
    grade = "good fail";
  } else {
    grade = "bad fail";
  }
}

3、調(diào)整一個數(shù)組的長度

你知道我們可以使用 JavaScript length方法調(diào)整數(shù)組的大小嗎？長度不僅用于獲取數(shù)組的大小。如果我們將數(shù)組的長度設(shè)置為任意數(shù)字，它將對數(shù)組進行切片。

var array1 = [1, 2, 3, 4, 5, 6]
var array2 = ["Python", "JavaScript", "C++", "Dart"]
array1.length=3
array2.length=1
console.log(array1) // [1, 2, 3]
console.log(array2) // ["Python"]

4、設(shè)置默認(rèn)值

如果變量為假，我們可以通過編寫以下內(nèi)容來設(shè)置默認(rèn)值：

let x;
let y = x || 10;

這與下面代碼一樣：

let x;
let y;
if (x === undefined || x === null || x === 0 || x === '' || isNaN(x)) {
  y = 10;
}

因為 x || 10 表示如果 x 為假，即 x 為 undefined、null、0、空字符串或 NaN，那么我們將 10 賦值給 y，這與：

if (x === undefined || x === null || x === 0 || x === '' || isNaN(x)) {
  y = 10;
}

5、 JavaScript 中的時間戳

你知道在 JavaScript 中我們有很多方法可以使用 Date 方法來獲取日期嗎？查看下面的代碼示例。

// original method
var date = new Date()
timestamp = date.getDate()
console.log(timestamp)
// shorter method
timestamp = new Date().getDate()
console.log(timestamp)
// shortest method
timestamp += new Date();
console.log(timestamp)

6、聲明多個變量的簡寫

我們可以通過編寫來聲明多個變量：

let x = y = z = 5;

這與下面代碼一樣：

let x = 5;
let y = 5;
let z = 5;

它的工作原理是，首先將 5 分配給 z，然后將 z 的值分配給 y，最后將 y 的值分配給 x 。

7、刪除數(shù)組中的一個值

通常，我們使用 delete 方法從數(shù)組中刪除一個項目。但這就是在陣列中打孔的方法。它將 undefined 放在刪除項目索引上。

我們可以使用該splice方法做一些工作，但它會從數(shù)組中完全刪除索引，而不會留下任何漏洞。

// synatax :  splice(array index, number of value to delete )
var array = [1, 2, 3, 4, 5, 6]
//delete method
delete array[4]
//splice method
array.splice(4,1) 
console.log(array) // [1, 2, 3, 4, 6]

8、If Truthy

檢查某些東西是否為真的JavaScript簡寫，它不是 undefined、null、0、空字符串或 NaN，如下所示：

if (x){
 console.log('x is truthy')
}

上面的代碼檢查 x 是否為真，如果是，則執(zhí)行 console.log。

9、For...Of 循環(huán)簡寫

從 ES6 開始，我們可以使用 for...of 循環(huán)來遍歷數(shù)組或類數(shù)組對象中的變量，其中包括 Maps、Sets、參數(shù)對象、生成器、迭代器以及任何帶有 [Symbol.iterator]方法。

我們可以寫：

let fruits = ['apple', 'orange', 'grape'];
for (let fruit of fruits) {
  console.log(fruit);
}

這比使用帶有索引的常規(guī) for 循環(huán)更干凈，并且它也適用于其他可迭代對象。例如，我們可以將它與生成器一起使用：

let fruits = function*() {
  yield 'apple';
  yield 'orange';
  yield 'fruits';
}
for (let fruit of fruits()) {
  console.log(fruit);
}

10、JavaScript 中的 IN 運算符

通過使用in運算符，你可以檢查對象中是否存在鍵。當(dāng)你檢查對象中是否存在特定鍵時，這個技巧就會派上用場。

var a = 4 
var b = 5 
var list = {1:7, 3:9, 4:0, 2:9}
console.log(a in list) //true 
console.log(b in list) // false

11、Array.forEach

我們可以使用 Array.forEach 方法來遍歷數(shù)組，盡管它比循環(huán)慢。

要使用它，我們可以編寫如下代碼：

let fruits = ['apple', 'orange', 'grape'];
fruits.forEach((fruit, index) => console.log(fruit));

12、函數(shù)參數(shù)

你不需要定義函數(shù)參數(shù)，你可以將函數(shù)參數(shù)用作數(shù)組對象，而無需在函數(shù)實現(xiàn)時聲明參數(shù)。

function add() // no paramter is defined
{
  var sum = 0
  for(var i=0; i < arguments.length; i++)
  {
      sum=sum + arguments[i]

  }
  console.log("Total Sum : ", sum) // Total Sum : 9
}
// calling function
add(1, 3, 5)

13、十進制底指數(shù)

我們可以指定指數(shù)，而不是寫出帶有所有尾隨零的整數(shù)。

例如，如果我們有：

1e0

為1

1e1

10

1e2

100

1e3

為 1000 等。

14、JavaScript 字符串填充

JavaScript 填充用在字符串文本中添加。我們可以在字符串的開頭或結(jié)尾添加填充。這是padStartand的語法padEnd。

padStart(targetLength, padString(optional))
padEnd(targetLength, padString(optional))

PadString 是兩種 Padding 方法中的可選參數(shù)。下面是理解他們工作的代碼示例。

console.log("123".padStart(5)) // 123 
console.log("123".padStart(5, "0")) // 00123
console.log("123".padEnd(5, "0")) // 12300 
console.log("123".padEnd(10, "0")) // 1230000000

15、數(shù)字分隔符

最新的瀏覽器允許我們使用下劃線來分隔數(shù)字，以便于閱讀。例如，我們可以寫：

100_000_000

一億，下劃線可以放在我們選擇的任何地方。

16、Power ** 運算符

此功能將為你節(jié)省大量數(shù)學(xué)計算時間。你可能使用Math.pow()函數(shù)來計算數(shù)字的冪。但我們可以使用 ** 運算符代替它。

// old method
var p = Math.pow(2,5)
console.log(p) // 32
// new method
var p = 2**5
console.log(p) // 32

你會認(rèn)為Math.pow()仍然是最好的方法。那么使用這種方法的長數(shù)學(xué)方程呢？

// old method
var p = Math.pow(2,5) + Math.pow(2,5) + Math.pow(2,1) + Math.pow(2,3) + Math.pow(2,4) + Math.pow(2,9)
console.log(p) // 602
// new method
var p = 2**5 + 2**5 + 2**1 + 2**3 + 2**4 + 2**9
console.log(p) // 602

嗯，它比使用Math.pow()函數(shù)更清晰易懂。

17、對象屬性簡寫

而不是寫：

const foo = 1,
  bar = 2;
const obj = {
  foo: foo,
  bar: bar
};

我們可以寫：

const foo = 1,
  bar = 2;
const obj = {
  foo,
  bar
};

兩段代碼完全一樣。

18、一元運算符 (+)

一元運算符可以方便地將字符串?dāng)?shù)字轉(zhuǎn)換為數(shù)字格式并將日期轉(zhuǎn)換為毫秒。看看下面的代碼示例。

var strnum = "324.5"
var num = +strnum
console.log(num) // 324.5
var currentDate = new Date(); 
var millisSince = +currentDate;
console.log(millisSince)

19、箭頭函數(shù)

如果箭頭函數(shù)只有一行，那么我們就不需要大括號，我們可以在不使用 return 關(guān)鍵字的情況下從它返回一個值。

例如：

() => 1

與下面代碼是相同的：

() => {
  return 1
}

如果我們不關(guān)心 this 的值，我們可以使用箭頭函數(shù)，因為箭頭函數(shù)不會改變函數(shù)內(nèi)部的 this 值。

20、includes()

我敢打賭，你們中的大多數(shù)人都用來indexOf在數(shù)組中查找元素。不要使用那個方法。因為我們有更好的方法來做同樣的工作。使用include方法而不是indexOf返回布爾值的結(jié)果。

var array = ["Python", "JavaScript", "C++", "Dart", "JAVA"]
console.log(array.includes("JavaScript")) //True
console.log(array.includes("C#")) // false

21、重定向到 URL

JavaScript 有一些方法可以在你執(zhí)行代碼后，將你重定向到瀏覽器中的網(wǎng)站。當(dāng)用戶在網(wǎng)站上執(zhí)行任何操作并且 JavaScript 將用戶重定向到另一個 URL 時，這個就會派上用場。

const Redirect = (url, asLink = true) => asLink ? (window.location.href = url) : window.location.replace(url);
redirect('https://medium.com/@codedev101')

22、將浮點數(shù)轉(zhuǎn)換為整數(shù)（快速方法）

要將浮點數(shù)轉(zhuǎn)換為整數(shù)，你必須使用Math.floor()、Math.round()和Math.ceil()方法，但你可以使用|按位 OR 運算符以更快的方式進行轉(zhuǎn)換。查看下面的代碼示例。

// old way
console.log(Math.floor(23.56))
// Quick way
console.log(23.56 | 0)

最后的想法

上面的技巧大多來自 ES6。這個版本的 JavaScript 提供了許多快捷的方式方法，可以讓我們更輕松地編寫代碼和閱讀。

for...of 循環(huán)非常有用，因為它可以遍歷數(shù)組和類似數(shù)組的對象。沒有其他循環(huán)可以做到這一點。

數(shù)字分隔符較新，僅在最新瀏覽器中可用。

最后，感謝你的閱讀。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容