JS常用的陣列方法總結-js教程-PHP中文網

這次帶給大家JS常用的陣列方法總結，在JS使用資料時注意事項有哪些，下面就是實戰案例，一起來看一下。

1、concat() 方法用於合併兩個或多個陣列。此方法不會變更現有數組，而是傳回一個新數組。

範例：
var array1 = ['a', 'b', 'c'];

var array2 = ['d', 'e', ' f'];

console.log(array1.concat(array2));

// ["a", "b", "c", "d", "e" , "f"]

2、filter() 方法建立一個新數組, 其包含透過所提供函數實現的測試的所有元素。 (可用於篩選)

範例：
function isBigEnough(value) {
return value >= 10;
}

#var filtered = [12 , 5, 8, 130, 44].filter(isBigEnough);

// filtered is [12, 130, 44]

// ES6 way

const isough = value => value >= 10;

let [...spread]= [12, 5, 8, 130, 44];

#let filtered = spread.filter( isBigEnough);

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

範例：
function isBigEnough(element) {
return element >= 15;
}

[12, 5, 8, 130, 44 ].find(isBigEnough); // 130

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

function isBigEnough(element) {
return element >= 15;
}

[12, 5, 8, 130, 44].findIndex(isBigEnough );
// index of 4th element in the Array is returned,
// so this will result in '3'

5、forEach() 方法對數組的每個元素執行一次提供的函數。（相當於JavaScript裡的for迴圈）

#範例：

const arr = ['a', 'b', 'c'];

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

arr.forEach( element => console.log(element));

// a
// b
// c

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

範例：
let a = [2, 9, 7, 8, 9];
a.indexOf(2); // 0
a.indexOf(6 ); // -1
a.indexOf(7); // 2
a.indexOf(8); // 3
a.indexOf(9); // 1

if (a.indexOf(3) === -1) {
// element doesn't exist in array
}

7、map() 方法建立一個新數組，其結果是該數組中的每個元素都調用一個提供的函數後傳回的結果。

範例：
// ES6
let numbers = [1, 5, 10, 15];
let doubles = numbers.map( x => x ** 2);

// doubles is now [1, 25, 100, 225]
// numbers is still [1, 5, 10, 15]

const numbers = [ 2, 4, 8, 10];
let halves = numbers.map(x => x / 2);

let numbers = [1, 4, 9];
let roots = numbers.map(Math.sqrt);
// roots is now [1, 2, 3]
// numbers is still [1, 4, 9]

8 、pop()方法從陣列中刪除最後一個元素，並傳回該元素的值。此方法會變更數組的長度。

範例：
let a = [1, 2, 3];
a.length; // 3

a.pop(); // 3

console.log(a); // [1, 2]
a.length; // 2

9、reduce() 方法對累加器和數組中的每個元素（從左到右）應用一個函數，將其減少為單一值。

範例：

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
// filtered is [12, 130, 44 ]

10、Array.isArray() 用來決定傳遞的值是否是一個Array

範例：

Array.isArray([1 , 2, 3]);
// true
Array.isArray({foo: 123});
// false
Array.isArray("foobar");
// false
Array.isArray(undefined);
// false

11、Array.from() 方法從一個類似陣列或可迭代物件中建立一個新的陣列範例。

範例：
const bar = ["a", "b", "c"];
Array.from(bar);
// ["a" , "b", "c"]

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

12、fill() 方法用一個固定值填入一個陣列中從起始索引到終止索引內的全部元素。

範例：
var 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]

#語法：
arr.fill(value[, start[, end]])
即（填滿的值，開始值（索引），結束值（從1開始））

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

範例：
let a = [1, 2, 3];

a.includes(2);
// true

# a.includes(4);
// false

14、join() 方法將一個陣列（或一個類別陣列物件）的所有元素連接成一個字串並傳回這個字串。

範例：
let a = ['Wind', 'Rain', 'Fire'];

console.log(a.join());
// 預設為","
// 'Wind,Rain,Fire'

console.log(a.join(""));
// 分隔符號=== 空字串""
// "WindRainFire"

console.log(a.join("-"));
// 分隔符號"-"
// 'Wind- Rain-Fire'

15、push() 方法將一個或多個元素加入陣列的結尾，並傳回新陣列的長度。

範例：
var numbers = [1, 2, 3];
numbers.push(4);

console.log(numbers);
// [1, 2, 3, 4]

numbers.push(5, 6, 7);

console.log(numbers);
// [1, 2, 3, 4, 5, 6, 7]

