如何在Javascript数组的开头添加新的数组元素?

2020/09/16 06:31 · javascript ·  · 0评论

我需要在数组的开头添加或添加元素。

例如,如果我的数组如下所示:

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

阵列运算图

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

在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之间的区别unshiftconcat返回一个新数组。他们之间的表现可以在这里找到

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/ pushshift/ 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我们在开始时将元素插入数组:

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

如果要在数组的开头推送数组中的元素,请使用<func>.apply(<this>, <Array of args>)

const arr = [1, 2];
arr.unshift.apply(arr, [3, 4]);
console.log(arr); // [3, 4, 1, 2]
本文地址:http://javascript.askforanswer.com/ruhezaijavascriptshuzudekaitoutianjiaxindeshuzuyuansu.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!