জাভাস্ক্রিপ্ট ES6 / ES5 অ্যারে এবং পরিবর্তন খুঁজে


133

আমার কাছে বস্তুর একটি অ্যারে রয়েছে। আমি কোনও ক্ষেত্র দ্বারা সন্ধান করতে চাই এবং তারপরে এটি পরিবর্তন করতে চাই:

var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

var foundItem = items.find(x => x.id == item.id);
foundItem = item;

আমি এটি আসল বস্তু পরিবর্তন করতে চান। কিভাবে? (এটিও লোড্যাশে থাকবে কিনা আমি যত্ন নেব না)


আপনার নতুন অবজেক্টটিতে কী কী itemরয়েছে id? বা itemঅ্যারে এন্ট্রিতে অবজেক্ট থেকে সমস্ত সম্পত্তি আইডি থাকার পাশাপাশি আপনার কি মনে আছে ?
কুশিক চ্যাটার্জি

উত্তর:


250

আপনি অবজেক্টের অ্যারেতে সূচকটি সন্ধান করতে ফাইন্ড ইন্ডেক্স ব্যবহার করতে পারেন এবং এটি প্রয়োজনীয় হিসাবে প্রতিস্থাপন করতে পারেন:

var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

var foundIndex = items.findIndex(x => x.id == item.id);
items[foundIndex] = item;

এটি অনন্য আইডি গ্রহণ করে। যদি আপনার আইডিগুলি সদৃশ হয় (যেমন আপনার উদাহরণ হিসাবে), আপনি প্রতিটি জন্য ব্যবহার করা সম্ভবত এটি আরও ভাল:

items.forEach((element, index) => {
    if(element.id === item.id) {
        items[index] = item;
    }
});

16
@ জর্জি এটি যদিও নতুন অ্যারে ফিরিয়ে দেবে।
কোডিংইন্ট্রিগ

3
=> ফাংশন IE11 এ কাজ করবে না। সম্প্রতি এটি দ্বারা কামড়িত
লুইস সায়ানসি

1
এর letপরিবর্তে কীওয়ার্ডটি ব্যবহার করা ভাল হবেvar
ইনাস সাহা

শুধু এফওয়াইআই, এটি ফ্যান্টমজেএস
সিড

1
আমি @ জর্জি যে ওয়ান-লাইনার ব্যবহার করে তার পরিবর্তে @ কোডিংইন্ট্রিগ ব্যবহার করে আরও ভার্বোজ পদ্ধতি পছন্দ করি map। কী চলছে তা নির্ধারণ করার জন্য কম মানসিক জিমন্যাস্টিকের প্রয়োজন। কোডের অতিরিক্ত লাইনটি মূল্যবান।
জোশুয়া পিন্টার

44

আমার সেরা পন্থাটি হ'ল:

var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

items[items.findIndex(el => el.id === item.id)] = item;

ফাইন্ড ইন্ডেক্সের জন্য রেফারেন্স

এবং যদি আপনি নতুন অবজেক্টের সাথে প্রতিস্থাপন করতে না চান তবে এর ক্ষেত্রগুলি অনুলিপি করার পরিবর্তে আপনি itemব্যবহার করতে পারেনObject.assign :

Object.assign(items[items.findIndex(el => el.id === item.id)], item)

এর সাথে বিকল্প হিসাবে .map():

Object.assign(items, items.map(el => el.id === item.id? item : el))

কার্যকরী পদ্ধতির :

অ্যারে সংশোধন করবেন না, একটি নতুন ব্যবহার করুন, যাতে আপনি পার্শ্ব প্রতিক্রিয়া তৈরি করেন না

const updatedItems = items.map(el => el.id === item.id ? item : el)

1
মূল প্রশ্নটি ইংরাজীতে থাকলে দয়া করে কোনও ইংরেজি পৃষ্ঠায় লিঙ্ক করুন। এছাড়াও, এই উদাহরণটি ধরে নেয় বস্তুটি সর্বদা পাওয়া যায়।
45 এ বিরল

1
আপনি এটিকে সর্বদা চেষ্টা ধরার এক্সপ্রেশনটিতে আবদ্ধ করতে পারেন ঠিক তখনই?
সোলডেপ্লাটা সাকেটোস

1
এবং পোস্টগুলির প্রশ্নের সম্পূর্ণ আক্ষরিক হয়ে, তিনি একটি অ্যারেতে একটি উপাদান সম্পাদনা করতে চান। তিনি জানতে চান না এটি বিদ্যমান আছে কি নেই, তাই আমরা ধরে নিই যে তিনি ইতিমধ্যে এটি আগে করেছিলেন।
সলডেপ্লাটা সাকেটোস

@ সলডপ্লাটাসেকটোস হ্যাঁ, আপনি এটি একটিতে মুড়ে ফেলতে পারেনtry/catch , তবে আপনার করা উচিত নয়, কারণ উপাদান খুঁজে পাওয়া ব্যতিক্রমী ঘটনা নয়; এটি একটি স্ট্যান্ডার্ড কেস যার জন্য আপনার ফিরে আসার মানটি পরীক্ষা করে অ্যাকাউন্ট করা উচিত findIndexএবং তারপরে উপাদানটি পাওয়া গেলে কেবল অ্যারে আপডেট করে ating
ওয়েইন

20

