I have a need to add or prepend elements at the beginning of an array.
For example, if my array looks like below:
[23, 45, 12, 67]
And the response from my AJAX call is 34
, I want the updated array to be like the following:
[34, 23, 45, 12, 67]
Currently I am planning to do it like this:
var newArray = [];
newArray.push(response);
for (var i = 0; i < theArray.length; i++) {
newArray.push(theArray[i]);
}
theArray = newArray;
delete newArray;
Is there a better way to do this? Does JavaScript have any built-in functionality that does this?
The complexity of my method is O(n)
and it would be really interesting to see better implementations.
Use unshift
. It's like push
, except it adds elements to the beginning of the array instead of the end.
unshift
/ push
- add an element to the beginning/end of an array shift
/ pop
- remove and return the first/last element of an array A simple diagram...
unshift -> [array] <- push
shift <- [array] -> pop
and chart:
add remove start end
push X X
pop X X
unshift X X
shift X X
Check out the MDN Array documentation . Virtually every language that has the ability to push/pop elements from an array will also have the ability to unshift/shift (sometimes called push_front
/ pop_front
) elements, you should never have to implement these yourself.
As pointed out in the comments, if you want to avoid mutating your original array, you can use concat
, which concatenates two or more arrays together. You can use this to functionally push a single element onto the front or back of an existing array; to do so, you need to turn the new element into a single element array:
const array = [3, 2, 1] const newFirstElement = 4 const newArray = [newFirstElement].concat(array) // [ 4, 3, 2, 1 ] console.log(newArray);
concat
can also append items. The arguments to concat
can be of any type; they are implicitly wrapped in a single-element array, if they are not already an array:
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 ] console.log(newArray1); console.log(newArray2);
var a = [23, 45, 12, 67]; a.unshift(34); console.log(a); // [34, 23, 45, 12, 67]
...
:Demo
var arr = [23, 45, 12, 67]; arr = [34, ...arr]; // RESULT : [34,23, 45, 12, 67] console.log(arr)
Another way to do that is through concat
:
var arr = [1, 2, 3, 4, 5, 6, 7]; console.log([0].concat(arr));
The difference between concat
and unshift
is that concat
returns a new array. The performance between them could be found here .
function fn_unshift() {
arr.unshift(0);
return arr;
}
function fn_concat_init() {
return [0].concat(arr)
}
Here is the test result:
Quick Cheatsheet:
The terms shift/unshift and push/pop can be a bit confusing, at least to folks who may not be familiar with programming in C.
If you are not familiar with the lingo, here is a quick translation of alternate terms, which may be easier to remember:
* array_unshift() - (aka Prepend ;; InsertBefore ;; InsertAtBegin )
* array_shift() - (aka UnPrepend ;; RemoveBefore ;; RemoveFromBegin )
* array_push() - (aka Append ;; InsertAfter ;; InsertAtEnd )
* array_pop() - (aka UnAppend ;; RemoveAfter ;; RemoveFromEnd )
使用 ES6 解构(避免原始数组的突变):
const newArr = [item, ...oldArr]
Without Mutating
Actually, all unshift
/ push
and shift
/ pop
mutate the source array.
The unshift
/ push
add an item to the existed array from begin/end and shift
/ pop
remove an item from the beginning/end of an array.
But there are few ways to add items to an array without a mutation. the result is a new array, to add to the end of array use below code:
const originArray = ['one', 'two', 'three'];
const newItem = 4;
const newArray = originArray.concat(newItem); // ES5
const newArray2 = [...originArray, newItem]; // ES6+
To add to begin of original array use below code:
const originArray = ['one', 'two', 'three'];
const newItem = 0;
const newArray = (originArray.slice().reverse().concat(newItem)).reverse(); // ES5
const newArray2 = [newItem, ...originArray]; // ES6+
With the above way, you add to the beginning/end of an array without a mutation.
You have an array: var arr = [23, 45, 12, 67];
To add an item to the beginning, you want to use splice
:
var arr = [23, 45, 12, 67]; arr.splice(0, 0, 34) console.log(arr);
Cheatsheet to prepend new element(s) into the array
const list = [23, 45, 12, 67]; list.unshift(34); console.log(list); // [34, 23, 45, 12, 67];
2. Array#splice
const list = [23, 45, 12, 67]; list.splice(0, 0, 34); console.log(list); // [34, 23, 45, 12, 67];
const list = [23, 45, 12, 67]; const newList = [34, ...list]; console.log(newList); // [34, 23, 45, 12, 67];
4. Array#concat
const list = [23, 45, 12, 67]; const newList = [32].concat(list); console.log(newList); // [34, 23, 45, 12, 67];
Note: In each of these examples, you can prepend multiple items by providing more items to insert.
push()
adds a new element to the end of an array.
pop()
removes an element from the end of an array.
unshift()
adds a new element to the beginning of an array.
shift()
removes an element from the beginning of an array.
use theArray.unshift(response)
If you need to continuously insert an element at the beginning of an array, it is faster to use push
statements followed by a call to reverse
, instead of calling unshift
all the time.
Benchmark test: http://jsben.ch/kLIYf
var testdata = new Array(); testdata = [23, 45, 12, 67]; testdata = [34, ...testdata]; console.log(testdata)
使用splice
我们在开始时将元素插入到数组中:
arrName.splice( 0, 0, 'newName1' );
var array = [23, 45, 12, 67];
array.unshift(11);
alert(array);
Pop, Push, Shift and Unshift Array Methods in JavaScript JavaScript gives us four methods to add or remove items from the beginning or end of arrays:
pop() : Remove an item from the end of an array
let cats = ['Bob', 'Willy', 'Mini'];
cats.pop(); // ['Bob', 'Willy']
pop() returns the removed item.
push() : Add items to the end of an array
let cats = ['Bob'];
cats.push('Willy'); // ['Bob', 'Willy']
cats.push('Puff', 'George'); // ['Bob', 'Willy', 'Puff', 'George']
push() returns the new array length.
shift() : Remove an item from the beginning of an array
let cats = ['Bob', 'Willy', 'Mini'];
cats.shift(); // ['Willy', 'Mini']
shift() returns the removed item.
unshift() : Add items to the beginning of an array
let cats = ['Bob'];
cats.unshift('Willy'); // ['Willy', 'Bob']
cats.unshift('Puff', 'George'); // ['Puff', 'George', 'Willy', 'Bob']
If you want to push elements that are in an array at the beginning of your array, use <func>.apply(<this>, <Array of args>)
:
const arr = [1, 2]; arr.unshift.apply(arr, [3, 4]); console.log(arr); // [3, 4, 1, 2]
There are a couple of ways to achieve this:
const num = 1; const arr = [2, 3]; arr.unshift(num); console.log(arr);
const num = 1; const arr = [2, 3]; const newArr = [num, ...arr]; console.log(newArr);
const num = 1; const arr = [2, 3]; const newArr = [num].concat(arr); console.log(newArr);
you can first reverse array and then add elem to array then reverse back it.
const arr = [2,3,4,5,6];
const arr2 = 1;
arr.reverse();
//[6,5,4,3,2]
arr.push(arr2);
console.log(arr.reverse()); // [1,2,3,4,5,6]
good lock
ali alizadeh.
let arr = [5, 6]; // using unshift arr.unshift(4); console.log('arr : ', arr); // using spread operator arr = [3, ...arr]; console.log('arr : ', arr); // using concat arr = [2].concat(arr); console.log('arr : ', arr); // using splice arr.splice(0, 0, 1) console.log('arr : ', arr);
Performance: For small arrays you can choose whichever you want, no significant performance difference. But for some tens of items, unshift() is much better than anything else.
See results here: https://jsben.ch/GDA3P
Use unshift
function. It will push element at beginning of the array
var list = [23, 45, 12, 67];
list.unshift(34);
// It will return [34, 23, 45, 12, 67];
"array.unshift()" is a method which is use to add elements at the start of an array.
The guide is in the link below. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift
let array = [23, 45, 12, 67]; array.unshift(12); console.log(array);
you can reverse your array and push the data , at the end again reverse it:
var arr=[2,3,4,5,6];
var arr2=1;
arr.reverse();
//[6,5,4,3,2]
arr.push(arr2);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.