JavaScript：创建一个函数来拒绝被认为是真实的数组元素，麻烦数组对象中的值

Question

I'm working on a code challenge assignment. Create a function, reject , that takes an array and a callback function, and removes from the array any items that are found truthy when the callback function is run against them. I've written the following:

function reject(collection, callback) {

    for (var i = 0; i < collection.length; i++) {
        if(callback(collection[i]) === true){
            collection.splice(i, 1);
        }
    }

    return collection;

}

and where I'm hitting a wall is a test with an array of key-value pairs. The failing test:

var obj = {a:1, b:2, c:3, d:4};
var isOdd = function(value, key, collection) { return value % 2 !== 0; };
var evens = reject(obj, isOdd);
expect(evens).to.eql({b:2, d:4});

Lack of experience has exhausted my ability to search for answers effectively, so here we are. Any help or guidance is appreciated.

Edited to add: Misread the tests in the original instructions (then failed to catch it when copy/pasting the test). I definitely know the difference between an object and an array, just thought I saw [{a:1, b:2, c:3, d:4}] in the document but it was actually ({a:1, b:2, c:3, d:4}) for whatever reason. Sorry.

Answer 1

You have the right idea, however you need to look at the difference between a JavaScript object and array. Read this and learn the difference .

A JavaScript object does not have the property of .length to return the size of the collection. Use the following loop instead:

for (var key in collection)

A collection does not have the property .splice, that is for arrays. Instead of using .splice to remove the item use

delete collection[key]

Finally, pass the item in the collection to the callback

callback(collection[key])

Updated Answer:

function reject(collection, callback) {
    for (var key in collection) {
        if(callback(collection[key]) === true) {
            delete collection[key];
        }
    }
    return collection;
}

var obj = {a:1, b:2, c:3, d:4};     // Use for an object passed
var obj2 = [1, 2, 3, 4];            // Use as an array passed
var isOdd = function(value) { return value % 2 !== 0; };
var evens = reject(obj, isOdd);
console.log(evens);
// expect(evens).to.eql({b:2, d:4});

Answer 2

I think this is what you're trying to do?

function reject(collection, callback) {

    Object.keys(collection).forEach(function(key){
        if(callback(collection[key], key, collection)){
            delete collection[key];
        }
    });

    return collection;
}

var obj = {a:1, b:2, c:3, d:4};
var isOdd = function(value, key, collection) { return value % 2 !== 0; };
var evens = reject(obj, isOdd);
console.log(evens); //prints { b: 2, d: 4 }

Answer 3

Here's the solution I ended up with. To clarify, the tests were passing in arrays and objects, so that's why I first had trouble (with the objects) and then there was some confusion in in the answers. I wrote:

function reject(collection, callback) {
    if(Array.isArray(collection)){
        for (var i = 0; i < collection.length; i++) {
            if(callback(collection[i]) === true){
                collection.splice(i, 1);
            }
        }
    } else {
        for (number in collection){
            if(callback(collection[number]) === true){
                delete collection[number];
            }
        }
    };

    return collection;
}

I know it could likely be much cleaner, but just for the sake of clarity, I wanted to show a solution that works.

Answer 4

I have created a not() function, which accepts a function and can be passed to a filter function:

// wraps passed function, so that when called,
// the return value will be negated
function not(a){
    return function(){
        return !a.apply(a, arguments);
    }
}

Usage:

// some sample data
var animals = [
    {name: 'Pete', type: 'fish'},
    {name: 'Jim', type: 'fish'},
    {name: 'Tom', type: 'cat'}
];

// a simple filter callback
var isCat = function(animal){
    return animal.type === 'cat';
};

// gather all animals, which are not cats
var fishes = animals.filter(not(isCat));

Answer 5

I know it could likely be much cleaner

Just for the fun, here is how I alter the answer step by step to make it a bit cleaner.

Making it immutable

Changing the collection will change the original object, which is passed to the function, since arrays and objects are reference types. To solve this, you can clone the collection and work on that, or you can copy the elements, which are not rejected by the callback. I'm doing the latter.

function reject(collection, callback) {
    var ret;

    if(Array.isArray(collection)){
        ret = [];
        for (var i = 0; i < collection.length; i++) {
            if(!callback(collection[i])){
                ret.push(collection[i]);
            }
        }
    } else {
        ret = {};
        for (number in collection){
            if(!callback(collection[number])){
                ret[number] = collection[number];
            }
        }
    }

    return ret;
}

Shortening with ES5

The loops' mechanics and the actual code done by the loop is entangled, we can have a much cleaner code, if we stop concentrating on how to write a loop and let JS do it. For example: notice how I refer to the individual elements of the array collection as value , instead of collection[i] .

function reject(collection, callback) {
    var ret;

    if(Array.isArray(collection)){
        ret = [];
        collection.forEach(function(value){
            if(!callback(value)){
                ret.push(value);
            }
        });
    } else {
        ret = {};
        Object.keys(collection).forEach(function(key){
            var value = collection[key];
            if(!callback(value)){
                ret[key] = value;
            }
        });
    }

    return ret;
}

Changing if to filter()

Array.prototype.filter() is a bit more useful for us, than forEach, since in the core of the loop you can simply return a truthy or falsy value and filter will handle collecting the data to a new array based on that automatically for you.

function reject(collection, callback) {
    var ret;

    if(Array.isArray(collection)){
        ret = collection.filter(function(value){
            return !callback(value);
        });
    } else {
        ret = {};
        Object.keys(collection).filter(function(key){
            return !callback(collection[key]);
        }).forEach(function(key){
            ret[key] = collection[key];
        });
    }

    return ret;
}

Using reduce for objects

The goal would be to minimize functions, which go outside from their scope in order to work correctly. In the objects part we can use Array.prototype.reduce() instead of forEach() and simply return it's output directly to the ret value, when we are done, just as we did in the Array part with filter().

function reject(collection, callback) {
    var ret;

    if(Array.isArray(collection)){
        ret = collection.filter(function(value){
            return !callback(value);
        });
    } else {
        ret = Object.keys(collection).filter(function(key){
            return !callback(collection[key]);
        }).reduce(function(obj, key){
            obj[key] = collection[key];
            return obj;
        }, {});
    }

    return ret;
}

Shortening functions with ES6

Since we are already using Array.isArray(), which is an ES6 method, we can try using arrow functions to compress anonymus functions.

function reject(collection, callback) {
    var ret;

    if(Array.isArray(collection)){
        ret = collection.filter(value => !callback(value));
    } else {
        ret = Object.keys(collection)
            .filter(key => !callback(collection[key]))
            .reduce((obj, key) => {
                obj[key] = collection[key];
                return obj;
            }, {})
        ;
    }

    return ret;
}

We don't need the ret variable

We previously removed the need to access the ret value in our logics, we can use a ternary operator to directly return the value generated by the expressions.

function reject(collection, callback) {
    return (
        Array.isArray(collection)
        ? collection
            .filter(value => !callback(value))
        : Object.keys(collection)
            .filter(key => !callback(collection[key]))
            .reduce((obj, key) => {
                obj[key] = collection[key];
                return obj;
            }, {})
    )
}