JavaScript 過濾陣列重複值的方法

發表於 | 更新於: | 分類於 |

filter()

1
2
3
4
5
6
var origin = ['A', 'A', 'B', 'B', 'C', 'C']

var result = origin.filter((item, index, arr) => {
	return arr.indexOf(item) === index;
})
// output: ["A", "B", "C"]

透過 indexOf 方法，從陣列前方開始檢驗，模擬一下迴圈執行過程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 第一次迴圈
arr.indexOf('A') === 0 // true --> result = ['A']

// 第二次迴圈，indexOf方法在碰到索引0位置的'A'時就會回傳了，不符合索引1因此這邊不會成立
arr.indexOf('A') === 1 // false --> result = ['A']

// 第三次迴圈
arr.indexOf('B') === 2 // true --> result = ['A', 'B']

// 第四次迴圈，indexOf方法在碰到索引2位置的'B'時就會回傳了，不符合索引3因此這邊不會成立
arr.indexOf('B') === 3 // false --> result = ['A', 'B']

// 第五次迴圈
arr.indexOf('C') === 4 // true --> result = ["A", "B", "C"]

// 第六次迴圈，indexOf方法在碰到索引4位置的'C'時就會回傳了，不符合索引5因此這邊不會成立
arr.indexOf('C') === 5 // false --> result = ["A", "B", "C"]

new Set()

Set()是 ES6的語法，可以利用他所提供的 has 來做驗證，並用 add 來將驗證後符合的值 push到新的陣列

1
var origin = ['A', 'A', 'B', 'B', 'C', 'C']

方法一

1
2
3
4
5
var result = new Set()

origin.forEach((item) => {
  !result.has(item) ? result.add(item) : false
})

方法二

1
var result = new Set(origin)

方法一和二結果都是一樣的，這時候印出 result，會發現它並不是我們預期的一般陣列。

1
2
console.log(result)
// output: Set(3) {"A", "B", "C"}

利用 ES6的 Spread轉為陣列

1
2
console.log([...result])
// output: ["A", "B", "C"]

也可以用 ES6的 Array.form()轉為陣列

1
2
console.log(Array.from(result))
// output: ["A", "B", "C"]

Object.keys()

Object.keys() 可以將物件的屬性取出，並且一個個 push回一個空陣列中。以下做一個簡單範例

1
2
3
4
5
6
7
var obj = {
  name: 'Dylan',
  age: 26
}

Object.keys(obj)
// output: ["name", "age"]

進入主題

1
2
3
4
5
6
7
8
9
10
var origin = ['A', 'A', 'B', 'B', 'C', 'C']
var result = {};

origin.forEach((item) => {
  result[item] = item;
})
console.log(result) // output: {A: "A", B: "B", C: "C"}

Object.keys(result)
// output: ["A", "B", "C"]

資料來源

Gua’s Note - JavaScript取出陣列重複/不重複值的方法
ES6 Set資料結構