常工作中，我確實經常去幫大家review代碼，長期以來，我發現有些個功能函數，JS其實可以稍微調整一下，或者換個方式來處理，代碼就會看起來更清晰，更簡潔，甚至效率更高，主要是還更好理解。

下面我列舉5個案例，我們一起來看一下

一、建議考慮使用FlatMap方法

先來看一段同時使用filter和map方法遍歷數組的代碼。我相信這種場景大家一定碰到過。為了說明問題，這里我用簡單的數字內容來舉個例子。

上面代碼這樣寫，沒什么問題，而且方法的連用也是比較推薦的處理方式， 但是，還是請多想想，其實我們有更好的方式來處理這一類問題。

現在我們看使用FlatMap如何實現的

使用FlatMap的好處是

只要遍歷一遍，而且不產生中間多余數組

二、建議調整數組方法調用的順序

日常工作中寫的比較多的數組方法有filter()，find()，map()，reduce()，在必要的場景下，我們也建議將這些個方法連起來一起調用。但是，一定要注意調用順序，否則也會影響效率問題。

比如下面這樣：

仔細看上面這段代碼，你就會發現

如果我們首先使用過濾器，然后排序，這樣執行就能提高效率

三、建議這里使用reduce方法

你寫的代碼一定要讓大家看的懂，代碼要簡潔，然而，有些方法它就出于這個目的創造的，如果你又不用，那就太可惜了，比如reduce方法。

舉個例子，我們先從接口中拉出一段數據，然后對數據內容進行分類處理，像下面代碼這樣

我看到大多數前端開發人員都會使用forEach方法或者錯誤的使用map方法去處理，相比之下，實際上這里特別適合使用reduce方法

看起來會更清晰而且更容易理解

四、建議使用原生JavaScript類

上面這張很清晰明了的拆解了URL的每一部分

關于頁面的URL我們可以組裝也可以拆卸，這里說一下URL各部分的組裝問題，你現在或者曾經肯定處理過URL拼接的問題，代碼可能是這么寫的

這樣寫雖然能夠實現，但是代碼看起來很混亂，很可能會被破壞，并且每次都需要你在最后添加一些規則，添加一些其他參數。

比如，你可能忘記添加/或者&符號就會導致錯誤，下面看看原生類怎么實現的，可以對比一下兩者區別

這樣看來，在處理URL組裝問題上是不是可以考慮使用原生類了？

五、建議使用生成器

提到生成器，大家可能只是聽過，或者知道怎么使用，而實際項目中很少去用。實際上它有很多使用場景。

使用生成器能夠節省很多代碼，代碼也非常清晰。如，進行異步操作或者按需循環或者按需加載時。

看這段代碼：

上面代碼中main函數，可以根據用戶交互或者其它技巧來調用。因為這里不希望無限加載。

總結

好了，就說這幾點，日常工作中，希望大家都寫出高質量的代碼。

avaScript基礎概念

JS的組成：

1.ECMAScript：Js語法

2.DOM：文檔對象模型 ， 文檔：html文檔 ，操作html文檔 （操作html文檔的工具）

3.BOM：瀏覽器對象模型 ， 操作瀏覽器的工具

JS的三種書寫方式

行內式，內嵌式，外部鏈接

JavaScript輸入·輸出語句

alert(msg) 瀏覽器彈出警告框

consle.log(msg) 瀏覽器控制臺打印輸出信息

prompt(info) 瀏覽器彈出輸入框 用戶可以輸入信息

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

變量的概念

通俗：變量是用于存放數據的容器。 我們通過 變量名 獲取數據，甚至數據可以修改。

變量理解：變化的量，變化的內容，變化的數據

變量存儲數據理解：程序運行過程中的數據存儲在內存中，但是內存比較大，為了方便管理，所以將內存分成一個一個的盒子（變量）來存儲

變量的使用

1.聲明變量 var 變量名；var age；（聲明一個 名稱為age 的變量）

2.變量的賦值 var 變量名 = 值; var age = 18; 聲明變量age同時賦值為 18

變量案例

var myname = '旗木卡卡西'; // 字符串
var address = '火影村';
var age = 30; // 數字
var email = 'kakaxi@itcast.cn';
var gz = 2000;
console.log(myname);
console.log(address);
console.log(age);
console.log(email);
console.log(‘gz’); // gz
console.log(gz); // 2000

注意：

• 變量賦值時，值如果是字符串需要添加’’,“”
• 每行代碼結束，都需要添加;
• 變量在使用時，不能添加引號 （定義，聲明變量的時候，沒有引號，使用的時候自然也不能添加引號）
  案例2：

