1. 程式人生 > 其它 >js-陣列方法

js-陣列方法

1. 增

1.1. push()

push() 方法可向陣列的末尾新增一個或多個元素

  • 語法:array.push(item1, item2, ..., itemX)
  • 修改原陣列:
  • 返回值:陣列的新長度
;['Banana', 'Orange', 'Apple', 'Mango'].push('coco')
// -> [Banana, Orange, Apple, Mango, coco]

1.2. unshift()

unshift() 方法可向陣列的開頭新增一個或更多元素

  • 語法:array.unshift(item1,item2, ..., itemX)
  • 修改原陣列:
  • 返回值:陣列的新長度
;['Banana', 'Orange', 'Apple', 'Mango'].unshift('Lemon', 'Pineapple')
// -> [Lemon, Pineapple, Banana, Orange, Apple, Mango]

1.3 splice()

  • 功能強大
    splice() 方法用於新增刪除陣列中的元素,並以陣列形式返回被修改的內容

  • 語法:array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

  • 引數:

    引數 描述
    start 指定修改的開始位置
    deleteCount
    可選,表示要移除的陣列元素的個數
    item1, item2, ... 可選,要新增進陣列的元素
  • 修改原陣列:

  • 返回值:由被刪除的元素組成的一個數組

;['Banana', 'Orange', 'Apple', 'Mango'].splice(2, 0, 'Lemon', 'Kiwi')
// ->  ['Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango']

2. 刪

2.1 pop()

移除最後一個數組元素

  • 語法:array.pop()
  • 修改原陣列:
  • 返回值:從陣列中刪除的元素(當陣列為空時返回 undefined)
;['Banana', 'Orange', 'Apple', 'Mango'].pop()
// -> [Banana, Orange, Apple]

2.2 shift()

刪除陣列的第一個元素。

  • 語法:array.shift()
  • 修改原陣列:
  • 返回值:從陣列中刪除的元素(當陣列為空時返回 undefined)
;['Banana', 'Orange', 'Apple', 'Mango'].shift()
// -> [Orange, Apple, Mango]

3. 查

3.1 includes()

includes() 方法用來判斷一個數組是否包含一個指定的值,如果是返回 true,否則 false

  • 語法:array.includes(valueToFind[, fromIndex])
  • 引數:
    引數 描述
    searchElement 必須。需要查詢的元素值。
    fromIndex 可選。從該索引處開始查詢 searchElement。如果為負值,則按升序從 array.length + fromIndex 的索引開始搜尋。預設為 0。
  • 修改原陣列:
  • 返回值:布林值
;['Banana', 'Orange', 'Apple', 'Mango'].shift()
// -> [Orange, Apple, Mango]

3.2 indexOf()

indexOf() 方法可返回陣列中某個指定的元素位置

  • 語法:array.includes(valueToFind[, fromIndex])
  • 引數:
    引數 描述
    searchElement 必須。需要查詢的元素值。
    fromIndex 可選。從該索引處開始查詢 searchElement。如果為負值,則按升序從 array.length + fromIndex 的索引開始搜尋。預設為 0。
  • 修改原陣列:
  • 返回值:布林值
;['Banana', 'Orange', 'Apple', 'Mango'].shift()
// -> [Orange, Apple, Mango]

3.3 keys()

keys() 方法用於從陣列建立一個包含陣列鍵的可迭代物件

  • 語法:array.keys()
  • 修改原陣列:
  • 返回值:一個數組可迭代物件
;['Banana', 'Orange', 'Apple', 'Mango'].keys()
// ->  [0, 1, 2, 3]

3.4 lastIndexOf()

lastIndexOf() 方法可返回一個指定的元素在陣列中最後出現的位置,從該字串的後面向前查詢

  • 語法:array.lastIndexOf()
  • 修改原陣列:
  • 返回值:索引
;['Banana', 'Orange', 'Apple', 'Mango'].lastIndexOf('Apple')
// ->  2

3.5 slice()

slice() 方法返回一個新的陣列物件,這一物件是一個由 begin 和 end 決定的原陣列的淺拷貝(包括 begin,不包括 end)

  • 語法:array.slice([begin[, end]])

  • 引數:

    引數 描述
    begin 提取起始處的索引
    end 可選,提取終止處的索引(不包含)
  • 修改原陣列:否

  • 返回值:一個含有被提取元素的新陣列

;['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'].slice(1, 3)
// ->  ['Orange',  'Lemon']

4. 改

4.1. fill()

fill() 方法用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引。

  • 語法:array.indexOf(searchElement[, fromIndex])
  • 引數:
    引數 描述
    searchElement 要查詢的元素
    fromIndex 可選。開始查詢的位置。
  • 修改原陣列:
  • 返回值:修改後的陣列
;['Banana', 'Orange', 'Apple', 'Mango'].fill('coco')
// -> ["coco", "coco", "coco", "coco"]

4.2. concat()

concat() 方法用於連線兩個或多個數組

  • 語法:array1.concat(array2,array3,...,arrayX)
  • 修改原陣列:
  • 返回值:被連線陣列的副本
const hege = ['Cecilie', 'Lone']
const stale = ['Emil', 'Tobias', 'Linus']
const kai = ['Robin']
const children = hege.concat(stale, kai)
// -> ['Cecilie', 'Lone', 'Emil', 'Tobias', 'Linus', 'Robin']

4.3. join()

join() 方法將一個數組(或一個類陣列物件)的所有元素連線成一個字串並返回這個字串。如果陣列只有一個專案,那麼將返回該專案而不使用分隔符。

  • 語法:array.join([separator])
  • 引數:separator 可選
    指定一個字串來分隔陣列的每個元素。如果需要,將分隔符轉換為字串。如果預設該值,陣列元素用逗號(,)分隔。如果 separator 是空字串(""),則所有元素之間都沒有任何字元。
  • 修改原陣列:
  • 返回值:一個所有陣列元素連線的字串。如果 array.length 為 0,則返回空字串。
const hege = ['Cecilie', 'Lone']
const stale = ['Emil', 'Tobias', 'Linus']
const kai = ['Robin']
const children = hege.concat(stale, kai)
// -> ['Cecilie', 'Lone', 'Emil', 'Tobias', 'Linus', 'Robin']

4.4. reverse()

reverse() 方法將陣列中元素的位置顛倒,並返回該陣列

  • 語法:array.reverse()
  • 引數:separator 可選
    指定一個字串來分隔陣列的每個元素。如果需要,將分隔符轉換為字串。如果預設該值,陣列元素用逗號(,)分隔。如果 separator 是空字串(""),則所有元素之間都沒有任何字元。
  • 修改原陣列:
  • 返回值:顛倒後的陣列
;['Banana', 'Orange', 'Apple', 'Mango'].reverse()
// -> ['Mango', 'Apple', 'Orange', 'Banana']