JavaScript for循环、数组高级语法

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);
}