9 條非常強大的 JavaScript 技巧

文講述了 9 條非常強大的 JavaScript 技巧。

作者 | Klaus

譯者 | 彎月，責編 | 屠敏

以下為譯文：

全部替換

我們知道string.replace函數只會替換第一次出現的位置。在正則表達式末尾添加 /g 即可替換所有出現。

var example = "potato potato";
console.log(example.replace(/pot/, "tom"));
// "tomato potato"
console.log(example.replace(/pot/g, "tom"));
// "tomato tomato"

提取唯一值

使用Set對象和spread操作符可以創建一個新的數組，僅包含唯一的值。

var entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1]
var unique_entries = [...new Set(entries)];
console.log(unique_entries);
// [1, 2, 3, 4, 5, 6, 7, 8]

數字轉為字符串

只需要將其與空字符串連接。

var converted_number = 5 + "";
console.log(converted_number);
// 5
console.log(typeof converted_number);
// string

字符串轉為數字

只需要使用 + 運算符。

注意這個技巧只能在“字符串形式的數字”上使用。

the_string = "123";
console.log(+the_string);
// 123

the_string = "hello";
console.log(+the_string);
// NaN

打亂數組的元素順序

var my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(my_list.sort(function {
return Math.random - 0.5
}));
// [4, 8, 2, 9, 1, 3, 6, 5, 7]

多維數組扁平化

只需使用spread運算符。

var entries = [1, [2, 5], [6, 7], 9];
var flat_entries = .concat(...entries);
// [1, 2, 5, 6, 7, 9]

短路條件

比如下面的例子：

if (available) {
addToCart;
}

只需將變量和函數寫到一起即可：

available && addToCart

動態屬性名

原來我以為必須先定義一個對象才能指定動態屬性名，其實不需要：

const dynamic = 'flavour';
var item = {
name: 'Coke',
[dynamic]: 'Cherry'
}
console.log(item);
// { name: "Coke", flavour: "Cherry" }

使用length屬性來改變數組大小或清空數組

只需要重寫數組的length即可。

要想改變數組大小：

var entries = [1, 2, 3, 4, 5, 6, 7]; 
console.log(entries.length);
// 7
entries.length = 4;
console.log(entries.length);
// 4
console.log(entries);
// [1, 2, 3, 4]

要想清空數組：

var entries = [1, 2, 3, 4, 5, 6, 7]; 
console.log(entries.length);
// 7
entries.length = 0;
console.log(entries.length);
// 0
console.log(entries);
//

原文：https://dev.to/razgandeanu/9-extremely-powerful-javascript-hacks-4g3p

本文為 CSDN 翻譯，轉載請注明來源出處。

【End】

語說的好，長江后浪推前浪。作為一名程序員，我一直很偏愛JavaScript，不為什么，就是因為強大。但是，TypeScript的出現，與之形成對比，讓我不得不開始考慮TypeScript，下面我就為大家解析一下我為什么要開始用TypeScript。

作者 | Jamie Morris

譯者 | 蘇本如，責編 | 毛中政

出品 | CSDN（ID：CSDNnews）

以下為譯文

JavaScript可能是一種事實上的現代Web開發語言，它也是我一直是我選擇用來編寫腳本的語言。用Python編寫代碼很有趣，但是如果我有一些東西要自動化，我會使用Node。

在過去，我選擇的服務器端語言是C#，但現在我感覺它很笨拙，盡管它很強大。我曾經天真地認為Node是服務器端語言的“神來之筆”，它滿足了我編寫代碼的一切需求。我甚至可以有很多種不同的方式使用JavaScript來編寫安卓（Android）和iOS應用程序。

我并不是說JavaScript對于編寫任何程序來說，是一個完美的工具，但是多年來它確實對我非常有用。

我一直堅定地承認JavaScript在Web前臺的繁重的開發工作上的一些缺陷，這包括了Gary Bernhardt在他的戲謔性的 “Wat?” 閃電演講中令人一想起來就會發笑的例子。如果你從來沒有看過這個視頻，現在就停下你的閱讀，趕緊去找這個視頻看看。看完后你會感謝我的。

Gary Bernhardt的這個閃電演講現在已經成為我的推薦閱讀列表的一部分，和Jonathan Creamer所寫的“面向23世紀的JavaScript體系結構”這篇文章一起呈現給未來的前端開發人員。

