JavaScript基礎之數組經常使用方法

目錄

• JS 數組經常使用API
  • 經常使用屬性
  • 經常使用方法
  • 常見方法語法解釋
    • from方法
    • isArray
    • concat
    • every
    • fill
    • filter
    • find
    • forEach
    • indexOf
    • join
    • keys
    • map
    • pop
    • reduce
    • reverse
    • slice
    • some
    • sort
    • splice

JS 數組經常使用API

經常使用屬性

• length 屬性
• prototype

經常使用方法

• from 從一個相似數組或可迭代對象中建立一個新的數組實例。
• isArray 用於肯定傳遞的值是不是一個 Array。
• of 建立一個具備可變數量參數的新數組實例，而不考慮參數的數量或類型。
• concat 用於合併兩個或多個數組。此方法不會更改現有數組，而是返回一個新數組。
• copyWithin 淺複製數組的一部分到同一數組中的另外一個位置，並返回它，不會改變原數組的長度。
• entries 返回一個新的Array Iterator對象，該對象包含數組中每一個索引的鍵/值對。
• every 測試數組的全部元素是否都經過了指定函數的測試。
• fill 用一個固定值填充一個數組中從起始索引到終止索引內的所有元素。不包括終止索引。
• filter 建立一個新數組, 其包含經過所提供函數實現的測試的全部元素。
• find 返回數組中知足提供的測試函數的第一個元素的值。不然返回 undefined。
• findIndex 返回數組中知足提供的測試函數的第一個元素的索引。不然返回-1。
• flat 會按照一個可指定的深度遞歸遍歷數組，並將全部元素與遍歷到的子數組中的元素合併爲一個新數組返回。

• flatMap 首先使用映射函數映射每一個元素，而後將結果壓縮成一個新數組。它與 map 和 深度值1的 flat 幾乎相同，但 flatMap 一般在合併成一種方法的效率稍微高一些。

• forEach 對數組的每一個元素執行一次提供的函數。
• includes 用來判斷一個數組是否包含一個指定的值，根據狀況，若是包含則返回 true，不然返回false。（注意：對象數組不能使用includes方法來檢測。）
• indexOf 返回在數組中能夠找到一個給定元素的第一個索引，若是不存在，則返回-1。
• join 將一個數組（或一個類數組對象）的全部元素鏈接成一個字符串並返回這個字符串。若是數組只有一個項目，那麼將返回該項目而不使用分隔符。
• keys 返回一個包含數組中每一個索引鍵的Array Iterator對象。
• lastIndexOf 返回指定元素（也即有效的 JavaScript 值或變量）在數組中的最後一個的索引，若是不存在則返回 -1。從數組的後面向前查找，從 fromIndex 處開始。
• map 建立一個新數組，其結果是該數組中的每一個元素都調用一個提供的函數後返回的結果。
• pop 從數組中刪除最後一個元素，並返回該元素的值。此方法更改數組的長度。
• push 將一個或多個元素添加到數組的末尾，並返回該數組的新長度。
• reduce 對數組中的每一個元素執行一個由您提供的reducer函數(升序執行)，將其結果彙總爲單個返回值。
• reduceRight 接受一個函數做爲累加器（accumulator）和數組的每一個值（從右到左）將其減小爲單個值。
• reverse 將數組中元素的位置顛倒,並返回該數組。該方法會改變原數組。
• shift 從數組中刪除第一個元素，並返回該元素的值。此方法更改數組的長度。
• slice 返回一個新的數組對象，這一對象是一個由 begin和 end（不包括end）決定的原數組的淺拷貝。原始數組不會被改變。
• some 測試是否至少有一個元素經過由提供的函數實現的測試。
• sort 用原地算法對數組的元素進行排序，並返回數組。排序算法如今是穩定的。默認排序順序是根據字符串Unicode碼點。
• splice 經過刪除或替換現有元素或者原地添加新的元素來修改數組,並以數組形式返回被修改的內容。此方法會改變原數組。
• toLocaleString 返回一個字符串表示數組中的元素。數組中的元素將使用各自的 toLocaleString 方法轉成字符串，這些字符串將使用一個特定語言環境的字符串（例如一個逗號 ","）隔開。
• toString 返回一個字符串，表示指定的數組及其元素。
• unshift 將一個或多個元素添加到數組的開頭，並返回該數組的新長度。

