Javascript에서 배열의 시작 부분에 새 배열 요소를 추가하려면 어떻게해야합니까?

배열의 시작 부분에 요소를 추가하거나 추가해야합니다.

예를 들어 내 배열이 다음과 같은 경우

[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;

더 좋은 방법이 있습니까? Javascript에는이를 수행하는 내장 기능이 있습니까?

내 방법의 복잡성 O(n)은 더 나은 구현을 보는 것이 정말 흥미로울 것입니다.

사용하십시오 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 ]

ES6에서는 스프레드 연산자를 사용하십시오 ....

데모

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

console.log(arr)

이를 수행하는 또 다른 방법 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)
}

테스트 결과는 다음과 같습니다

빠른 치트 시트 :

시프트 / 언 시프트 및 푸시 / 팝이라는 용어는 적어도 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 ) 

배열이 있습니다. var arr = [23, 45, 12, 67];

처음에 항목을 추가하려면 다음을 사용하십시오 splice.

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

돌연변이없이

실제로 모든 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+

위의 방법으로, 돌연변이없이 배열의 시작 / 끝에 추가합니다.

ES6 파괴 사용 : (원래 배열에서 돌연변이 피하기)

const newArr = [item, ...oldArr]

배열의 시작 부분에 요소를 지속적으로 삽입해야하는 경우 항상 push호출하는 reverse대신 문을 호출하고을 호출 하는 것이 더 빠릅니다 unshift.

벤치 마크 테스트 : http://jsben.ch/kLIYf

사용하여 splice우리가 begnning에서 배열에 요소를 삽입합니다 :

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