// 1. 用戶輸入姓名 存儲到一個 myname的變量里面
var myname = prompt('請輸入您的名字');
// prompt 做的事情：
// (1). 彈出輸入框 , 用戶輸入內容:zs
// (2). 將用戶輸入內容返回 ，相當于 ：var myname = 'zs';
// 2. 輸出這個用戶名
alert(myname); // zs

變量命名規范

規則

由字母(A-Za-z)、數字(0-9)、下劃線(_)、美元符號( $ )組成，如：usrAge, num01, _name ***

嚴格區分大小寫。var app; 和 var App; 是兩個變量

不能 以數字開頭。 18age 是錯誤的

不能 是關鍵字、保留字。例如：var、for、while

變量名必須有意義。 MMD BBD nl → age

遵守駝峰命名法。首字母小寫，后面單詞的首字母需要大寫。 myFirstName

推薦翻譯網站： 有道 愛詞霸

變量案例-交換兩個變量

// js 是編程語言有很強的邏輯性在里面： 實現這個要求的思路 先怎么做后怎么做 
// 1. 我們需要一個臨時變量幫我們
// 2. 把apple1 給我們的臨時變量 temp 
// 3. 把apple2 里面的蘋果給 apple1 
// 4. 把臨時變量里面的值 給 apple2 
var temp; // 聲明了一個臨時變量為空
var apple1 = '青蘋果';
var apple2 = '紅蘋果';
temp = apple1; // 把右邊給左邊
apple1 = apple2;
apple2 = temp;
console.log(apple1);
console.log(apple2);

簡單數據類型
JavaScript 中的簡單數據類型及其說明如下：

數字型范圍：JavaScript中數值的最大和最小值

alert(Number.MAX_VALUE); // 1.7976931348623157e+308 （10的正308次方）

alert(Number.MIN_VALUE); // 5e-324 5e-324 （10的負324次方）

數字型三個特殊值

alert(Infinity); // Infinity
alert(-Infinity); // -Infinity
alert(NaN); // NaN ***
//課堂代碼：
// 5. 無窮大
console.log(Number.MAX_VALUE * 2); // Infinity 無窮大 
// 6. 無窮小
console.log(-Number.MAX_VALUE * 2); // -Infinity 無窮大
// 7. 非數字
console.log('pink老師' - 100); // NaN：字符串是無法與數字進行運算的，所以結果是一個非數字

isNaN
用來判斷一個變量是否為非數字的類型，返回 true 或者 false

var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum); // false ，21 不是一個非數字
var usrName = "andy";
console.log(isNaN(userName)); // true ，"andy"是一個非數字

字符串型 String
字符串型可以是引號中的任意文本，其語法為 雙引號 “” 和 單引號’’

var strMsg = "我愛北京天安門~"; // 使用雙引號表示字符串
var strMsg2 = '我愛吃豬蹄~'; // 使用單引號表示字符串
// 常見錯誤
var strMsg3 = 我愛大肘子; // 報錯，沒使用引號，會被認為是js代碼，但js沒有這些語法

字符串引號嵌套
JS 可以用單引號嵌套雙引號 ，或者用雙引號嵌套單引號 (外雙內單，外單內雙)

var strMsg = '我是"高帥富"程序猿'; // 可以用''包含""

var strMsg2 = "我是'高帥富'程序猿"; // 也可以用"" 包含''

// 常見錯誤

var badQuotes = 'What on earth?"; // 報錯，不能 單雙引號搭配

字符串轉義符

類似HTML里面的特殊字符，字符串中也有特殊字符，我們稱之為轉義符。

轉義符都是 \ 開頭的，常用的轉義符及其說明如下：

字符串長度

• 字符串是由若干字符組成的，這些字符的數量就是字符串的長度
• 通過字符串的 length 屬性可以獲取整個字符串的長度

var strMsg = "我是帥氣多金的程序猿！";

 alert(strMsg.length); // 顯示 11

字符串拼接

• 多個字符串之間可以使用 + 進行拼接，其拼接方式為 字符串 + 任何類型 = 拼接之后的新字符串
• 拼接前會把與字符串相加的任何類型轉成字符串，再拼接成一個新的字符串

//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 數值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 數值字符串 + 數值
alert('11' + 12); // 1112 
//以上的字符串拼接都沒有意義，一般我們字符串會與變量進行拼接

原文鏈接：https://blog.csdn.net/H_eartbeat/article/details/103102782

文講述了 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】