• values 返回一個新的 Array Iterator 對象，該對象包含數組每一個索引的值

常見方法語法解釋

上面列出了在js數組當中常見的方法，下面在其中選取一些比較高頻和重要的方法來講明。

from方法

從一個相似數組或可迭代對象中建立一個新的數組實例。

語法：

Array.from(arrayLike[, mapFn[, thisArg]])

參數:

1. arrayLike
   想要轉換成數組的僞數組對象或可迭代對象。
2. mapFn (可選參數)
   若是指定了該參數，新數組中的每一個元素會執行該回調函數。
3. thisArg (可選參數)
   可選參數，執行回調函數 mapFn 時 this 對象。

返回值:
一個新的數組實例。

demo:

Array.from('foo'); 
// ["f", "o", "o"]

isArray

用於肯定傳遞的值是不是一個 Array。

語法：

Array.isArray(obj)

參數:

1. obj
   須要檢測的值。

demo:

Array.isArray([1, 2, 3]);  // true

concat

用於合併兩個或多個數組。此方法不會更改現有數組，而是返回一個新數組。

語法：

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

參數:

1. valueN
   將數組和/或值鏈接成新數組。

demo:

var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];

console.log(array1.concat(array2));
// expected output: Array ["a", "b", "c", "d", "e", "f"]

every

測試數組的全部元素是否都經過了指定函數的測試。

語法：

arr.every(callback[, thisArg])

參數:

1. callback
   用來測試每一個元素的函數。
2. thisArg
   執行 callback 時使用的 this 值。

demo:

function isBelowThreshold(currentValue) {
  return currentValue < 40;
}

var array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

fill

用一個固定值填充一個數組中從起始索引到終止索引內的所有元素。不包括終止索引。

語法:

arr.fill(value[, start[, end]])

參數:

1. value
   用來填充數組元素的值。
2. start 可選
   起始索引，默認值爲0。
3. end 可選
   終止索引，默認值爲 this.length。

返回值:
修改後的數組。

filter

建立一個新數組, 其包含經過所提供函數實現的測試的全部元素。

語法:

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

參數:

1. callback
   用來測試數組的每一個元素的函數。返回 true 表示該元素經過測試，保留該元素，false 則不保留。它接受如下三個參數：
2. element
   數組中當前正在處理的元素。
3. index可選
   正在處理的元素在數組中的索引。
   array可選
   調用了 filter 的數組自己。
   thisArg可選
   執行 callback 時，用於 this 的值。

返回值:
一個新的、由經過測試的元素組成的數組，若是沒有任何數組元素經過測試，則返回空數組。

demo:

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

find

返回數組中知足提供的測試函數的第一個元素的值。不然返回 undefined。

語法:

arr.find(callback[, thisArg])

參數:

1. callback
   在數組每一項上執行的函數，接收 3 個參數：
   element
   當前遍歷到的元素。
   index可選
   當前遍歷到的索引。
   array可選
   數組自己。
2. thisArg可選
   執行回調時用做this 的對象。

demo:

var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
  return element > 10;
});

console.log(found);
// expected output: 12

forEach

對數組的每一個元素執行一次提供的函數。

語法:

arr.forEach(callback[, thisArg]);

參數:

1. callback
   爲數組中每一個元素執行的函數，該函數接收三個參數：
   currentValue
   數組中正在處理的當前元素。
   index可選
   數組中正在處理的當前元素的索引。
   array可選
   forEach() 方法正在操做的數組。
2. thisArg可選
   可選參數。當執行回調函數時用做 this 的值(參考對象)。

demo:

var array1 = ['a', 'b', 'c'];

array1.forEach(function(element) {
  console.log(element);
});

// expected output: "a"
// expected output: "b"
// expected output: "c"

indexOf

返回在數組中能夠找到一個給定元素的第一個索引，若是不存在，則返回-1。

語法:

arr.indexOf(searchElement)
arr.indexOf(searchElement[, fromIndex = 0])

參數:

1. searchElement
   要查找的元素
2. fromIndex
   開始查找的位置。若是該索引值大於或等於數組長度，意味着不會在數組裏查找，返回-1。若是參數中提供的索引值是一個負值，則將其做爲數組末尾的一個抵消，即-1表示從最後一個元素開始查找，-2表示從倒數第二個元素開始查找 ，以此類推。 注意：若是參數中提供的索引值是一個負值，並不改變其查找順序，查找順序仍然是從前向後查詢數組。若是抵消後的索引值仍小於0，則整個數組都將會被查詢。其默認值爲0.

返回值:
首個被找到的元素在數組中的索引位置; 若沒有找到則返回 -1

demo:

var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

join

將一個數組（或一個類數組對象）的全部元素鏈接成一個字符串並返回這個字符串。若是數組只有一個項目，那麼將返回該項目而不使用分隔符。

語法:

arr.join([separator])

參數:

1. separator
   指定一個字符串來分隔數組的每一個元素。若是須要，將分隔符轉換爲字符串。若是省略()，數組元素用逗號分隔。默認爲 ","。若是separator是空字符串("")，則全部元素之間都沒有任何字符。

返回值:
一個全部數組元素鏈接的字符串。若是 arr.length 爲0，則返回空字符串。

demo:

var elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

keys

返回一個包含數組中每一個索引鍵的Array Iterator對象。

語法:

arr.keys()

返回值:
一個新的 Array 迭代器對象。

demo：

var array1 = ['a', 'b', 'c'];
var iterator = array1.keys(); 
  
for (let key of iterator) {
  console.log(key); // expected output: 0 1 2
}

map

建立一個新數組，其結果是該數組中的每一個元素都調用一個提供的函數後返回的結果。

語法:

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])

參數:

1. callback
   生成新數組元素的函數，使用三個參數：
   currentValue
   callback 數組中正在處理的當前元素。
   index可選
   callback 數組中正在處理的當前元素的索引。
   array可選
   callback map 方法被調用的數組。
2. thisArg可選
   執行 callback 函數時使用的this 值。

返回值:
一個新數組，每一個元素都是回調函數的結果。

demo:

var array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

pop

從數組中刪除最後一個元素，並返回該元素的值。此方法更改數組的長度。

語法：

arr.pop()

返回值：
從數組中刪除的元素(當數組爲空時返回undefined)。

demo:

var plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// expected output: "tomato"

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]

reduce

對數組中的每一個元素執行一個由您提供的reducer函數(升序執行)，將其結果彙總爲單個返回值。

語法:

arr.reduce(callback[, initialValue])

參數:

1. callback
   執行數組中每一個值的函數，包含四個參數：
   accumulator
   累計器累計回調的返回值; 它是上一次調用回調時返回的累積值，或initialValue（見於下方）。

currentValue
數組中正在處理的元素。
currentIndex可選
數組中正在處理的當前元素的索引。 若是提供了initialValue，則起始索引號爲0，不然爲1。
array可選
調用reduce()的數組

1. initialValue可選
   做爲第一次調用 callback函數時的第一個參數的值。 若是沒有提供初始值，則將使用數組中的第一個元素。 在沒有初始值的空數組上調用 reduce 將報錯。

返回值:
函數累計處理的結果.

demo:

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

reverse

將數組中元素的位置顛倒,並返回該數組。該方法會改變原數組。

語法:

arr.reverse()

demo :

var array1 = ['one', 'two', 'three'];
console.log('array1: ', array1);
// expected output: Array ['one', 'two', 'three']

var reversed = array1.reverse(); 
console.log('reversed: ', reversed);
// expected output: Array ['three', 'two', 'one']

/* Careful: reverse is destructive. It also changes
the original array */ 
console.log('array1: ', array1);
// expected output: Array ['three', 'two', 'one']

