অবজেক্টের অ্যারেতে .জাইন করুন


273

আমার কাছে যদি স্ট্রিংগুলির একটি অ্যারে থাকে, তবে আমি .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(", ");
}

এই কোডটিতে কোনও ভুল নেই, এটি কাজ করে, তবে হঠাৎ করেই আমি কোডের একটি সহজ, সংযোগকারী রেখাটি থেকে একটি অতি আবশ্যক ফাংশনে চলে গিয়েছি। এটি লেখার আরও একটি সংক্ষিপ্ত, আদর্শভাবে আরও কার্যকর পদ্ধতি আছে?


1
উদাহরণ হিসাবে একটি ভাষা ব্যবহার করার জন্য, এটি করার একটি পাইথোনিক পদ্ধতিটি হ'ল" ,".join([i.name for i in a])
জ্যাকওয়ার্ডি

6
ES6 আপনি এই কাজ করতে পারে: users.map(x => x.name).join(', ');
টটিমেডলি

উত্তর:


496

আপনি যদি কিছুতে অবজেক্টগুলিকে মানচিত্র করতে চান (এই ক্ষেত্রে কোনও সম্পত্তি)। আমি মনে করি Array.prototype.mapআপনি কার্যকরভাবে কোড করতে চাইলে আপনি যা খুঁজছেন তা হ'ল।

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

আধুনিক জাভাস্ক্রিপ্টে:

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

(বেহালার)

আপনি যদি পুরানো ব্রাউজারগুলিকে সমর্থন করতে চান তবে এটি ES5 অনুসারে নয় তবে আপনি এটি শিহর করতে পারেন (উপরে MDN পৃষ্ঠায় একটি পলিফিল রয়েছে)। অন্য বিকল্প হ'ল আন্ডারস্কোরসের pluckপদ্ধতি ব্যবহার করা :

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

1
এইটা. তবে আপনার যদি এই রেট্রো-ব্রাউজারগুলিকে সমর্থন করতে হয় তবে আপনাকে আই <9 এর জন্য ম্যাপ প্রোটোটাইপ সদস্যকে শিম করতে হবে।
টম্মি

@ টম্মি ভাল মন্তব্য। আমি একটি পলিফিল সম্পর্কে ব্যাখ্যা এবং পাশাপাশি আন্ডারস্কোর ব্যবহার করে প্লাক ব্যবহার করার পরামর্শও যুক্ত করেছি।
বেনিয়ামিন গ্রুইনবাউম

@ জ্যাকউয়ার্ডি আমি আনন্দিত যে আমি সাহায্য করতে পেরেছি :) এর মূল্য কী, ঠিক যেমন মানচিত্র / হ্রাস / ফিল্টার 'পাইথোনিক' নয় এবং বোধগম্যতা অন্যভাবে রয়েছে। জাভাস্ক্রিপ্টের নতুন বৈশিষ্ট্যে চলছে (সুরেলা) পাশাপাশি ইতিমধ্যে কিছু ব্রাউজার (ফায়ারফক্স) আপনার কাছে পাইথোনিক বোধগম্যতা রয়েছে। আপনি করতে পারেন [x.name for x of users]( নির্দিষ্ট উইকি.সেমাস্ক্রিপ্ট.আর / ডোকু.পিপি ? আইডি> সারণি: অ্যারে_কম্পিয়ারেন্স )। উল্লেখযোগ্যভাবে উল্লেখ করা যে মানচিত্র / হ্রাস / ফিল্টার ব্যবহারের মতো খুব সম্ভবত 'জাভাস্ক্রিপ্ট'-তে অন্য যেভাবে পাইথোনিক থাকে না। CoffeeScript তাদের যদিও সঙ্গে শীতল coffeescript.org
বেনিয়ামিন গ্রুইনবাউম

কেবলমাত্র একটি আপডেট - অ্যারে উপলব্ধিগুলি ES6 এর বাইরে ফেলে দেওয়া হয়েছে, সম্ভবত আমরা সেগুলি ES7 এ পেয়ে যাব।
বেনজামিন গ্রুইনবাউম

কফিস্ক্রিপ্টে:users.map((obj) -> obj.name).join(', ')
কেশা আন্তোনভ

71

ভাল আপনি সর্বদা 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"

2
এটি একটি দুর্দান্ত আকর্ষণীয় পদ্ধতির, আমি বুঝতে পারিনি যে আপনি জেএসে এটি করতে পারবেন could যদিও ডেটা একটি এপিআই থেকে আসছে, সুতরাং এটি সম্ভবত আমার ব্যবহারের ক্ষেত্রে উপযুক্ত নয়, তবে এটি অবশ্যই চিন্তার জন্য খাদ্য।
জ্যাকওয়ার্ডি

3
খুব DRY বলে মনে হচ্ছে না
BadHorsie

3
@ বাদহর্সি না, এটি শুকনো নয়। তবে অবশ্যই আপনি অ্যারের বাইরে একটি ফাংশন সংজ্ঞায়িত করতে পারেন এবং তারপরে toStringএকটি লুপ ব্যবহার করে সমস্ত আইটেমের পদ্ধতিতে এই ফাংশনটি নির্ধারণ করতে পারেন । অথবা আপনি কনস্ট্রাক্টরের সম্পত্তিতে একটি toStringপদ্ধতি যুক্ত করে কন্সট্রাক্টর ফাংশনগুলির সাথে ডিল করার সময় এই পদ্ধতিটি ব্যবহার করতে পারেন prototype। এই উদাহরণটি কেবলমাত্র প্রাথমিক ধারণাটি দেখানোর কথা ছিল।
বেসিলিকুম

