JavaScript資料結構01 - 陣列

leocoder發表於2018-07-25

一、建立陣列

1.1 使用Array建構函式

var arr1 = new Array(); // 建立一個空陣列
var arr2 = new Array(10);   // 建立一個包含20項的陣列
var arr3 = new Array('liu', 'wang', 'li');  // 建立一個包含3個字串的陣列
複製程式碼

1.2 使用陣列字面量表示法

var arr1 = [];  // 建立一個空陣列
var arr2 = [10];    // 建立一個包含1項的陣列
var arr3 = ['liu', 'wang', 'li'];   // 建立一個包含3個字串的陣列
複製程式碼

二、常用陣列方法

方法名	描述
join	把陣列的所有元素放入一個字串，元素通過指定的分隔符進行分隔
pop	刪除並返回陣列的最後一個元素
push	向陣列的末尾新增一個或更多元素，並返回新的長度
shift	刪除並返回陣列的第一個元素
unshift	向陣列的開頭新增一個或更多元素，並返回新的長度
slice	從某個已有的陣列返回指定的元素
indexOf	返回第一個與給定引數相等的陣列元素的索引，沒有找到則返回-1
lastIndexOf	返回在陣列中搜尋到的與給定引數相等的元素的索引裡的最大的值，沒有找到則返回-1
sort	對陣列的元素進行排序
splice	刪除元素，並向陣列新增新元素
toString	把陣列轉換為字串，並返回結果
toLocaleString	把陣列轉換為本地字串，並返回結果
valueOf	返回陣列物件的原始值
forEach	對陣列中的每一項執行指定函式，這個方法沒有返回值
concat	連線2個或更多陣列，並返回結果
every	對陣列中的每一項執行指定函式，如果該函式對每一項都返回true，則返回true
some	對陣列中的每一項執行指定函式，如果任一項返回true，則返回true
filter	對陣列中的每一項執行指定函式，返回該函式會返回true的項組成的陣列
reverse	顛倒陣列中元素的順序
map	對陣列中的每一項執行指定函式，返回每次函式呼叫的結果組成的陣列
reduce	接收一個函式作為累加器，陣列中的每個值（從左到右）開始縮減，最終計算為一個值
reduceRight	接收一個函式作為累加器，陣列中的每個值（從右到左）開始縮減，最終計算為一個值

PS：原始值是指固定而簡單的值，存放在棧中的簡單資料段，它們的值直接儲存在變數訪問的位置。

JavaScript中有五種原始型別，也叫基本型別：
Number、String、Boolean、Undefined、Null

三、演示例項

3.1 join

定義和用法

join()方法用於把陣列中的所有元素放入一個字串。
元素是通過指定的分隔符進行分隔的。

語法

arrayObject.join(separator)

引數	描述
seperator	可選。指定要使用的分隔符，如果省略該引數，則使用逗號作為分隔符

返回值

返回一個字串。該字串是通過把 arrayObject 的每個元素轉換為字串，然後把這些字串連線起來，在兩個元素之間插入 separator 字串而生成的。

var arr = new Array(3);
arr[0] = "Geroge";
arr[1] = "John";
arr[2] = "Thomas";

var str1 = arr.join();
var str2 = arr.join('');
var str3 = arr.join(' ');
var str4 = arr.join('-');

console.log(str1);  // "Geroge,John,Thomas"
console.log(str2);  // "GerogeJohnThomas"
console.log(str3);  // "Geroge John Thomas"
console.log(str4);  // "Geroge-John-Thomas"
複製程式碼

3.2 pop

定義和用法

pop()方法用於刪除並返回陣列的最後一個元素。

語法

arrayObject.pop()

返回值

arrayObject 的最後一個元素。

說明

pop() 方法將刪除 arrayObject 的最後一個元素，把陣列長度減 1，並且返回它刪除的元素的值。如果陣列已經為空，則 pop() 不改變陣列，並返回 undefined 值。

