JavaScript裏處理數組的一些經常使用方法

 修改器方法:

1.pop() 方法從數組中刪除最後一個元素

pop() 方法將刪除 arrayObject 的最後一個元素，把數組長度減 1，而且返回它刪除的元素的值。

let arr2 = ['zhao','qian','sun','li'];
console.log(arr2.pop()); //li
console.log(arr2) // ["zhao", "qian", "sun"]

若是數組已經爲空，則 pop() 不改變數組，並返回 undefined 值。

let arr3 = [];
console.log(arr3.pop()); //undefined
console.log(arr3) // []

 

2.push() 方法（在數組結尾處）向數組添加一個新的元素

• push() 方法和 pop() 方法使用數組提供的先進後出棧的功能。
•  push() 方法返回新數組的長度

var arr3 = ['zhao','qian','sun','li'];
arr3.push("zhou"); // 5 console.log(arr3); // ["zhao", "qian", "sun", "li", "zhou"]；

3.shift() 方法會刪除首個數組元素，並把全部其餘元素「位移」到更低的索引。

• shift() 方法返回被「位移出」的字符串

var arr4 = ['zhao','qian','sun','li'];
arr4.shift();
// "zhao"

4.unshift() 方法（在開頭）向數組添加新元素，並「反向位移」舊元素。

• unshift() 方法返回新數組的長度

var arr5 = ['zhao','qian','sun','li'];
arr5.unshift('zhou') ; // 5 console.log(arr5); // ["zhou", "zhao", "qian", "sun", "li"]

5.splice() 

• 可用於向數組添加新項。

splice(index,count,para1,para2..)；

第一個參數（index）定義了應添加新元素的位置（拼接）。

第二個參數（count）定義應刪除多少元素。

其他參數（para1，para2）定義要添加的新元素。

splice() 方法返回一個包含已刪除項的數組

var arr8 = ['zhao','qian','sun','li'];
arr8.splice(2,0, 'Love','you'); // 在索引爲2處刪除了0個元素  返回的是被刪除的數組 []
console.log(arr8);// ["zhao", "qian", "Love", "you", "sun", "li"];

var arr9 = ['zhao','qian','sun','li'];
arr9.splice(2,2, 'Love','you') //在索引爲2處刪除了2個元素  返回的是被刪除的數組 ["sun", "li"]
console.log(arr9); //  ["zhao", "qian", "Love", "you"]

6.使用splice()來刪除元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);  //["Banana"];
console.log(fruits) ; // ["Orange", "Apple", "Mango"] ; // 刪除 fruits 中的第一個元素,刪除數量爲1

7.sort() 數組排序

字母順序對數組進行排序。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
fruits.sort(); // ["Apple", "Banana", "Lemon", "Mango", "Orange"]

sort() 方法在對數值排序時會產生不正確的結果；

若是數字按照字符串來排序，則 "3" 大於 "11"，由於 "3" 大於 "1"。

var arr = [3,5,1,6];
arr.sort(); // [1, 3, 5, 6]；


var arr = [3,5,11,6];
arr.sort(); //  [11, 3, 5, 6]；

咱們經過一個比值函數來修正此問題

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b}); 
(6) [1, 5, 10, 25, 40, 100]

使用相同的技巧對數組進行降序排序

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});//[100, 40, 25, 10, 5, 1]

補充：arr.sort([compareFunction]) 用來指定按某種順序進行排列的函數

若是指明瞭 compareFunction ，那麼數組會按照調用該函數的返回值排序。即 a 和 b 是兩個將要被比較的元素：

• 若是 compareFunction(a, b) 小於 0 ，那麼 a 會被排列到 b 以前；

• 若是 compareFunction(a, b) 等於 0 ， a 和 b 的相對位置不變。備註： ECMAScript 標準並不保證這一行爲，並且也不是全部瀏覽器都會遵照（例如 Mozilla 在 2003 年以前的版本）；

• 若是 compareFunction(a, b) 大於 0 ， b 會被排列到 a 以前。
• compareFunction(a, b) 必須老是對相同的輸入返回相同的比較結果，不然排序的結果將是不肯定的。

8.reverse() 方法反轉數組中的元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();  //["Mango", "Apple", "Orange", "Banana"]

 

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

語法:arr.fill(value[, start[,end]]); 不改變數組的長度

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]

10.copyWinthin()方法淺複製數組的一部分到同一數組中的另外一個位置，並返回它，不會改變原數組的長度。

arr.copyWithin(target[, start[, end]])

var array1 = ['a', 'b', 'c', 'd', 'e'];
console.log(array1.copyWithin(0, 3, 4));
//["d", "b", "c", "d", "e"]

 

