객체 배열의 값에 대해 .join 수행

문자열 배열이 있으면 .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 페이지에 폴리 필이 있음). 또 다른 대안은 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)첫번째 요소가 올바르게 처리되지만, 나머지는 (여기서 그렇다 a문자열이기 때문에 a.name대상으로 취급되지 정의되지 않는다).

편집 : 나는 이제 이것을 더 리팩토링했습니다.

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

a항상 문자열 처럼 깨끗하고 항상 b객체입니다 (의 선택적 initialValue 매개 변수 를 사용하기 때문에 reduce)

6 개월 후 편집 : 오, 내가 생각한 것. "청소기". 나는 코드 신들을 화나게했다.

외부 라이브러리를 사용하지 않고 쉽게 할 수있는 방법이 있는지 모르겠지만 개인적 으로 배열, 컬렉션 등을 처리하기위한 수많은 유틸리티가있는 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를 사용합니다. 왜? 코드가 약간 덜 깨끗하지만 명확합니다. 맵 기능을 조인에 파이프하는 것보다 훨씬 효율적입니다.

그 이유는 Array.map이 각 요소를 반복하여 배열의 객체 이름이 모두 포함 된 새 배열을 반환해야하기 때문입니다. 그런 다음 Array.join은 배열의 내용을 반복하여 결합을 수행합니다.

템플릿 리터럴을 사용하여 코드를 한 줄로 가져 오면 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"