JavaScript 陣列常見操作(一)

程式設計三昧發表於2022-02-05
JavaScript陣列

陣列常見操作.001

前言

陣列是 JavaScript 中常見資料型別之一，關於它的一些操作方法，我在這裡做一下簡單記錄和總結。

本文主要包括：

  • 建立陣列
  • 判斷是不是陣列
  • 類陣列和陣列的轉換
  • 陣列去重

各位看官可根據自身需求選擇食用。

建立陣列

建立陣列是基本功，其方法主要包括以下幾種：

const arr = [1,2,3]                   // 陣列字面量
const arr = [,,,]                     // 三元素空位陣列（hole array）
const arr = new Array(4)              // [,,,,]
const arr = new Array(4,2)            // [4,2]
const arr = Array.of(1,2,3)           // [1,2,3]

其中，我們一般最常用的是陣列字面量法。

判斷是不是陣列

判斷是不是陣列的方法主要有：

// 方法一
[1,2,3] instanceof Array   
// 方法二
[1,2,3].constructor === Array
// 方法三
Object.prototype.toString.call([1,2,3]) === '[object Array]'
// 方法四
Array.isArray([1,2,3])
// 方法五（相容寫法）
function isArray(arr){
    return Array.isArray ? 
        Array.isArray(arr):Object.prototype.toString.call(arr) === '[object Array]'
}

一般最常用的應該是 isArray 方法。

類陣列和陣列的轉換

我們有時碰到的資料結構不是純陣列，一般將其歸類為“類陣列”，類陣列可以藉助以下方法轉為純陣列：

const x = document.querySelectorAll('a');
// 方法一
Array.prototype.slice.call(x);
// 方法二
Array.from(x);
Array.from(x,mapFn,thisArg);
// 方法三
[...x]
// 方法四
function toArray(x){
    let res = []
    for(item of x){
        res.push(item)
    }
    return res
}
// 方法五
Array.apply(null,x)
// 方法六
[].concat.apply([],x)

方法五和六本質上都是利用了 apply 的特點，即傳給 apply 的第二個引數（陣列或者類陣列）會被轉換為一個引數列表，這些引數再送到呼叫的方法（new Array 或者 concat）中。

陣列去重

陣列去重，本質上都需要比較兩個元素是否相等，如果相等，則拋棄一個元素。為了準確地判斷，這裡統一使用 Object.is 進行比較。

1）利用 set 去重

set 要求元素不重複，因此將陣列轉換為 set 之後就可以去重了，接著再轉換回陣列即可。

function unique(arr){
    return Array.from(new Set(arr))
    // return [...new Set(arr)]
}

2）雙重迴圈 + splice

外層迴圈遍歷所有元素，裡層迴圈遍歷當前元素往後的所有元素，若發現相等則利用 splice 移除掉一個。記得裡層迴圈每次要回退一格，否則會遺漏掉某些元素

function unique(arr){
    for(let i = 0;i < arr.length;i++){
        for(let j = i + 1;i < arr.length;j++){
            if(Object.is(arr[i],arr[j])){
                arr.splice(j,1)
                j--
            }
        }
    }
    return arr
}

3）新建陣列 + includes

新建陣列，每次往陣列中新增元素之前都檢查陣列中是否已有該元素：

function unique(arr){
    const res = []
    arr.forEach((item,index) => {
        // 也可以 if(res.indexOf(item) == -1)，但是無法正確判斷 NaN
        if(!res,includes(item)){
            res.push(item)
        }
    })
}

4）reduce + includes

function unique(arr){
    return arr.reduce((acc,cur) => {
        // return acc.includes(cur) ? acc : acc.concat(cur)
        return acc.includes(cur) ? acc : [...acc,cur]
    },[])
}

5）新建陣列 + sort

根據 sort 的機制（在每個元素上呼叫 toStrng，之後在字串層面進行排序），讓相等的元素聚集在一起。新建陣列，每次往陣列中新增元素之前都檢查該元素是否等於前面的元素，是則屬於重複元素：

function unique(arr){
    arr.sort()
    const res = [arr[0]]
    for(let i = 1;i < arr.length;i++){
        if(!Object.is(arr[i],arr[i-1])){
            res.push(arr[i])
        }
    }
    return res
}

6）新建陣列 + 利用物件屬性

這種方法其實和“新建陣列 + includes”一樣。新建陣列，每次往陣列中新增元素之前都檢查該元素是否已經作為物件的屬性：

// 物件屬性值可以認為是元素重複的次數
function unique(arr){
    const res = []
    const obj = {}
    arr.forEach((item,index) => {
        if(!obj[item]){
            res.push(item)
            obj[item] = 1
        } else {
            obj[item]++
        }
    })
    return res
}

這裡檢測的是物件的屬性名，而屬性名本質上是一個字串，因此會認為 obj[true] 和 obj["true"]是相等的，從而導致元素 true 或者元素 "true" 未能放入新陣列中

7）利用 map

本質上和上面的方法是一樣的，但是不需要新建陣列：

function unique(arr){
    let map = new Map()
    for(item of arr){
        if(!map.has(item)){
            map.set(item,true)
        }
    }
    return [...map.keys()]
}

8）filter + indexOf

去掉重複的元素，換個角度來理解就是保留那些索引等於第一次出現時的索引的元素，這樣的元素可以用 filter 篩選出來，放到一個陣列中：

function unique(arr){
    return arr.filter((item,index) => index === arr.indexOf(item))
}

使用 indexOf 的缺點是無法正確判斷 NaN。

總結

以上就是與陣列有關的一些基本操作方法總結。

~

~ 本文完，感謝閱讀！

~

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

大家好，我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章