未在循环中调用接头，在数组中找不到ID

Question

I'm trying to splice an array by parameter given from an onClick element like deleteFavourite(2) . Three console logs show: id (2), fired message, and saved message, but the spliced message is ignored. Why is it not hitting the if?

Function:

deleteFavourite: function (id) {
    console.log(id);
    console.log("fired");
    var array = this.favourites;
    for (var i = 0; i < array.length; i++) {
        if (array[i] === id) {
            array.splice(i, 1);
            console.log("spliced");
        }
    }
    this.save();
    console.log("saved");
}

The array is outputted like this in Chrome

Array(3)
0: {id: 0, title: "↵Page 0    ", url: "/page-0/"}
1: {id: 1, title: "↵Social media    ", url: "/social-media/"}
2: {id: 2, title: "↵Get involved    ", url: "/get-involved/"}
length: 3
__proto__: Array(0)

Answer 1

Because you're working with an array containing plain objects, so your control should be:

    deleteFavourite: function (id) {
    console.log(id);
    console.log("fired");
    var array = this.favourites;
    for (var i = 0; i < array.length; i++) {
        if (array[i].id === id) { 
            array.splice(i, 1);
            console.log("spliced");
        }
    }
    this.save();
    console.log("saved");
}

Indeed, you want to compare the id inside the array with the int you passed as a parameter.

Otherwise, you're comparing an object (the array[i] is an object containing 3 attributes) to an int, which will never result as true.

Answer 2

I guess you don't need to loop your array for that. To make it work as it is try to not compare in if statement the whole section of array to a number but only iteration of your array with a number. In my opinion this should look like this first check if element of array exist then slice it.

if (array[id]) {
    array.splice(id, 1);
    console.log("spliced");
}

Answer 3

Try:

deleteFavourite: function (id) {
    console.log("deleteFavourite: ", id);
    var array = this.favourites;

    for (var i = 0; i < array.length; i++) {
        if (array[i].id === id) {  // <---- MY CHANGE
            array.splice(i, 1);
            console.log("spliced");
        }
    }
    this.save();
    console.log("saved");
}

You should have used array[i].id since the index of the items in your array does not match the actual id index.

Using ES2015 findIndex :

deleteFavourite: function (id) {
    var array = this.favourites,
        index = array .findIndex(item => item.id == id);

    if( index > -1 ){
        array.splice(index, 1);
        this.save();
    }
}