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

IT技术 javascript for-loop
2021-02-20 03:03:54

在下面的对象中，我想将属性名称 , 更改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>";
   }
3个回答

这似乎可以解决问题： 

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

编辑：

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

我建议创建一个新对象而不是修改原始对象
2021-05-14 03:03:54

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

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

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

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

感谢您指出 forEach 循环。不能等到我们不需要 polyfill 为止。
2021-05-15 03:03:54
@lbstr 嘿，我遇到了这个问题，你知道我们如何在 MVC 中的控制器本身中做同样的事情吗？
2021-05-21 03:03:54

我创建了一个很好的函数来重命名属性名称：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/

其它你可能感兴趣的问题
上一篇使用 .Net 加载 DOM 并在服务器端执行 javascript 下一篇如何在客户端使用 HTML 和 Javascript 验证文件大小