मैं जावास्क्रिप्ट में एक सरणी की शुरुआत में नए सरणी तत्व कैसे जोड़ सकता हूं?


1583

मुझे किसी सरणी की शुरुआत में तत्वों को जोड़ने या पूर्व-निर्धारित करने की आवश्यकता है।

उदाहरण के लिए, यदि मेरी सरणी नीचे की तरह दिखती है:

[23, 45, 12, 67]

और मेरे AJAX कॉल की प्रतिक्रिया है 34, मैं चाहता हूं कि अद्यतन सरणी निम्न की तरह हो:

[34, 23, 45, 12, 67]

वर्तमान में मैं इसे इस तरह से करने की योजना बना रहा हूं:

var newArray = [];
newArray.push(response);

for (var i = 0; i < theArray.length; i++) {
    newArray.push(theArray[i]);
}

theArray = newArray;
delete newArray;

क्या ऐसा करने का कोई बेहतर तरीका है? क्या जावास्क्रिप्ट में कोई अंतर्निहित कार्यक्षमता है जो ऐसा करती है?

मेरी पद्धति की जटिलता है O(n)और बेहतर क्रियान्वयन देखना वास्तव में दिलचस्प होगा।


9
FYI करें: यदि आपको किसी ऐरे की शुरुआत में किसी तत्व को लगातार सम्मिलित करने की आवश्यकता है, तो हर समय pushकॉल करने reverseके बजाए कॉल के बाद स्टेटमेंट का उपयोग करना तेज़ होता है unshift
जेनी ओ'रिली

2
@ JennO'Reilly आपको इसे उत्तर के रूप में पोस्ट करना चाहिए। मेरे उपयोग-मामले से पूरी तरह मेल खाता है। धन्यवाद
लूटने

2
प्रदर्शन परीक्षण: jsperf.com/adding-element-to-the-array-start लेकिन परिणाम प्रत्येक ब्राउज़र के लिए अलग-अलग हैं।
अवर्निकोज़

जवाबों:


2810

का उपयोग करें unshift। यह पसंद है push, सिवाय इसके कि यह अंत के बजाय सरणी की शुरुआत में तत्वों को जोड़ता है।

  • unshift/ push- किसी सरणी के आरंभ / अंत में एक तत्व जोड़ें
  • shift/ pop - किसी ऐरे के पहले / अंतिम तत्व को हटा दें और वापस कर दें

एक सरल आरेख ...

   unshift -> array <- push
   shift   <- array -> pop

और चार्ट:

          add  remove  start  end
   push    X                   X
    pop           X            X
unshift    X             X
  shift           X      X

की जाँच करें MDN सरणी प्रलेखन । वस्तुतः हर भाषा जिसमें किसी सरणी से / पॉप तत्वों को धक्का देने की क्षमता होती है, उसमें भी अनशफ्ट / शिफ्ट (कभी-कभी push_front/ pop_front) तत्वों को अनशफ्ट करने की क्षमता होती है , आपको कभी भी इनको लागू नहीं करना चाहिए।


जैसा कि टिप्पणियों में बताया गया है, यदि आप अपने मूल सरणी को म्यूट करने से बचना चाहते हैं, तो आप उपयोग कर सकते हैं concat, जो एक साथ दो या अधिक गिरफ्तारियों को समेटता है। आप किसी मौजूदा तत्व के सामने या पीछे किसी एक तत्व को कार्यात्मक रूप से धकेलने के लिए इसका उपयोग कर सकते हैं; ऐसा करने के लिए, आपको नए तत्व को एकल तत्व सरणी में बदलना होगा:

const array = [ 3, 2, 1 ]

const newFirstElement = 4

const newArray = [newFirstElement].concat(array) // [ 4, 3, 2, 1 ]

concatआइटम भी जोड़ सकते हैं। concatकिसी भी प्रकार के होने के तर्क ; यदि वे पहले से ही एक सरणी नहीं हैं, तो वे एक-तत्व सरणी में लिपटे हुए हैं:

const array = [ 3, 2, 1 ]

const newLastElement  = 0

// Both of these lines are equivalent:
const newArray1 = array.concat(newLastElement)   // [ 3, 2, 1, 0 ]
const newArray2 = array.concat([newLastElement]) // [ 3, 2, 1, 0 ]

