Javascript 數組經常使用方法

返回新數組，不改變原數組

join

把數組中全部元素放入一個字符串中，返回字符串。

// 0.0.2/join.js
const arr = ['pr', 'is', 18];

console.log(arr.join(' ')); // pr is 18
console.log('=>');
console.log(arr); // [ 'pr', 'is', 18 ]
複製代碼

concat

鏈接多個（含兩個）數組，兩邊的原始數組都不會變化，返回被鏈接數組的一個副本，可繼續 concat。

// 0.0.2/concat.js
const arr = [1, 2, 3, 4];
const arr1 = ['pr', 'is', 'a', 'boy'];
const arr2 = [5, 6, 7];

console.log(arr.concat(arr1, arr2).concat(8, 9)); // [1, 2, 3, 4, 'pr', 'is', 'a', 'boy', 5, 6, 7, 8, 9 ]
console.log('=>');
console.log(arr); // [ 1, 2, 3, 4 ]
複製代碼

slice

從開始到結束（[)左閉右開，即不包括結束）選擇數組的一部分淺拷貝到一個新數組。

// 0.0.2/slice.js
const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(arr.slice(1, 5)); // [ 1, 2, 3, 4 ]
console.log('=>');
console.log(arr); // [ 0,1,2,3,4,5,6,7,8,9 ]
複製代碼

slice(1, 5) 可見裏面最多含 4（5 - 1） 個元素，並且從第 1 位開始取。

map

建立一個新數組並返回，新數組的每一個元素由原數組中的每個元素執行提供的函數而來，其中原始數組不會發生改變。

// 0.0.2/map.js
const arr = [1, 2, 3, 4];

console.log(arr.map(i => i * 10 - 5)); // [ 5, 15, 25, 35 ]
console.log('=>');
console.log(arr); // [ 1, 2, 3, 4 ]
複製代碼

every

檢測數組全部元素是否都符合指定條件.

• 若是數組中檢測到有一個元素不知足，則整個表達式返回 false，且剩餘的元素不會再進行檢測；
• 若是全部元素都知足條件，則返回 true；

// 0.0.2/every.js
const arr = [1, 2, 3, 4];

console.log(arr.every(i => i > 2)); // false
console.log(arr.every(i => i > 0)); // true
console.log([].every(i => i === 'pr')); // true
console.log('=>');
console.log(arr); // [ 1, 2, 3, 4 ]
複製代碼

some

用於檢測數組中的元素是否知足指定條件。

• 若是有一個元素知足條件，則表達式返回 true, 剩餘的元素不會再執行檢測;
• 若是沒有知足條件的元素，則返回 false;

// 0.0.2/some.js
const arr = [1, 2, 3, 4];

console.log(arr.some(i => i > 4)); // false
console.log(arr.some(i => i > 0)); // true
console.log([].some(i => i === 'pr')); // false
console.log('=>');
console.log(arr); // [ 1, 2, 3, 4 ]
複製代碼

filter

建立一個新的數組，新數組中的元素是經過檢查符合條件的全部元素。

// 0.0.2/filter.js
const arr = [1, 2, 3, 4];

console.log(arr.filter(i => i > 2)); // [3, 4]
console.log([].filter(i => i === 'pr')); // []
console.log('=>');
console.log(arr); // [ 1, 2, 3, 4 ]
複製代碼

forEach

用於調用數組的每一個元素，並將元素傳遞給回調函數，返回 undefiend。

// 0.0.2/forEach.js
const arr = [1, 2, 3, 4];
const copy = [];

console.log(arr.forEach(i => {
    copy.push(i * 2);
}));
console.log(copy); // [ 2, 4, 6, 8 ]
console.log('=>');
console.log(arr); // [ 1, 2, 3, 4 ]
複製代碼

reduce

接收一個函數做爲累加器，數組中的每一個值（從左到右）開始縮減，最終計算爲一個值。如果空數組是不會執行回調函數的;

// 0.0.2/reduce.js
const arr = [1, 2, 3, 4];

console.log(arr.reduce((prev, cur) => prev + cur, 0)); // 10
console.log('=>');
console.log(arr); // [ 1, 2, 3, 4 ]
複製代碼

返回新數組，改變原數組

pop

刪除數組的最後一個元素，並返回這個元素（即被刪除的元素）。

• 若是數組爲空，則不改變數組，返 undefined；

// 0.0.2/pop.js
const arr = [1, 2, 3, 4];
const arr1 = [];

console.log(arr.pop()); // 4
console.log(arr1.pop()); // undefined
console.log('=>');
console.log(arr); // [ 1, 2, 3 ]
console.log(arr1); // []
複製代碼

push

將一個或多個元素添加到數組的末尾，返回值是改變後的數組的長度。

// 0.0.2/push.js
const arr = [1, 2, 3, 4];

console.log(arr.push(5)); // 5
console.log(arr.push([1, 2])); // 6
console.log('=>');
console.log(arr); // [ 1, 2, 3, 4, 5, [ 1, 2 ] ]
複製代碼

shift

刪除數組的第一個元素，並返回這個元素。

// 0.0.2/shift.js
const arr = [1, 2, 3, 4];

console.log(arr.shift()); // 1
console.log('=>');
console.log(arr); // [ 2, 3, 4 ]
複製代碼

unshift

將一個或多個元素添加到數組的開頭，返回值是改變後的數組的長度。

// 0.0.2/unshift.js
const arr = [1, 2, 3, 4];

console.log(arr.unshift(5, 6)); // 6
console.log(arr.unshift([1, 2])); // 7
console.log('=>');
console.log(arr); // [ [ 1, 2 ], 5, 6, 1, 2, 3, 4 ]
複製代碼

reverse

顛倒數組中元素的位置，返回該數組的引用。

// 0.0.2/reverse.js
const arr = [1, 2, 3, 4];
const hello = 'hello';
const helloArray = hello.split('');

console.log(helloArray.reverse().join('')); // olleh
console.log(arr.reverse()); // [ 4, 3, 2, 1 ]
console.log('=>');
console.log(arr); // [ 4, 3, 2, 1 ]
console.log(helloArray); // [ 'o', 'l', 'l', 'e', 'h' ]
複製代碼

sort

對數組的元素進行排序，並返回數組。排序不必定是穩定的。默認排序順序是根據字符串 Unicode 碼點。

// 0.0.2/sort.js
const arr = [1, 2, 3, 4, 10, 12, 22];

console.log(arr.sort()); // [ 1, 10, 12, 2, 22, 3, 4];
console.log('=>');
console.log(arr); // [ 1, 10, 12, 2, 22, 3, 4];
複製代碼

splice

向數組中添加/刪除項目，而後返回被刪除項目。

// 0.0.2/splice.js
const arr = [1, 2, 3, 4];

console.log(arr.splice(1, 2, 10, 12)); // [ 2, 3 ]
console.log('=>');
console.log(arr); // [ 1, 10, 12, 4 ]
複製代碼

本次代碼 Github

你能夠...

• Javascript 數組經常使用算法