谁能帮助解释这个JavaScript算法[] .filter.call() [英] Who can help to explain this JavaScript algorithm [].filter.call()

问题描述

我有任务从字符串中按顺序接收唯一元素作为参数.我不明白此函数 uniqueElements 如何返回['A','B','C','B'].

I have task to receive unique element in order from string as parameter. I do not understand how this function uniqueElements returns ['A','B','C','B'].

var word = "AAAABBBBCCBB";
var uniqueElements = function(word) {
    return [].filter.call(word, (function(elem,index) {
        return word[index-1] !== elem
    }));
}    
uniqueElements(word);      
//it should return ['A','B','C','B']

我检查并阅读了以下资料:

I checked and read the following sources:

MDN Mozilla 和 JS博客，但没有成功.

MDN Mozilla and JS Blog but without success.

推荐答案

[].filter.call的目的是在字符串上应用filter方法.天真的，您首先会尝试这样做:

The aim of [].filter.call here is to apply the filter method on a string. Naively you would first try to do this:

return word.filter(function(elem,index) {
    return word[index-1] !== elem;
});

...-如果word是一个数组-将会返回其中满足条件word[index-1] !== elem(它是word[index-1] !== word[index]的缩写)的字符，即每个不同于该字符的字符在它之前.

... which -- if word were an array -- would return the characters in it that satisfy the condition word[index-1] !== elem (which is short for word[index-1] !== word[index]), i.e. each character that is different from the character that precedes it.

但是，filter方法仅存在于从Array原型继承的对象上，而字符串不是这种情况.

But, the filter method only exists on objects that inherit from the Array prototype, which is not the case for strings.

但是，filter本身 可以处理类似数组的对象，即具有length并可能具有数字属性的对象.要在没有真正的Array对象的情况下调用filter，可以在该函数上使用call，然后提供上下文(即类似数组的对象)作为第一个参数.其他参数保持不变.因此，您首先需要知道在哪里找到filter方法...它在Array.prototype上，因此您将像这样引用它:

However, filter itself can deal with array-like objects, i.e. objects that have a length and potentially have properties that are numerical. To call filter without a true Array object, you can use call on that function, and then provide the context (i.e. the array-like object) as first argument. The other argument(s) remain the same. So you first need to know where to find the filter method... It is on the Array.prototype, so you would reference it like this:

Array.prototype.filter

但是，由于所有数组都可以使用此方法，因此，仅获取一个空数组并引用其filter方法会更短:

But as all arrays have access to this method, it is shorter to just take an empty array, and reference its filter method:

[].filter

两者中的任何一个都可以工作.现在，您必须在其上执行call方法，并提供要迭代的类似数组的对象:

Either of the two will work. Now you have to execute the call method on it, and supply the array-like object you want to iterate over:

[].filter.call(words, ...)

其余的就像您将使用一个真正的数组一样:您提供了回调函数:

The rest is like you would do with a true array: you provide the callback function:

return [].filter.call(word, function(elem,index) {
    return word[index-1] !== elem
});

返回值不再是字符串.就像filter总是返回-那样的数组:一个 real 一个数组-它是由filter方法创建的.

The return value is no longer a string. It is -- like filter always returns -- an array: a real one -- it is created by the filter method.

在ES6中，您可以用更易读的方式编写此代码，因为现在有了Array.from方法，该方法可以将类似数组的对象转换为真正的数组.然后，您可以继续使用filter方法:

In ES6 you can write this in a more readable way, as there now is the Array.from method, which can turn an array-like object to a true array. And then you can just continue with the filter method:

return Array.from(word).filter(function(elem,index) {
    return word[index-1] !== elem
});

价差运算符是ES6提供的另一种替代方法:

The spread operator is yet another alternative provided by ES6:

return [...word].filter(function(elem,index) {
    return word[index-1] !== elem
});

这篇关于谁能帮助解释这个JavaScript算法[] .filter.call()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！