অন্য একটি পদ্ধতির স্প্লাইস ব্যবহার করা হয় ।

দ্য splice()পদ্ধতি সরানোর বা বিদ্যমান উপাদান প্রতিস্থাপন এবং / অথবা নতুন উপাদান যোগ করে একটি অ্যারের বিষয়বস্তু পরিবর্তন জায়গায়

নোট: আপনি প্রতিক্রিয়াশীল ফ্রেমওয়ার্কের সাথে যদি কাজ করছেন তবে এটি "ভিউ" আপডেট করবে, আপনার অ্যারে আপনাকে "আপডেট" আপডেট করেছে।

উত্তর :

var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

let foundIndex = items.findIndex(element => element.id === item.id)
items.splice(foundIndex, 1, item)

আর যদি আপনি শুধুমাত্র একটি আইটেম এর একটি মান পরিবর্তন করতে চান, আপনি ব্যবহার করতে পারেন খোঁজ ফাংশন:

// Retrieve item and assign ref to updatedItem
let updatedItem = items.find((element) => { return element.id === item.id })

// Modify object property
updatedItem.aProp = ds.aProp

14

পরিবর্তিত বস্তু এবং একটি অ্যারে দেওয়া:

const item = {...}
let items = [{id:2}, {id:3}, {id:4}];

অ্যারের উপরে পুনরাবৃত্তি করে নতুন অবজেক্টের সাথে অ্যারে আপডেট করুন:

items = items.map(x => (x.id === item.id) ? item : x)

দয়া করে কেবল কোড পেস্ট করবেন না। কী করা হচ্ছে তা ব্যাখ্যা করুন এবং এটি কীভাবে সমস্যার সমাধান করে।
স্পেন্সার

1
আমি মনে করি এটি সেরা সমাধান কারণ এটি সেরা পারফরম্যান্স হওয়ায় এটি একবারে অ্যারের উপরে চলে যায় এবং অ্যারের রেফারেন্সও পরিবর্তন করে, তাই এটি পরিবর্তনীয় পরিস্থিতি এড়াতে পারে
ওহাদ সদন

6

ফিল্টার ব্যবহার হতে পারে ।

const list = [{id:0}, {id:1}, {id:2}];
let listCopy = [...list];
let filteredDataSource = listCopy.filter((item) => {
       if (item.id === 1) {
           item.id = 12345;
        }

        return item;
    });
console.log(filteredDataSource);

অ্যারে [অবজেক্ট {আইডি: 0}, অবজেক্ট {আইডি: 12345}, অবজেক্ট {আইডি: 2}]


আমি ফিল্টারটি পছন্দ করি কারণ এটি একটি নতুন অ্যারে তৈরি করতে দেয় এবং এর জন্য অস্তিত্বহীন এন্ট্রিগুলিও 'মুছে ফেলা হয়'
pngggi

0

আমার জন্য কাজ

let returnPayments = [ ...this.payments ];

returnPayments[this.payments.findIndex(x => x.id == this.payment.id)] = this.payment;

1
দয়া করে কেবল কোড পেস্ট করবেন না। কী করা হচ্ছে তা ব্যাখ্যা করুন এবং এটি কীভাবে সমস্যার সমাধান করে।
এড্রিয়ান মোল

গৃহীত সর্বাধিক উত্সাহিত উত্তর খুব আলাদা নয়, তবুও আপনি তাদের উত্তর আপডেট করার দিকে ইঙ্গিত করেননি .. কেন এটি?
লি এক্স

0

যদিও বেশিরভাগ বিদ্যমান উত্তরগুলি দুর্দান্ত, আমি লুপের জন্য একটি traditionalতিহ্যবাহী ব্যবহার করে একটি উত্তর অন্তর্ভুক্ত করতে চাই, যা এখানেও বিবেচনা করা উচিত। ওপি একটি উত্তর অনুরোধ করে যা ES5 / ES6 সামঞ্জস্যপূর্ণ এবং লুপের জন্য traditionalতিহ্যগত প্রযোজ্য :)

এই দৃশ্যে অ্যারে ফাংশনগুলি ব্যবহার করার ক্ষেত্রে সমস্যাটি হ'ল তারা বস্তুগুলিকে রূপান্তরিত করে না, তবে এই ক্ষেত্রে, রূপান্তর একটি প্রয়োজনীয়তা। লুপের জন্য একটি traditionalতিহ্যবাহী ব্যবহারের পারফরম্যান্স লাভ কেবল একটি (বিশাল) বোনাস।

const findThis = 2;
const items = [{id:1, ...}, {id:2, ...}, {id:3, ...}];

for (let i = 0, l = items.length; i < l; ++i) {
  if (items[i].id === findThis) {
    items[i].iAmChanged = true;
    break;
  }
}

যদিও আমি অ্যারে ফাংশনগুলির দুর্দান্ত অনুরাগী, তবুও সেগুলি আপনার সরঞ্জামবাক্সের একমাত্র সরঞ্জাম হতে দেবেন না। উদ্দেশ্যটি যদি অ্যারেটি পরিবর্তন করে চলেছে তবে সেগুলি সেরা ফিট নয়।


0

ওয়ান-লাইনার স্প্রেড অপারেটর ব্যবহার করে।

 const updatedData = originalData.map(x => (x.id === id ? { ...x, updatedField: 1 } : x));
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.