16、reduceRight() 方法接受一個函數作為累加器（accumulator）和數組的每個值（從右到左）將其減少為單一值。與Array.prototype.reduce() 的執行方向相反

範例：
let flattened = [
[0, 1],
[2, 3],
[4, 5]
].reduceRight((a, b) => {
return a.concat(b);
}, []);

// flattened is [4, 5, 2, 3, 0, 1]

#17、shift() 方法從陣列中刪除第一個元素，並傳回該元素的值。此方法會變更數組的長度。

範例：
let a = [1, 2, 3];
let b = a.shift();

console.log(a);
// [2, 3]

console.log(b);
// 1

18、slice() 方法回傳一個從開始到結束（不包括結束）所選的陣列的一部分淺拷貝到一個新數組物件。原始數組不會被修改。

範例：
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"]

19、some() 方法測試數組中的某些元素是否通過由提供的函數實現的測試。

範例：
const isBiggerThan10 = (element, index, array) => {
return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);
// false

[12, 5, 8, 1, 4].some(isBiggerThan10);
/// true

20、sort() 方法用就地（ in-place ）的演算法對陣列的元素進行排序，並傳回陣列。 sort 排序不一定是穩定的。預設排序順序是根據字串Unicode碼點。

範例：
var fruit = ['cherries', 'apples', 'bananas'];
fruit.sort();
// ['apples', 'bananas', 'cherries']

21、splice() 方法透過刪除現有元素和/或新增元素來變更一個陣列的內容。

範例：
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

myFish.splice(2, 0, ' drum'); // 在索引為2的位置插入'drum'
// myFish 變成["angel", "clown", "drum", "mandarin", "sturgeon"]

myFish.splice(2, 1); // 從索引為2的位置刪除一項（也就是'drum'這一項）
// myFish 變成["angel", "clown", "mandarin ", "sturgeon"]

語法：
array.splice(start)

array.splice(start, deleteCount)

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

參數：
start
指定修改的開始位置（從0計數）。如果超出了數組的長度，則從數組末尾開始添加內容；如果是負值，則表示從數組末位開始的第幾位（從1計數）；若只使用start參數而不使用deleteCount、item，如：array.splice(start) ，表示刪除[start，end]的元素。
deleteCount 可選
整數，表示要移除的陣列元素的個數。如果 deleteCount 是 0，則不移除元素。在這種情況下，至少應添加一個新元素。如果 deleteCount 大於start 之後的元素的總數，則從 start 後面的元素都會被刪除（含第 start 位元）。
如果deleteCount被省略，則其相當於(arr.length - start)。
item1, item2, ... 可選
要新增進數組的元素,從start 位置開始。如果不指定，則 splice() 將只刪除陣列元素。
splice方法使用deleteCount參數來控制是刪除還是新增：
start參數是必須的，表示開始的位置（從0計數），如：start=0從第一個開始；start>= array. length-1表示從最後一個開始。
①、從start位置開始刪除[start，end]的元素。
array.splice(start)
②、從start位置開始刪除[start，Count]的元素。
array.splice(start, deleteCount)
③、從start位置開始加入item1, item2, ...元素。
array.splice(start, 0, item1, item2, ...)

22、toString() 傳回字串，表示指定的陣列及其元素。

23、unshift() 方法將一個或多個元素加入到陣列的開頭，並傳回新陣列的長度。

範例：

let a = [1, 2, 3];
a.unshift(4, 5);

console.log( a);
// [4, 5, 1, 2, 3]

#24、substring() 方法用於提取字串中介於兩個指定下標之間的字元。
範例：
var str="Hello world!";
document.write(str.substring(3)+"
");// lo world!
document.write(str.substring(3,7));//lo w

語法：
string.substring(from, to)

參數
from
必需。一個非負的整數，規定要提取的子字串的第一個字元在 string Object 中的位置。
to
可選。一個非負的整數，比要擷取的子字串的最後一個字元在 string Object 中的位置多 1。
如果省略該參數，那麼傳回的子字串會一直到字串的結尾。

25、substr() 方法可在字串中抽取從 start 下標開始的指定數目的字元。
範例
var str="Hello world!"
document.write(str.substr(3));//lo world!
document.write(str.substr(3 ,7));p//lo worl
語法：
stringObject.substr(start,length)

參數：
start
必要。要抽取的子字串的起始下標。必須是數值。如果是負數，那麼此參數宣告從字串的尾部開始算起的位置。也就是說，-1 指字串中最後一個字符，-2 指倒數第二個字符，以此類推。
length
可選。子字串中的字元數。必須是數值。如果省略了該參數，那麼傳回從 stringObject 的起始位置到結尾的字符串。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！