App下載

JavaScript的數(shù)組的常用方法

猿友 2021-01-26 17:05:20 瀏覽數(shù) (2811)
反饋


今天給大家?guī)鞪avaScript對數(shù)組的操控的常用方法及其常見的應用場景。

向數(shù)組添加元素的方法：

1.Array.push(value1,value2,…）

  • 向數(shù)組的末尾追加
  • 返回值是添加數(shù)據(jù)后數(shù)組的新長度。
  • 會改變原有數(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ù)組的新長度。
  • 會改變原有數(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 處插入
  • 返回的是被刪除的元素。
  • 會改變原有數(shù)組
如果只傳入倆個參數(shù)那就是從【參數(shù)1】的位置刪除【參數(shù)2】個數(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ù)組刪除元素的方法：

1.pop()

  • 從尾部刪除一個元素
  • 返回被刪除掉的元素。
  • 會改變原有數(shù)組

let arr = [1,2,3];
let result = arr.pop();
console.log(result)   //3
console.log(arr)    //[1,2]
2.shift()

  • 從頭部刪除一個元素
  • 返回被刪除掉的元素。
  • 會改變原有數(shù)組

let arr = [1,2,3];
let result = arr.shift();
console.log(result)   //1
console.log(arr)    //[2,3]

3.splice(index,howmany)

  • 在 index 處刪除 howmany 個元素，
  • 返回的是被刪除掉的元素的集合。
  • 會改變原有數(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)，倒置
  • 該方法會改變原有數(shù)組。

let arr = [1,2,3];
let result = arr.reverse();
console.log(result)   //[3,2,1]
console.log(arr)    //[3,2,1]
2.sort()

  • 按指定規(guī)則排序
  • 改變原有數(shù)組。
let arr = [2,1,3];
let result = arr.sort();
console.log(result)   //[1,2,3]
console.log(arr)    //[1,2,3]

注意： 如果你認為 sort 方法是讓數(shù)組從小到大排序那就錯了。 我們可以改變一下剛才的數(shù)組，加一些大一點的數(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)在是不是稍微有一點懵了？ 可是我們還是能找到一些規(guī)律的，他就是首先按照一個數(shù)字的第一個字符的大小去做比較，然后再用第二個字符去做比較，小的在前面，如果朋友們想讓這個數(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ù)是一個回調(diào)函數(shù)，有倆個值，返回值如果是第一個值減去第二個值那么就是從小到大排序，如果是第二個值減去第一個值就是從大到小排序。

數(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()

  • 將數(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]
數(shù)組截取的方法：

1.slice(start,end)

  • 從 start 起始索引處，截取到 end 結(jié)束索引處
  • 返回截取到的元素集合。 注意： 如果不傳值那么就是直接拷貝了一份數(shù)組的值。 end 可以不傳值，表示截取到數(shù)組的末尾。start 與 end 也可以取負值，取負值表示從后向前計數(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)換的方法：

1.toString()

  • 轉(zhuǎn)換為字符串，和不傳參數(shù)的 join()一致，還可以使用 2，8，16 進制轉(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ù)組指定深度的方法

比如說現(xiàn)在有一個這樣的數(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),  //無限遞歸，直到最后
    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]]


JavaScript

0 人點贊