JavascriptES6新特性之map和reduce詳解

更新時間：2022年02月22日 16:01:09 作者：流楚丶格念

這篇文章主要為大家詳細(xì)介紹了ES6的新特性之map和reduce，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

說明

ES6中，數(shù)組新增了map和reduce方法。

1.map()

map() ：接收一個函數(shù)，將原數(shù)組中的所有元素用這個函數(shù)處理后放入新數(shù)組返回。

代碼示例：

有一個字符串?dāng)?shù)組，我們希望轉(zhuǎn)為int數(shù)組

let arr = ['1', '20', '-5', '3'];
console.log(arr)
//傳統(tǒng)寫法
let newArr = arr.map(function(s) {
	return parseInt(s);
});
console.log(newArr); //輸出[1,20,-5,3]
//箭頭函數(shù)
let newArr2 = arr.map(s => parseInt(s));
console.log(newArr2) //輸出[1,20,-5,3]

在這里插入圖片描述

2.reduce()

reduce() ：接收一個函數(shù)（必須）和一個初始值（可選），該函數(shù)接收兩個參數(shù)。下面我們詳細(xì)的來看一下：

函數(shù)原型：

reduce(callback, initialValue)

函數(shù)參數(shù)：

callback是上一次reduce處理的結(jié)果：

callback四個參數(shù)分別是：上一次結(jié)果值、當(dāng)前元素、當(dāng)前索引、原數(shù)組

initialValue是數(shù)組中要處理的下一個元素

函數(shù)作用機(jī)制：

reduce() 會從左到右依次把數(shù)組中的元素用reduce處理，并把處理的結(jié)果作為下次reduce 的第一個參數(shù)。如果是第一次，會把前兩個元素作為計算參數(shù)，或者把用戶指定的初始值作為起始參數(shù)。

代碼示例：

let arr = ['1', '20', '-5', '3']
arr = arr.map(item => item*2);
console.log(arr);
let result = arr.reduce((a, b) => {
    console.log('上一次計算結(jié)果值： '+a);
    console.log('當(dāng)前數(shù)值： '+b);
	console.log('當(dāng)前return的值(a+b)：'+(a+b));
    return a+b;
}, 100);
console.log(result);

在這里插入圖片描述

綜合案例

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>ES6新特性學(xué)習(xí)-(9)-擴(kuò)展運(yùn)算符</title>
	</head>
	<body>
		<script>
			//ES6中，數(shù)組新增了map和reduce方法。
			//1.map() ：接收一個函數(shù)，將原數(shù)組中的所有元素用這個函數(shù)處理后放入新數(shù)組返回。 
			//舉例：有一個字符串?dāng)?shù)組，我們希望轉(zhuǎn)為int數(shù)組
			let arr = ['1', '20', '-5', '3'];
			console.log(arr)
			//傳統(tǒng)寫法
			let newArr = arr.map(function(s) {
				return parseInt(s);
			});
			console.log(newArr); //輸出[1,20,-5,3]
			//箭頭函數(shù)
			let newArr2 = arr.map(s => parseInt(s));
			console.log(newArr2) //輸出[1,20,-5,3]
			// 2.reduce() ：接收一個函數(shù)（必須）和一個初始值（可選），該函數(shù)接收兩個參數(shù)： 
			const arr = [1, 20, -5, 3]
			//此時a=1,b=20開始從左往右循環(huán)處理
			let result1 = arr.reduce((a, b) => {
				return a + b;
			});
			console.log(result1); //輸出 19
			//當(dāng)有初始值傳入的時候， a=1,b=1，開始從左往右循環(huán)處理
			let result2 = arr.reduce((a, b) => {
				return a + b;
			}, 1)
			console.log(result2); //輸出 20
		</script>
</body>
</html>