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

【问题标题】：Rename the property names and change the values of multiple objects重命名属性名称并更改多个对象的值
【发布时间】：2012-05-30 15:54:00
【问题描述】：

在下面的对象中，我想将属性名称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>";
   }

【问题讨论】：

您是否在寻求一种方法来而不是手动执行此操作？如果是这样，你应该在你的帖子中澄清。
@HunterMcMillen 询问我将如何使用 javascript 以编程方式完成此操作。我假设我需要一个 for 循环，但无法让它工作。我会在我的帖子中澄清。

标签： javascript for-loop

【解决方案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);

编辑：

我试图使函数具有通用性，但是由于您更新了答案以执行非常具体的事情，因此我已将业务逻辑添加到函数中。

【讨论】：

我建议创建一个新对象而不是修改原始对象

【解决方案2】：

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

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

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

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

【讨论】：

感谢您指出 forEach 循环。等不及我们不需要 polyfill 了。
@lbstr 嘿，我遇到了这个问题，你知道我们如何在 MVC 中的控制器本身中做同样的事情

【解决方案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/

【讨论】：