JavaScript數組常用API方法匯總

 

1、push() 方法將一個或多個元素添加到數組的末尾，並返回該數組的新長度。

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

 

2、pop()方法從數組中刪除最后一個元素，並返回該元素的值。此方法更改數組的長度。

const 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"]

 

3、shift() 方法從數組中刪除第一個元素，並返回該元素的值。此方法更改數組的長度。

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

 

4、unshift() 方法將一個或多個元素添加到數組的開頭，並返回該數組的新長度(該方法修改原有數組)。

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

 

5、concat() 方法用於合並兩個或多個數組。此方法不會更改現有數組，而是返回一個新數組。

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

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

 

6、join() 方法將一個數組（或一個類數組對象）的所有元素連接成一個字符串並返回這個字符串。如果數組只有一個項目，那么將返回該項目而不使用分隔符。

const 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"

 

7、indexOf()方法返回在數組中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。

const 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

 

8、includes() 方法用來判斷一個數組是否包含一個指定的值，根據情況，如果包含則返回 true，否則返回false。

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

 

9、reverse() 方法將數組中元素的位置顛倒，並返回該數組。

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

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

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

 

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

const 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"]

 

11、splice() 方法通過刪除或替換現有元素或者原地添加新的元素來修改數組,並以數組形式返回被修改的內容。

const 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"]

 

12、forEach() 方法對數組進行循環遍歷。

var arr4 = [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
arr4.forEach((item, index, a) => {
   // 參數item: 數組中每一項的內容
   // 參數index: 數組索引
   // 參數a: 指的是數組本身
   console.log(item + " " + index + " " + (a === arr4));
});

 

13、map() 方法創建一個新數組，其結果是該數組中的每個元素都調用一個提供的函數后返回的結果。

const 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]

 

14、filter() 方法創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。

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

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

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

 

15、every() 方法測試一個數組內的所有元素是否都能通過某個指定函數的測試。它返回一個布爾值。

const isBelowThreshold = (currentValue) => currentValue < 40;

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

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

 

16、some() 方法測試數組中是不是至少有1個元素通過了被提供的函數測試。它返回的是一個Boolean類型的值。

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

// checks whether an element is even
const even = (element) => element % 2 === 0;

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

 

17、findIndex()方法返回數組中滿足提供的測試函數的第一個元素的索引。否則返回-1。

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

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3

 

18、find() 方法返回數組中滿足提供的測試函數的第一個元素的值。否則返回 undefined。

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

const found = array1.find(element => element > 10);

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

 

19、sort() 方法對數組的元素進行排序，並返回數組，數組內傳入指定規則的函數。默認排序順序是在將元素轉換為字符串，然后比較它們的UTF-16代碼單元值序列時構建的，由於它取決於具體實現，因此無法保證排序的時間和空間復雜性。

// 升序 
arr1.sort(function (x,y) {
    return x-y
})
console.log(arr1); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
// 降序
arr1.sort(function (x, y){
    return y-x
})
console.log(arr1); // [9, 8, 7, 6, 5, 4, 3, 2, 1]

 

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

const array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]