12個有用的JavaScript陣列技巧
陣列是Javascript最常見的概念之一，它為我們提供了處理資料的許多可能性，熟悉陣列的一些常用操作是很有必要的。
1、陣列去重
1、from（）方法
字串或數值型陣列的去重可以直接使用from方法。
var plants = ［‘Saturn’， ‘Earth’， ‘Uranus’， ‘Mercury’， ‘Venus’， ‘Earth’， ‘Mars’， ‘Jupiter’］；
var uniquePlants = Array。from（new Set（plants））；
console。log（uniquePlants）； // ［ ‘Saturn’， ‘Earth’， ‘Uranus’， ‘Mercury’， ‘Venus’， ‘Mars’， ‘Jupiter’ ］
2、spread運算子（…）
擴充套件運算子是ES6的一大創新，還有很多強大的功能。
var plants = ［‘Saturn’， ‘Earth’， ‘Uranus’， ‘Mercury’， ‘Venus’， ‘Earth’， ‘Mars’， ‘Jupiter’］；
var uniquePlants = ［。。。new Set（plants）］；
console。log（uniquePlants）； // ［ ‘Saturn’， ‘Earth’， ‘Uranus’， ‘Mercury’， ‘Venus’， ‘Mars’， ‘Jupiter’ ］
2、替換陣列中的特定值
splice（） 方法向/從陣列中新增/刪除專案，然後返回被刪除的專案。
該方法會改變原始陣列
。
特別需要注意插入值的位置！
// arrayObject。splice（index，howmany，item1，。。。。。，itemX）
var plants = ［‘Saturn’， ‘Uranus’， ‘Mercury’， ‘Venus’， ‘Earth’， ‘Mars’， ‘Jupiter’］；
var result = plants。splice（2， 1， ‘www。shanzhonglei。com’）
console。log（plants）； // ［‘Saturn’，‘Uranus’，‘www。shanzhonglei。com’，‘Mercury’，‘Venus’，‘Earth’，‘Mars’，‘Jupiter’］
console。log（result）； // ［‘Mercury’］
3、沒有map()的對映陣列
map（）方法返回一個新陣列，陣列中的元素為原始陣列元素呼叫函式處理後的值，它會按照原始陣列元素順序依次處理元素。
注意： map()不會改變原始陣列，也不會對空陣列進行檢測
。
// array。map（function（currentValue，index，arr）， thisValue）
var plants = ［
{ name： “Saturn” }，
{ name： “Uranus” }，
{ name： “Mercury” }，
{ name： “Venus” }，
］
var plantsName = Array。from（plants， （{ name }） => name）；
console。log（plantsName）； // ［ ‘Saturn’， ‘Uranus’， ‘Mercury’， ‘Venus’ ］
4、空陣列
如果要清空一個數組，將陣列的長度設定為0即可，額，這個有點簡單。
var plants = ［‘Saturn’， ‘Earth’， ‘Uranus’， ‘Mercury’， ‘Venus’， ‘Earth’， ‘Mars’， ‘Jupiter’］；
plants。length = 0；
console。log（plants）； // ［］
5、將陣列轉換為物件
如果要將陣列轉換為物件，最快的方法莫過於spread運算子（。。。）。
var plants = ［‘Saturn’， ‘Earth’， ‘Uranus’， ‘Mercury’， ‘Venus’， ‘Earth’， ‘Mars’， ‘Jupiter’］；
var plantsObj = {。。。plants }
console。log（plantsObj）； // {‘0’： ‘Saturn’，‘1’： ‘Earth’， ‘2’： ‘Uranus’，‘3’： ‘Mercury’，‘4’： ‘Venus’，‘5’： ‘Earth’，‘6’： ‘Mars’，‘7’： ‘Jupiter’}
6、用資料填充陣列
如果我們需要用一些資料來填充陣列，或者需要一個具有相同值的資料，我們可以用fill（）方法。
var plants = new Array（8）。fill（‘8’）；
console。log（plants）； // ［‘8’， ‘8’， ‘8’，‘8’， ‘8’， ‘8’，‘8’， ‘8’］
7、合併陣列
當然你會想到concat（）方法，但是哦，spread運算子（。。。）也很香的，這也是擴充套件運算子的另一個應用。
var plants1 = ［‘Saturn’， ‘Earth’， ‘Uranus’， ‘Mercury’］；
var plants2 = ［‘Venus’， ‘Earth’， ‘Mars’， ‘Jupiter’］；
console。log（［。。。plants1， 。。。plants2］）； // ［‘Saturn’， ‘Earth’，‘Uranus’， ‘Mercury’，‘Venus’， ‘Earth’，‘Mars’， ‘Jupiter’］
8、兩個陣列的交集
要求兩個陣列的交集，首先確保陣列不重複，然後使用filter（）方法和includes（）方法。
var plants1 = ［‘Saturn’， ‘Earth’， ‘Uranus’， ‘Mercury’， ‘Venus’， ‘Earth’， ‘Mars’， ‘Jupiter’］；
var plants2 = ［‘Saturn’， ‘Earth’， ‘Uranus’］；
var alonePlants = ［。。。new Set（plants1）］。filter（item => plants2。includes（item））；
console。log（alonePlants）； // ［ ‘Saturn’， ‘Earth’， ‘Uranus’ ］
9、刪除陣列中的假值
我們時常需要在處理資料的時候要去掉假值。
在Javascript中，假值是false, 0， " "， null, NaN, undefined
。
var plants = ［‘Saturn’， ‘Earth’， null， undefined， false， “”， NaN， ‘Uranus’， ‘Mercury’， ‘Venus’， ‘Earth’， ‘Mars’， ‘Jupiter’］；
var trueArr = plants。filter（Boolean）；
console。log（trueArr）； // ［‘Saturn’， ‘Earth’，‘Uranus’， ‘Mercury’，‘Venus’， ‘Earth’，‘Mars’， ‘Jupiter’］
10、獲取陣列中的隨機值
我們可以根據陣列長度獲得一個隨機索引號。
var plants = ［‘Saturn’， ‘Earth’， ‘Uranus’， ‘Mercury’， ‘Venus’， ‘Earth’， ‘Mars’， ‘Jupiter’］；
console。log（plants［Math。floor（Math。random（） * （plants。length + 1））］）
11、lastIndexOf（）方法
lastIndexOf（）可以幫助我們查詢元素最後一次出現的索引。
var plants = ［‘Saturn’， ‘Earth’， ‘Uranus’， ‘Mercury’， ‘Venus’， ‘Earth’， ‘Mars’， ‘Jupiter’］；
console。log（plants。lastIndexOf（‘Earth’）） // 5
12、將陣列中的所有值相加
reduce（）方法接收一個函式作為累加器，陣列中的每個值（從左到右）開始縮減，最終計算為一個值。
// array。reduce（function（total， currentValue， currentIndex， arr）， initialValue）
var nums = ［1， 2， 3， 4， 5］；
var sum = nums。reduce（（x， y） => x + y）；
console。log（sum）； // 15
我組建了一個前端學習交流群，學習前端技術。給大家分享學習資料，
想要加入一起學習的小夥伴可以加【web前端技術群】：1040743410