var arr = new Array(3);
arr[0] = "Geroge";
arr[1] = "John";
arr[2] = "Thomas";

console.log(arr);           // ["Geroge", "John", "Thomas"]
console.log(arr.pop());     // "Thomas"
console.log(arr);           // ["Geroge", "Thomas"]
複製程式碼

3.3 push

定義和用法

push()方法可向陣列的末尾新增一個或多個元素，並返回新的長度。

語法

arrayObject.push(newElement1, newElement2, ..., newElementX)

引數	描述
newElement1	必需。要新增到陣列末尾的第一個元素
newElement2	可選。要新增到陣列末尾的第二個元素
newElementX	可選。可新增多個元素

返回值

把指定的值新增到陣列後的新長度。

說明

push() 方法可把它的引數順序新增到 arrayObject 的尾部。它直接修改 arrayObject，而不是建立一個新的陣列。push() 方法和 pop() 方法使用陣列提供的先進後出棧的功能。

var arr = new Array(3);
arr[0] = "Geroge";
arr[1] = "John";
arr[2] = "Thomas";

console.log(arr);                           // ["Geroge", "John", "Thomas"]
console.log(arr.push("James"));             // 4
console.log(arr);                           // ["Geroge", "John", "Thomas", "James"]
console.log(arr.push("Peter", "Sara"));     // 6
console.log(arr);                           // ["Geroge", "John", "Thomas", "James", "Peter", "Sara"]
複製程式碼

3.4 shift

定義和用法

shift()方法用於把陣列的第一個元素從其中刪除，並返回第一個元素的值。

語法

arrayObject.shift()

返回值

陣列原來的第一個元素的值。

說明

如果陣列是空的，那麼 shift() 方法將不進行任何操作，返回 undefined 值。請注意，該方法不建立新陣列，而是直接修改原有的 arrayObject。

var arr = new Array(3);
arr[0] = "Geroge";
arr[1] = "John";
arr[2] = "Thomas";

console.log(arr);           // ["Geroge", "John", "Thomas"]
console.log(arr.shift());   // "Geroge"
console.log(arr);           // ["John", "Thomas"]
複製程式碼

3.5 unshift

定義和用法

unshift()方法可向陣列的開頭新增一個或多個元素，並返回新的長度。

語法

arrayObject.unshift(newElement1, newElement2, ..., newElementX)

引數	描述
newElement1	必需。要新增到陣列開頭的第一個元素
newElement2	可選。要新增到陣列開頭的第二個元素
newElementX	可選。可新增多個元素

返回值

arrayObject 的新長度。

說明

unshift() 方法將把它的引數插入 arrayObject 的頭部，並將已經存在的元素順次地移到較高的下標處，以便留出空間。該方法的第一個引數將成為陣列的新元素 0，如果還有第二個引數，它將成為新的元素 1，以此類推。

請注意，unshift() 方法不建立新的建立，而是直接修改原有的陣列。

var arr = new Array(3);
arr[0] = "Geroge";
arr[1] = "John";
arr[2] = "Thomas";

console.log(arr);                               // ["Geroge", "John", "Thomas"]
console.log(arr.unshift("James"));              // 4
console.log(arr);                               // ["James", "Geroge", "John", "Thomas"]
console.log(arr.unshift("Peter", "Sara"));      // 6
console.log(arr);                               // ["Peter", "Sara", "James", "Geroge", "John", "Thomas"]
複製程式碼

3.6 slice

定義和用法

slice()方法可從已有的陣列中返回選定的元素。slice()方法不改變原陣列。

語法

arrayObject.slice(start, end)

引數	描述
start	必需。規定從何處開始選取。如果是負數，那麼它規定從陣列尾部開始算起的位置。也就是說，-1指最後一個元素，-2指倒數第二個元素，以此類推。
end	可選。規定從何處結束選取。該引數是陣列片斷結束處的陣列下標。如果沒有指定該引數，那麼切分的陣列包含從start到陣列結束的所有元素。如果這個引數是負數，那麼它規定的是從陣列尾部開始算起的元素。

