对对象数组中的值执行.join

如果我有一个字符串数组，我可以使用.join()方法来获取单个字符串，每个元素用逗号分隔，如下所示:

["Joe", "Kevin", "Peter"].join(", ") // => "Joe, Kevin, Peter"

我有一个对象数组，我想对其中的值执行类似的操作;所以从

[
{name: "Joe", age: 22},
{name: "Kevin", age: 24},
{name: "Peter", age: 21}
]

只在name属性上执行join方法，以实现与前面相同的输出。

目前我有以下功能:

function joinObj(a, attr){
var out = [];


for (var i = 0; i < a.length; i++){
out.push(a[i][attr]);
}


return out.join(", ");
}

这段代码没有什么问题，它可以工作，但突然之间，我从简单、简洁的代码行变成了一个非常命令式的函数。有没有更简洁，更实用的写法呢?

337085 次浏览
小开
最佳答案

如果您想将对象映射到某些东西(在本例中是属性)。我认为Array.prototype.map是你要寻找的，如果你想编码的功能。

< a href = " http://codepen。io /不久/钢笔/ HohnI noreferrer“rel = >(小提琴)< / >

如果你想支持旧的浏览器，不是ES5兼容，你可以shim它(在上面的MDN页面上有一个填充)。另一个替代方法是使用下划线的pluck方法:

var users = [
{name: "Joe", age: 22},
{name: "Kevin", age: 24},
{name: "Peter", age: 21}
];
var result = _.pluck(users,'name').join(",")
小开

你总是可以重写对象的toString方法:

    var arr = [
{name: "Joe", age: 22, toString: function(){return this.name;}},
{name: "Kevin", age: 24, toString: function(){return this.name;}},
{name: "Peter", age: 21, toString: function(){return this.name;}}
];
         

var result = arr.join(", ");
console.log(result);

小开

我不知道是否有不使用外部库的更简单的方法，但我个人爱 underscore.js有大量用于处理数组、集合等的实用程序。

使用下划线，你可以用一行代码轻松做到这一点:

_.pluck(arr, 'name').join(', ')

小开

试试这个

var x= [
{name: "Joe", age: 22},
{name: "Kevin", age: 24},
{name: "Peter", age: 21}
]


function joinObj(a, attr) {
var out = [];
for (var i=0; i<a.length; i++) {
out.push(a[i][attr]);
}
return out.join(", ");
}


var z = joinObj(x,'name');
z > "Joe, Kevin, Peter"
var y = joinObj(x,'age');
y > "22, 24, 21"
小开

我还遇到过使用reduce方法，它是这样的:

console.log(
[
{name: "Joe", age: 22},
{name: "Kevin", age: 24},
{name: "Peter", age: 21}
]
.reduce(function (a, b) {
return (a.name || a) + ", " + b.name}
)
)

(a.name || a)是，所以第一个元素被正确处理，但其余的(其中a是字符串，因此a.name是未定义的)不被视为对象。

编辑:我现在进一步重构了它:

x.reduce(function(a, b) {return a + ["", ", "][+!!a.length] + b.name;}, "");

我相信这更清晰，因为a始终是一个字符串，b始终是一个对象(由于在reduce中使用了可选参数initialValue)

6个月后编辑:哦，我在想什么。“cleaner"。我激怒了代码之神。

小开

在node或ES6+上:

users.map(u => u.name).join(', ')
小开

假设对象数组是由变量users引用的

如果ES6可以使用，那么最简单的解决方案将是:

users.map(user => user.name).join(', ');

如果不是，和lodash可以这样使用:

 _.map(users, function(user) {
return user.name;
}).join(', ');
小开

这是我知道的一个老话题，但对任何遇到这个话题的人来说仍然非常重要。

< p >数组。map是一个很棒的方法，我一直在用。 数组中。

我个人会使用数组。这个用例的Reduce。 为什么?尽管代码稍微不那么干净/清楚。这比将map函数管道连接到连接要有效得多

这是因为数组。Map必须遍历每个元素以返回一个包含数组中对象的所有名称的新数组。数组中。Join然后循环遍历数组的内容以执行连接。

您可以通过使用模板字面值来提高jackweirdys reduce answer的可读性，使代码变成一行。"所有现代浏览器也支持"

// a one line answer to this question using modern JavaScript
x.reduce((a, b) => `${a.name || a}, ${b.name}`);
小开

如果对象和动态键:"applications\":{\"1\":\"Element1\",\"2\":\"Element2\"}

Object.keys(myObject).map(function (key, index) {
return myObject[key]
}).join(', ')
小开

不确定，但所有这些答案，虽然他们工作，但不是最优的，因为正在执行两次扫描，你可以在一次扫描中执行这一点。尽管O(2n)被认为是O(n)但有一个真正的O(n)总是更好的。

const Join = (arr, separator, prop) => {
let combined = '';
for (var i = 0; i < arr.length; i++) {
combined = `${combined}${arr[i][prop]}`;
if (i + 1 < arr.length)
combined = `${combined}${separator} `;
}
return combined;
}

这可能看起来很老派，但允许我这样做:

skuCombined = Join(option.SKUs, ',', 'SkuNum');
小开

你可以转换为数组，得到对象名

var objs = [
{name: "Joe", age: 22},
{name: "Kevin", age: 24},
{name: "Peter", age: 21}
];
document.body.innerHTML = Object.values(objs).map(function(obj){
return obj.name;
});

小开

简单的方法:

const oldArrayOfObjects = [
{name: "Bob", age:40},
{name: "Andrew", age:25},
{name: "Peter", age:30}];
const newArrayOfStringNames = oldArrayOfObjects.map((OA) => OA.name);
const newArrayOfAges = oldArrayOfObjects.map((OA) => OA.age);
console.log({newArrayOfStringNames, newArrayOfAges})

小开

这招对我很管用:

var users = [
{name: "Joe", age: 22},
{name: "Kevin", age: 24},
{name: "Peter", age: 21}
]


return users.map((user: { name: string; }) => user.name).join(", ");
小开 

const lists  = [
{name: "Joe", age: 22},
{name: "Kevin", age: 24},
{name: "Peter", age: 21}
]


const joinedStr = lists.map((list) => list.name).join(" ")


console.log('joined',joinedStr)

这应该可以做到，因为map将返回一个字符串数组，然后您可以加入它


提交答案