JS數組學習之迭代數組計算元素總和、將值連接成字串

在先前的文章《JS數組學習之怎麼拼接全部元素，回傳一個字串》中，我們了解了將陣列轉為字串的方法，有需要的朋友可以學習了解一下~

本篇文章帶大家聊聊陣列的迭代操作，介紹兩種計算元素總和、將值連結成字串的方法。

方法1、使用forEach()方法

#forEach() 方法用於呼叫陣列的每個元素，並將元素傳遞給回調函數。

語法：

array.forEach(funtion callbackfn(value, index, array), thisValue)

funtion callbackfn(value, index, array)：必要參數，指定回呼函數，最多可以接收三個參數：

• value：陣列元素的值。

• index：陣列元素的數字索引。

• array：包含該元素的陣列物件。

thisValue：可省略的參數，回呼函數中的 this 可引用的物件。如果省略 thisArg，則 this 的值為 undefined。

下面透過程式碼範例來具體了解一下：

範例1：輸出陣列元素

function f(value,index,array) {
    console.log("a[" + index + "] = " + value);
}
var a = ['a', 'b', 'c'];
a.forEach(f);

##範例2：將陣列值進行累加求和

var a = [10, 11, 12], sum = 0;
function f(value) {
	sum += value;
}

a.forEach(f);
console.log(sum);

#範例3：將陣列值連接成字串

var a = ['ab', 'cd', 'ef'], str = "";
function f(value) {
	// str=str + value;
	str=str.concat(value);
}

a.forEach(f);
console.log(str);

方法2、使用reduce() 方法

reduce() 方法可對陣列中的所有元素呼叫指定的回調函數。此回調函數的傳回值為累積結果，且此回傳值在下一次呼叫該回呼函數時作為參數提供。

語法：

array.reduce(function callbackfn(previousValue, currentVaule, currentIndex, array), initialValue)

function callbackfn(previousValue, currentVaule, currentIndex, array)：必要參數，指定回呼函數，最多可以接收4個參數：

• previousValue：透過上一次呼叫回呼函數所得到的值。如果向 reduce() 方法提供 initialValue，則在首次呼叫函數時，previousValue 為 initialValue。

• currentVaule：目前元素陣列的值。

• currentIndex：目前陣列元素的數字索引。

• array：包含該元素的陣列物件。

initialValue：可省略的參數，傳遞給函數的初始值。

下面透過程式碼範例來具體了解一下：

範例1：將陣列值進行累加求和

var a = [11, 12, 13], sum = 0;
function f(pre,curr) {
	sum=pre+curr;
	return sum;
}

a.reduce(f);
console.log(sum);

輸出結果：

36

範例2：將陣列值連接成字串

var a = [11, 12, 13], str = '';
function f(pre,curr) {
	str=pre+''+curr;
	return str;
}

a.reduce(f);
console.log(str);

#如果想要使用分隔符號來分隔每個陣列元素，可將回呼函數中兩個「」運算子間的空字串變成指定分隔符號：

var a = [11, 12, 13], str = '';
function f(pre,curr) {
	str=pre+'-'+curr;
	return str;
}

a.reduce(f);
console.log(str);

#好了，就說到這裡了，有需要的可以看：

javascript進階教學#

以上是JS數組學習之迭代數組計算元素總和、將值連接成字串的詳細內容。更多資訊請關注PHP中文網其他相關文章！