51
उपयोग करना concatबेहतर हो सकता है क्योंकि यह नई सरणी देता है। चेनिंग के लिए बहुत उपयोगी है। [thingToInsertToFront].concat(originalArray).reduce(fn).reverse().map(fn)आदि ... यदि आप उपयोग करते हैं unshift, तो आप ऐसा नहीं कर सकते क्योंकि आप जो भी प्राप्त करते हैं वह लंबाई है।
StJohn3D

4
शिफ्ट / अनशिफ्ट, पुश / पॉप, स्प्लिस। ऐसे तरीकों के लिए बहुत तार्किक नाम।
linuxunil

1396

सरणी संचालन छवि

var a = [23, 45, 12, 67];
a.unshift(34);
console.log(a); // [34, 23, 45, 12, 67]


117
लोगों को हर रोज़ इस्तेमाल किए जाने वाले फ़ंक्शन के लिए 4 के लिए विज़ुअल गाइडलाइन की आवश्यकता होती है क्योंकि एन्क्रिप्ट किए गए फ़ंक्शन नामों के कारण ... अनशफ्ट को इन्सर्ट क्यों नहीं कहा जाता है? शिफ्ट को हटाया जाना चाहिए। आदि ...
पास्कल

76
// अनशफ्ट को इन्सर्ट क्यों नहीं कहा जाता है? // यह C प्रोग्रामिंग भाषा के सम्मेलनों से आता है जहाँ सरणी तत्वों को स्टैक की तरह माना जाता था। (देखें perlmonks.org/?node_id=613129 एक पूर्ण विवरण के लिए)
dreftymac

25
@ पास्कल नं, सम्मिलित करें और निकालें इसके लिए विशेष रूप से बुरे नाम होंगे; वे रैंडम एक्सेस नहीं दिखाते, बजाय जोड़ने की / सरणी के सामने से हटाने के
meagar

25
मैंने सोचा होगा कि अनशिफ्ट को पहली कुंजी को हटा देना चाहिए, और पहली कुंजी में शिफ्ट डालना होगा, लेकिन यह सिर्फ मेरा सामान्य विचार है
शैनन होच्किन्स

27
मुझे डीएनए संदर्भ पसंद है
हंटर वेबडेव

235

ES6 के साथ, प्रसार ऑपरेटर का उपयोग करें ...:

डेमो

var arr = [23, 45, 12, 67];
arr = [34, ...arr]; // RESULT : [34,23, 45, 12, 67]

console.log(arr)


19
शुद्ध कार्यों के लिए उपयोगी एक नया सरणी भी बनाता है
devonj

यहाँ प्रदर्शन निहितार्थ क्या है? क्या यह अनशिफ्ट () का उपयोग करने से धीमा है?
पीटर टी।

1
ज़रूर, यह धीमा होगा क्योंकि यह एक अपरिवर्तनीय सरणी है (एक नया सरणी बना रहा है)। यदि आप एक बड़ी सरणी के साथ काम कर रहे हैं या प्रदर्शन आपकी पहली आवश्यकता है, तो कृपया concatइसके बजाय उपयोग करने पर विचार करें ।
अब्देनौर टुमी

प्रदर्शन 2018 में महत्वपूर्ण नहीं है, ब्राउज़र और नोड में नए संस्करणों को समान प्रदर्शन मिलता है
स्टैकडेव

75

इसके माध्यम से एक और तरीका है concat

var arr = [1, 2, 3, 4, 5, 6, 7];
console.log([0].concat(arr));

के बीच का अंतर concatऔर unshiftवह यह है कि concatरिटर्न एक नई सरणी। उनके बीच प्रदर्शन यहाँ पाया जा सकता है

function fn_unshift() {
  arr.unshift(0);
  return arr;
}

function fn_concat_init() {
  return [0].concat(arr)
}

यहाँ परीक्षा परिणाम है

यहां छवि विवरण दर्ज करें


संदर्भ जोड़ने के अलावा दोनों के प्रदर्शन की तुलना को जोड़ना आपके उत्तर के लिए अच्छा होगा।
इवान डी पाज़ सेंटेनो

मुझे अभी jsPerf मिला अस्थायी रूप से अनुपलब्ध है जबकि हम v2 जारी करने पर काम कर रहे हैं। कृपया बाद में लिंक से पुनः प्रयास करें । उन्हें जोड़ने के बजाय परिणामों को शामिल करने का एक और अच्छा कारण है।
टाइगर

