Docs99

Appearance

Return to top
On this page

陣列處理

push

陣列最末端，新增 值 (可新增多個值)

javascript
let ary = ['one']
ary.push('two') // 2

console.log(ary) // ['one', 'two']

pop

移除陣列最末端的 值

javascript
let ary = ['one', 'two']
ary.pop() // two

console.log(ary) // ['one']

unshift

陣列最前端，新增 值 (可新增多位)

javascript
let ary = []
ary.unshift('one') // 1

console.log(ary) // ['one']

shift

移除陣列第一位

javascript
let ary = ['one', 'two']
ary.shift() // 1

console.log(ary) // ['one']

toString

陣列內容轉換為字串，含符號

javascript
let ary = ['a', 'b', 'c']
ary.toString() // 'a,b,c'

slice

依指定的 索引(起始) ~ 索引(終止之前) 回傳新的陣列 (淺拷貝)，原本的陣列不會被修改。

javascript
let ary = [1, 2, 3, 4, 5, 6]
ary.slice(2, 4) // [3, 4]

splice

移除 原陣列 既有的 值，或移除同時可以加入 值 到操作的 索引 。

  • 索引 起始
  • 位數 移除位數
  • 值 新增的值 (option 可多位)
javascript
let ary = [1, 2, 3, 4, 5, 6]

ary.splice(2, 1) // [3] 
// (移除 索引2 移除一位數)

console.log(ary) // [1, 2, 4, 5, 6]

ary.splice(2, 2, 'a', 'b', 'c') // [4, 5]
// (移除 索引2 移除二位數 加入'a', 'b', 'c')

console.log(ary) // [1, 2, 'a', 'b', 'c' 6]

WARNING

會有 副作用

includes

元素是否在陣列之中

javascript
const item = 'a'
let ary = ['a', 'b']

console.log(ary.includes(item)) // true

sort

依 Unicode 字串位置排序陣列

javascript
ary = [2,1,5,3,7,4,7]
ary.sort() // [1, 2, 3, 4, 5, 7, 7]

進階操作

由小到大排序

js
[4, 6, 2, 3, 1].sort((a, b) => a - b )

由大到小排序

js
[4, 6, 2, 3, 1].sort((a, b) => b - a )

說明

compareFunction 函式會有兩個參數 (a, b)，有點像 廻圈 每次進入函式都會向後取索引值 a = [1] / b = [0]、a = [2] / b = [1] …，直到陣列盡頭。

(一般來說，會取 ary.length - 1 次)

js
[4, 6, 2, 3, 1].sort((a, b) => {
  console.log(`a = ${a} / b = ${b}`)
})

// a = 6 / b = 4
// a = 2 / b = 6
// a = 3 / b = 2
// a = 1 / b = 3

arr.sort([compareFunction])

  • compareFunction 比較函式
    • return 負值 向前調整位置
    • return 正值 向後調整位置
    • return 0 維持原位

提醒

如果 compareFunction 有回傳值，每次取 2 位索引值 時，都會再動態排序，不一定會依原本的位置。 原生的演算法還加入了「二分搜尋法 Binary Search」的實作來優化排序速度.sort 不穩定之迷 TOMMY 騎 bug (影)

Reference

join

將陣列中所有的元素，組合成一個字串(包含 ,)，且回傳這個組合好的字串。

javascript
let ary = ['hello', 'world']
ary.join() // 'hello,world'

map

依 callback 的回傳值，建立一個 新的 陣列回傳。

js
const ary = [1, 2, 3, 4, 5]
const plus2 = ary.map(value => value + 2) // 都加 2 回傳

console.log(plus2) // [3, 4, 5, 6, 7]
js
const ary = [1, 2, 3, 4, 5]
const resAry = ary.map(value => value > 3) 


console.log(resAry) // [false, false, false, true, true]

提示

這個方法不會產生 副作用 Side Effects