首页 > 编程语言 >【转】[JavaScript] 数组的 push 、shift 、splice

【转】[JavaScript] 数组的 push 、shift 、splice

时间:2025-01-17 10:09:59浏览次数:1  
标签:arr 元素 console log shift JavaScript let 数组 push

push 方法用于将一个或多个元素添加到数组的末尾,并返回新数组的长度。以下是其详细用法:

基本语法

JavaScript复制
array.push(item1[, item2[, ..., itemN]])
  • array:要操作的数组。
  • item1, item2, ..., itemN:要添加到数组末尾的元素,可以是一个或多个。

返回值

返回新数组的长度,即添加元素后的数组长度。

示例

  1. 添加单个元素 JavaScript复制
    let arr = [1, 2, 3];
    let newLength = arr.push(4);
    console.log(arr);     // [1, 2, 3, 4]
    console.log(newLength); // 4
  2. 添加多个元素 JavaScript复制
    let arr = [1, 2, 3];
    let newLength = arr.push(4, 5, 6);
    console.log(arr);     // [1, 2, 3, 4, 5, 6]
    console.log(newLength); // 6
  3. 添加不同类型元素 JavaScript复制
    let arr = [1, 2, 3];
    let newLength = arr.push('a', true, {key: 'value'});
    console.log(arr);     // [1, 2, 3, 'a', true, {key: 'value'}]
    console.log(newLength); // 6

注意事项

  • push 方法会直接修改原数组,而不是返回一个新数组。
  • 如果不传入任何参数,push 方法不会对数组进行任何修改,但仍然会返回数组的当前长度。
  • push 方法可以一次性添加多个元素,这些元素会按照传入的顺序依次添加到数组末尾。

shift 方法用于从数组的开头移除第一个元素,并返回被移除的元素。以下是其详细用法:

基本语法

JavaScript复制
array.shift()
  • array:要操作的数组。

返回值

返回被移除的元素。如果数组为空,则返回 undefined

示例

  1. 从非空数组中移除元素 JavaScript复制
    let arr = [1, 2, 3];
    let removedElement = arr.shift();
    console.log(arr);            // [2, 3]
    console.log(removedElement); // 1
  2. 从空数组中移除元素 JavaScript复制
    let arr = [];
    let removedElement = arr.shift();
    console.log(arr);            // []
    console.log(removedElement); // undefined

注意事项

  • shift 方法会直接修改原数组,而不是返回一个新数组。
  • 每次调用 shift 方法只会移除数组的第一个元素。
  • 如果数组为空,shift 方法会返回 undefined,并且数组仍然为空。
  • shift 方法的执行效率相对较低,因为它需要重新调整数组中所有元素的索引。如果需要频繁地从数组开头移除元素,建议使用其他数据结构(如 LinkedList)或考虑使用 pop 方法从数组末尾移除元素,以提高性能。

splice 方法是数组的一个非常强大且常用的方法,它可以用来添加、删除或替换数组中的元素,以下是其详细用法:

基本语法

JavaScript复制
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
  • array:要操作的数组。
  • start:必需参数,表示开始修改的索引位置。如果该参数大于数组长度,则从数组末尾开始添加元素;如果为负数,则表示从数组末尾开始计算的索引位置,-1 表示倒数第一个元素,以此类推。
  • deleteCount:可选参数,表示要删除的元素个数。如果省略该参数或其值大于从start位置到数组末尾的元素个数,则从start位置到数组末尾的所有元素都会被删除。
  • item1, item2, ...:可选参数,表示要添加到数组中的元素。从start + deleteCount的位置开始添加。

返回值

splice 方法会返回一个数组,该数组包含了被修改(删除)的元素。如果没有删除元素,则返回一个空数组。

常见用法示例

  1. 删除元素
    • 删除指定位置的单个元素 JavaScript复制
      let arr = [1, 2, 3, 4, 5];
      let deletedElements = arr.splice(2, 1); // 从索引2开始删除1个元素
      console.log(arr); // [1, 2, 4, 5]
      console.log(deletedElements); // [3]
    • 删除指定位置的多个元素 JavaScript复制
      let arr = [1, 2, 3, 4, 5];
      let deletedElements = arr.splice(1, 3); // 从索引1开始删除3个元素
      console.log(arr); // [1, 5]
      console.log(deletedElements); // [2, 3, 4]
    • 删除从指定位置到数组末尾的所有元素 JavaScript复制
      let arr = [1, 2, 3, 4, 5];
      let deletedElements = arr.splice(2); // 从索引2开始删除到数组末尾的所有元素
      console.log(arr); // [1, 2]
      console.log(deletedElements); // [3, 4, 5]
  2. 添加元素
    • 在指定位置添加单个元素 JavaScript复制
      let arr = [1, 2, 4, 5];
      arr.splice(2, 0, 3); // 在索引2的位置添加元素3
      console.log(arr); // [1, 2, 3, 4, 5]
    • 在指定位置添加多个元素 JavaScript复制
      let arr = [1, 2, 5];
      arr.splice(2, 0, 3, 4); // 在索引2的位置添加元素3和4
      console.log(arr); // [1, 2, 3, 4, 5]
  3. 替换元素
    • 替换单个元素 JavaScript复制
      let arr = [1, 2, 3, 4, 5];
      arr.splice(2, 1, 'a'); // 从索引2开始删除1个元素,并添加元素'a'
      console.log(arr); // [1, 2, 'a', 4, 5]
    • 替换多个元素 JavaScript复制
      let arr = [1, 2, 3, 4, 5];
      arr.splice(1, 3, 'a', 'b', 'c'); // 从索引1开始删除3个元素,并添加元素'a'、'b'、'c'
      console.log(arr); // [1, 'a', 'b', 'c', 5]

