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

Rename the property names and change the values of multiple objects

提问by tim peterson

In the object below, I'd like to change the property name, thumb, to thumbnail. I'd also like to change the values of the titleto include <span>tags.

在下面的对象中，我想将属性名称 , 更改thumb为thumbnail。我还想更改 的值title以包含<span>标签。

Here's my object:

这是我的对象：

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

here's how I'd like it to look:

这是我希望它的外观：

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>',
}];

Here's what I've tried which doesn't work:

这是我尝试过但不起作用的方法：

 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>";
   }

回答by lbstr

This seems to do the trick:

这似乎可以解决问题：

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);

EDIT:

编辑：

I tried to make the function generic, but since you updated your answer to do very specific things, I've added the business logic to the function.

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

回答by James Allardice

You can iterate over the array, set a new property in each object, and deletethe old property:

您可以遍历数组，在每个对象中设置一个新属性，以及delete旧属性：

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

Here's a working example(check the output in the console).

这是一个工作示例（检查控制台中的输出）。

Obviously you'll want to use a polyfill for Array.prototype.forEachif you want to support older browsers (there's one in the MDN article I linked to above, or you could just use a normal forloop).

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

回答by meni181818

I have created a nice function to rename properties names: https://github.com/meni181818/simpleCloneJS/blob/master/renameProperties.js

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

example:

例子：

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'}
    };

Since you are using Jquery you can use $.eachfunction inside this function:

由于您使用的是 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;
}

demo: http://jsfiddle.net/g2jzse5k/

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