截取下標3-4之間的元素爲，d，替換掉數組下標爲0的位置的元素即替換 a；因此輸出爲 ["d", "b", "c", "d", "e"]

11.flat()方法會按照一個可指定的深度遞歸遍歷數組，並將全部元素與遍歷到的子數組中的元素合併爲一個新數組返回。

• 一個包含將數組與子數組中全部元素的新數組。

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); // [1, 2, 3, 4, [5, 6]] var arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); // [1, 2, 3, 4, 5, 6]

• flat()方法會移除數組中的空項

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

使用reduce() contact() 能夠實替代flat

var arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1,2,3,4]

// 反嵌套一層數組
arr1.reduce((acc, val) => acc.concat(val), []);// [1, 2, 3, 4]

// 或使用 ...
const flatSingle = arr => [].concat(...arr);

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

var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); // [[2], [4], [6], [8]]  arr1.flatMap(x => [x * 2]); // [2, 4, 6, 8] // 只會將 flatMap 中的函數返回的數組 「壓平」 一層 arr1.flatMap(x => [[x * 2]]); // [[2], [4], [6], [8]]

let arr = ["今每天氣不錯", "", "早上好"]

arr.map(s => s.split("")) // [["今", "天", "天", "氣", "不", "錯"],[],["早", "上", "好"]]  arr.flatMap(s => s.split('')); // ["今", "天", "天", "氣", "不", "錯", "早", "上", "好"]

 

13.更改元素還能夠下操做

• 經過使用它們的索引號來訪問數組元素;

var arr6 = ['zhao','qian','sun','li'];
arr6[0] = 'shi' ; //"shi"
console.log(arr6); //  ["shi", "qian", "sun", "li"];  // 把 arr6的第一個元素改成 "shi"

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits[4] = "Kiwi"; //Liwi console.log(fruits) ; // ["Banana", "Orange", "Apple", "Mango", "Kiwi"] // 在 fruits 的數組內增長 "Kiwi"

• length 屬性提供了向數組追加新元素的簡易方法。

var arr7 = ['zhao','qian','sun','li'];
arr7[arr7.length] = 'shi'; //shi
console.log(arr7); // ["zhao", "qian", "sun", "li", "shi"]

訪問方法 

下面的這些方法不會改變調用它們的對象的值，只會返回一個新的數組或者返回一個其它的指望值。

3個轉成字符串的(join   toString  toLocaleString)

1.toString() 把數組轉換爲數組值（逗號分隔）的字符串。

let arr2 = ['zhao','qian','sun','li'];
console.log(arr2.toString()); //zhao,qian,sun,li

2.join() 方法也可將全部數組元素結合爲一個字符串。

• 元素是經過指定的分隔符進行分隔的。
• 默認爲‘，‘

let arr2 = ['zhao','qian','sun','li'];
console.log(arr2.join()); //zhao,qian,sun,li

console.log(arr2.join(' ')); //zhao qian sun li

3.toLocaleString();

兩個獲取下標 (indexOf,lastIndexOf)

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

 查找數組中 "Apple" 的元素, 在數組的第四個位置開始檢索：

var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.indexOf("Apple",4); console.log(a); //6

 

5.lastIndexOf()方法返回指定元素（也即有效的 JavaScript 值或變量）在數組中的最後一個的索引，若是不存在則返回 -1

var animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];

console.log(animals.lastIndexOf('Dodo')); // 3  console.log(animals.lastIndexOf('Tiger')); // 1

 

var animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];

console.log(animals.lastIndexOf('Dodo')); // expected output: 3  console.log(animals.lastIndexOf('Tiger')); // expected o

兩個返回數組(concat   ,slice)

6.concat() 方法經過合併（鏈接）現有數組來建立一個新數組。

let arr = [1,2,3];
console.log(arr.concat(4,5)); //[1, 2, 3, 4, 5]

let arr2 = ['zhao','qian','sun','li'];
console.log(arr2.concat('zhou')); //["zhao", "qian", "sun", "li", "zhou"]
//concat() 鏈接兩個數組
console.log(arr.concat(arr2)); //[1, 2, 3, "zhao", "qian", "sun", "li"]

7.slice() 方法用數組的某個片斷切出新數組。

• slice() 方法用數組的某個片斷切出新數組。
• slice() 方法建立新數組。它不會從源數組中刪除任何元素。
• slice（start，end）直接切出新數組

 本例從數組元素 1 （"Orange"）開始切出一段數組。　

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1); 
console.log(citrus)  //["Orange", "Lemon", "Apple","Mango"];返回新數組
console.log(fruits ); //  ["Banana", "Orange", "Lemon", "Apple", "Mango"] 原數組不發生變化