雖然自從ES6出現以后，這篇文章中的一些內容看起來是多余的，但是它對于解釋JavaScript需要從“普通編程語言”轉變思維的事情（如果有這樣的事情的話）有很大的幫助。這篇文章本身是我5年前開始自己的JavaScript之旅的一個重要原因。

但是為什么我現在威脅說要再也不用回JavaScript呢？答案很簡單，因為TypeScript。

TypeScript是什么？

我猜你們已經聽說過TypeScript，如果沒有的話，讓我試著總結一下：TypeScript是強類型的JavaScript語言。

它添加了你們對強類型語言所期望的一些特性，并且需要一個編譯步驟（技術上這個步驟叫“Transpilation”）來將TypeScript轉換為JavaScript的代碼。這是因為瀏覽器不理解TypeScript。

從技術上講，TypeScript不添加任何新的運行時特性，它只是為開發人員添加一些特性。

我聽說有人把TypeScript說成是一種“不是愛它就是恨它”的開發語言，但是我還沒有見過一個用過TypeScript的人說恨它。但是我和很多不想嘗試它的人交流過。那是大約2016年中的事，其實我也是其中之一。

我聽到的同行們對TypeScript的最壞批評是，它是一套需要額外學習的工具。不僅包括語言本身，還包括了構建過程。然而，大多數現代Web應用程序在其構建鏈中至少有一個鏈接以Babel的形式保留給JavaScript，而Babel是一個允許較新JavaScript在較舊的瀏覽器上運行的工具。

將TypeScript添加到這個鏈中不應該是件高難度的事，特別是因為Babel從v7版本開始就支持TypeScript編譯。

盡管TypeScript不應該是一種高深的科學，但有時它會讓人產生這種感覺。這就是為什么剛開始使用TypeScript的人有時會掙扎著回到JavaScript上的原因之一，因為JavaScript就在瀏覽器中運行。

TypeScript帶來的好處

正如我上面所說，我從未聽過有人使用TypeScript，這是件很遺憾的事。TypeScript帶來的好處遠遠大于它的困難，特別是在Angular CLI（Angular命令行接口）或Create- React-App（注：是一個官方支持的創建React單頁應用程序的方法）大行其道的那個時代，這兩個工具都允許你在幾分鐘內開始一個新的支持TypeScript的項目。

我想你已經知道這些好處是什么，但如果你不知道的話，請允許我總結一下：

TypeScript的編譯步驟可以讓你及早發現問題，而不是等待運行時失敗。

你的IDE現在甚至可以在編譯步驟之前提示你一些錯誤。想象一下，如果你的IDE能夠告訴你正在引用一個不存在的變量，或者正在使用錯誤的參數來調用一個函數，那真是革命性的進步！（當然，這里我是開玩笑的，因為“真正的”編程語言很多年前就有了這些功能）

當ECMAScript（驅動JavaScript語言的標準）中提出新的特性時，TypeScript能夠很早地采用它們，讓你一直保持在技術最前沿。

但實際上，TypeScript的主要好處是，它可以讓你的代碼以JavaScript無法描述的方式進行自我描述。

你可能認為，當你是一個項目的唯一開發人員時，JavaScript并沒有那么糟糕，因為所有的東西都在你的腦子里，而且你有完美的記憶力，是這樣嗎？不，你錯了。即使作為一個項目的唯一開發人員，我在編寫代碼時也容易出現一陣陣健忘癥。

現在，當我編寫普通的JavaScript時，我討厭閱讀一個函數的定義來搞清楚如何使用它。我不知道它會返回什么（如果有返回值的話）或者它接受什么樣的參數。我可能知道參數名稱和個數，但這并不總是足夠的（如下面代碼所示）：

1 Function doTheThing {
2 let error = false;
3
4 // About a million lines of code that might cause an error
5
6 return error;
7 }
8
9 function consumeTheThing {
10 let error = doTheThing;
11 if (error) {
12 // What do I do with the error now?
13 }
14 }

這就是我想要表達的。這里的“error”是一個布爾型的值嗎？當我看到第2行時，它看起來確實是這樣的，但是從那里到結束的“doTheThing”行之間的一百萬行代碼中間的“error”呢？它可能是一個字符串，或者一個對象，或者天知道是什么。

你可能會認為這種靈活性是一種資產。它可以是，但更多的時候，它是一個陷阱，引誘你進入一種容易出錯的方式，在你和你的同事之間制造很多小挫折。有沒有在進入別人的代碼中，感到自己像在迷宮里的感覺？

