關於javascript常用技巧的信息

本文目錄一覽：

• 1、JS常用的靜態方法
• 2、昭通java培訓學校告訴你JavaScript編程開發技巧？
• 3、Web前端性能優化的實用技巧匯總
• 4、JS Array中的常用方法
• 5、js常用增刪改查方法/js比較運算符 邏輯運算符 賦值運算符 算術運算符
• 6、Web前端工程師應該知道的JavaScript使用小技巧

JS常用的靜態方法

 靜態方法屬於整個類所有，因此調用它不用實例化，可以直接調用—— 類.靜態方法（） ====Array.from()/Array of(),Object.is(),Math.ceil()…..,不難發現這些 靜態方法都是類作為調用對象使用的

 實例方法必須先實例化，創建一個對象，才能進行調用—— 對象.實例方法（）

①Object.is()

用來比較兩個值是 否嚴格相等 ，與嚴格比較運算符（===）的行為基本一致。

②Object.assign()

用於對象的 合併 ，將多個對象的所有可枚舉屬性複製到目標對象。

newObject：目標對象

object1,object2,object3…：源對象

添加屬性

添加方法

③Object.keys()

返回值為對象的所有屬性名組成的數組

④Object.values()

返回值為對象的所有值組成的數組

⑤Object.entries()

成員是參數對象自身的（不含繼承的）所有可遍歷屬性的 鍵值對數組 。

①Array.from()

用於將兩類對象轉化為真正的數組： 類數組對象，和可遍歷的對象

②Array.isArray()

用於判斷一個對象是否為數組，如果是返回true，否則返回false

③Array.of()

用於將一組 數據 裝進一個 數組 中。

Array();              // [  ]

Array(7);            // [ , , , , , , ] 相當於數組長度為7

Array(1, 2, 3);    // [1, 2, 3]

Array.of();          // [  ]

Array.of(7);        // [7] 這裡寫7那就是數組中有一個7

Array.of(1, 2, 3);  // [1, 2, 3]

Array.of() 方法不存在 Array() 由於參數個數不同而導致的重載，它的行為很穩定，所以一般用前者代替後者。

①Number.isFinite(), Number.isNaN()

Number.isFinite()用來檢查一個 數值 是否為有限的（finite）

Number.isNaN()用來檢查一個值是否為NaN 。

Number.isFinite()對於非數值一律返回false, Number.isNaN()只有對於NaN才返回true，非NaN一律返回false。

①Math.trunc()

Math.trunc方法用於 去除一個數的小數部分 ， 返回整數部分。

②Math.sign()

Math.sign方法用來判斷一個數到底是正數、負數、還是零。 對於非數值，會先將其轉換為數值 。

它會返回五種值。

參數為正數，返回+1；

參數為負數，返回-1；

參數為 0，返回0；

參數為-0，返回-0;

其他值，返回NaN。

1）PI 取圓周率

2）abs() 取絕對值

3）ceil() 向上取整

4）floor() 向下取整

5）round() 四捨五入

6）max() 取最大值

7）min() 取最小值

8）pow() 取X的y次冪

9）random() 取隨機數 =0 1

昭通java培訓學校告訴你JavaScript編程開發技巧？

隨着互聯網的不斷發展，關於JavaScript編程開發語言的使用也被廣大程序員掌握。而今天我們就一起來了解一下，JavaScript編程開發的一些技巧都有哪些。

JSON.stringify

我們平時經常會用到JSON對象，比如當我們要實現對象的深拷貝時，我們可以用JSON對象的JSON.stringify和JSON.parse來拷貝一個完全一樣的對象，而不會對原對象產生任何引用關係。在使用localStorage時，也會用到它，因為localStorage只能存儲字符串格式的內容，所以，我們在存之前，將數值轉換成JSON字符串，取出來用的時候，再轉成對象或數組。

參數：

value：將要被序列化的變量的值

replacer：替代器。可以是函數或者是數組，如果是一個函數，則value每個屬性都要經過這個函數的處理，該函數的返回值就是後被序列化後的值。如果是一個數組，則要求該數組的元素是字符串，且這些元素會被當做value的鍵(key)進行匹配，後序列化的結果，是只包含該數組每個元素為key的值。

space：指定輸出數值的代碼縮進，美化格式之用，可以是數字或者字符串。如果是數字(大為10)的話，代表每行代碼的縮進是多少個空格。如果是字符串的話，該字符串(多前十個字符)將作顯示在每行代碼之前。

用Set來實現數組去重

在ES6中，引入了一個新的數據結構類型：Set。而Set與Array的結構是很類似的，且Set和Array可以相互進行轉換。

數組去重，也算是一個比較常見的前端面試題了，方法有很多種，這裡不多贅述。下面我們看看用Set和…(拓展運算符)可以很簡單的進行數組去重。