slice() 可接受兩個參數，好比 (1, 3)介於兩個指定下標之間的元素。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3); 
console.log(citrus); // ["Orange", "Lemon"]
console.log(fruits); // ["Banana", "Orange", "Lemon", "Apple", "Mango"]

一個作判斷 includes

8.includes()方法用來判斷一個數組是否包含一個指定的值，根據狀況，若是包含則返回 true，不然返回false。

• arr.includes(searchElement, fromIndex)

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false

若是 fromIndex爲負值，計算出的索引將做爲開始搜索searchElement的位置。若是計算出的索引小於 0，則整個數組都會被搜索。

若是 fromIndex 大於等於數組的長度，則會返回 false，且該數組不會被搜索。

[1, 2, 3].includes(2,-1);     // true
[1, 2, 3].includes(3,1);     //true
[1, 2, 3].includes(3,4);     //false

 

迭代器：

1.forEach()  方法用於調用數組的每一個元素，並將元素傳遞給回調函數。

• forEach() 對於空數組是不會執行回調函數的。

• array.forEach(function(currentValue, index, arr), thisValue)

• callback 函數會被依次傳入三個參數：

  • 數組當前項的值
  • 數組當前項的索引
  • 數組對象自己

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

array1.forEach((element) => {
  console.log(element);
}); // a b c

const items = ['item1', 'item2', 'item3'];
const copy = [];

// before
for (let i=0; i<items.length; i++) {
  copy.push(items[i]);
}

// after
items.forEach(function(item){
  copy.push(item);
});

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

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]

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

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

callback用來測試數組的每一個元素的函數。返回true表示該元素經過測試，保留該元素，false則不保留

 

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6); console.log(result); // ["exuberant", "destruction", "present"]

下例使用filter建立了一個新數組，該數組的元素由原數組中值大於 10 的元素組成。

function isBigEnough(element) {
  return element >= 10; } var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // filtered is [12, 130, 44] 

兩個判斷（every   some）

4.every()方法測試一個數組內的全部元素是否都能經過某個指定函數的測試。它返回一個布爾值。

• 語法：arr.every(callback[, thisArg])

舉例：判斷一個數組裏面的值是否都小於40

function isBelowThreshold(currentValue) {
  return currentValue < 40; } var array1 = [1, 30, 39, 29, 10, 13]; console.log(array1.every(isBelowThreshold)); //true

 

5.some()方法測試數組中是否是有元素經過了被提供的函數測試。它返回的是一個Boolean類型的值。

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));
// true

utput: 1

 

兩個查找（find findIndex）

6.find()方法返回數組中知足提供的測試函數的第一個元素的值。不然返回undefined

var array1 = [5, 12, 8, 130, 44];
var found = array1.find(function(element) {
  return element > 10;
});
console.log(found);
// 12

function isBigEnough(element) {
  return element >= 999;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
//undefined

7.findIndex()方法返回數組中知足提供的測試函數的第一個元素的索引。不然返回-1。

var array1 = [5, 12, 8, 130, 44];
function isLargeNumber(element) {
  return element > 10;
}
console.log(array1.findIndex(isLargeNumber));
//1

 arr.findIndex(callback [ ])

 callback針對數組中的每一個元素, 都會執行該回調函數, 執行時會自動傳入下面三個參數:

1. element當前元素；
2. index 當前元素索引；
3. array 調用findIndex的數組

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

• reducer 函數接收4個參數:

1. Accumulator (acc) (累計器)
2. Current Value (cur) (當前值)
3. Current Index (idx) (當前索引)
4. Source Array (src) (源數組)

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue; }); //10

若是沒有提供initialValue，reduce 會從索引1的地方開始執行 callback 方法，跳過第一個索引。若是提供initialValue，從索引0開始。

callback 被調用四次，每次調用的參數和返回值以下表：

 

callback	accumulator	currentValue	currentIndex	array	return value
first call	0	1	1	[0, 1, 2, 3, 4]	1
second call	1	2	2	[0, 1, 2, 3, 4]	3
third call	3	3	3	[0, 1, 2, 3, 4]	6
fourth call	6	4	4	[0, 1, 2, 3, 4]	10

 

 三個返回Iterator 的方法（keys values entries）

9. entries()方法返回一個新的Array Iterator對象，該對象包含數組中每一個索引的鍵/值對

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

var iterator1 = array1.entries();

console.log(iterator1.next().value);
// expected output: Array [0, "a"]

console.log(iterator1.next().value);
// expected output: Array [1, "b"]

10.keys()方法返回一個包含數組中每一個索引鍵的Array Iterator對象。

11.valuse()方法返回一個新的 Array Iterator 對象，該對象包含數組每一個索引的值