js-陣列與陣列處理

其實寫這篇之前，就已經用過陣列了，可以看變數與資料型態那章。

JavaScript 的陣列可以是非同型的。比如……

const array1 = ['1', [2, 3], 'three', 4]

也有所謂的建構式，不過比較少使用

const arr1 = new Array(1, 2, 3);
// [1, 2, 3]

操作陣列內容

原地修改，沒有一定的規則，push 會就地修改，而 concat 會回傳一個新陣列。

開頭結尾添加或移除元素

開頭添加或移除元素

const a = [1, 2, 3]
a.push(1)
console.log(a)
a.pop()
console.log(a)
a.unshift(3)
console.log(a)
a.shift()
console.log(a)

// [ 1, 2, 3, 1 ]
// [ 1, 2, 3 ]
// [ 3, 1, 2, 3 ]
// [ 1, 2, 3 ]

在結尾添加多個元素

let a = [1, 2, 3]
a = a.concat(a, b, c)
console.log(a)

// [1, 2, 3, a, b, c]

取得子陣列

使用 slice切割

let a = [1, 2, 3, 4, 5]
// a = a.slice(3)
// console.log(a)
// [4, 5]
a = a.slice(2, 4)
console.log(a)

// [3, 4]

切割 與 替換陣列元素

ES6 新增的方法，第一個引數是被貼上的目標，第二個引數是要開始複製的地方，最後一個引數是停止複製的地方。

const a = [1, 2, 3, 4]
a.copyWithin(1, 2)
console.log(a)

// [1, 3, 4, 4]

填入特定值

使用 fill()

const a = [1, 3, 5]
a.fill("a", 2)
console.log(a)

// [ 1, 3, 'a' ]

反轉 與 排序

const a = [5, 3, 1, 2, 5]
a.reverse()
console.log(a)

// [ 5, 2, 1, 3, 5 ]

a.sort()
console.log(a)

// [ 1, 2, 3, 5, 5 ]

也可以指定一個排序式 ( 隨意寫寫 )

const a = [ { name : "cat" }, { name : "bana" }, { name : 'active' }];
a.sort((a, b) => a.name.length < b.name.length);
console.log(a)

搜索

搜尋陣列 ( lastIndexOf, indexOf ，前者是從右往左，後者是一般常用的左往右)

const a = [1, 2, 3, 5, 9]
let b = 0;
b = a.indexOf(5);
console.log(b)

// 3

還有所謂的 findIndex ( find )

const a = [1, 3, 5, 9]
let b = 0;
b = a.find((x, i) => i > 2 && Number.isInteger(x))
console.log(b)

let c = 0;
c = a.findIndex(k => k === 3)
console.log(c)

// 9
// 1

這邊挺離奇的是可以提供一個函式去做運作，最後如果找不到則回傳 -1

( 在這邊其實有 some() 跟 every() 函式可以玩…… )

some() → 陣列中是否有一項符合某種條件

every() → 陣列中的所有元素是否都符合某種條件

map 與 filter

這兩個東西大家看到應該都不陌生，map 可以轉換陣列內的元素，filter 可以移除陣列裡不想要的東西

const a = [1, 2, 3]
let b = a.map(x => x * x)
console.log(b)
// [ 1, 4, 9 ]

let c = a.filter(o => o == 1)
console.log(c)
// [ 1 ]

其實很多時後將 map 跟 filter 組合運用會有很好的效果

魔法 reduce

reduce 跟 map 、 filter 一樣，可以讓你提供一個控制結果的函式。不過 reduce 第一個值卻是累加器，我們直接來看…….

const a = [1, 3, 5]
const sum = a.reduce((i, x) => i += x, 0)
console.log(sum)
// 9
// 0 可省略

刪除、連接字串

刪除字串

const a = [1, 2, 3]
delete a[0]
console.log(a)

// [2, 3]

連接字串

const a = [1, 3, 5]
console.log(a.join(" - "))
// 1 - 3 - 5

這個東西很重要…… Array.prototype.join 可建立像 HTML <ul> <li> 串列這些東西……

const testHTML = '<ul><li>' + attributes.join('<li></li>') + '</li></ul>'