// 常見數(shù)組操作
const log = console.log.bind(console)
let color = ['red', 'yellow', 'blue']
log(color)
1. 判斷是否是數(shù)組
log(Array.isArray(color))
log(Object.prototype.toString.call(color).slice(8, -1))
2. 拿到數(shù)組的值
log(color.valueOf())
const messages = ['1', '2', '3'];
log(messages.toString(), color.toString())
// push 方法從數(shù)組末尾添加元素舆蝴,返回新數(shù)組長度棠赛,這一點記住
// pop 方法從數(shù)組末尾刪除元素口渔,返回被刪除的元素
// unshift 方法從數(shù)組頭部添加元素浪南,返回新數(shù)組長度
// shift 方法從數(shù)組頭部刪除元素凡简,返回被刪除的元素
messages.forEach(i => {
color.push(i)
})
log(color)
3. reverse()
// reverse() 數(shù)組反轉(zhuǎn)
log(color.reverse())
4. sort()
// sort(fn) sort 方法可以傳參捶索,不傳參的時候數(shù)組默認(rèn)把所有元素先轉(zhuǎn)換為 String 再排序典奉,比較的是 ASCII 碼屿笼,這個有點坑,
// 幸好 sort 支持高階函數(shù)骚灸,所以我們傳入一個自定義的排序函數(shù)就可以實現(xiàn)我們正常的排序了糟趾,比如對數(shù)字排序,我們可以這樣寫甚牲,
// sort 方法會修改原數(shù)組义郑,這是需要注意的地方
// 默認(rèn)比較類型是 String
function compare(x, y) {
return x - y
}
color.sort(compare)
log(color); // ["1", "2", "3", "blue", "yellow", "red"]
5. concat()
// concat() 傳入元素或者數(shù)組都可以
log(color.concat(messages)) //["1", "2", "3", "blue", "yellow", "red", "1", "2", "3"]
6. slice()
// slice() 常見截取數(shù)組的元素,返回的是一個新數(shù)組丈钙,不更改原數(shù)組非驮,對應(yīng) String 中的 subString()
// 如果不給slice 傳入?yún)?shù),則默認(rèn)截取所有元素雏赦,所以我們可以很容易的復(fù)制一個數(shù)組
// slice 可以傳入負(fù)數(shù)劫笙,表示從后往前截取
let arrCopy = color.slice()
log(arrCopy) // ["1", "2", "3", "blue", "yellow", "red"]
let arr = color.slice(3, -1)
log(arr) // ["blue", "yellow"]
7. join()
// join() 把數(shù)組元素合并為一個字符串,如果不帶參數(shù)星岗,默認(rèn)用逗號分隔
log(color.join())
log(color.join('-'))
8.splice()
// splice() 算是一個萬能的方法對于數(shù)組的操作填大,根據(jù)參數(shù)不同可以實現(xiàn)從某處起刪除多少個元素,
// 第三個參數(shù)往后都是需要添加到末尾的元素伍茄,返回值是被刪除掉的元素組成的數(shù)組
log(color.splice(2, 3, 'hhh', 'sumin', 'test'), color)
// (3) ["3", "blue", "yellow"] (6) ["1", "2", "hhh", "sumin", "test", "red"]
9. indexOf()
// indexOf() && lastIndexOf()
// 二者都是驗證數(shù)組中是否含有某個元素栋盹,返回匹配到的元素在數(shù)組中所在的位置,如果沒有敷矫,則返回 -1例获,
// 不同的是 indexOf 是從前往后,lastIndexOf 則相反
log(color.indexOf('sumin'), color.lastIndexOf('ez')) // 3 -1
10. every(fn)
// every(fn) && some(fn)
// every and some 都是針對數(shù)組每一項運(yùn)算結(jié)果判定曹仗,不同的是 every 要求必須所有的都為 true 才能返回 true榨汤,
// some 則只要有一項為 true 則返回 true,并且剩余的元素不會再執(zhí)行檢測
const num = [1, 2, 3, 4, 5, 4, 3, 2, 1]
const every = num.every((item, index, array) => {
return item > 2
})
log(every) // false
const some = num.some((item, index, array) => {
return item > 2
})
log(some) // true
11. filter(fn)
// filter(fn) 過濾方法 可以傳入高階函數(shù) 怎茫,返回滿足條件的元素組成的新數(shù)組收壕,不改變原數(shù)組
const filter = num.filter((item, index, array) => {
return item > 2
})
log(filter) // [3, 4, 5, 4, 3]
12.map()
// map() 對數(shù)組的每一項進(jìn)行計算等處理妓灌,返回處理結(jié)果組成的數(shù)組,其他和 forEach 類似蜜宪,只不過 forEach 沒有返回值虫埂,
// 這里注意與數(shù)據(jù)類型 Map 進(jìn)行區(qū)分,不要混為一談
const map = num.map((item, index, array) => {
return item > 2
})
log(map) // [false, false, true, true, true, true, true, false, false]
// 順帶了解一下 ES6 的數(shù)據(jù)類型 Map圃验,
// 注意: JavaScript 中規(guī)定 Map 的數(shù)據(jù)結(jié)構(gòu)必須是字符串鍵值對掉伏,
// 類似 Java 中的 Map,新增的數(shù)據(jù)類型 Map 是為了優(yōu)化查詢速度的
const m = new Map([['a', 12], ['b', 34], ['c', 67]])
log(m.get('a')) // 12
13.forEach()
// forEach() 遍歷數(shù)組,與 for 循環(huán)類似澳窑,不過區(qū)別在于 forEach 無法做到按指定的順序遍歷斧散,對于稀疏數(shù)組使用 for 循環(huán)效率更好
14. reduce(fn)
// reduce(fn) 累加求和
// 參數(shù) [ 前一個元素 | 當(dāng)前元素,從1開始 | 后一個元素的序列摊聋,從1開始計數(shù) | 表示該數(shù)組 ]
// 對于 reduce 的很多用法還不是很熟悉鸡捐,需要多加研究
const reduce = num.reduce((pre, cur, index, array) => {
return pre + cur
})
log(reduce) // 25
//每一次迭代之后的結(jié)果分別為
// [3, 3, 4, 5, 4, 3, 2, 1]
// [6, 4, 5, 4, 3, 2, 1]
// [10, 5, 4, 3, 2, 1]
// [15, 4, 3, 2, 1]
// [19, 3, 2, 1]
// [22, 2, 1]
// [24, 1]
// 25