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ù)組進(jìn)行切片激况。

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祟同、十進(jìn)制底指數(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 運算符以更快的方式進(jìn)行轉(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)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市斗遏，隨后出現(xiàn)的幾起案子山卦，更是在濱河造成了極大的恐慌，老刑警劉巖诵次，帶你破解...
    沈念sama閱讀 217,185評論 6贊 503
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件账蓉，死亡現(xiàn)場離奇詭異，居然都是意外死亡逾一，警方通過查閱死者的電腦和手機(jī)铸本，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評論 3贊 393
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來遵堵，“玉大人箱玷，你說我怎么就攤上這事∧八蓿” “怎么了锡足？”我有些...
    開封第一講書人閱讀 163,524評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長壳坪。 經(jīng)常有香客問我舶得，道長，這世上最難降的妖魔是什么爽蝴？ 我笑而不...
    開封第一講書人閱讀 58,339評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任沐批，我火速辦了婚禮，結(jié)果婚禮上霜瘪，老公的妹妹穿的比我還像新娘。我一直安慰自己惧磺，他們只是感情好颖对，可當(dāng)我...
    茶點故事閱讀 67,387評論 6贊 391
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著磨隘，像睡著了一般缤底。 火紅的嫁衣襯著肌膚如雪顾患。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,287評論 1贊 301
  • 城市分裂傳說
    那天个唧，我揣著相機(jī)與錄音江解，去河邊找鬼。 笑死徙歼，一個胖子當(dāng)著我的面吹牛犁河，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播魄梯，決...
    沈念sama閱讀 40,130評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼桨螺，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了酿秸？” 一聲冷哼從身側(cè)響起灭翔，我...
    開封第一講書人閱讀 38,985評論 0贊 275
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎辣苏，沒想到半個月后肝箱，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,420評論 1贊 313
  • ?護(hù)林員之死
    正文 獨居荒郊野嶺守林人離奇死亡稀蟋，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,617評論 3贊 334
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年煌张，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片糊治。...
    茶點故事閱讀 39,779評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡唱矛，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出井辜，到底是詐尸還是另有隱情绎谦，我是刑警寧澤，帶...
    沈念sama閱讀 35,477評論 5贊 345
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布粥脚，位于F島的核電站窃肠，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏刷允。R本人自食惡果不足惜冤留，卻給世界環(huán)境...
    茶點故事閱讀 41,088評論 3贊 328
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望树灶。 院中可真熱鬧纤怒，春花似錦、人聲如沸天通。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至烘豹，卻和暖如春瓜贾，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背携悯。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工祭芦， 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人憔鬼。 一個月前我還...
    沈念sama閱讀 47,876評論 2贊 370
  • 代替公主和親
    正文 我出身青樓龟劲，卻偏偏與公主長得像，于是被迫代替她去往敵國和親逊彭。 傳聞我的和親對象是個殘疾皇子咸灿，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,700評論 2贊 354