jsPref परिणाम:: unshift25,510% 3.18% 99% धीमा concat: 2,436,894
इल्लुमिनेटर

नवीनतम सफारी में, fn_unshift () तेजी से चलता है।
११'१

नवीनतम सफ़ारी (v 10) में, fn_unshift () फिर से धीमा है।
rmcsharry

45

त्वरित धोखा देती है:

शब्द शिफ्ट / अनशिफ्ट और पुश / पॉप थोड़ा भ्रमित करने वाला हो सकता है, कम से कम उन लोगों के लिए जो C में रिकॉर्डिंग से परिचित नहीं हो सकते हैं।

यदि आप लिंगो से परिचित नहीं हैं, तो यहां वैकल्पिक शब्दों का त्वरित अनुवाद है, जिसे याद रखना आसान हो सकता है:

* array_unshift()  -  (aka Prepend ;; InsertBefore ;; InsertAtBegin )     
* array_shift()    -  (aka UnPrepend ;; RemoveBefore  ;; RemoveFromBegin )

* array_push()     -  (aka Append ;; InsertAfter   ;; InsertAtEnd )     
* array_pop()      -  (aka UnAppend ;; RemoveAfter   ;; RemoveFromEnd ) 

20

आपके पास एक सरणी है: var arr = [23, 45, 12, 67];

शुरुआत में एक आइटम जोड़ने के लिए, आप उपयोग करना चाहते हैं splice:

var arr = [23, 45, 12, 67];
arr.splice(0, 0, 34)
console.log(arr);


arr.splice (0, arr.length, 34);
लायर एलरोम

1
@ LiorElrom आपका स्निपेट क्या करता है?
Janus Troelsen

@poushy यह ब्राउज़र विशिष्ट है, फ़ायरफ़ॉक्स 54 में unshift50% अधिक तेज है (लेकिन ज्यादातर पठनीय है)
icl7126

@poushy अब और नहीं। रास्ता धीमा।
एंड्रयू

17

बिना म्यूट

दरअसल, मूल सरणी को सभी unshift/ pushऔर shift/ pop उत्परिवर्तित करते हैं।

unshift/ pushशुरू / अंत और से ही अस्तित्व में सरणी में कोई आइटम जोड़ने shift/ popएक सरणी की शुरुआत / अंत में से एक आइटम को हटा दें।

लेकिन एक म्यूटेशन के बिना किसी सरणी में आइटम जोड़ने के कुछ तरीके हैं। परिणाम एक नया सरणी है, कोड के नीचे सरणी उपयोग के अंत में जोड़ने के लिए:

const originArray = ['one', 'two', 'three'];
const newItem = 4;

const newArray = originArray.concat(newItem); // ES5
const newArray2 = [...originArray, newItem]; // ES6+

कोड के नीचे मूल सरणी उपयोग की शुरुआत में जोड़ने के लिए:

const originArray = ['one', 'two', 'three'];
const newItem = 0;

const newArray = (originArray.slice().reverse().concat(newItem)).reverse(); // ES5
const newArray2 = [newItem, ...originArray]; // ES6+

उपरोक्त तरीके से, आप एक म्यूटेशन के बिना किसी सरणी की शुरुआत / अंत में जोड़ते हैं।


मैं सिर्फ एक sliceसमारोह में डाल दिया कि originArrayयह परिवर्तनशीलता से रोकने के लिए।
अहमद खानी

1
बहुत बढ़िया! जब (Redux) राज्य प्रबंधन के लिए आता है ... यह जवाब कीमती है!
पेड्रो फरेरा

1
यह सही तरीका है!
एमएमएम

10

ES6 विनाशकारी का उपयोग करना: (मूल सरणी से उत्परिवर्तन से बचना)

const newArr = [item, ...oldArr]



8

यदि आपको किसी ऐरे की शुरुआत में किसी तत्व को लगातार सम्मिलित करने की आवश्यकता होती है, तो हर समय pushकॉल करने reverseके बजाय कॉल के बाद स्टेटमेंट का उपयोग करना तेज़ होता है unshift

बेंचमार्क टेस्ट: http://jsben.ch/kLIYf


1
नोट: प्रारंभिक सरणी खाली होनी चाहिए।
192kb

5

spliceहम का उपयोग करते हुए एक तत्व को ऐंठन में डालें:

arrName.splice( 0, 0, 'newName1' );

यह एक सही उत्तर है। धन्यवाद श्रीकृष्ण
ट्रान
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.