用塊級作用域避免命名衝突

在開發的過程中，通常會遇到命名衝突的問題，就是需要根據場景不同來定義不同的值來賦值給同一個變量。下面昭通IT培訓介紹一個使用ES6中的塊級作用域來解決這個問題的方法。

函數參數值校驗

我們知道，在ES6中，為函數增加了參數默認值的特性，可以為參數設定一些默認值，可以讓代碼更簡潔，可維護。

Web前端性能優化的實用技巧匯總

今天小編要跟大家分享的文章是關於Web前端性能優化的實用技巧匯總。javascript在瀏覽器中運行的性能，可以認為是開發者所面臨的最嚴重的可用性問題。這個問題因為javascript的阻塞性而變得複雜，事實上，多數瀏覽器使用單一進程來處理用戶界面和js腳本執行，所以同一時刻只能做一件事。js執行過程耗時越久，瀏覽器等待響應的時間越長。

一.提高加載性能

1.IE8,FF,3.5,Safari4和Chrome都允許並行下載js文件，當script下載資源時不會阻塞其他script的下載。但是js下載仍然會阻塞其他資源的下載，如圖片。儘管腳本下載不會互相影響，但頁面仍然必須等待所有js代碼下載並執行完才能繼續。因此仍然存在腳本阻塞問題.推薦將所有js文件放在body標籤底部以減少對整個頁面的影響。

2.減少頁面外鏈腳本文件的數量將會提高頁面性能：

http請求會帶來額外的開銷，因此下載單個300k的文件將比下載10個30k的文件效率更高。

3.動態腳本加載技術：

無論何時啟動下載，文件的下載和執行都不會阻塞頁面其他進程。