返回值

返回一個新的陣列，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。

說明

請注意，該方法並不會修改陣列，而是返回一個子陣列。如果想刪除陣列中的一段元素，應該使用方法 Array.splice()。

var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin";

console.log(arr);                   // ["Geroge", "John", "Thomas", "James", "Adrew", "Martin"]
console.log(arr.slice(0));          // ["Geroge", "John", "Thomas", "James", "Adrew", "Martin"]
console.log(arr.slice(1));          // ["John", "Thomas", "James", "Adrew", "Martin"]
console.log(arr.slice(1, 3));       // ["John", "Thomas"]
console.log(arr.slice(1, -2));      // ["John", "Thomas", "James"]
console.log(arr.slice(-1, -2));     // []
console.log(arr.slice(-2, -1));     // ["Adrew"]
console.log(arr);                   // ["Geroge", "John", "Thomas", "James", "Adrew", "Martin"]
複製程式碼

3.7 indexOf

定義和用法

indexOf()方法可返回某個指定的值在陣列中首次出現的位置。從左往右找，找不到返回-1。

語法

arrayObject.indexOf(searchValue, fromIndex)

引數	描述
searchValue	必需。規定需檢索的值。
fromIndex	可選的整數引數，開始查詢的位置。如果該索引值大於或等於陣列長度，意味著不會在陣列裡查詢，返回-1。如果引數中提供的索引值是一個負值，則將其作為陣列末尾的一個抵消，即-1表示從最後一個元素開始查詢，-2表示從倒數第二個元素開始查詢，以此類推。注意：如果引數中提供的索引值是一個負值，並不改變其查詢順序，查詢順序仍然是從前向後查詢陣列。如果抵消後的索引值仍小於0，則整個陣列都將會被查詢。其預設值為0

引數

描述

searchValue

必需。規定需檢索的值。

fromIndex

可選的整數引數，開始查詢的位置。
如果該索引值大於或等於陣列長度，意味著不會在陣列裡查詢，返回-1。
如果引數中提供的索引值是一個負值，則將其作為陣列末尾的一個抵消，
即-1表示從最後一個元素開始查詢，-2表示從倒數第二個元素開始查詢，以此類推。
注意：如果引數中提供的索引值是一個負值，並不改變其查詢順序，
查詢順序仍然是從前向後查詢陣列。如果抵消後的索引值仍小於0，
則整個陣列都將會被查詢。其預設值為0

var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin";

console.log(arr.indexOf('Thomas'));             // 2
console.log(arr.indexOf('Thomas', 2));          // 2
console.log(arr.indexOf('Thomas', 3));          // -1
console.log(arr.indexOf('Thomas', -4));         // 2
console.log(arr.indexOf('Thomas', -3));         // -1
console.log(arr.indexOf('Peter'));              // -1
複製程式碼

3.8 lastIndexOf

定義和用法

lastIndexOf()方法可返回某個指定的值在陣列中首次出現的位置。從右往左找，找不到返回-1。

語法

arrayObject.indexOf(searchValue, fromIndex)

引數	描述
searchValue	必需。規定需檢索的值。
fromIndex	可選的整數引數，從此位置開始逆向查詢。預設為陣列的長度減 1，即整個陣列都被查詢。如果該值大於或等於陣列的長度，則整個陣列會被查詢。如果為負值，將其視為從陣列末尾向前的偏移。即使該值為負，陣列仍然會被從後向前查詢。如果該值為負時，其絕對值大於陣列長度，則方法返回 -1，即陣列不會被查詢

引數

描述

searchValue

必需。規定需檢索的值。

fromIndex