這就是你的代碼在別人看來的樣子。你可以用JavaScript編寫“好”的代碼，但是很少有關于該語言的內容鼓勵你這樣做。

而這正是TypeScript的美妙所在。它不會強迫你成為一個好的開發人員。但它給了讓你成為好的開發人員的工具。

TypeScript缺點

TypeScript有缺點嗎？當然有。

更多的打字（指定類型），無論是從兩個方面的那一個來看都是這樣。你的鍵盤會磨損得更快（這可能是你們中使用蝴蝶鍵盤的人所擔心的），這沒什么大不了的。

但是一些JavaScript開發人員討厭在每個新函數或變量中鍵入類型。你不必非這么做不可，但是如果你不使用類型，為什么要使用TypeScript呢？

因為代碼必須編譯，因此每次更新和測試運行需要稍長一點時間。其實需要的只是多幾秒鐘而已，而使用TypeScript節省的時間遠遠超過編譯它所花費的時間。

構建一個項目的復雜性有時是非常痛苦的。這是真的。如果你不熟悉你的構建工具，構建一個新項目可能是一個令人沮喪的體驗。

短期內我的建議是找一個啟動項目讓你開始。至于長期的建議，我建議你花時間學習工具-tsc，Babel，WebPack和所有的有用的工具。

我覺得我的論點有點傾向性。我并沒有把重點放在TypeScript的缺點上，而是放在更多地強調優點上。我猜這也是我不會花太多時間論證每頓飯都吃麥當勞的好處的原因，因為這樣做的好處是有限的（不用再做飯了……我想只是這樣）。

關于TypeScript的統計

像往常一樣，StackOverflow提供的數據會判斷我的看法是對還是錯。表面上的數據來看，我好像錯得太離譜了。

根據StackOverflow 2019開發者調查報告，JavaScript已經連續第七年成為StackOverflow上談論最多的語言，67.8%的受訪者都在使用它，而TypeScript在這個排名中名列第十，它正在被21.2%的受訪者使用。

但是在2018年，TypeScript的這個統計數字只為17.4%，而再前一年僅為9.5%。2016年的時候，甚至只有0.47%的受訪者使用TypeScript。

在這個角度來看，TypeScript這些年來有了驚人的增長，這主要歸功于Angular框架，它在早些時候放棄了對JavaScript的支持。

當你看到“最受歡迎”的語言排名時，TypeScript的表現更加搶眼了，它以73.1%的比分排名了第三位（位列Rust和Python之后）。而JavaScript以66.8%排在第11位。

前景

我不認為TypeScript會很快取代JavaScript，理解后者對于前者的工作至關重要。而且我們也不會看到TypeScript在任何瀏覽器中以本機方式運行。

TypeScript是一個預處理器，就像之前的CoffeeScript一樣。TypeScript和CoffeeScript的區別在于后者是對構建它的語言的根本性改變，而TypeScript是一種自然演變。這不僅僅使得學習它更容易，而且使得從JavaScript項目轉換為TypeScript的過程更為漸進。首先簡單地將所有以.js結尾的文件重命名為以.ts為結尾的文件，你就有了一個TypeScript項目！

然后，你就可以一步一步地開始采用TypeScript的語言特性。我不能保證這個過程會很容易，但是它會告訴你一些JavaScript永遠無法做到的事情。當你開始下一個項目時，TypeScript編譯器將會在那里等待你。

所以,使用了TypeScript,我知道我再也不會用回JavaScript了。

原文：https://medium.com/JavaScript-in-plain-english/ill-never-go-back-to-JavaScript-16370dc264a0

本文為 CSDN 翻譯，轉載請注明來源出處。

【End】

于初學者，JavaScript 有哪些不為人知卻非常有用的技巧呢？在本文中，我們將一同為大家解密與分享。

作者 | Duomly

譯者 | 彎月，責編 | 屠敏

出品 | CSDN（ID：CSDNnews）

以下為譯文：

數組是Javascript中最常見的概念，我們有很多辦法來處理數組中的數據。考慮到數組是Javascript中最基本的概念之一，是初學者剛剛接觸編程時就學習的概念，我想通過本文介紹一些不為人知卻非常有用的技巧。我們開始吧！

從數組中刪除重復

在有關Javascript數組的面試問題中，有一個問題很常見：怎樣從Javascript數組中提取不重復的值。我有一個快捷簡便的方法：只需使用new Set即可。實現的方法有兩種：一種使用.from，另一種使用擴展運算符（...）：

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];

很容易，是不是？

替換數組中指定的值

