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：

filter()方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

回调的返回值告诉filter classNames的哪些元素应该通过，返回值只是测试真实性。 filter未返回回调的返回值，classNames中的原始未触动值为。{1}}。所以问题不在于增加了额外的空间，问题在于没有任何东西正在移除空间。

如果您想同时进行测试和修改，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/

函数向数组项添加空格

1 个答案: