javascript - 函数向数组项添加空间

Question

我有一个函数可以过滤重复项和空格的 CSS 类，但我的函数无论如何都会导出带有空格的数组...

var classes = function (className, current) {
    var classNames = [className], uniques = {};
    if(current) classNames = classNames.concat(current.split(' '));
    return classNames.filter(function (className,i) {
        if(className == "") return;
        className = className.match(/\S+/)[0];
       if (!uniques[className]) return uniques[className] = className;
    });
};

当我运行 classes(' foo') 时，我得到 ["foo"] 无论如何，尽管 console.log('foo'.match(/\S+/)[0]; 返回没有空格的 'foo'。

我错过了什么？

Fiddle

Answer 1

您误解了filter 的工作原理。来自fine manual :

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

回调的返回值告诉 filter classNames 的哪些元素应该通过，返回值仅用于真实性测试。回调的返回值不是 filter 返回的，而是 classNames 中原始未触及的值。所以问题不在于添加了额外的空间，问题在于没有删除空间。

如果你想同时测试和修改那么reduce将为您提供更好的服务:

return classNames.reduce(function(a, className) {
    if(!className)
        return a;
    className = className.match(/\S+/)[0];
    if(!uniques[className]) {
        a.push(className);
        uniques[className] = className;
    }
    return a;
}, []);

注意所有 return a; 语句和缺少 return;s。

演示:http://jsfiddle.net/ambiguous/bw3JS/

你也可以使用 map清理空格，然后 filter 用这样的东西清理 undefined:

return classNames.map(function(className) {
    if(!className)
        return;
    className = className.match(/\S+/)[0];
    if(!uniques[className])
        return uniques[className] = className;
}).filter(function(className) {
    return typeof className !== 'undefined';
});

演示:http://jsfiddle.net/ambiguous/8j5Bb/