Effective JavaScript Item 50 优先使用遍历方法而非循环

最新推荐文章于 2022-06-17 17:12:15 发布

dm_vincent

最新推荐文章于 2022-06-17 17:12:15 发布

阅读量3.6k

点赞数 1

分类专栏： Lambda JavaScript 文章标签： javascript 函数式编程遍历 lambda 读书笔记

本文链接：https://blog.csdn.net/dm_vincent/article/details/41039299

版权

JavaScript 同时被 2 个专栏收录

68 篇文章 0 订阅

订阅专栏

Lambda

14 篇文章 0 订阅

订阅专栏

优先使用遍历方法而非循环

在使用循环的时候，很容易违反DRY(Don't Repeat Yourself)原则。这是因为我们通常会选择复制粘贴的方法来避免手写一段段的循环语句。但是这样做回让代码中出现大量重复代码，开发人员也在没有意义地"重复造轮子"。更重要的是，在复制粘贴的时候很容易忽视循环中的那些细节，比如起始索引值，终止判断条件等。

比如以下的for循环就存在这个问题，假设n是集合对象的长度：

for (var i = 0; i <= n; i++) { ... }
// 终止条件错误，应该是i < n
for (var i = 1; i < n; i++) { ... }
// 起始变量错误，应该是i = 0
for (var i = n; i >= 0; i--) { ... }
// 起始变量错误，应该是i = n - 1
for (var i = n - 1; i > 0; i--) { ... }
// 终止条件错误，应该是i >= 0

可见在循环的一些细节处理上很容易出错。而利用JavaScript提供的闭包(参见Item 11)，可以将循环的细节给封装起来供重用。实际上，ES5就提供了一些方法来处理这一问题。其中的Array.prototype.forEach是最简单的一个。利用它，我们可以将循环这样写：

// 使用for循环
for (var i = 0, n = players.length; i < n; i++) {
    players[i].score++;
}

// 使用forEach
players.forEach(function(p) {
    p.score++;
});

除了对集合对象进行遍历之外，另一种常见的模式是对原集合中的每个元素进行某种操作，然后得到一个新的集合，我们也可以利用forEach方法实现如下：

// 使用for循环
var trimmed = [];
for (var i = 0, n = input.length; i < n; i++) {
    trimmed.push(input[i].trim());
}

// 使用forEach
var trimmed = [];
input.forEach(function(s) {
    trimmed.push(s.trim());
});

但是由于这种由将一个集合转换为另一个集合的模式十分常见，ES5也提供了Array.prototype.map方法用来让代码更加简单和优雅：

var trimmed = input.map(function(s) {
    return s.trim();
});

另外，还有一种常见模式是对集合根据某种条件进行过滤，然后得到一个原集合的子集。ES5中提供了Array.prototype.filter来实现这一模式。该方法接受一个Predicate作为参数，它是一个返回true或者false的函数：返回true意味着该元素会被保留在新的集合中；返回false则意味着该元素不会出现在新集合中。比如，我们使用以下代码来对商品的价格进行过滤，仅保留价格在[min, max]区间的商品：

listings.filter(function(listing) {
    return listing.price >= min && listing.price <= max;
});

当然，以上的方法是在支持ES5的环境中可用的。在其它环境中，我们有两种选择： 1. 使用第三方库，如underscore或者lodash，它们都提供了相当多的通用方法来操作对象和集合。 2. 根据需要自行定义。

比如，定义如下的方法来根据某个条件取得集合中前面的若干元素：

function takeWhile(a, pred) {
    var result = [];
    for (var i = 0, n = a.length; i < n; i++) {
        if (!pred(a[i], i)) {
            break;
        }
        result[i] = a[i];
    }
    return result;
}

var prefix = takeWhile([1, 2, 4, 8, 16, 32], function(n) {
    return n < 10;
}); // [1, 2, 4, 8]

为了更好的重用该方法，我们可以将它定义在Array.prototype对象上，具体的影响可以参考Item 42。

Array.prototype.takeWhile = function(pred) {
    var result = [];
    for (var i = 0, n = this.length; i < n; i++) {
        if (!pred(this[i], i)) {
            break;
        }
        result[i] = this[i];
    }
    return result;  
};

var prefix = [1, 2, 4, 8, 16, 32].takeWhile(function(n) {
    return n < 10;
}); // [1, 2, 4, 8]

只有一个场合使用循环会比使用遍历函数要好：需要使用break和continue的时候。比如，当使用forEach来实现上面的takeWhile方法时就会有问题，在不满足predicate的时候应该如何实现呢？

function takeWhile(a, pred) {
    var result = [];
    a.forEach(function(x, i) {
        if (!pred(x)) {
            // ?
        }
        result[i] = x;
    });
    return result;
}

我们可以使用一个内部的异常来进行判断，但是它同样有些笨拙和低效：

function takeWhile(a, pred) {
    var result = [];
    var earlyExit = {}; // unique value signaling loop break
    try {
        a.forEach(function(x, i) {
            if (!pred(x)) {
                throw earlyExit;
            }
            result[i] = x;
        });
    } catch (e) {
        if (e !== earlyExit) { // only catch earlyExit
            throw e;
        }
    }
    return result;
}

可是使用forEach之后，代码甚至比使用它之前更加冗长。这显然是存在问题的。对于这个问题，ES5提供了some和every方法用来处理存在提前终止的循环，它们的用法如下所示：

[1, 10, 100].some(function(x) { return x > 5; }); // true
[1, 10, 100].some(function(x) { return x < 0; }); // false

[1, 2, 3, 4, 5].every(function(x) { return x > 0; }); // true
[1, 2, 3, 4, 5].every(function(x) { return x < 3; }); // false

这两个方法都是短路方法(Short-circuiting)：只要有任何一个元素在some方法的predicate中返回true，那么some就会返回；只有有任何一个元素在every方法的predicate中返回false，那么every方法也会返回false。

因此，takeWhile就可以实现如下：

function takeWhile(a, pred) {
    var result = [];
    a.every(function(x, i) {
        if (!pred(x)) {
            return false; // break
        }
        result[i] = x;
        return true; // continue
    });
    return result;
}