可選的整數引數，從此位置開始逆向查詢。
預設為陣列的長度減 1，即整個陣列都被查詢。
如果該值大於或等於陣列的長度，則整個陣列會被查詢。
如果為負值，將其視為從陣列末尾向前的偏移。
即使該值為負，陣列仍然會被從後向前查詢。
如果該值為負時，其絕對值大於陣列長度，則方法返回 -1，即陣列不會被查詢

var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin";

console.log(arr.lastIndexOf('Thomas'));             // 2
console.log(arr.lastIndexOf('Thomas', 2));          // 2
console.log(arr.lastIndexOf('Thomas', 3));          // 2
console.log(arr.lastIndexOf('Thomas', 1));          // -1
console.log(arr.lastIndexOf('Thomas', -4));         // 2
console.log(arr.lastIndexOf('Thomas', -3));         // 2
console.log(arr.lastIndexOf('Peter'));              // -1
複製程式碼

3.9 sort

定義和用法

sort()方法用於對陣列的元素進行排序。

語法

arrayObject.sort(sortby)

引數	描述
sortby	可選。規定排序順序。必須是函式。

返回值

對陣列的引用。請注意，陣列在原陣列上進行排序，不生成副本。

說明

如果呼叫該方法時沒有使用引數，將按字母順序對陣列中的元素進行排序，說的更精確點，是按照字元編碼的順序進行排序。要實現這一點，首先應把陣列的元素都轉換成字串（如有必要），以方便比較。

如果想按照其他標準進行排序，就需要提供比較函式，該函式要比較兩個值，然後返回一個用於說明這兩個值的相對順序的數字。比較函式應該具有兩個引數a和b，其返回值如下：

若a小於b，在排序後的陣列中a應該出現在b之前，則返回一個小於0的值。
若a等於b，則返回0。
若a大於b，則返回一個大於0的值。

即順序 return a - b; 倒序 return b - a;

a在b前返回負數，a在b後返回正數

var arr = new Array(6);
arr[0] = "10";
arr[1] = "5";
arr[2] = "40";
arr[3] = "25";
arr[4] = "1000";
arr[5] = "1";

console.log(arr);           // ["10", "5", "40", "25", "1000", "1"]
console.log(arr.sort());    // ["1", "10", "1000", "25", "40", "5"]
console.log(arr);           // ["1", "10", "1000", "25", "40", "5"]
複製程式碼

var arr = new Array(6);
arr[0] = "10";
arr[1] = "5";
arr[2] = "40";
arr[3] = "25";
arr[4] = "1000";
arr[5] = "1";

function orderNumber (a, b) {
    return a - b;
}

function descOrderNumber (a, b) {
    return b - a;
}

console.log(arr);                           // ["10", "5", "40", "25", "1000", "1"]
console.log(arr.sort(orderNumber));         // ["1", "5", "10", "25", "40", "1000"]
console.log(arr.sort(descOrderNumber));     // ["1000", "40", "25", "10", "5", "1"]
console.log(arr);                           // ["1000", "40", "25", "10", "5", "1"]
複製程式碼

3.10 splice

定義和用法

splice()方法向/從陣列中新增/刪除專案，然後返回被刪除的專案。該方法會改變原始陣列。

語法

arrayObject.splice(index, howmany, item1, ......, itemX)

引數	描述
index	必需。整數，規定新增/刪除專案的位置，使用負數可從陣列結尾處規定位置。
howmany	必需。要刪除的專案數量。如果設定為0，則不會刪除專案。
item1,......,itemX	可選。向陣列新增的新專案。

返回值

型別	描述
Array	包含被刪除專案的新陣列，如果有的話。

說明

splice()方法可刪除從index處開始的0個或多個元素，並且用引數列表中宣告的一個或多個值來替換那些被刪除的元素。如果從arrayObject中刪除了元素，則返回的是含有被刪除的元素的陣列。

var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin";