注意事项

  • splice 方法会直接修改原数组,而不是返回一个新数组。
  • 当使用负数索引时,要确保其绝对值不超过数组长度,否则可能会导致不符合预期的结果。
  • 如果在添加元素时,start 位置超出了数组末尾,那么新添加的元素会被添加到数组末尾。

标签:arr,元素,console,log,shift,JavaScript,let,数组,push
From: https://www.cnblogs.com/z5337/p/18676378

相关文章

  • JavaScript有几种类型值?能否画出它们的内存图?
    JavaScript中主要有八种类型的值,包括七种原始类型(PrimitiveTypes)和一种对象类型(ObjectTypes)。这八种类型分别是:Number:表示数字,包括整数和浮点数。如:42,3.14159。BigInt:表示任意大的整数。这是一种在ES2020中引入的新类型,用于表示比Number.MAX_SAFE_INTEGER更大的整数。如......
  • Vue 开发者必备的 JavaScript 基础知识
    变量与数据类型为什么重要:Vue3的响应式系统严重依赖于正确的变量声明。组合式API要求理解 const 用于ref和reactive对象。类型意识有助于Vue3的模板渲染和prop验证。const count= ref(0)const user= reactive({  name: 'John',  age: 30......
  • JavaScript防抖与节流的运用
    防抖(Debounce)概念:防抖是指在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。防抖的主要目的是将多次连续触发的事件合并为一次执行,适用于例如输入框输入搜索内容时,避免频繁发送请求,只在用户停止输入一段时间后才发送请求。实现思路:创建一个定时器。......
  • 必知必会!JavaScript 开发中的反模式与避坑指南
    一、开发“雷区”:JavaScript反模式危机四伏JavaScript作为软件开发领域的多面手,在Web前端、后端乃至移动端开发中均占据着举足轻重的地位。然而,在实际的开发过程中,众多反模式如同隐藏在暗处的陷阱,时刻威胁着开发的顺利进行。这些反模式的产生,源于JavaScript灵活的语法......
  • 实现网页倒计时跳转的JavaScript代码
    在网页开发中,倒计时跳转功能常用于广告页面、活动倒计时或页面跳转提示等场景。下面是一个简单的JavaScript实现,用于在指定时间后自动跳转到另一个页面。该代码会在页面上显示倒计时,并在倒计时结束后跳转到指定的URL。代码实现<spanclass="time"></span><script>var......
  • a标签下的href="javascript:void(0)"起到了什么作用?说说你对javascript:void(0)的理解
    在前端开发中,a标签通常用于创建链接,其href属性指定了链接的目标地址。然而,有时我们可能希望创建一个看起来像链接的元素,但实际上并不导航到任何其他页面或重新加载当前页面。这时,href="javascript:void(0)"就派上了用场。javascript:void(0)的作用主要是阻止链接的默认行为......
  • JavaScript中new操作符具体做了什么?手写new操作符
    做了什么?1.创建一个空的对象2.将空对象的原型指向构造函数的原型3.将空对象作为构造函数的上下文(改变this指向)4.对构造函数返回代码functionFoo(){console.log(this);this.name="张三";return[1,2,3];}constf=newFoo();console.log(f);//空对象......
  • 【Javascript Day6】for循环练习及数组
    目录for循环练习数组1.构造数组2.字面量数组创建3.数组的遍历循环4.length的使用规则for循环练习按输入弹窗行数画菱形(奇偶皆可)varpro=prompt("请输入行数")varsum="";for(vari=1;i<=pro;i++){if(i<=parseInt((pro*1+1)/2)......
  • JavaScript ——节点操作
    节点操作1.创建节点document.createElement('节点')参数:标签名字符串。说明:这些元素原先不存在,是根据需求动态生成的,因此也称为动态创建元素节点。该方法会将创建好的对象作为返回值返回。2.创建文本document.createTextNode() 可以用来创建一个文本节点对象。参数:文......
  • JavaScript详解 ——函数
    1、函数的概念在JS里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码需要大量重复使用函数:就是封装一段可被重复调用执行的代码块。通过代码块可以实现在需要的的重复使用,使用typeof检查一个函数对象时,会返回function函数的封装是把一个或者多个功能通过函数的方式......