陣列宣告
陣列是多個變數值的結合，是Array物件的例項，所以可以像物件一樣呼叫方法。
建立陣列
使用物件方式建立陣列。
<script> "use strict"; let array = new Array(1, 2, 3, 4, 5); console.table(array); console.log(typeof array); // object </script>
使用字面量方式簡單建立陣列。
<script> "use strict"; let array = [1,2,3,4,5]; console.table(array); console.log(typeof array); // object </script>
Array.of
當使用物件建立陣列時，如果只想要一個值可用Array.of進行建立，否則建立的是一個長度為填入值的空陣列。
<script> "use strict"; // let array = new Array(3) 代表建立長度為3的空陣列 let array = new Array.of(3); // 代表建立了一個陣列 [3] </script>
多維陣列
陣列中可以包含多個陣列，這被稱為多維陣列。
如下示例，建立出一個二維陣列。
<script> "use strict"; let array = [[1,2,3],["4","5","6"]]; </script>
const宣告
由於陣列是引用型別，以使用const宣告並修改其中的值不會丟擲異常。
但是並不推薦這樣做。
<script> "use strict"; const array = [[1,2,3],["4","5","6"]]; array[0] = "Array"; console.log(array); // ["Array", Array(3)] </script>
基本操作
長度獲取
使用length可獲取陣列長度。
<script> "use strict"; const array = [[1,2,3],["4","5","6"],"7","8","9"]; console.log(array.length); // 5 </script>
型別檢測
使用Array物件提供的isArray()方法來判斷一個物件是否為陣列型別。
<script> "use strict"; console.log(Array.isArray({})); // false console.log(Array.isArray([])); // true </script>
型別轉換
陣列轉字串
大部分資料型別都可以使用toString() 函式轉換為字串。
<script> "use strict"; let array = [1,2,3,4]; console.log(array.toString()); // 1,2,3,4 </script>
、
還可以使用String()將陣列物件進行包裹實現轉換。
<script>
"use strict";
let array = [1,2,3,4];
console.log(String(array)); // 1,2,3,4
</script>
使用join()方法拼接合並出字串。
<script>
"use strict";
let array = [1, 2, 3, 4];
console.log(array.join("---")); // 1---2---3---4
</script>
類陣列轉陣列
可通過Array.from()將類陣列轉為陣列，類陣列是指具有length屬性或為可迭代物件。
引數1：要轉換的類陣列
引數2：類似於
map()的回撥函式，對元素挨個挨個做操作
以下示例將展示把DOM物件的NodeList轉換為陣列進行操作的過程。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>d1</div> <div>d2</div> <div>d3</div> <div>d4</div> </body> <script> "use strict"; let ele_list = document.querySelectorAll("div"); Array.from(ele_list, function (ele) { console.log(ele.innerHTML); // d1 d2 d3 d4 }) </script> </html>
... 展開語法與類陣列轉換
...語法是非常強大的一種語法，類似於Python中的*柴博語法，可將元素單一拆出。
我們使用[...物件]即可將類陣列的元素全部新增進陣列中，且可以呼叫陣列的方法對其中元素進行操作。
以下示例將演示使用[...NodeList]將 DOM的NodeList類陣列轉換為陣列再使用map()方法對其中元素進行操作。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>d1</div> <div>d2</div> <div>d3</div> <div>d4</div> </body> <script> "use strict"; let ele_list = document.querySelectorAll("div"); [...ele_list].map(function (ele) { console.log(ele.innerHTML); // d1 d2 d3 d4 }) </script> </html>
展開語法
陣列合並
為一個陣列新增另一個陣列中的元素，可使用...展開語法，但是我個人並不推薦這麼做，在執行效率上來說會有略微的降低。
<script>
"use strict";
let a1 = [1,2,3];
let a2 = ["3","4","5"];
a1 = [...a1,...a2];
console.log(a1); // (6) [1, 2, 3, "3", "4", "5"]
</script>
函式傳參
...語法代替了arguments來接收任意數量的位置傳參。
arguments可接收任意數量的位置傳參，但是形參名只能是arguments，但...語法可以跟上任意形參名
<script>
"use strict";
function show(...args) {
console.log(args); // (5) [1, 2, 3, 4, 5]
console.log(Array.isArray(args)); // true
};
show(1,2,3,4,5);
</script>
節點轉換
上面已經介紹過...語法與類陣列轉換，這裡不再詳細舉例。
解構賦值
解構是一種更簡潔的賦值特性，可以理解為分解一個資料的結構
建議使用
var/let/const宣告，如果在嚴格模式下不使用宣告會丟擲異常
基本使用
嚴格按照語法，解構接收變數必須由[]包裹，並且一定不要忘記前面的宣告。
<script>
"use strict";
let array = new Array("雲崖",18,"男");
let [name,age,gender] = array;
console.log(name); // 雲崖
console.log(age); // 18
console.log(gender); // 男
</script>
... 接收全部
可以使用...語法來接收餘下的全部變數。
<script>
"use strict";
let array = new Array("雲崖",18,"男");
let [name,...other] = array;
console.log(name); // 雲崖
console.log(other); // (2) [18, "男"]
</script>
佔位使用
某些變數不想獲取，可使用_作為變數名進行佔用，這在很多程式語言中都是通用的，或者直接使用,將它捨棄掉。
<script>
"use strict";
let array = new Array("雲崖", 18, "男");
let [name, _, gender] = array;
console.log(name); // 雲崖
console.log(gender); // 男
</script>
函式引數
可以使用結構賦值的特性，讓函式的形參接收到陣列實參傳遞進的元素。
當然我們也可以為形參的接收變數設定預設值。
<script>
"use strict";
function show([name, age, gender = "男"]) {
console.log(name); // 小芳
console.log(age); // 18
console.log(gender); // 女
}
show(["小芳", 18, "女"]);
</script>
索引使用
索引index總是從0開始，陣列中最後一位元素的索引為length-1
語法介紹：陣列物件[index]
儘量不要使用索引進行陣列物件的操作，因為被操作的元素可能會出現undefined的情況造成誤判。
獲取單元素
使用索引index來獲取單一元素。
<script>
"use strict";
let array = ["一", "二", "三", "四", "五"];
console.log(array[2]); // "三"
</script>
獲取最後一位元素。
<script>
"use strict";
let array = ["一", "二", "三", "四", "五"];
console.log(array[array.length - 1]); // "五"
</script>
獲取倒數第二位元素。
<script>
"use strict";
let array = ["一", "二", "三", "四", "五"];
console.log(array[array.length - 2]); // "四"
</script>
增加單元素
如果增加的元素索引大於陣列索引，那麼之前的未定義索引位置上的元素都會用undefined進行佔位。
<script>
"use strict";
let array = ["一", "二", "三", "四", "五"];
array[8] = "九"
console.log(array); // (9) ["一", "二", "三", "四", "五", empty × 3, "九"]
console.log(array[6]); // undefined
</script>
修改單元素
直接使用index進行操作即可，如果操作的index元素為undefined或者不存在，則相當於增減單元素。
<script>
"use strict";
let array = ["一", "二", "三", "四", "五"];
array[0] = "壹"
console.log(array); // (5) ["壹", "二", "三", "四", "五"]
</script>
刪除單元素
使用delete配合索引來刪除單個元素，被刪除的元素在陣列中依舊會用undefined進行佔位。
<script>
"use strict";
let array = ["一", "二", "三", "四", "五"];
delete array[0];
console.log(array); // (5) [empty, "二", "三", "四", "五"]
console.log(array[0]); // undefined
</script>
管理元素
push
屬於棧方法，將元素壓入陣列尾部。
可以理解為追加元素至陣列尾部。
<script>
"use strict";
let array = ["一", "二", "三", "四", "五"];
array.push("六", "七", "八");
console.log(array); // (8) ["一", "二", "三", "四", "五", "六", "七", "八"]
</script>
unshift
屬於棧方法，將元素壓入陣列頭部。
可以理解為新增元素至陣列頭部。
<script>
"use strict";
let array = ["一", "二", "三", "四", "五"];
array.unshift("one", "two", "three");
console.log(array); // (8) ["one", "two", "three", "一", "二", "三", "四", "五"]
</script>
shift
屬於棧方法，將陣列第一個元素彈出。
返回值為彈出的元素。
<script>
"use strict";
let array = ["一", "二", "三", "四", "五"];
const first = array.shift()
console.log(first); // 一
console.log(array); // (4) ["二", "三", "四", "五"]
</script>
pop
屬於棧方法，將陣列末尾元素彈出。
返回值為彈出的元素。
<script>
"use strict";
let array = ["一", "二", "三", "四", "五"];
const last = array.pop()
console.log(last); // 五
console.log(array); // (4) ["一", "二", "三", "四"]
</script>
fill
使用fill() 填充陣列元素
<script>
"use strict";
let array = new Array(5).fill("填充一樣的");
console.log(array); // (5) ["填充一樣的", "填充一樣的", "填充一樣的", "填充一樣的", "填充一樣的"]
</script>
指定填充位置
<script>
"use strict";
let array = ["一", "二", "三", "四", "五"];
array.fill("小問號",2,4); // 改變了幾個元素，可以使用後面的數值-前面的數值計算 4-2=2 改變2個元素
console.log(array); // (5) ["一", "二", "小問號", "四", "五"]
</script>
slice
使用 slice() 方法從陣列中擷取部分元素組合成新陣列（並不會改變原陣列），不傳第二個引數時擷取到陣列的最後元素。
<script>
"use strict";
let array = ["一", "二", "三", "四", "五"];
let new_array = array.slice(1,3); // 取頭不去尾
console.log(new_array); // ["二", "三"]
</script>
splice
使用 splice 方法可以新增、刪除、替換陣列中的元素，會對原陣列進行改變。
刪除元素
刪除陣列元素第一個引數為從哪開始刪除，第二個引數為刪除的數量，返回值為刪除的元素。
<script>
"use strict";
let array = ["一", "二", "三", "四", "五"];
let del_value = array.splice(1,3); // 代表從索引1開始向後刪除2個元素 3-1=2，共刪除3個元素。
console.log(del_value); // 被刪除的元素 ["二", "三", "四"]
console.log(array); // 原陣列 ["一", "五"]
</script>
先刪除元素再新增元素
通過指定新引數來設定在刪除位置新增的元素
<script>
"use strict";
let array = ["一", "二", "三", "四", "五"];
let del_value = array.splice(1,3,"add-2","add-3","add-4"); // 代表從索引1開始向後刪除2個元素 3-1=2，共刪除3個元素。然後再新增元素
console.log(del_value); // 被刪除的元素 ["二", "三", "四"]
console.log(array); // 原陣列 ["一", "add-2", "add-3", "add-4", "五"]
</script>
向末尾新增元素
配合length進行操作。
<script>
"use strict";
let array = ["一", "二", "三", "四", "五"];
array.splice(array.length, 0, "add-1", "add-2");
console.log(array); // 原陣列 (7) ["一", "二", "三", "四", "五", "add-1", "add-2"]
</script>
向頭部新增元素
<script>
"use strict";
let array = ["一", "二", "三", "四", "五"];
array.splice(0, 0, "add-1", "add-2");
console.log(array); // 原陣列 (7) ["add-1", "add-2", "一", "二", "三", "四", "五"]
</script>
元素位置調整函式
<script>
"use strict";
function move(array, before, to) {
if (before < 0 || to >= array.length) {
console.error("指定位置錯誤");
return;
}
const newArray = [...array];
const elem = newArray.splice(before, 1);
newArray.splice(to, 0, ...elem);
return newArray;
}
const array = [1, 2, 3, 4];
console.log(move(array, 0, 3));
</script>
清空陣列
將陣列值修改為[]可以清空陣列，如果有多個引用時陣列在記憶體中存在被其他變數引用。
<script>
"use strict";
let array1 = ["一", "二", "三", "四", "五"];
let array2 = array1;
array1 = [] // 改變array1的記憶體指向
console.log(array1); // []
console.log(array2); // (5) ["一", "二", "三", "四", "五"]
</script>
將陣列length設定為0也可以清空陣列
<script>
"use strict";
let array1 = ["一", "二", "三", "四", "五"];
let array2 = array1;
array1.length = 0; // 清除記憶體指向中的陣列中所有元素
console.log(array1); // []
console.log(array2); // []
</script>
使用splice方法刪除所有陣列元素
<script>
"use strict";
let array1 = ["一", "二", "三", "四", "五"];
let array2 = array1;
array1.splice(0,array1.length); // 清除記憶體指向中的陣列中所有元素
console.log(array1); // []
console.log(array2); // []
</script>
使用pop/shift刪除所有元素，來清空陣列
<script>
"use strict";
let array1 = ["一", "二", "三", "四", "五"];
let array2 = array1;
while (array1.pop()) {} // 只要彈出元素就代表true，繼續執行
console.log(array1); // []
console.log(array2); // []
</script>
合併拆分
join
使用join()連線成字串
<script>
"use strict";
let array = ["www","google","com"];
let new_str = array.join(".");
console.log(new_str); // www.google.com
</script>
split
split() 方法用於將字串分割成陣列，類似join方法的反函式。
<script>
"use strict";
let str = "www.google.com";
let array = str.split(".");
console.log(array); // (3) ["www", "google", "com"]
</script>
concat
concat()方法用於連線兩個或多個陣列，元素是值型別的是複製操作，如果是引用型別還是指向同一物件
<script>
"use strict";
let array1 = new Array("一","二","三");
let array2 = new Array("4","5","6");
console.log(array1.concat(array2)); // (6) ["一", "二", "三", "4", "5", "6"]
</script>
copyWithin
使用 copyWithin() 從陣列中複製一部分到同陣列中的另外位置。
語法說明
array.copyWithin(target, start, end)
| 引數 | 描述 |
|---|---|
| target | 必需。複製到指定目標索引位置。 |
| start | 可選。元素複製的起始位置。 |
| end | 可選。停止複製的索引位置 (預設為 array.length)。如果為負值，表示倒數。 |
<script>
"use strict";
const arr = [1, 2, 3, 4];
console.log(arr.copyWithin(2, 0, 2)); // [1, 2, 1, 2]
</script>
查詢元素
indexOf
使用 indexOf() 從前向後查詢元素出現的位置，如果找不到返回 -1，找到的話返回索引位置本身。
第二個引數為從指定位置開始向後查詢。
<script>
"use strict";
let array = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
console.log(array.indexOf("6")); // 找不到，返回 -1 因為indexOf是嚴格查詢
console.log(array.indexOf(6)); // 6
console.log(array.indexOf(6, 3)); // 從索引3位置向後查詢
</script>
lastIndexOf
使用 lastindexOf() 從後向前查詢元素出現的位置，如果找不到返回 -1，找到的話返回索引位置本身。
第二個引數為從指定位置開始向前查詢。
<script>
"use strict";
let array = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
console.log(array.lastIndexOf("6")); // 找不到，返回 -1 因為indexOf是嚴格查詢
console.log(array.lastIndexOf(6)); // 6
console.log(array.lastIndexOf(6, 3)); // 從索引3位置向前查詢，找不到 返回 -1
</script>
includes
判斷陣列中某一個元素是否存在，返回布林值。
<script>
"use strict";
let array = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
console.log(array.includes("6")); // 嚴格模式查詢，找不到 false
console.log(array.includes(6)); // true
</script>
find
find()方法找到後會把值返回出來，你可以為它指定一個匿名函式，引數是 : 當前值，索引，運算元組。
如果找不到返回值為undefined
<script>
"use strict";
let array = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
let res = array.find(function (value) {
return value == 6;
})
console.log(res);
</script>
使用includes()等不能查詢引用型別，因為它們的記憶體地址是不相等的。
<script>
"use strict";
let array = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, { "k1": "v1", "k2": 'v2' });
console.log(array.includes({ "k1": "v1", "k2": 'v2' })); // false 嚴格模式，找不到
</script>
這個時候find()就派上用場了。
<script>
"use strict";
let array = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, { "k1": "v1", "k2": 'v2' });
let res = array.find(function (value) {
return value["k1"] == "v1";
});
console.log(res); // {k1: "v1", k2: "v2"}
</script>
findIndex
findIndex() 與 find() 的區別是返回索引值，引數也是 : 當前值，索引，運算元組。
<script>
"use strict";
let array = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, { "k1": "v1", "k2": 'v2' });
let res = array.findIndex(function (value) {
return value["k1"] == "v1";
});
console.log(res); // 9
</script>
find原理
下面是find()的原理。
<script>
"use strict";
let arr = [1, 2, 3, 4, 5];
function find(array, callback) {
for (const value of array) {
if (callback(value) === true) return value;
}
return undefined;
}
let res = find(arr, function (item) {
return item == 23;
});
console.log(res);
</script>
下面是為Array物件新增原型方法實現。
<script>
"use strict";
let arr = [1, 2, 3, 4, 5];
Array.prototype.findValue = function (callback) {
for (const value of this) {
if (callback(value) === true) return value;
}
return undefined;
};
let re = arr.findValue(function (item) {
return item == 2;
});
console.log(re);
</script>
反轉排序
reverse
反轉陣列順序。
<script>
"use strict";
let array = new Array("一","二","三","四","五");
console.log(array.reverse()); // (5) ["五", "四", "三", "二", "一"]
</script>
sort
sort每次使用兩個值進行比較 Array.sort((a,b)=>a-b
返回負數 a 排在 b前面，從小到大
返回正數 b 排在a 前面
返回 0 時不動
預設從小到大排序陣列元素。
<script>
"use strict";
let array = [1, 32, 34, 2, 31, 3, 89]
console.log(array.sort()); // (7) [1, 2, 3, 31, 32, 34, 89]
</script>
使用排序函式從大到小排序，引數一與引數二比較，返回正數為降序負數為升序。
<script>
"use strict";
let array = [1, 32, 34, 2, 31, 3, 89]
let res = array.sort(function (v1, v2) {
// v2-v1 從大到小
// v1-v2 從小到大
return v2 - v1
});
console.log(res); // (7) [89, 34, 32, 31, 3, 2, 1]
</script>
也可以配合reverse()進行從大到小的排序。
<script>
"use strict";
let array = [1, 32, 34, 2, 31, 3, 89]
let res = array.sort().reverse();
console.log(res); // (7) [89, 34, 32, 31, 3, 2, 1]
</script>
應用場景
按照工資從大到小進行排序。
<script>
"use strict";
let people = [
{ "name": "二狗", "wage": 12000 },
{ "name": "小紅", "wage": 4300 },
{ "name": "三癩子", "wage": 8800 },
{ "name": "二瘸子", "wage": 3300 },
];
let res = people.sort(function (v1, v2){
// v2-v1 從大到小
// v1-v2 從小到大
return v2["wage"] - v1["wage"];
})
console.log(res);
</script>
排序原理
<script>
"use strict";
let arr = [1, 5, 3, 9, 7];
function sort(array, callback) {
for (const n in array) {
for (const m in array) {
if (callback(array[n], array[m]) < 0) {
let temp = array[n];
array[n] = array[m];
array[m] = temp;
}
}
}
return array;
}
arr = sort(arr, function (a, b) {
return a - b;
});
console.table(arr);
</script>
迴圈遍歷
for
根據陣列長度結合for 迴圈來遍歷陣列
<script>
"use strict";
let array = ["一", "二", "三", "四", "五"];
for (let i=0; i < array.length; i++) {
console.log(array[i]);
}
</script>
forEach
forEach()使函式作用在每個陣列元素上，但是沒有返回值。注意與map()的區別，map()是具有返回值的。
如下例項，將原列表中的每個元素的值加上100。
<script>
"use strict";
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
array.forEach(function (value, index, array) {
array[index] += 100;
});
console.log(array); // (9) [101, 102, 103, 104, 105, 106, 107, 108, 109]
</script>
for/in
遍歷時的迭代變數為索引值。
<script>
"use strict";
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
for(let i in array){
console.log(i); // 0 1 2 3 4 5 6 7 8
}
</script>
for/of
遍歷時的迭代變數為值本身。
<script>
"use strict";
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
for(let i of array){
console.log(i); // 1 2 3 4 5 6 7 8 9
}
</script>
迭代器方法
陣列本身就是屬於一個迭代物件，因此可以呼叫其下的迭代方法。
迭代器有一個特點，只能向後不能向前，迭代器中的值取一個少一個，關於迭代器的知識在後面會有。
迭代器取值方法next()。
keys
獲取所有的索引值。
<script>
"use strict";
let array = ["一", "二", "三", "四", "五"];
let array_keys = array.keys();
console.log(array_keys.next());
console.log(array_keys.next());
console.log(array_keys.next());
console.log(array_keys.next());
console.log(array_keys.next());
// 下面兩個已經取不到值了
console.log(array_keys.next());
console.log(array_keys.next());
</script>
values
獲取所有的值本身。
<script>
"use strict";
let array = ["一", "二", "三", "四", "五"];
let array_values = array.values();
console.log(array_values.next());
console.log(array_values.next());
console.log(array_values.next());
console.log(array_values.next());
console.log(array_values.next());
// 下面兩個已經取不到值了
console.log(array_values.next());
console.log(array_values.next());
</script>
entries
以陣列形式返回所有的索引值與值本身
<script>
"use strict";
let array = ["一", "二", "三", "四", "五"];
let array_entries = array.entries();
console.log(array_entries.next());
console.log(array_entries.next());
console.log(array_entries.next());
console.log(array_entries.next());
console.log(array_entries.next());
// 下面兩個已經取不到值了
console.log(array_entries.next());
console.log(array_entries.next());
</script>
擴充套件方法
every
every() 用於遞迴的檢測元素，要所有元素操作都要返回真結果才為真。
指定函式中第一個引數為元素，第二個引數為索引，第三個引數為原陣列。
檢視班級中同學的Js成績是否都及格
<script>
"use strict";
const user = [
{ name: "李四", js: 89 },
{ name: "馬六", js: 55 },
{ name: "張三", js: 78 }
];
const res = user.every(function (value,index,array) {
return value.js >= 60;
});
console.log(res);
</script>
some
使用 some 函式可以遞迴的檢測元素，如果有一個返回true，表示式結果就是真。
指定函式中第一個引數為元素，第二個引數為索引，第三個引數為原陣列。
敏感詞彙檢測示例如下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" placeholder="前請輸入暱稱"> <button type="button">提交</button> </body> <script> "use strict"; const detect = ["蛤蟆", "維尼熊", "跳跳虎"]; document.querySelector("button").addEventListener("click", function () { let user_input = document.querySelector("input").value; let res = detect.some(function (value, index, array) { // 如果列表中的詞彙出現在使用者輸入的字串中 return user_input.indexOf(value) >= 0; }); if (res) alert("請不要輸入敏感詞彙！"); }); </script> </html>
filter
對陣列中的元素挨個進行判定，為真的留下，為假的拋棄。
指定函式中第一個引數為元素，第二個引數為索引，第三個引數為原陣列。
篩選出大於60的元素。
<script>
"use strict";
const array = [54, 52, 60, 78, 44, 92];
let res =array.filter(function (value, index, array) {
return value >= 60;
});
console.log(res); // (3) [60, 78, 92]
</script>
map
對陣列中的元素挨個進行操作，並返回一個新陣列。
指定函式中第一個引數為元素，第二個引數為索引，第三個引數為原陣列。
注意與forEach()函式的區別，它是沒有返回值的，而map()是具有返回值的。
如下例項，將每個元素的值加上100並返回一個新列表。
<script>
"use strict";
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let new_array = array.map(function (value, index, array) {
return value += 100;
});
console.log(array); // 原陣列 (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(new_array); // 新陣列 (9) [101, 102, 103, 104, 105, 106, 107, 108, 109]
</script>
reduce
使用 reduce 與 reduceRight 函式可以迭代陣列的所有元素，reduce 從前開始 reduceRight 從後面開始。下面通過函式計算課程點選數的和。
第一個引數是執行函式，第二個引數為初始值
傳入第二個引數時將所有元素迴圈一遍
不傳第二個引數時從第二個元素開始迴圈
執行函式引數說明如下
| 引數 | 說明 |
|---|---|
| prev | 上次呼叫回撥函式返回的結果 |
| cur | 當前的元素值 |
| index | 當前的索引 |
| array | 原陣列 |
統計元素在陣列中出現的次數。
<script>
"use strict";
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9,9,9,9,9];
function countArrayELem(array, elem) {
return array.reduce((total, cur) => (total += cur == elem ? 1 : 0), 0);
}
console.log(countArrayELem(array, 9)); // 5
</script>
返回陣列中最大元素。
<script>
"use strict";
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let res = array.reduce(function (prev, cur, index, array) {
return prev > cur ? prev : cur;
});
console.log(res); // 9
</script>
元素累加。
<script>
"use strict";
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let res = array.reduce(function (prev, cur, index, array) {
return prev+cur;
});
console.log(res); // 45
</script>
元素累加，並在之前基礎上加100。
<script>
"use strict";
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let res = array.reduce(function (prev, cur, index, array) {
return prev + cur;
}, 100); // 新增第二個引數
console.log(res); // 145
</script>