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

Question

在下面的对象中，我想将属性名称thumb更改为thumbnail。我还想将title的值更改为包含<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

您可以iterate over the array，在每个对象中设置新属性，并delete旧属性：

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

这是working example（检查控制台中的输出）。

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

Answer 3

我创建了一个很好的函数来重命名属性名称：https://github.com/meni181818/simpleCloneJS/blob/master/renameProperties.js

示例：

var sourceObj = {
    foo: 'this is foo',
    bar: {baz: 'this is baz',
          qux: 'this is qux'}
};
//                                the source, rename list
var replacedObj = renameProperties(sourceObj, {foo: 'foooo', qux: 'quxxxx'});
// replacedObj output => {
        foooo: 'this is foo',
        bar: {baz: 'this is baz',
              quxxxx: 'this is qux'}
    };

由于您使用的是Jquery，因此可以在此函数中使用$.each函数：

function renameProperties(sourceObj, replaceList, destObj) {
    destObj = destObj || {};
    $.each(sourceObj, function(key) {
        if(sourceObj.hasOwnProperty(key)) {
            if(sourceObj[key] instanceof Array) {
                if(replaceList[key]) {
                    var newName = replaceList[key];
                    destObj[newName] = [];
                    renameProperties(sourceObj[key], replaceList, destObj[newName]);
                } else if(!replaceList[key]) {
                    destObj[key] = [];
                    renameProperties(sourceObj[key], replaceList, destObj[key]);
                }
            } else if(typeof sourceObj[key] === 'object') {
                if(replaceList[key]) {
                    var newName = replaceList[key];
                    destObj[newName] = {};
                    renameProperties(sourceObj[key], replaceList, destObj[newName]);
                } else if(!replaceList[key]) {
                    destObj[key] = {};
                    renameProperties(sourceObj[key], replaceList, destObj[key]);
                }
            } else {
                if(replaceList[key]) {
                    var newName = replaceList[key];
                    destObj[newName] = sourceObj[key];
                } else if(!replaceList[key]) {
                    destObj[key] = sourceObj[key];
                }
            }
        }
    });
    return destObj;
}

演示：http://jsfiddle.net/g2jzse5k/