push 用於往數組添加元素。
const arr = [1,2,3,4,5]
arr.push(6,7)
console.log(arr)
// [1, 2, 3, 4, 5, 6, 7]
pop 用於彈出數組最後一個元素，且返回該元素。
const arr = [1,2,3,4,5]
arr.push(6,7)
let popout = arr.pop()
console.log(popout)
console.log(arr)
// 7
// [ 1, 2, 3, 4, 5, 6 ]
shift 相當於對數組左移一位的操作，效果是去除數組的首元素，並返回第一個元素。
const arr = [1,2,3,4,5]
let first = arr.shift()
console.log(first)
console.log(arr)
// 1
// [ 2, 3, 4, 5 ]
unshift 相當於對數組右移的操作，在開頭添加一個或多個新元素，並返回新數組長度。
const arr = [1,2,3,4,5]
let len = arr.unshift(-1, -2)
console.log(len)
console.log(arr)
// 7
// [-1, -2, 1, 2, 3, 4, 5]
join 可將數組中的元素按照給定連接符連接成一個新的字符串。join('') 可以無縫連接。
const arr = [1,2,3,4,5]
console.log(arr.join('!'))
// 1!2!3!4!5
concat 可以用於數組的拼接，整個單字其實就是 concatenate，concat 會返回一個新數組，不會改變原數組。
這邊注意一下，concat 中的 args 如果也是個數組，則會將數組中的元素放進原數組中，而不是 args 數組本身。
const arr = [1,2,3]
const newArr1 = arr.concat(4,5)
const newArr2 = arr.concat([4,5])
const newArr3 = arr.concat([4,5, [6,7]])
console.log(newArr1)
console.log(newArr2)
console.log(newArr3)
// [ 1, 2, 3, 4, 5 ]
// [ 1, 2, 3, 4, 5 ]
// [ 1, 2, 3, 4, 5, [ 6, 7 ] ]
slice 用於數組的截取，從下標 start 開始到下標 end為止，不包含 end。有以下特性：
end 參數就是直接截到末尾const arr = [1,2,3,4,5,6,7]
const newArr1 = arr.slice(1, 4)
const newArr2 = arr.slice(-3, -1)
console.log(newArr1)
console.log(newArr2)
// [ 2, 3, 4 ]
// [ 5, 6 ]
splice 用於對數組進行刪除、添加、替換等操作，會直接改變原數組。
| 參數 | 描述 |
|---|---|
| start | 規定從哪裡開始 刪除/添加 元素 |
| deleteCount | 規定刪除多少個元素，可以是 0。如果未定義，則刪除從 start 到結尾所有元素 |
| [, value1, value2 …] | 要添加到數組的新元素，會加在 start 之前 |
const arr = [1,2,3,4,5]
arr.splice(1, 0, 7, 8, 9)
console.log(arr)
// [1, 7, 8, 9, 2, 3, 4, 5]
reverse 直接修改原數組成翻轉過的數組。
const arr = [1,2,3,4,5]
arr.reverse()
console.log(arr)
// [5, 4, 3, 2, 1]
sort 直接修改原數組，且按照數組元素的 ASCCI 碼從小到大做排序。我們也可以傳入比較器函數來自定義排序的方式。
比較常見的需求是對數字數組做排序，而在這種情況下需特別注意要傳入自定義的比較器，因為負數的 - 會使排序上負數出現在正數之後。下面看看一些例子：
const arr = [1,3,6,1,9,-2,0,-8]
arr.sort((a, b) => { return a-b }) // 升序
arr.sort((a, b) => { return b-a }) // 降序
const arr = [1,3,6,1,9,-2,0,-8]
arr.sort(function() { // 隨機打亂
return Math.random() > 0.5 ? 1 : -1
})
indexOf 可以查找 target 首次在數組中出現的位置，若有 from 參數則從下標 from 開始尋找(由左向右)，返回 target 所在下標，若未找到返回 -1。
const arr = [1,2,3,3,4,5,6,7,7,8,9,10]
console.log(arr.indexOf(3))
console.log(arr.lastIndexOf(7))
console.log(arr.indexOf(100))
// 2
// 8
// -1
lastIndexOf 可以查找 target 最後一次在數組中出現的位置，若有 from 參數則從下標 from 開始尋找(由右向左)，返回 target 所在下標，若未找到返回 -1。
const arr = [1,2,3,3,4,5,6,7,7,8,9,10]
console.log(arr.indexOf(3))
console.log(arr.lastIndexOf(7))
console.log(arr.indexOf(100))
// 2
// 8
// -1
includes 用於查找 target 元素是否存在於數組，默認從頭開始找，若有 from 參數則從下標 from 開始，返回 bool。
const arr = [1,2,3,4,5]
console.log(arr.includes(3))
console.log(arr.includes(2, 2))
// true
// false
find 會返回通過給定的測試函數的第一個元素的值。find 會為數組中的每個元素都調用一次測試函數，若測試條件返回為 true 就立即返回該元素的值，之後不會再調用測試函數。若都沒有符合條件則返回 undefined。
const ages = [7, 8, 2, 18, 20]
let firstAdult = ages.find((age) => { return age >= 18 })
console.log(firstAdult)
// 18
findIndex 跟 find 基本一樣，只不過返回的是不是元素本身，而是元素下標。
const ages = [7, 8, 2, 18, 20]
let firstAdult = ages.findIndex((age) => { return age >= 18 })
console.log(firstAdult)
// 3
forEach 方法用於調用數組中的每個元素，並將元素傳遞給回調函數。
const arr = [1,2,3,4,5]
const addone = []
arr.forEach((val) => {
addone.push(val+1)
})
console.log(addone)
// [ 2, 3, 4, 5, 6 ]
用於對象元素的數組也有很漂亮的用法：
const UserRoute = {
path: '/user',
name: 'User',
children: [
{
path: '',
name: 'Login'
},
{
path: 'register',
name: 'Register'
}
]
}
const HomeRoute = {
path: '/home',
name: 'Home'
}
const router = []
router.push(UserRoute, HomeRoute)
const allRoute = []
router.forEach(({path, children}) => {
if(children) {
children.forEach(({path: cpath}) => {
allRoute.push(`${path}${cpath ? '/' + cpath : ''}`)
})
} else {
allRoute.push(path)
}
})
console.log(allRoute)
// [ '/user', '/user/register', '/home' ]
map 會依照給定的函數對每個元素調用一次，且不會改變原數組，返回經過處理後的新數組。
const arr = [1,2,3,4,5]
let twoTimesArr = arr.map((val) => { return val*2 })
console.log(twoTimesArr)
// [ 2, 4, 6, 8, 10 ]
filter 會依照給定的函數對每個元素調用一次，過濾掉測試條件返回為 false 的元素，且不會改變原數組，返回經過過濾後的新數組。
const arr = [1,2,3,4,5,6,7,8,9,10]
let even = arr.filter((val) => { return val%2===0 })
console.log(even)
// [ 2, 4, 6, 8, 10 ]
reduce 接受一個函數作為累加器，數組中每個值開始縮減，最後計算為一個值。
// 累加數組之和
const arr = [1,2,3,4,5,6,7,8,9,10]
const total = arr.reduce((res, cur) => { return res + cur })
console.log(total)
// 5
// 格式化金錢
const money = '1234567890'
function formatCash(str) {
return str.split('').reverse().reduce((res, cur, index) => {
return ((index % 3 === 2) ? ',' + cur : cur) + res
})
}
console.log(formatCash(money))
// 1,234,567,890
every 用於檢測數組中所有元素是否都滿足給定的測試函數條件，若其中一個不符合條件則返回 false，否則返回 true。
const arr = [1,2,3,4,5,6]
console.log(arr.every((val) => {
return val % 2 === 0
}))
// false
some 用於檢測數組中是否有滿足給定的測試函數條件的元素，有則返回 true，否則 false。
const arr = [1,2,3,4,5,6]
console.log(arr.some((val) => {
return val > 7
}))
// false
去實習時發現當時整理時遺漏了這個 api，趁此機會補齊！
from() 方法用於通過擁有 length 屬性的對象或可迭代的對象來返回一個數組。如果對象是數組返回 true，否則返回 false。
下面來看看幾個 from 的用法～
const foo = {
0: 'foo',
1: 'bar',
2: 'baz',
length: 3
}
const arr = Array.from(foo)
// ['foo', 'bar', 'baz']
注意所謂的類數組對象要通過 from 這樣轉換，必須擁有一個 length 屬性，否則將轉換為空數組
... 映射迭代器，因為這樣可以減少創建一個中間數組// bad
const arr = [...foo].map(func)
// good
const arr = Array.from(foo, func)