functionlaodScript(url,callback){

varscript=document.createElement(‘script’);_

_cript.type=’text/javascript’;

__f(script.readyState){//ie

____cript.onreadystatechange=function(){_____

if(script.readyState==’loaded’||script.readyState==’complete’){_______

_cript.onreadystatechange=null;_______

callback()_____

____

__

}else{//其他瀏覽器___

script.onload=function(){_____

_allback()

___}_

}_

script.src=url;_

document.getElementsByTagName(‘head’)[0].appendChild(script);

}

//使用

loadScript(‘./a.js’,function(){_

loadScript(‘./b.js’,function(){___

loadScript(‘./c.js’,function(){_____

console.log(‘加載完成’)___

})_

})

})

4.無阻塞加載類庫——LABjs,使用方法如下：

//鏈式調用時文件逐個下載，.wait()用來指定文件下載並執行完畢後所調用的函數

$LAB.script(‘./a.js’)_

.script(‘./b.js’)_

.wait(function(){__

_pp.init();

})

//為了保證執行順序，可以這麼做,此時a必定在b前執行

$LAB.script(‘./a.js’).wait()_

.script(‘./b.js’)_

.wait(function(){___

_pp.init();

})

二.數據存取與JS性能

1.在js中，數據存儲的位置會對代碼整體性能產生重大影響。數據存儲共有4種方式：字面量，變量，數組項，對象成員。他們有着各自的性能特點。

2.訪問字面量和局部變量的速度最快，相反，訪問數組和對象相對較慢

3.由於局部變量存在於作用域鏈的起始位置，因此訪問局部變量的比訪問跨域作用變量更快

4.嵌套的對象成員會明顯影響性能，應盡量避免

5.屬性和方法在原型鏈位置越深，訪問他的速度越慢

6.通常我們可以把需要多次使用的對象成員，數組元素，跨域變量保存在局部變量中來改善js性能

三.DOM編程

1.訪問DOM會影響瀏覽器性能，修改DOM則更耗費性能，因為他會導致瀏覽器重新計算頁面的幾何變化。

註：如過在一個對性能要求比較高的操作中更新一段HTML，推薦使用innerHTML，因為它在絕大多數瀏覽器中運行的都很快。但對於大多數日常操作而言，並沒有太大區別，所以你更應該根據可讀性，穩定性，團隊習慣，代碼風格來綜合決定使用innerHTML還是createElement()

2.HTML集合優化

HTML集合包含了DOM節點引用的類數組對象，一直與文檔保持連接，每次你需要最新的信息時，都會重複執行查詢操作，哪怕只是獲取集合里元素的個數。

①_優化一——集合轉數組collToArr

functioncollToArr(coll){_

for(vari=0,a=[],len=coll.length;i

a._ush(coll[i]);

__

returna

}

②緩存集合length

③訪問集合元素時使用局部變量（即將重複的集合訪問緩存到局部變量中，用局部變量來操作）

3.遍歷DOM

①使用只返回元素節點的API遍歷DOM,因為這些API的執行效率比自己實現的效率更高：

td{border:1pxsolid#ccc;padding:5px;margin:auto;}

tdp{text-align:left;}

tdpspan{text-align:center;display:block;}

屬性名

被替代屬性

children

childNodes

childElementCount

childNodes.length

firstElementChild

firstChild

lastElementChild

lastChild

nextElementSibling

nextSibling

previousElementSibling

previousSibling

_諮≡衿_PI——querySelectorAll()

querySelectorAll()方法使用css選擇器作為參數並返回一個NodeList——包含着匹配節點的類數組對象，該方法不會返回HTML集合，因此返回的節點不會對應實時文檔結構，着也避免了HTML集合引起的性能問題。

let_rr=_ocument.querySelectorAll(‘div.warning,_iv.notice_’)

4.重繪和重排

瀏覽器在下載完頁面的所有組件——html,js,css,圖片等之後，會解析並生成兩個內部數據結構——_OM樹，渲染樹.一旦DOM樹和渲染樹構建完成，瀏覽器就開始繪製頁面元素（paint）.

①重排發生的條件：

添加或刪除可見的DOM元素位置變化元素尺寸改變內容改變頁面渲染器初始化瀏覽器窗口尺寸變化出現滾動條時會觸發整個頁面的重排_嘏瘧囟ㄖ鞀

5.渲染樹變化的排列和刷新

大多數瀏覽器通過隊列化修改並批量執行來優化重排過程，然而獲取布局信息的操作會導致隊列強制刷新。

offsetTop,offsetWidth…

scrollTop,scrollHeight…

clientTop,clientHeight…

getComputedStyle()

一些優化建議：將設置樣式的操作和獲取樣式的操作分開：

//設置樣式

body.style.color=’red’;

body.style.fontSize=’24px’

//讀取樣式

letcolor=body.style.color

let_ontSize=_ody.style.fontSize

另外，獲取計算屬性的兼容寫法：

functiongetComputedStyle(el){_

varcomputed=(document.body.currentStyle?el.currentStyle:document.defaultView.getComputedStyle(el,”);_

returncomputed

}

6.最小化重繪和重排

①.批量改變樣式

/*使用cssText

*/el.style.cssText=’border-left:1px;_order-right:2px;_adding:20px’;

②.批量修改dom的優化方案——使元素脫離文檔流-對其應用多重改變-把元素帶迴文檔

functionappendDataToEl(option){

vartargetEl=option.target||document.body,___

createEl,___

data=option.data||[];_//讓容器脫離文檔流，減少重繪重排_

vartargetEl_display=targetEl.style.display;_

targetEl.style.display=’none’;

_

//*****創建文檔片段來優化Dom操作****_

varfragment=document.createDocumentFragment();_//給元素填充數據_

for(vari=0,max=data.length;i

createEl=

document.createElement(option.createEl);___

for(varitemindata[i]){_____

if(item.toString()===’text’){_______

createEl.appendChild(document.createTextNode(data[i][item]));________ontinue;___________

_f(item.toString()===’html’){_______

createEl.innerHTML=item,data[i][item];_______

continue;_____

}_____

_reateEl.setAttribute(item,data[i][item]);_______

//****將填充好的node插入文檔片段****___

fragment.appendChild(createEl);___

//****將文檔片段統一插入目標容器****_

targetEl.appendChild(fragment);_

//顯示容器，完成數據填充_

targetEl.style.display=

targetEl_display;

}

//使用

varwrap=document.querySelectorAll(‘.wrap’)[0];

vardata=[_

_name:’xujaing’,text:’選景’,title:’xuanfij’},_

{name:’xujaing’,text:’選景’,title:’xuanfij’},_

{name:’xujaing’,text:’選景’,title:’xuanfij’}];

appendDataToEl({_

target:wrap,_

createEl:’div’,

_ata:data

});

上面的優化方法使用了文檔片段:_蔽頤前鹽牡燈尾迦氳澆詰闃惺保導噬媳惶砑擁鬧皇歉悶蔚淖詠詰悖皇瞧偽舊懟？梢允溝_om操作更有效率。

②.緩存布局信息

//緩存布局信息

letcurrent=el.offsetLeft;

current++;

el.style.left=current+’px’;

if(current300){_

stop();

}

④.慎用:hover

如果有大量元素使用:hover,那麼會降低相應速度，CPU升高

⑤.使用事件委託（通過事件冒泡實現）來減少事件處理器的數量，減少內存和處理時間

functiondelegation(e,selector,callback){_

e=e||window.event;_

vartarget=e.target||e.srcElement;

_if(target.nodeName!==selector||

target.className!==selector||target.id!==selector){___

return;

_}_

if(typeofe.preventDefault===’function’){__

_.preventDefault();___

e.stopPropagation();

}else{___

e.returnValue=false;

e.cancelBubble=true;_

}

__allback()}

四.算法和流程控制

1.循環中減少屬性查找並反轉(可以提升50%-60%的性能)

//for循環

for(vari=item.length;i–){_

process(item[i]);

}

//while循環

varj=item.length;

while(j–){_

process(item[i]);

}

2.使用Duff裝置來優化循環（該方法在後面的文章中會詳細介紹）

3.基於函數的迭代（比基於循環的迭代慢）

items.forEach(function(value,index,array){__rocess(value);})

4.通常情況下switch總比if-else快，但是不是最佳方案

五.字符串和正則表達式

1.除了IE外，其他瀏覽器會嘗試為表達式左側的字符串分配更多的內存，然後簡單的將第二個字符串拷貝到他的末尾，如果在一個循環中，基礎字符串位於最左側，就可以避免重複拷貝一個逐漸變大的基礎字符串。2.使用[\s\S]來匹配任意字符串3.去除尾部空白的常用做法：

if(!String.prototype.trim){_

String.prototype.trim=function(){___

returnthis.replace(/^\s+/,”).replace(/\s\s*$/,”)_

}

}

六.快速響應的用戶界面

1.瀏覽器的UI線程：用於執行javascript和更新用戶界面的進程。

2.在windows系統中定時器分辨率為15毫秒，因此設置小於15毫秒將會使IE鎖定，延時的最小值建議為25ms.

3.用延時數組分割耗時任務：

functionmultistep(steps,args,callback){_

vartasks=steps.concat();

__etTimeout(function(){___

vartask=tasks.shift();___

task.apply(null,args||[]);_//調用Apply參數必須是數組

___

if(tasks.length0){_____

setTimeout(arguments.callee,25);

___else{_____

_allback();___

__

},25);

}

4.記錄代碼運行時間批處理任務：

functiontimeProcessArray(items,process,callback){_

vartodo=item.concat();

__etTimeout(function(){___

varstart=+newDate();

__o{_____

_rocess(todo.shift());___

}while(todo.length0(+newDate()-start____f(todo.length0){_____

_etTimeout(arguments.callee,25);

___else{____

_allback(items);_

}_

_,25)

}

5.使用WebWorker：它引入了一個接口，能使代碼運行且不佔用瀏覽器UI線程的時間。一個Worker由如下部分組成：

①一個navigator對象，包括app

JS Array中的常用方法

在Js Array中的方法大致分為兩類：方法改變原數組 方法生成新數組（不改變原數組）

1.push()：向原數組的最後一位添加一個元素。返回數組長度

2.unshift()：向原數組的最前添加一個元素。返回數組長度

3.pop()：截取數組中最後一個元素。返回被截取的元素

4.shift()：截取數組中第一個元素。返回被截取的元素

以上四個方法可以放在一起記憶，不要被方面名所誤導。

5.splice()：splice(index, howmany, item1,…itemX) 方法有多個參數可選，常用於分割數組。返回處理後的數組

第一個參數：從第n個元素的下標開始截取；

第二個參數：從第n個元素的下標開始截取多少個元素；

第三到n個參數：將截取的元素替換為什麼

6.sort()：sort(fn) 方法有一個參數可選，用於給數組排序。在不寫參數的情況下會對數組中的元素進行從小到大的順序排序。但不會識別數字（按照數字ACSLL編碼表進行排序）

可選參數：參數返回一個函數，這個函數中有兩個形參 .sort(function(a, b){}) 。形參中的a和b會類冒泡的訪問數組中的元素；例：[1, 2, 3, 4] a b 分別會選擇 1,2、 1,3 、 1,4 、 2,3 、 2,4 、 3,4。當a-b1時，交換ab的值；當a-b1時，不動。由此，可在此函數體中寫出自定義的排序規則。返回排序後的數組

7.reverse()：倒序排列整個數組。返回數組

1.concat()：concat(arr)將兩個數組拼接在一起。返回新數組

2.join()：join(‘str’)一個可選參數，返回以一個字符串將數組中的元素拼接成字符串。與str的split(‘str’)方法相反，split()是將字符串以一個字符串拆分成數組。

3.toString()：與join()函數不填寫參數一樣，返回一個一 逗號 ，拼接的字符串。

4.slice()：選取數組中的第n個元素到第n個元素。返回新數組，也可不寫參數返回數組的副本。

5.indexOf()：index(item, start)方法有兩個參數。返回指定元素在數組中的索引值；如果未找到指定元素，返回 -1

第一個參數：指定的元素

第二個參數：從填入的索引開始尋找

js常用增刪改查方法/js比較運算符 邏輯運算符 賦值運算符 算術運算符

js數組遍歷某個值求和

一、增

1、push()

可接收任意數量的參數，把它們逐個添加至數組末尾，並返回修改後數組的長度。例如：

2、unshift()

該方法與push()類似，也可接收任意數量的參數，只不過是將參數逐個添加至數組前端而已，同樣返回新數組長度。咱們接着上面的例子：

3、concat()

該方法與push()方法有點類似，同樣是將元素添加至數組末尾，只不過這個數組已經不是原來的那個數組了，而是其副本，所以concat()操作數組後會返回一個新的數組。具體用法如下：

① 不傳參數，返回當前數組副本

② 傳遞一或多個數組，則該方法會將這些數組中的每一項都添加到結果數組中

③ 傳遞非數組參數，這些參數就會被直接添加到結果數組的末尾

繼續接着上面的栗子：

例子中一目了然，原數組保持不變，新數組後面添加了4、5、6三個元素。

4、splice()

前面的三個方法都具有很大局限性，因為不是添加到數組前就是數組後，而splice()就不一樣了，它非常靈活和強大。靈活是因為它可以添加元素到數組的任意位置，強大是因為它除了可以添加元素之外還具有刪除和替換元素的功能（這個後面會陸續講到）。

splice()可以向數組指定位置添加任意數量的元素，需要傳入至少3個參數： 起始位置、0（要刪除的元素個數）和要添加的元素。

依然接着上面的例子繼續：

可以看出，splice()與push()和unshift()一樣是直接在原數組上修改的。

二、刪

1、pop()

與push()方法配合使用可以構成後進先出的棧，該方法可從數組末尾刪除最後一項並返回該項。

接着上例：

2、shift()

與push()方法配合使用可以構成先進先出的隊列，該方法可刪除數組第一項並返回該項。

繼續接着上例：

3、slice()

定義和用法

slice() 方法以新的數組對象，返回數組中被選中的元素。

slice() 方法選擇從給定的 start 參數開始的元素，並在給定的 end 參數處結束，但不包括。

注釋：slice() 方法不會改變原始數組。

該方法同concat()一樣是返回一個新數組，不會影響原數組，只不過slice()是用來裁剪數組的，返回裁剪下來的數組，具體用法如下：

4、splice()

好，繼續講這個“萬能”的方法。

上面講到，該方法在添加數組元素的時候需要傳入3個以上參數，而其中第2個參數就是用於指定要刪除元素的個數的，那時我們傳的是數字0。那麼，如果單單只需刪除元素，我們就只需給splice()傳入兩個參數，第1個參數用於指定要刪除的第一項的位置，第2個參數用於指定要刪除元素的個數。

繼續上例~~

從索引項為2的位置開始刪除4個元素，所以結果為 [-1, 0, 1, 2]。

三、改

這個其實最靈活的方式就是直接使用splice()這個強大的方法了，其實通過以上對該方法的了解，我們大致就能知道使用該方法修改數組元素的基本原理。

原理很簡單，就是向指定位置插入任意數量的元素，且同時刪除任意數量的元素。

依然繼續上例~~

四、查

indexOf()和lastIndexOf()

這兩個方法都接收兩個參數：要查找的項和（可選的）表示查找起點位置的索引。其中，indexOf()從數組的開頭（位置0）開始向後查找，lastIndexOf()方法則從數組的末尾開始向前查找。

例如：

當找不到該元素時，返回 -1 ，lastIndexOf()方法同理。

1 數據類型

script

2 引用數據類型

object 對象類型

3 number 數字類型

包含所有的數字（整數，浮點數，正數，負數，極大極小數），Infinity(分母為零)，NaN(not a number)

4 string 字符串類型

引號包含的任意文本，單雙引號都可以

輸出展示

2 比較運算符

script

/*

1 比較運算符

比較兩個值的大小 返回一個布爾值（true 或 false）

= = == != === !==

== 等於，只判斷數值

===全等，絕對等於，即判斷數據類型也判斷數值

!= == 取反

!== ===取反

console.log(undefined == null);//true 都沒有值

console.log(undefined === null);//false 數據類型不同undefined object

console.log(NaN == NaN); //false

console.log(NaN === NaN); //false

console.log(NaN != NaN); //true

console.log(NaN !== NaN); //true

/

/script

3 邏輯運算符

script

/

2 邏輯運算符

連接多個表達式，返回一個布爾值（true 或 false）

邏輯與 並且 所有的表達式都為true，結果才為true，有一個為false結果就為false

|| 邏輯或 或者 所有的表達式都為false，結果才為false，有一個為true結果就為true

！ 邏輯非 取反 表達式為true取反就為true，反之亦然

注意： 邏輯與的優先級大於邏輯或

*/

/script

邏輯運算符演示

輸出到控制台的結果

4 賦值運算符

script

/*

3 賦值運算符

= 等號右邊的值賦值給左邊

+= x += y x = x + y 下同

-=

*=

/=

%= 要的是餘數

*/

/script

script

x = 7;

y = 3;

console.log(x/=y)

/script

5 算術運算符

script

/*

算術運算符

+ – * / %(取余，取模) ++（自增） –(自減）

%(取余，取模) 應用 判斷奇偶數、倍數

++ 相當於自己加1 x++ 相當於 x = x + 1

— 相當於自己加1 x– 相當於 x = x – 1

+運算碰到字符串，直接進行字符串拼接，返回string類型

– * / %遇到字符串，都轉換成number類型進行計算，如果不能轉換成數字，則返回NaN，數據類型未number

true轉換1 false轉換為0

++ —

前++和後++，對於變量自己來說沒有區別都是+1

前++ 先賦值 在加1

後++ 先加1 再賦值

/

/script

script

/ var x = 5;//number

var y = 2;//number

comsole.log(x + y);//7

comsole.log(x – y);//3

comsole.log(x * y);//10

comsole.log(x / y);//2.5

comsole.log(x % y);//1 */

Web前端工程師應該知道的JavaScript使用小技巧

今天小編要跟大家分享的文章是關於Web前端工程師應該知道的JavaScript使用小技巧。任何一門技術在實際中都會有一些屬於自己的小技巧。同樣的，在使用JavaScript時也有一些自己的小技巧，只不過很多時候有可能容易被大家忽略。而在互聯網上，時不時的有很多同行朋友會總結(或收集)一些這方面的小技巧。

今天在這篇文章中，小編會整理一些大家熟悉或不熟悉的有關於JavaScript的小技巧，希望能夠對大家的學習和工作有所幫助。

一、數組

先來看使用數組中常用的一些小技巧。

01、數組去重

ES6提供了幾種簡潔的數組去重的方法，但該方法並不適合處理非基本類型的數組。對於基本類型的數組去重，可以使用…new

Set()來過濾掉數組中重複的值，創建一個只有唯一值的新數組。

constarray=[1,1,2,3,5,5,1]

constuniqueArray=[…newSet(array)];

console.log(uniqueArray);

Result:(4)[1,2,3,5]

這是ES6中的新特性，在ES6之前，要實現同樣的效果，我們需要使用更多的代碼。該技巧適用於包含基本類型的數組：undefined、null、boolean、string和number。如果數組中包含了一個object,function或其他數組，那就需要使用另一種方法。

除了上面的方法之外，還可以使用Array.from(newSet())來實現：

constarray=[1,1,2,3,5,5,1]

Array.from(newSet(array))

Result:(4)[1,2,3,5]

另外，還可以使用Array的.filter及indexOf()來實現：

constarray=[1,1,2,3,5,5,1]

array.filter((arr,index)=array.indexOf(arr)===index)

Result:(4)[1,2,3,5]

注意，indexOf()方法將返回數組中第一個出現的數組項。這就是為什麼我們可以在每次迭代中將indexOf()方法返回的索引與當索索引進行比較，以確定當前項是否重複。

02、確保數組的長度

在處理網格結構時，如果原始數據每行的長度不相等，就需要重新創建該數據。為了確保每行的數據長度相等，可以使用Array.fill來處理：

letarray=Array(5).fill(”);

console.log(array);

Result:(5)[“”,””,””,””,””]

03、數組映射

不使用Array.map來映射數組值的方法。

constarray=[

{

ame:’大漠’,

email:’w3cplus@#’

},

{

ame:’Airen’,

email:’airen@#’

}

]

constname=Array.from(array,({name})=name)

Result:(2)[“大漠”,”Airen”]

04、數組截斷

如果你想從數組末尾刪除值(刪除數組中的最後一項)，有比使用splice()更快的替代方法。

例如，你知道原始數組的大小，可以重新定義數組的length屬性的值，就可以實現從數組末尾刪除值：

letarray=[0,1,2,3,4,5,6,7,8,9]

console.log(array.length)

Result:10

array.length=4

console.log(array)

Result:(4)[0,1,2,3]

這是一個特別簡潔的解決方案。但是，slice()方法運行更快，性能更好：

letarray=[0,1,2,3,4,5,6,7,8,9];

array=array.slice(0,4);

console.log(array);

Result:[0,1,2,3]

05、過濾掉數組中的falsy值

如果你想過濾數組中的falsy值，比如0、undefined、null、false，那麼可以通過map和filter方法實現：

constarray=[0,1,’0′,’1′,’大漠’,’#’,undefined,true,false,null,’undefined’,’null’,NaN,’NaN’,’1’+0]

array.map(item={

returnitem

}).filter(Boolean)

Result:(10)[1,”0″,”1″,”大漠”,”#”,true,”undefined”,”null”,”NaN”,”10″]

06、獲取數組的最後一項

數組的slice()取值為正值時，從數組的開始處截取數組的項，如果取值為負整數時，可以從數組末屬開始獲取數組項。

letarray=[1,2,3,4,5,6,7]

constfirstArrayVal=array.slice(0,1)

Result:[1]

constlastArrayVal=array.slice(-1)

Result:[7]

console.log(array.slice(1))

Result:(6)[2,3,4,5,6,7]

console.log(array.slice(array.length))

Result:[]

正如上面示例所示，使用array.slice(-1)獲取數組的最後一項，除此之外還可以使用下面的方式來獲取數組的最後一項：

console.log(array.slice(array.length-1))

Result:[7]

07、過濾並排序字符串列表

你可能有一個很多名字組成的列表，需要過濾掉重複的名字並按字母表將其排序。

在我們的例子里準備用不同版本語言的JavaScript

保留字的列表，但是你能發現，有很多重複的關鍵字而且它們並沒有按字母表順序排列。所以這是一個完美的字符串列表(數組)來測試我們的JavaScript小知識。

varkeywords=[‘do’,’if’,’in’,’for’,’new’,’try’,’var’,’case’,’else’,’enum’,’null’,’this’,’true’,’void’,’with’,’break’,’catch’,’class’,’const’,’false’,’super’,’throw’,’while’,’delete’,’export’,’import’,’return’,’switch’,’typeof’,’default’,’extends’,’finally’,’continue’,’debugger’,’function’,’do’,’if’,’in’,’for’,’int’,’new’,’try’,’var’,’byte’,’case’,’char’,’else’,’enum’,’goto’,’long’,’null’,’this’,’true’,’void’,’with’,’break’,’catch’,’class’,’const’,’false’,’final’,’float’,’short’,’super’,’throw’,’while’,’delete’,’double’,’export’,’import’,’native’,’public’,’return’,’static’,’switch’,’throws’,’typeof’,’boolean’,’default’,’extends’,’finally’,’package’,’private’,’abstract’,’continue’,’debugger’,’function’,’volatile’,’interface’,’protected’,’transient’,’implements’,’instanceof’,’synchronized’,’do’,’if’,’in’,’for’,’let’,’new’,’try’,’var’,’case’,’else’,’enum’,’eval’,’null’,’this’,’true’,’void’,’with’,’break’,’catch’,’class’,’const’,’false’,’super’,’throw’,’while’,’yield’,’delete’,’export’,’import’,’public’,’return’,’static’,’switch’,’typeof’,’default’,’extends’,’finally’,’package’,’private’,’continue’,’debugger’,’function’,’arguments’,’interface’,’protected’,’implements’,’instanceof’,’do’,’if’,’in’,’for’,’let’,’new’,’try’,’var’,’case’,’else’,’enum’,’eval’,’null’,’this’,’true’,’void’,’with’,’await’,’break’,’catch’,’class’,’const’,’false’,’super’,’throw’,’while’,’yield’,’delete’,’export’,’import’,’public’,’return’,’static’,’switch’,’typeof’,’default’,’extends’,’finally’,’package’,’private’,’continue’,’debugger’,’function’,’arguments’,’interface’,’protected’,’implements’,’instanceof’];

因為我們不想改變我們的原始列表，所以我們準備用高階函數叫做filter，它將基於我們傳遞的回調方法返回一個新的過濾後的數組。回調方法將比較當前關鍵字在原始列表裡的索引和新列表中的索引，僅當索引匹配時將當前關鍵字push到新數組。

最後我們準備使用sort方法排序過濾後的列表，sort只接受一個比較方法作為參數，並返回按字母表排序後的列表。

在ES6下使用箭頭函數看起來更簡單:

constfilteredAndSortedKeywords=keywords

.filter((keyword,index)=keywords.lastIndexOf(keyword)===index)

.sort((a,b)=a

這是最後過濾和排序後的JavaScript保留字列表：

console.log(filteredAndSortedKeywords);

Result:[‘abstract’,’arguments’,’await’,’boolean’,’break’,’byte’,’case’,’catch’,’char’,’class’,’const’,’continue’,’debugger’,’default’,’delete’,’do’,’double’,’else’,’enum’,’eval’,’export’,’extends’,’false’,’final’,’finally’,’float’,’for’,’function’,’goto’,’if’,’implements’,’import’,’in’,’instanceof’,’int’,’interface’,’let’,’long’,’native’,’new’,’null’,’package’,’private’,’protected’,’public’,’return’,’short’,’static’,’super’,’switch’,’synchronized’,’this’,’throw’,’throws’,’transient’,’true’,’try’,’typeof’,’var’,’void’,’volatile’,’while’,’with’,’yield’]

08、清空數組

如果你定義了一個數組，然後你想清空它。通常，你會這樣做：

letarray=[1,2,3,4];

functionemptyArray(){

array=[];

}

emptyArray();

但是，這有一個效率更高的方法來清空數組。你可以這樣寫:

letarray=[1,2,3,4];

functionemptyArray(){

array.length=0;

}

emptyArray();

09、拍平多維數組

使用…運算符，將多維數組拍平：

10、從數組中獲取最大值和最小值

可以使用Math.max和Math.min取出數組中的最大小值和最小值：

constnumbers=[15,80,-9,90,-99]

constmaxInNumbers=Math.max.apply(Math,numbers)

constminInNumbers=Math.min.apply(Math,numbers)

console.log(maxInNumbers)

Result:90

console.log(minInNumbers)

Result:-99

另外還可以使用ES6的…運算符來完成：

constnumbers=[1,2,3,4];

Math.max(…numbers)

Result:4

Math.min(…numbers)

Result:1

二、對象

在操作對象時也有一些小技巧。

01、使用…運算符合併對象或數組中的對象

同樣使用ES的…運算符可以替代人工操作，合併對象或者合併數組中的對象。

//合併對象

constobj1={

ame:’大漠’,

url:’#’

}

constobj2={

ame:’airen’,

age:30

}

constmergingObj={…obj1,…obj2}

Result:{name:”airen”,url:”#”,age:30}

//合併數組中的對象

constarray=[

{

ame:’大漠’,

email:’w3cplus@#’

},

{

ame:’Airen’,

email:’airen@#’

}

]

constresult=array.reduce((accumulator,item)={

return{

…accumulator,

[item.name]:item.email

}

},{})

Result:{大漠:”w3cplus@#”,Airen:”airen@#”}

02、有條件的添加對象屬性

不再需要根據一個條件創建兩個不同的對象，以使它具有特定的屬性。為此，使用…操作符是最簡單的。

constgetUser=(emailIncluded)={

return{

ame:’大漠’,

blog:’w3cplus’,

…emailIncluded{email:’w3cplus@#’}

}

}

constuser=getUser(true)

console.log(user)

Result:{name:”大漠”,blog:”w3cplus”,email:”w3cplus@#”}

constuserWithoutEmail=getUser(false)

console.log(userWithoutEmail)

Result:{name:”大漠”,blog:”w3cplus”}

03、解構原始數據

你可以在使用數據的時候，把所有數據都放在一個對象中。同時想在這個數據對象中獲取自己想要的數據。

在這裡可以使用ES6的Destructuring特性來實現。比如你想把下面這個obj中的數據分成兩個部分：

constobj={

ame:’大漠’,

blog:’w3cplus’,

email:’w3cplus@#’,

joined:’2019-06-19′,

followers:45

}

letuser={},userDetails={}

({name:user.name,email:user.email,…userDetails}=obj)

{name:”大漠”,blog:”w3cplus”,email:”w3cplus@#”,joined:”2019-06-19″,followers:45}

console.log(user)

Result:{name:”大漠”,email:”w3cplus@#”}

console.log(userDetails)

Result:{blog:”w3cplus”,joined:”2019-06-19″,followers:45}

04、動態更改對象的key

在過去，我們首先必須聲明一個對象，然後在需要動態屬性名的情況下分配一個屬性。在以前，這是不可能以聲明的方式實現的。不過在ES6中，我們可以實現：

constdynamicKey=’email’

letobj={

ame:’大漠’,

blog:’w3cplus’,

[dynamicKey]:’w3cplus@#’

}

console.log(obj)

Result:{name:”大漠”,blog:”w3cplus”,email:”w3cplus@#”}

05、判斷對象的數據類型

使用Object.prototype.toString配合閉包來實現對象數據類型的判斷：

constisType=type=target=`[object${type}]`===Object.prototype.toString.call(target)

constisArray=isType(‘Array’)([1,2,3])

console.log(isArray)

Result:true

上面的代碼相當於：

functionisType(type){

returnfunction(target){

return`[object${type}]`===Object.prototype.toString.call(target)

}

}

isType(‘Array’)([1,2,3])

Result:true

或者：

constisType=type=target=`[object${type}]`===Object.prototype.toString.call(target)

constisString=isType(‘String’)

constres=isString((‘1’))

console.log(res)

Result:true

06、檢查某對象是否有某屬性

當你需要檢查某屬性是否存在於一個對象，你可能會這樣做：

varobj={

ame:’大漠’

}

if(obj.name){

console.l