JavaScript for循环、数组高级语法
简介
本文主要介绍JavaScript中for迭代的几种方法，以及数组的三个高级方法（filter、map、reduce），本文会涉及到 = > 箭头函数，由于不是本文章研究的重点，请自行了解。
for和增强for迭代
存在数组如下：
books: [
{
id: 1,
name: '《算法导论》',
date: '2006-9',
price: 88.883,
count: 1
},
{
id: 2,
name: '《Java编程思想》',
date: '2002-2',
price: 82.226,
count: 1
},
{
id: 3,
name: '《C语言从入门到放弃》',
date: '2007-9',
price: 87.787,
count: 1
},
{
id: 4,
name: '《Linux私房菜》',
date: '2001-9',
price: 18.888,
count: 1
}
]
普通的迭代方法：
for (let i = 0; i < books.length; i++) {
total = books[i].price * books[i].count;
}
使用for in迭代
注意：js中的for in不同于Java，下面案例中 in之前的变量是循环中的下标而不是当前元素。
for (let index in books) {
total += books[index].price * books[index].count;
}
使用for of迭代
在JavaScript中for of与Java中的for in用法相同，此时的item就是当前元素
for (let item of books) {
total += item.price * item.count;
}
数组的高阶方法
在使用数组中我们经常会遇到如下的场景：
-
拿出数组中满足指定条件的元素，简历新数组；
-
对数组进行一系列操作后放入新数组，例如将所有元素都 * 2；
-
计算数组元素的总合。
对于这三种应用场景，JavaScript都提供了对应的方法进行了封装，我们只需要调用即可。
存在数组如下：
let nums = [1, 3, 5, 7, 8, 9, 10, 20, 30, 40];
filter方法
filter方法是为了解决上述的场景1，它的语法如下：
//为true的结果都会存放入newNums
let newNums = nums.filter(function (n) {
return n > 5;
});
console.log(newNums);
filter会迭代数组其回调中的形参n就是当前元素，且返回一个布尔类型的值，如果返回的是true，当前迭代的元素n就会存入指定的新数组中。此时，只有所有满足 > 5 的元素都会存入newNums中。当然我们可以自定义任何是布尔返回值的判断。
map方法
map方法是为了解决上述的场景2，它的语法如下：
//将返回值全部加入新数组
let newNums2 = newNums.map(function (n) {
return n * 2;
});
console.log(newNums2);
map 方法同样会迭代数组，回调函数的参数n仍然是当前元素，return的是一个T（迭代数组元素类型）类型的值。所有返回的值都会被加入newNums2数组中，我们可以在方法体内进行一系列的操作。
reduce方法
reduce是为了解决上述的场景3，其语法和上述两个方法不太相同：
// 数组汇总
let total = newNums2.reduce(function (pre, current) {
return pre + current;
}, 0);
console.log(total);
reduce中需要传递两个参数，参数1为回调函数，参数2是baseValue（基值）。
reduce的回调会返回一个obj类型的值，不过我们一般会返回一个数值，它有两个参数第一个参数pre是值上一次返回的值（首次调用没有返回值，所以它的初值就是baseValue的值。这也是reduce有两个参数的原因，它的思想类似于斐波那契数列），current的值为数组每次迭代的元素值。上述案例计算了newNum2的所有元素之和。
filter、map、reduce链式调用
上述三个方法支持链式调用，语法如下：
//链式调用
let tot = nums.filter(function (n) {
return n > 5;
}).map(function (n) {
return n * 2;
}).reduce(function (pre, current) {
return pre + current;
}, 0);
console.log(tot);
使用=>箭头函数优化代码
JavaScript中的箭头函数类似于Java中的lamdba表达式，下面的案例演示了使用=>优化filter、map、reduce方法
let to = nums.filter(n => n > 5)
.map(n => n * 2)
.reduce(((pre, current) => pre + current), 0);
console.log(to);
下面案例中使用reduce方法实现了一个购物车总价计算：
totalPrice: function () {
//reduce 的使用
return books.reduce(((pre, current) => pre + current.price * current.count), 0);
}