JS数组方法push()、pop()用法实例分析

JS数组方法push()、pop()用法实例分析

push()方法

push() 方法将一个或多个元素添加到数组的末尾,并返回新数组的长度。

语法

arr.push(element1[, ...[, elementN]])

参数

  • element1[, ...[, elementN]]: 要添加到数组末尾的一个或多个元素。

返回值

  • 数组新的长度

示例

const arr = ['apple', 'banana', 'cherry']
const newLength = arr.push('orange')
console.log(arr) // ['apple', 'banana', 'cherry', 'orange']
console.log(newLength) // 4

pop()方法

pop() 方法删除数组的最后一个元素,并返回该元素的值。

语法

arr.pop()

返回值

  • 删除的元素的值,如果数组为空,则返回 undefined

示例

const arr = ['apple', 'banana', 'cherry', 'orange']
const removedElement = arr.pop()
console.log(arr) // ['apple', 'banana', 'cherry']
console.log(removedElement) // 'orange'

应用案例

示例1

本示例演示了如何使用 push() 方法将用户输入的数字添加到数组中。

const numbers = []

while (true) {
  const input = prompt('请输入一个数字:')
  if (input === null) break

  numbers.push(+input)
}

alert(`您输入的数字有 ${numbers.length} 个,分别为 ${numbers.join(', ')}`)

示例2

本示例演示了如何使用 pop() 方法移除数组中的最后一个元素。

const foods = ['apple', 'banana', 'cherry', 'orange', 'grape']
const selectedFoods = []

while (true) {
  const input = prompt(`请选择您喜欢的一种水果:${foods.join(', ')}`)
  if (input === null) break

  const index = foods.indexOf(input)
  if (index === -1) {
    alert('您输入的水果不存在!')
    continue
  }

  selectedFoods.push(foods.splice(index, 1)[0])
  if (foods.length === 0) break
}

alert(`您选择的水果有 ${selectedFoods.join(', ')},剩下的水果有 ${foods.join(', ')}`)

在这个案例中,我们先用 indexOf() 方法查找用户输入的水果在 foods 数组中的索引,如果找到了就把该水果从 foods 中移除,并将其添加到 selectedFoods 数组中。如果 foods 数组为空了,则退出循环,输出结果。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS数组方法push()、pop()用法实例分析 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • 利用JavaScript实现防抖节流函数的示例代码

    下面是关于利用JavaScript实现防抖和节流函数的完整攻略。 什么是防抖和节流? 在讲解防抖和节流函数具体实现之前,先简单介绍一下它们的概念。 防抖 防抖是指在事件被触发n秒后再执行回调函数,如果在这n秒内又被触发,则重新计时。通俗地讲,就是在用户不断操作的情况下,只有在用户最后一次操作完毕后一定时间内才会触发事件。 节流 节流是指在一定时间间隔内只执行…

    JavaScript 2023年6月11日
    00
  • 用Golang运行JavaScript的实现示例

    下面是 “用Golang运行JavaScript的实现示例”的完整攻略。 什么是Golang Go语言(Golang)是一种面向现代化Web应用开发的开源编程语言,由Google公司开发并于2009年11月正式发布,被描述为既具有静态语言的安全性和严谨性,又具有动态语言的高效和可读性。 Golang运行JavaScript的实现示例 Golang 好在处理高…

    JavaScript 2023年5月28日
    00
  • JavaScript实现弹窗效果代码分析

    下面我来为你讲解“JavaScript实现弹窗效果代码分析”的完整攻略,让你轻松掌握实现弹窗效果的技巧。 什么是弹窗效果 弹窗效果又称“模态框”或“对话框”,是一种与用户进行交互的窗口,能够在当前页面上弹出并浮于页面上方,以吸引用户的注意并进行相关操作。 实现弹窗效果的步骤 实现弹窗效果的核心是使用JavaScript代码调用页面元素,并通过操作CSS样式实…

    JavaScript 2023年6月11日
    00
  • 详解JavaScript中的箭头函数的使用

    下面是详解JavaScript中的箭头函数的使用的完整攻略。 什么是箭头函数 箭头函数是ES6新增的函数声明方式,它使用箭头(=>)代替了传统函数的声明方式,可以简化代码的书写并且更加易读。 箭头函数的语法如下: // 无参箭头函数 () => {} // 有参箭头函数 (param1, param2) => {} // 带返回值的箭头函数…

    JavaScript 2023年5月27日
    00
  • 使用微信小程序API,调用微信的各种内置能力。

    下面是使用微信小程序API,调用微信的各种内置能力的完整攻略: 确认需要调用的API 首先需要确认你需要调用哪些API来实现你的功能。在微信小程序官方文档中,有一份与“微信小程序API能力”相关的内容提供了详细文档,我们可以通过这份文档快速找到需要的API。 引入API 在需要使用API的页面或程序中,需要先引入对应的API。引入API的方法一般如下: co…

    JavaScript 2023年6月11日
    00
  • JavaScript实现cookie的写入、读取、删除功能

    当一个web页面被加载到浏览器中时,浏览器会为它分配一个cookie的存储区域。此时,开发者可以通过JavaScript代码来操作cookie的写入、读取和删除等功能。 写入cookie 可以使用document.cookie来写入cookie。document.cookie是一个字符串,它存储着当前网页的所有cookie。写入cookie的格式如下: do…

    JavaScript 2023年6月11日
    00
  • Android React-Native通信数据模型分析

    Android React-Native通信数据模型分析 什么是React-Native? React-Native是一种使用JavaScript编写的移动应用程序开发框架。它使用React框架来构建用户界面,并使用原生组件来实现不同平台上的应用程序行为。 React-Native将JavaScript代码编译成原生代码,这使得React-Native应用程…

    JavaScript 2023年5月28日
    00
  • 2021年值得向Python开发者推荐的VS Code扩展插件

    下面是详细讲解“2021年值得向Python开发者推荐的VS Code扩展插件”的完整攻略。 1. 简介 VS Code 是一款免费开源的轻量级编辑器,支持多种编程语言,Python 是其中之一。丰富的扩展插件使得 VS Code 更加强大,可以让开发者更加高效地编写 Python 代码。本攻略将介绍一些值得向 Python 开发者推荐的扩展插件。 2. 推…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部