重命名属性名称并更改多个对象的值

Question

在下面的对象中,我想将属性名称更改thumb为thumbnail.我还想更改titleto include <span>标记的值.

这是我的目标:

var data = [{
    thumb: '/images/01.png',
    title: 'My title',
},{
    thumb: '/images/02.png',
    title: 'My title',
},{
    thumb: '/images/03.png',
    title: 'My title',
}];

这是我想要的样子:

var data = [{
    thumbnail: '/images/01.png',
    title: '<span class="red">title 1</span>',
},{
    thumbnail: '/images/02.png',
    title: '<span class="red">title 2</span>',
},{
    thumbnail: '/images/03.png',
    title: '<span class="red">title 3</span>',
}];

这是我尝试过的不起作用:

 var i=0, count=data.length;
   for (i=0;i<=count;i++){
    data[i].thumbnail=data[i].thumb;
    data[i].title="<span class='red'>"+data[i].title+"<span>";
   }

Answer 1

这似乎可以解决问题:

function changeData(data){
    var title;
    for(var i = 0; i < data.length; i++){
        if(data[i].hasOwnProperty("thumb")){
            data[i]["thumbnail"] = data[i]["thumb"];
            delete data[i]["thumb"];
        }

        if(data[i].hasOwnProperty("title")){ //added missing closing parenthesis
            title = data[i].title;
            data[i].title = '<span class="red">' + title + '</span>';
        }
    }
}

changeData(data);

编辑:

我试图让函数变得通用,但是既然你更新了你的答案来做非常具体的事情,我就把业务逻辑添加到了函数中.

Answer 2

您可以迭代数组,在每个对象中设置一个新属性,以及delete旧属性:

data.forEach(function(e) {
   e.thumbnail = e.thumb;
   delete e.thumb;    
});

这是一个工作示例(检查控制台中的输出).

显然,Array.prototype.forEach如果你想支持旧浏览器,你会想要使用polyfill (在我上面链接的MDN文章中有一个,或者你可以使用普通for循环).