slice

返回一個新的數組對象，這一對象是一個由 begin和 end（不包括end）決定的原數組的淺拷貝。原始數組不會被改變。

語法:

arr.slice();
// [0, end]

arr.slice(begin);
// [begin, end]

arr.slice(begin, end);
// [begin, end)

參數:

1. begin 可選
   從該索引處開始提取原數組中的元素（從0開始）。
   若是該參數爲負數，則表示從原數組中的倒數第幾個元素開始提取，slice(-2)表示提取原數組中的倒數第二個元素到最後一個元素（包含最後一個元素）。
   若是省略 begin，則 slice 從索引 0 開始。
2. end可選
   在該索引處結束提取原數組元素（從0開始）。slice會提取原數組中索引從 begin 到 end 的全部元素（包含begin，但不包含end）。
   slice(1,4) 提取原數組中的第二個元素開始直到第四個元素的全部元素 （索引爲 1, 2, 3的元素）。
   若是該參數爲負數， 則它表示在原數組中的倒數第幾個元素結束抽取。 slice(-2,-1)表示抽取了原數組中的倒數第二個元素到最後一個元素（不包含最後一個元素，也就是隻有倒數第二個元素）。
   若是 end 被省略，則slice 會一直提取到原數組末尾。
   若是 end 大於數組長度，slice 也會一直提取到原數組末尾。

返回值：
一個含有提取元素的新數組

demo:

var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

some

測試是否至少有一個元素經過由提供的函數實現的測試。

語法:

arr.some(callback(element[, index[, array]])[, thisArg])

參數:

1. callback
   用來測試每一個元素的函數，接受三個參數：
   element
   數組中正在處理的元素。
   index 可選
   數組中正在處理的元素的索引值。
   array可選
   some()被調用的數組。
2. thisArg可選
   執行 callback 時使用的 this 值。

返回值:
若是回調函數返回任何數組元素的truthy值，則返回true；不然爲false。

demo:

var array = [1, 2, 3, 4, 5];

var even = function(element) {
  // checks whether an element is even
  return element % 2 === 0;
};

console.log(array.some(even));
// expected output: true

sort

用原地算法對數組的元素進行排序，並返回數組。排序算法如今是穩定的。默認排序順序是根據字符串Unicode碼點。

語法:

arr.sort([compareFunction])

參數:

1. compareFunction 可選
   用來指定按某種順序進行排列的函數。若是省略，元素按照轉換爲的字符串的各個字符的Unicode位點進行排序。

返回值:
排序後的數組。請注意，數組已原地排序，而且不進行復制。

demo:

var months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

var array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

splice

經過刪除或替換現有元素或者原地添加新的元素來修改數組,並以數組形式返回被修改的內容。此方法會改變原數組。

語法:

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

參數:

1. start​
   指定修改的開始位置（從0計數）。若是超出了數組的長度，則從數組末尾開始添加內容；若是是負值，則表示從數組末位開始的第幾位（從-1計數，這意味着-n是倒數第n個元素而且等價於array.length-n）；若是負數的絕對值大於數組的長度，則表示開始位置爲第0位。

2. deleteCount 可選
   整數，表示要移除的數組元素的個數。
   若是 deleteCount 大於 start 以後的元素的總數，則從 start 後面的元素都將被刪除（含第 start 位）。
   若是 deleteCount 被省略了，或者它的值大於等於array.length - start(也就是說，若是它大於或者等於start以後的全部元素的數量)，那麼start以後數組的全部元素都會被刪除。
   若是 deleteCount 是 0 或者負數，則不移除元素。這種狀況下，至少應添加一個新元素。

3. item1, item2, ... 可選
   要添加進數組的元素,從start 位置開始。若是不指定，則 splice() 將只刪除數組元素。

返回值:
由被刪除的元素組成的一個數組。若是隻刪除了一個元素，則返回只包含一個元素的數組。若是沒有刪除元素，則返回空數組。

demo:

var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'May']

具體方法介紹能夠訪問：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array