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

2020/10/07 13:21 · javascript ·  · 0评论

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

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

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

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

join仅对name属性执行该方法,以实现与以前相同的输出。

目前,我具有以下功能:

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

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

  return out.join(", ");
}

该代码没有任何问题,它可以正常工作,但是突然之间,我已经从简单,简洁的代码行变成了非常必要的功能。有没有更简洁,更理想的功能编写方式?

如果要将对象映射到某物(在这种情况下为属性)。Array.prototype.map如果您想进行功能编码,我认为您正在寻找的是。

[
  {name: "Joe", age: 22},
  {name: "Kevin", age: 24},
  {name: "Peter", age: 21}
].map(function(elem){
    return elem.name;
}).join(",");

在现代JavaScript中:

[
  {name: "Joe", age: 22},
  {name: "Kevin", age: 24},
  {name: "Peter", age: 21}
].map(e => e.name).join(",");

(小提琴)

如果要支持不兼容ES5的旧版浏览器,可以对其进行填充(上面的MDN页面上有一个polyfill)。另一种选择是使用underscorejs的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(", ");
//result = "Joe, Kevin, Peter"

我也遇到过使用该reduce方法的情况,它看起来像这样:

[
  {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)is可以正确处理第一个元素,但不会将其余元素(其中a是字符串,因此a.name未定义)视为对象。

编辑:我现在将其进一步重构为:

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

我相信这是吸尘器,a始终是一个字符串,b始终是一个对象(由于使用的可选参数初值reduce

六个月后编辑:哦,我在想什么。“清洁器”。我激怒了众神密码。

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

使用下划线,您可以使用一行代码轻松完成此操作:

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

在节点或ES6 +上:

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

可以说对象数组由变量引用 users

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

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

如果没有,可以使用lodash

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

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

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

我知道一个旧线程,但仍然与遇到此问题的任何人都非常相关。

这里建议使用Array.map,这是我一直使用的很棒的方法。还提到了Array.reduce ...

我将针对此用例亲自使用Array.reduce。为什么?尽管代码不太干净/清晰。这比将map函数传递给联接的效率要高得多。

这样做的原因是因为Array.map必须遍历每个元素才能返回具有该数组中所有对象名称的新数组。然后Array.join循环遍历array的内容以执行连接。

通过使用模板文字将代码放在一行上,可以提高jackweirdys减少答案的可读性。“所有现代浏览器也都支持”

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

不能确定,但​​是所有这些答案都可以正常工作,但不是最佳选择,因为它们正在执行两次扫描,您可以在一次扫描中执行此操作。即使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 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"
本文地址:http://javascript.askforanswer.com/duiduixiangshuzuzhongdezhizhixing-join.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!