13

আমি 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.nameundefined হয়) একটি বস্তু হিসাবে গণ্য করা হয় না।

সম্পাদনা করুন: আমি এখন এটিকে আরও রিফেক্টর করেছি:

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

যা আমি বিশ্বাস করি যেমন ক্লিনার aসবসময় একটি স্ট্রিং, bসবসময় একটি বস্তু (ব্যবহারের কারণে ঐচ্ছিক initialValue পরামিতি মধ্যে reduce)

6 মাস পরে সম্পাদনা করুন: ওহ আমি কী ভাবছিলাম। "পরিষ্কারক". আমি কোড গডসে রেগে গেছি।


ধন্যবাদ: ডি এর reduceমতো ব্যাপকভাবে সমর্থিত নয় map(যা তারা অদ্ভুত, যদিও তারা ধরণের বোন হয়) তাই আমি এখনও আপনার উত্তরটি ব্যবহার করছি :)
জ্যাকওয়ার্ডি

আমার সম্পাদনাটি 6 মাস পরে দেখে, আমি এখন সিদ্ধান্ত নিয়েছি যে আমি নিজেকে নিয়োগ করব না ... এটি ধূর্ত, তবে পরিষ্কার নয়।
জ্যাকউয়ার্ডি

9

আমি সেখানে একটি বহিস্থিত গ্রন্থাগার ব্যবহার না করেই তা করতে একটি সহজ উপায় যদি জানি না, কিন্তু আমি ব্যক্তিগতভাবে ভালবাসেন underscore.js যা দিয়ে অ্যারে সংগ্রহগুলি ইত্যাদি মোকাবেলার জন্য ইউটিলিটি টন হয়েছে

আন্ডারস্কোর দিয়ে আপনি কোডের একটি লাইন দিয়ে সহজেই এটি করতে পারেন:

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


আমি এর আগে আন্ডারস্কোরটি ছুঁড়ে ফেলেছি, আমি নেটিভ
জেএসে এটি করার উপায়ের জন্য আশা করছিলাম

( arrস্বাভাবিকভাবে আপনার অ্যারে কোথায় )
এড হিঙ্কলিফ

যথেষ্ট ফর্সা! আমি নিজেকে এখন পুরো জায়গা জুড়ে আন্ডারস্কোর ব্যবহার করে দেখতে পাই তাই এটি কোনও সমস্যা নয়।
এড হিঙ্কলিফ


3

আসুন অবজেক্ট অ্যারে ভেরিয়েবল দ্বারা রেফারেন্স করা হয় users

যদি ES6 ব্যবহার করা যায় তবে সবচেয়ে সহজ সমাধানটি হ'ল:

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

যদি তা না হয় এবং লোডাশ ব্যবহার করা যায় তবে:

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

1

যদি বস্তু এবং গতিশীল কীগুলি: "applications\":{\"1\":\"Element1\",\"2\":\"Element2\"}

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

0

একটি পুরাতন থ্রেড আমি জানি তবে এখনও এটির সাথে আসা কারও পক্ষে প্রাসঙ্গিক।

অ্যারে.ম্যাপটি এখানে পরামর্শ দেওয়া হয়েছে যা একটি দুর্দান্ত পদ্ধতি যা আমি সর্বদা ব্যবহার করি। অ্যারে.রেডুসও উল্লেখ করা হয়েছিল ...

আমি ব্যক্তিগতভাবে এই ব্যবহারের ক্ষেত্রে একটি অ্যারে ড্রেস ব্যবহার করব। কেন? কোডটি কিছুটা কম পরিষ্কার / পরিষ্কার থাকা সত্ত্বেও। যোগদানের জন্য মানচিত্রের ফাংশনটি পাইপ করার চেয়ে এটি অনেক বেশি কার্যকর।

এর কারণ হ'ল অ্যারে.ম্যাপকে অ্যারের মধ্যে থাকা অবজেক্টের সমস্ত নাম সহ একটি নতুন অ্যারে ফেরত দিতে প্রতিটি উপাদানকে লুপ করতে হয়। অ্যারে.জোঁইন জোড় সম্পাদন করতে অ্যারের সামগ্রীর উপর লুপ করে।

কোডটি একক লাইনে পাওয়ার জন্য আপনি জ্যাকউয়ার্ডিসের পাঠযোগ্যতার উন্নতি করতে পারেন টেমপ্লেট আক্ষরিক ব্যবহার করে উত্তর হ্রাস করতে। "সমস্ত আধুনিক ব্রাউজারেও সমর্থিত"

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

0

নিশ্চিত নয়, তবে এই সমস্ত উত্তরগুলি তারা কাজ করে তবে অপটিমল নয় যেহেতু দুটি স্ক্যান করছে এবং আপনি এটি একটি একক স্ক্যানে সম্পাদন করতে পারেন। যদিও ও (2 এন) কে ও (এন) হিসাবে বিবেচনা করা হয় তবে সর্বদা সত্য ও (এন) থাকা ভাল।

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

-1

এটা চেষ্টা কর

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"

2
এটি প্রশ্নে ফাংশনটির সমান, কম বহুমুখী বাদে কারণ আপনি nameগুণটি কঠোরভাবে কোড করেছেন । ( আপনার ফাংশনের যুক্তিটি ব্যবহার a[i].nameকরে নাname , এটি সমান a[i]['name']))
nnnnnn
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.