今天給大家?guī)鞪avaScript對(duì)數(shù)組的操控的常用方法及其常見的應(yīng)用場(chǎng)景。
向數(shù)組添加元素的方法:
1.Array.push(value1,value2,…)
- 向數(shù)組的末尾追加
- 返回值是添加數(shù)據(jù)后數(shù)組的新長(zhǎng)度。
- 會(huì)改變?cè)袛?shù)組
let arr = [1,2,3];
let result= arr.push(4,5);
console.log(result) //5
console.log(arr) //[1,2,3,4,5]
2.Array.unshift(value1,value2,…)
- 向數(shù)組的開頭添加
- 返回值是添加數(shù)據(jù)后數(shù)組的新長(zhǎng)度。
- 會(huì)改變?cè)袛?shù)組
let arr = [1,2,3];
let result= arr.unshift(4,5);
console.log(result) //5
console.log(arr) //[4,5,1,2,3]
3.splice(index,0,value1,value2,…)
- 向數(shù)組的指定 index 處插入
- 返回的是被刪除的元素。
- 會(huì)改變?cè)袛?shù)組
如果只傳入倆個(gè)參數(shù)那就是從【參數(shù)1】的位置刪除【參數(shù)2】個(gè)數(shù)
let arr = [1,2,3];
let result = arr.splice(2,0,4,5);
console.log(result) //Array(0)
console.log(arr) //[1,2,4,5,3]
向數(shù)組刪除元素的方法:
let arr = [1,2,3];
let result = arr.splice(2,0,4,5);
console.log(result) //Array(0)
console.log(arr) //[1,2,4,5,3]
1.pop()
- 從尾部刪除一個(gè)元素
- 返回被刪除掉的元素。
- 會(huì)改變?cè)袛?shù)組
let arr = [1,2,3];
let result = arr.pop();
console.log(result) //3
console.log(arr) //[1,2]
2.shift()
let arr = [1,2,3];
let result = arr.pop();
console.log(result) //3
console.log(arr) //[1,2]
- 從頭部刪除一個(gè)元素
- 返回被刪除掉的元素。
- 會(huì)改變?cè)袛?shù)組
let arr = [1,2,3];
let result = arr.shift();
console.log(result) //1
console.log(arr) //[2,3]
let arr = [1,2,3];
let result = arr.shift();
console.log(result) //1
console.log(arr) //[2,3]
3.splice(index,howmany)
- 在 index 處刪除 howmany 個(gè)元素,
- 返回的是被刪除掉的元素的集合。
- 會(huì)改變?cè)袛?shù)組
let arr = [1,2,3];
let result = arr.splice(1,2);
console.log(result) //[2,3]
console.log(arr) //[1]
數(shù)組排序的方法:
1.reverse()
- 反轉(zhuǎn),倒置
- 該方法會(huì)改變?cè)袛?shù)組。
let arr = [1,2,3];
let result = arr.reverse();
console.log(result) //[3,2,1]
console.log(arr) //[3,2,1]
2.sort()
let arr = [1,2,3];
let result = arr.reverse();
console.log(result) //[3,2,1]
console.log(arr) //[3,2,1]
- 按指定規(guī)則排序
- 改變?cè)袛?shù)組。
let arr = [2,1,3];
let result = arr.sort();
console.log(result) //[1,2,3]
console.log(arr) //[1,2,3]
注意: 如果你認(rèn)為 sort 方法是讓數(shù)組從小到大排序那就錯(cuò)了。 我們可以改變一下剛才的數(shù)組,加一些大一點(diǎn)的數(shù)字。
let arr = [25,148,12,6,38];
let result = arr.sort();
console.log(result) //[12, 148, 25, 38, 6]
console.log(arr) //[12, 148, 25, 38, 6]
有些朋友現(xiàn)在是不是稍微有一點(diǎn)懵了? 可是我們還是能找到一些規(guī)律的,他就是首先按照一個(gè)數(shù)字的第一個(gè)字符的大小去做比較,然后再用第二個(gè)字符去做比較,小的在前面,如果朋友們想讓這個(gè)數(shù)組從真正的小到真正的大排序,那么我們可以改造一下剛才的代碼。
let arr = [25,148,12,6,38];
let result = arr.sort((a,b) => a - b);
console.log(result) //[6, 12, 25, 38, 148]
console.log(arr) //[6, 12, 25, 38, 148]
如果想要從大到小排序那么就
let arr = [25,148,12,6,38];
let result = arr.sort((a,b) => b - a);
console.log(result) //[148, 38, 25, 12, 6]
console.log(arr) //[148, 38, 25, 12, 6]
總的來說,數(shù)組的 sort 方法里面的參數(shù)是一個(gè)回調(diào)函數(shù),有倆個(gè)值,返回值如果是第一個(gè)值減去第二個(gè)值那么就是從小到大排序,如果是第二個(gè)值減去第一個(gè)值就是從大到小排序。
數(shù)組連接的方法:
1.concat()
- 數(shù)組連接
- 返回連接后的新數(shù)組。
let arr = [25,148,12,6,38],
arr2 = [1,5,8]
let result = arr.concat(arr2);
console.log(result) //[25, 148, 12, 6, 38, 1, 5, 8]
console.log(arr) //[25, 148, 12, 6, 38]
2.join()
let arr = [25,148,12,6,38],
arr2 = [1,5,8]
let result = arr.concat(arr2);
console.log(result) //[25, 148, 12, 6, 38, 1, 5, 8]
console.log(arr) //[25, 148, 12, 6, 38]
- 將數(shù)組的每個(gè)元素以指定分隔符(默認(rèn)為“,”)連接成字符
- 返回該連接完成后的字符串。
let arr = [25,148,12,6,38];
let result = arr.join(),
result2 = arr.join('+')
console.log(result) //25,148,12,6,38
console.log(result2) //25+148+12+6+38
console.log(arr) //[25, 148, 12, 6, 38]
數(shù)組截取的方法:
let arr = [25,148,12,6,38];
let result = arr.join(),
result2 = arr.join('+')
console.log(result) //25,148,12,6,38
console.log(result2) //25+148+12+6+38
console.log(arr) //[25, 148, 12, 6, 38]
1.slice(start,end)
- 從 start 起始索引處,截取到 end 結(jié)束索引處
- 返回截取到的元素集合。 注意: 如果不傳值那么就是直接拷貝了一份數(shù)組的值。 end 可以不傳值,表示截取到數(shù)組的末尾。start 與 end 也可以取負(fù)值,取負(fù)值表示從后向前計(jì)數(shù)。
let arr = [1,2,3,4,5,6,7];
let result = arr.slice(),
result2 = arr.slice(2),
result3 = arr.slice(2,4);
console.log(result) //[1, 2, 3, 4, 5, 6, 7]
console.log(result2) //[3, 4, 5, 6, 7]
console.log(result3) //[3, 4]
console.log(arr) //[1, 2, 3, 4, 5, 6, 7]
數(shù)組轉(zhuǎn)換的方法:
let arr = [1,2,3,4,5,6,7];
let result = arr.slice(),
result2 = arr.slice(2),
result3 = arr.slice(2,4);
console.log(result) //[1, 2, 3, 4, 5, 6, 7]
console.log(result2) //[3, 4, 5, 6, 7]
console.log(result3) //[3, 4]
console.log(arr) //[1, 2, 3, 4, 5, 6, 7]
1.toString()
- 轉(zhuǎn)換為字符串,和不傳參數(shù)的 join()一致,還可以使用 2,8,16 進(jìn)制轉(zhuǎn)變?yōu)椴煌Y(jié)果。
let arr = [1,2,3,4,5,6];
let result = arr.toString();
console.log(result) //1,2,3,4,5,6
console.log(arr) //[1,2,3,4,5,6]
提取數(shù)組指定深度的方法
let arr = [1,2,3,4,5,6];
let result = arr.toString();
console.log(result) //1,2,3,4,5,6
console.log(arr) //[1,2,3,4,5,6]
比如說現(xiàn)在有一個(gè)這樣的數(shù)組: [1,2,[3,4,[5,6]]], 我想將它輸出為[1,2,3,4,5,6]。 如果自己去寫遞歸的話還是比較麻煩的。 那么我們可以使用數(shù)組本身的 flat 方法來深度解析。 1.flat()
- 按照指定的深度遞歸遍歷數(shù)組
- 返回值是遍歷到的所有元素集合。
let arr = [1,2,[3,4,[5,6]]],
res = arr.flat(Infinity), //無(wú)限遞歸,直到最后
res2 = arr.flat(); //如果不傳參數(shù)那么只遞歸一次
console.log(arr) //[1,2,[3,4,[5,6]]]
console.log(res) //[1, 2, 3, 4, 5, 6]
console.log(res2) //[1,2,3,4,[5,6]]