console.log(arr);                                   // ["Geroge", "John", "Thomas", "James", "Adrew", "Martin"]  
console.log(arr.splice(1, 1, 'Peter', 'Sara'));     // ["John"]
console.log(arr);                                   // ["Geroge", "Peter", "Sara", "Thomas", "James", "Adrew", "Martin"]
console.log(arr.splice(1, 0, 'Ella'));              // []
console.log(arr);                                   // ["Geroge", "Ella", "Peter", "Sara", "Thomas", "James", "Adrew", "Martin"]
複製程式碼

3.11 toString

定義和用法

toString()方法可把陣列轉換為字串，並返回結果。

語法

arrayObject.toString()

返回值

arrayObject的字串表示。返回值與沒有引數的join()方法返回的字串相同。

說明

當陣列用於字串環境時，JavaScript會呼叫這一方法將陣列自動轉換成字串。但是在某些情況下，需要顯式地呼叫該方法。

var arr = new Array(4);
arr[0] = "Geroge";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = 20;

console.log(arr.toString());    // "Geroge,John,Thomas,20"
複製程式碼

3.12 toLocaleString

定義和用法

toLocaleString()方法可把陣列轉換為本地字串，並返回結果。

語法

arrayObject.toLocaleString()

返回值

arrayObject的本地字串表示。

說明

首先呼叫每個陣列元素的 toLocaleString() 方法，然後使用地區特定的分隔符把生成的字串連線起來，形成一個字串。

var arr = new Array(4);
arr[0] = "Geroge";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = 20;

console.log(arr.toLocaleString());    // "Geroge,John,Thomas,20"
複製程式碼

3.13 valueOf

定義和用法