在編程時，有時候需要替換某個特定的值，有個非常簡單的方法來實現這一點。只需使用.split(start, 要刪除的值，要添加的值)，然后設置好三個參數，指明希望從哪里修改、要修改幾個值，以及新的值是什么。

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.splice(0, 2, “potato”, “tomato”);
console.log(fruits); // returns [“potato”, “tomato”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]

不使用.map實現映射

大概所有人都知道數組的.map方法，但還有另一個方法，可以用同樣簡潔的方式實現類似的效果。這種方法就是.from：

var friends = [
{ name: ‘John’, age: 22 },
{ name: ‘Peter’, age: 23 },
{ name: ‘Mark’, age: 24 },
{ name: ‘Maria’, age: 22 },
{ name: ‘Monica’, age: 21 },
{ name: ‘Martha’, age: 19 },
]


var friendsNames = Array.from(friends, ({name}) => name);
console.log(friendsNames); // returns [“John”, “Peter”, “Mark”, “Maria”, “Monica”, “Martha”]

清空數組

如果想把一個數組清空，但不想一個個刪除其中的元素，該怎么辦？其實只需一行代碼即可：將length設置為0。

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];


fruits.length = 0;
console.log(fruits); // returns

將數組轉化為對象

如果有一個數組，我們希望將其數據放到一個對象中，那么最快的方式就是使用擴展運算符（...）：

var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}

用數據填充數組

有時候需要創建一個數組并用數據填充，或者需要一個所有值都相同的數組，此時可以使用.fill方法簡潔明快地實現：

var newArray = new Array(10).fill(“1”);
console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]

合并數組

你知道怎樣可以不使用.concat來合并數組嗎？最簡單的方法只需要一行代碼。你也許猜到了，那就是擴展運算符（...），它非常適合處理數組：

var fruits = [“apple”, “banana”, “orange”];
var meat = [“poultry”, “beef”, “fish”];
var vegetables = [“potato”, “tomato”, “cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food); // [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”]

求兩個數組的交集

這也是Javascript面試中最常遇到的問題，因為它能展示出你是否會使用數組方法，以及邏輯如何。要找出兩個數組的交集，只需要使用之前使用的技巧，首先保證數組中的值不重復，然后利用.filter和.includes方法即可。這樣就能找出同時出現在兩個數組中的元素。代碼如下：

var numOne = [0, 2, 4, 6, 8, 8];
var numTwo = [1, 2, 3, 4, 5, 6];
var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
console.log(duplicatedValues); // returns [2, 4, 6]

從數組中刪除假值

首先我們來定義假值。在Javascript中，假值包括false、0、''、、NaN、undefined。現在可以考慮怎樣從數組中刪除假值了。只需使用.filter方法即可實現：

var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false];
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns [“blue”, 9, true, “white”]

從數組中獲取隨機值

有時候需要從數組中隨機選擇一個值。簡單、快捷、簡短且干凈的方式就是在數組長度的范圍內生成一個隨機的索引。代碼如下：

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]

反轉數組

需要反轉數組時，我們不需要使用復雜的循環和函數來重新創建數組，因為有一個簡單的數組方法可以為我們做這件事，只需一行代碼，就能反轉數組。代碼如下：

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var reversedColors = colors.reverse;
console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”]

.lastIndexOf方法

Javascript中有一個有趣的方法，可以讓我們找出指定元素最后出現的位置。例如，如果數組中有重復元素，那么可以找出該元素最后出現的位置。代碼如下：

var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
var lastIndex = nums.lastIndexOf(5);
console.log(lastIndex); // returns 9

對數組中的所有值求和

另一個Javascript工程師面試中常見的問題就是對數組中的所有元素求和。這個完全不需要害怕，只需使用.reduce方法，一行代碼就可以實現。代碼如下：

var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14

總結

本文向你展示了13個編程技巧，可以保持代碼簡短整潔。同時別忘了，Javascript中還有許多不同的技巧值得探索，不僅是有關數組的技巧，也包括許多其他的數據類型。希望你喜歡本文的技巧，并能利用這些技巧改善開發流程。

原文：https://dev.to/duomly/13-useful-javascript-array-tips-and-tricks-you-should-know-2jfo

本文為 CSDN 翻譯，轉載請注明來源出處。

【END】

在線咨詢

上一篇：用純css3打造滾動特效
下一篇：HTML 2 PDF通用能力的設計與實現

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

9 條非常強大的 JavaScript 技巧

您的項目需求