JavaScriptfor循环、数组⾼级语法
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);}