valueOf()方法返回Array物件的原始值。該原始值由Array物件派生的所有物件繼承。valueOf(）方法通常由JavaScript在後臺自動呼叫，並不顯式地出現在程式碼中。

語法

arrayObject.valueOf()

var arr = new Array(4);
arr[0] = "Geroge";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = 20;

console.log(arr.valueOf());    // ["Geroge", "John", "Thomas", 20]
複製程式碼

3.14 forEach

定義和用法

forEach()方法用於呼叫陣列的每個元素，並將元素傳遞給回撥函式。forEach()對於空陣列是不會執行回撥函式的。

語法

arrayObject.forEach(function (value, index, arr) {}, thisValue)

引數	描述
function(currentValue, index, arr)	必需。陣列中每個元素需要呼叫的函式。 currentValue: 必需。當前元素。 index: 可選。當前元素的索引值。 arr: 可選。當前元素所屬的陣列物件。
thisValue	可選。傳遞給函式的值一般用'this'值。如果這個引數為空，嚴格模式下把'undefined'會傳遞給'this'值，普通模式下傳入'window'。

var arr = new Array(3);
arr[0] = "Geroge";
arr[1] = "John";
arr[2] = "Thomas";

arr.forEach(function (value, index, arr) {
    console.log(value);     // "Geroge" "John" "Thomas"
    console.log(index);     // 0        1      2
    console.log(arr);       // ["Geroge", "John", "Thomas"]
    console.log(this);      // window
});

arr.forEach(function (value, index, arr) {
    console.log(value);     // "Geroge" "John" "Thomas"
    console.log(index);     // 0        1      2
    console.log(arr);       // ["Geroge", "John", "Thomas"]
    console.log(this);      // ["Geroge", "John", "Thomas"]
}, arr);

複製程式碼

3.15 concat

定義和用法

concat()方法用於連線兩個或多個陣列。該方法不會改變現有的陣列，而僅僅會返回被連線陣列的一個副本。

語法

arrayObject.concat(arrayX,arrayX,......,arrayX)

引數	描述
arrayX	必需。該引數可以是具體的值，也可以是陣列物件。可以是任意多個。

返回值

返回一個新的陣列。該陣列是通過把所有arrayX引數新增到arrayObject中生成的。如果要進行concat()操作的引數是陣列，那麼新增的是陣列中的元素，而不是陣列。

var a = [1, 2, 3];

console.log(a.concat(4, 5, [6, 7], 8, 9));  // [1, 2, 3, 4, 5, 6, 7, 8, 9]
複製程式碼

3.16 every

定義和用法

every()方法用於檢測陣列所有元素是否都符合指定條件（通過函式提供）。 every()方法使用指定函式檢測陣列中的所有元素：

如果陣列中檢測到有一個元素不滿足，則整個表示式返回false，且剩餘的元素不會再進行檢測。
如果所有元素都滿足條件，則返回true。

注意：every()不會對空陣列進行檢測。注意：every()不會改變原始陣列。

語法

arrayObject.every(function (currentValue, index, arr) {}, thisValue)

引數	描述
function (currentValue, index, arr)	必需。函式，陣列中的每個元素都會執行這個函式。 currentValue: 必需。當前元素。 index: 可選。當前元素的索引值。 arr: 可選。當前元素所屬的陣列物件。
thisValue	可選。物件作為該執行回撥時使用，傳遞給函式。

說明

有一個返回false，則整個every()返回值為false，並且不會執行後續其他項的回撥函式。空陣列的every()直接返回true。

var ages = [10, 20, 24, 32, 40];

var result = ages.every(function (value, index, arr) {
    return value > 25;
});

console.log(result);    // false

ages = [];
result = ages.every(function (value, index, arr) {
    return value > 25;
});

console.log(result);    // true
複製程式碼

3.17 some

定義和用法

some()方法用於檢測陣列所有元素是否滿足指定條件（通過函式提供）。 every()方法會依次執行陣列的每個元素：

如果有一個元素滿足條件，則表示式返回true，剩餘的元素不會再執行檢測。
如果沒有滿足條件的元素，則返回false。

注意：some()不會對空陣列進行檢測。注意：some()不會改變原始陣列。

語法

arrayObject.some(function (currentValue, index, arr) {}, thisValue)

引數	描述
function (currentValue, index, arr)	必需。函式，陣列中的每個元素都會執行這個函式。 currentValue: 必需。當前元素。 index: 可選。當前元素的索引值。 arr: 可選。當前元素所屬的陣列物件。
thisValue	可選。物件作為該執行回撥時使用，傳遞給函式。

說明

有一個返回true，則整個some()返回值為true，並且不會執行後續其他項的回撥函式。空陣列的some()直接返回false。

var ages = [10, 20, 24, 32, 40];

var result = ages.some(function (value, index, arr) {
    return value > 25;
});

console.log(result);    // true

ages = [];
result = ages.some(function (value, index, arr) {
    return value > 25;
});

console.log(result);    // false
複製程式碼

3.18 filter

定義和用法

filter()方法建立一個新的陣列，新陣列中的元素是通過檢查指定陣列中符合條件的所有元素。

注意：filter()不會對空陣列進行檢測。注意：filter()不會改變原始陣列。

語法

arrayObject.filter(function (currentValue, index, arr) {}, thisValue)

引數	描述
function (currentValue, index, arr)	必需。函式，陣列中的每個元素都會執行這個函式。 currentValue: 必需。當前元素。 index: 可選。當前元素的索引值。 arr: 可選。當前元素所屬的陣列物件。
thisValue	可選。物件作為該執行回撥時使用，傳遞給函式。

說明

將所有返回true的陣列項取出來組成一個新的陣列。

var ages = [10, 20, 24, 32, 40];

var result = ages.filter(function (value, index, arr) {
    return value > 25;
});

console.log(result);    // [32, 40]
console.log(ages);      // [10, 20, 24, 32, 40]

ages = [];
result = ages.filter(function (value, index, arr) {
    return value > 25;
});

console.log(result);    // []
複製程式碼

3.19 reverse

定義和用法

reverse()方法用於顛倒陣列中元素的順序。會改變原陣列。

語法

arrayObject.reverse()

var arr = new Array(3);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";

console.log(arr);               // ["Geroge", "John", "Thomas"]
console.log(arr.reverse());     // ["Thomas", "John", "Geroge"]
console.log(arr);               // ["Thomas", "John", "Geroge"]
複製程式碼

3.20 map

定義和用法

map()方法返回一個新陣列，陣列中的元素為原始陣列元素呼叫函式處理後的值。map()方法按照原始陣列元素順序依次處理元素。

注意：map()不會對空陣列進行檢測。注意：map()不會改變原始陣列。

語法

arrayObject.map(function (currentValue, index, arr) {}, thisValue)

引數	描述
function (currentValue, index, arr)	必需。函式，陣列中的每個元素都會執行這個函式。 currentValue: 必需。當前元素。 index: 可選。當前元素的索引值。 arr: 可選。當前元素所屬的陣列物件。
thisValue	可選。物件作為該執行回撥時使用，傳遞給函式。

var numbers = [65, 20, 11, 5];

var arr = numbers.map(function (value, index, arr) {
    return value * 2;
})

console.log(numbers);   // [65, 20, 11, 5]
console.log(arr);       // [130, 40, 22, 10]
複製程式碼

3.21 reduce

定義和用法

reduce()方法接收一個函式作為累加器，陣列中的每個值（從左到右）開始縮減，最終計算為一個值。

注意：reduce()對於空陣列是不會執行回撥函式的。

語法

arrayObject.reduce(function (total, currentValue, currentIndex, arr) {}, initialValue)

引數	描述
function (total, currentValue, currentIndex, arr)	必需。函式，陣列中的每個元素都會執行這個函式。 total: 必需。初始值，或者計算結束後的返回值。 currentValue: 必需。當前元素。 currentIndex: 可選。當前元素的索引。 arr: 可選。當前元素所屬的陣列物件。
initialValue	可選。傳遞給函式的初始值。

var numbers = [15, 2, 1, 7];

var total = numbers.reduce(function (total, currentValue) {
    console.log(total);             // 15 17 18 25
    console.log(currentValue);      // 2  1  7
    return total + currentValue;
});

console.log(total);                 // 25
console.log(numbers);               // [15, 2, 1, 7]

total = numbers.reduce(function (total, currentValue) {
    console.log(total);             // 20 35 37 38 45
    console.log(currentValue);      // 15 2  1  7
    return total + currentValue;
}, 20);

console.log(total);                 // 45
console.log(numbers);               // [15, 2, 1, 7]
複製程式碼

3.22 reduceRight

定義和用法

reduceRight()方法的功能和reduce()功能是一樣的，不同的是reduceRight()從陣列的末尾向前將陣列中的陣列項做累加。

注意：reduceRight()對於空陣列是不會執行回撥函式的。

語法

arrayObject.reduceRight(function (total, currentValue, currentIndex, arr) {}, initialValue)

引數	描述
function (total, currentValue, currentIndex, arr)	必需。函式，陣列中的每個元素都會執行這個函式。 total: 必需。初始值，或者計算結束後的返回值。 currentValue: 必需。當前元素。 currentIndex: 可選。當前元素的索引。 arr: 可選。當前元素所屬的陣列物件。
initialValue	可選。傳遞給函式的初始值。

var numbers = [15, 2, 1, 7];

var total = numbers.reduceRight(function (total, currentValue) {
    console.log(total);             // 7 8 10 25
    console.log(currentValue);      // 1 2 15
    return total + currentValue;
});

console.log(total);                 // 25
console.log(numbers);               // [15, 2, 1, 7]

total = numbers.reduceRight(function (total, currentValue) {
    console.log(total);             // 20 27 28 30 45
    console.log(currentValue);      // 7  1  2  15
    return total + currentValue;
}, 20);

console.log(total);                 // 45
console.log(numbers);               // [15, 2, 1, 7]
複製程式碼

三、結束

本文會同步到我的個人部落格，完整程式碼可以到我的github倉庫檢視，如果對你有幫助的話歡迎點一個Star~~

歡迎關注我的公眾號

JavaScript資料結構之陣列棧佇列
2019-03-04
JavaScript資料結構陣列佇列
資料結構-陣列
2024-03-26
資料結構陣列
資料結構 - 陣列
2024-09-26
資料結構陣列
資料結構之「陣列」
2019-03-18
資料結構陣列
資料結構之陣列
2018-10-02
資料結構陣列
資料結構2——陣列
2020-10-10
資料結構陣列
JavaScript 的資料結構和演算法 - 陣列篇
2019-12-14
JavaScript資料結構演算法陣列
Java版-資料結構-陣列
2019-03-11
Java資料結構陣列
LeetCode之資料結構——陣列
2018-08-21
LeetCode資料結構陣列
JS資料結構(一)——陣列
2018-06-26
JS資料結構陣列
資料結構——樹狀陣列
2024-09-17
資料結構陣列
JavaScript資料結構03 - 佇列
2018-07-26
JavaScript資料結構佇列
JavaScript資料結構之-佇列
2019-05-01
JavaScript資料結構佇列
JavaScript資料結構03 – 佇列
2019-02-11
JavaScript資料結構佇列
JavaScript資料結構之佇列
2018-12-27
JavaScript資料結構佇列
Java版-資料結構-佇列（陣列佇列）
2019-03-14
Java資料結構佇列陣列
js實現資料結構--陣列
2018-11-23
JS資料結構陣列
基礎資料結構之陣列
2024-09-23
資料結構陣列
pyspark 解析kafka陣列結構資料
2024-11-07
SparkKafka陣列
玩轉資料結構之陣列
2021-09-09
資料結構陣列
《JavaScript資料結構與演算法》筆記——第2章陣列
2019-02-16
JavaScript資料結構演算法筆記陣列
java資料結構學習之陣列
2018-06-23
Java資料結構陣列
（一）Java資料結構之稀疏陣列
2020-10-05
Java資料結構陣列
資料結構與演算法——陣列
2019-02-03
資料結構演算法陣列
資料結構之php實現陣列
2021-01-11
資料結構PHP陣列
JavaScript陣列解構
2021-09-09
JavaScript陣列
資料結構之陣列和矩陣--矩陣&不規則二維陣列
2020-10-02
資料結構陣列矩陣
資料結構與演算法 | 陣列(Array)
2023-10-16
資料結構演算法陣列
【資料結構與演算法】——稀疏陣列
2021-03-12
資料結構演算法陣列
01Javascript資料結構與演算法之棧
2018-08-23
JavaScript資料結構演算法
javascript資料結構與演算法-佇列
2018-11-17
JavaScript資料結構演算法佇列
PHP 陣列轉樹結構/樹結構轉陣列
2021-02-23
PHP陣列
資料結構與演算法—稀疏陣列和佇列
2019-07-15
資料結構演算法陣列佇列
資料結構複習-01enum列舉型別
2024-04-09
資料結構型別
Go 常見資料型別-01陣列
2022-11-09
Go資料型別陣列
javascript陣列方法總結
2018-08-22
JavaScript陣列
資料結構與演算法學習-陣列
2019-03-07
資料結構演算法陣列
資料結構之真別多想—樹狀陣列
2020-09-12
資料結構陣列

JavaScript資料結構01 - 陣列

一、建立陣列

1.1 使用Array建構函式

1.2 使用陣列字面量表示法

二、常用陣列方法

三、演示例項

3.1 join

3.2 pop

3.3 push

3.4 shift

3.5 unshift

3.6 slice

3.7 indexOf

3.8 lastIndexOf

3.9 sort

3.10 splice

3.11 toString

3.12 toLocaleString

3.13 valueOf

3.14 forEach

3.15 concat

3.16 every

3.17 some

3.18 filter

3.19 reverse

3.20 map

3.21 reduce

3.22 reduceRight

三、結束

歡迎關注我的公眾號

相關文章