如果我有一个字符串数组,我可以使用.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(", ");
}

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


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

(小提琴)

如果你想支持不兼容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",年龄:22岁,toString: function(){返回this.name;}}, {name:“Kevin”,年龄:24,toString: function(){返回this.name;}}, {name: "Peter",年龄:21岁,toString: function(){返回this.name;}} ]; Var结果= arr。加入(","); console.log(结果);


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

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

_。拔(arr的名字”)。加入(" ")


试试这个

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 ( [ {名字:“乔”,年龄:22岁}, {姓名:“凯文”,年龄:24}, {姓名:“彼得”,年龄:21岁} ] .reduce(函数(a, b) { 返回(a.name || a) + ", " + b.name} ) )

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

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

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

我相信这是干净的,因为a始终是一个字符串,b始终是一个对象(由于使用可选的initialValue参数在减少)

6个月后编辑:哦,我在想什么。“清洁”。我激怒了代码之神。


在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(', ');

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

数组中。map是一个很棒的方法,我一直在用。 数组中。还提到了Reduce…

我个人会使用数组。这个用例的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}`);

如果对象和动态键:“应用程序\”:{\“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 = [ {名字:“乔”,年龄:22岁}, {姓名:“凯文”,年龄:24}, {姓名:“彼得”,年龄:21岁} ]; document.body.innerHTML = Object.values(objs).map(函数(obj){ 返回obj.name; });


简单的方法:

const oldArrayOfObjects = [ {姓名:“鲍勃”,年龄:40}, {姓名:“安德鲁”,年龄:25}, {姓名:“Peter”,年龄: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 = [ {名字:“乔”,年龄:22岁}, {姓名:“凯文”,年龄:24}, {姓名:“彼得”,年龄:21岁} ] const joinedStr = lists.map((list) => list.name).join(" ") console.log(“加入”,joinedStr)

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