JavaScript数组操作函数汇总

让我来为您详细介绍 JavaScript 数组操作函数的常用方法。

JavaScript数组操作函数汇总

1. push()

作用:向数组末尾添加一个或多个元素,并返回新的长度。

语法:arr.push(element1, ..., elementN)

示例:

let arr = [1, 2, 3];
arr.push(4, 5);
console.log(arr); // 输出 [1, 2, 3, 4, 5]

2. pop()

作用:删除数组末尾的一个元素,并返回该元素的值。

语法:arr.pop()

示例:

let arr = [1, 2, 3];
let lastElement = arr.pop();
console.log(arr); // 输出 [1, 2]
console.log(lastElement); // 输出 3

3. shift()

作用:删除数组的第一个元素,并返回该元素的值。

语法:arr.shift()

示例:

let arr = [1, 2, 3];
let firstElement = arr.shift();
console.log(arr); // 输出 [2, 3]
console.log(firstElement); // 输出 1

4. unshift()

作用:向数组的开头添加一个或多个元素,并返回新的长度。

语法:arr.unshift(element1, ..., elementN)

示例:

let arr = [1, 2, 3];
arr.unshift(0, -1);
console.log(arr); // 输出 [-1, 0, 1, 2, 3]

5. concat()

作用:连接两个或多个数组,并返回一个新的数组。

语法:arr.concat(array1, array2, ..., arrayN)

示例:

let arr1 = [1, 2, 3];
let arr2 = [4, 5];
let arr3 = arr1.concat(arr2);
console.log(arr3); // 输出 [1, 2, 3, 4, 5]

6. slice()

作用:从原数组中截取指定位置的元素,不会修改原数组,并返回一个新的数组。

语法:arr.slice(start, end)

示例:

let arr = [1, 2, 3, 4, 5];
let subArr = arr.slice(2, 4);
console.log(subArr); // 输出 [3, 4]
console.log(arr); // 输出 [1, 2, 3, 4, 5]

7. splice()

作用:从原数组中删除/替换指定位置的元素,并返回被删除的元素组成的新数组。

语法:arr.splice(start, deleteCount, item1, item2, ...)

示例:

let arr = [1, 2, 3, 4, 5];
let deletedArr = arr.splice(1, 2); // 从第二个位置开始删除两个元素
console.log(deletedArr); // 输出 [2, 3]
console.log(arr); // 输出 [1, 4, 5]

arr.splice(2, 0, 'a', 'b'); // 从第三个位置开始添加两个元素
console.log(arr); // 输出 [1, 4, 'a', 'b', 5]

8. forEach()

作用:遍历数组中的每个元素,并执行指定的操作。

语法:arr.forEach(callbackFunction)

示例:

let arr = [1, 2, 3];
arr.forEach(function(element, index) {
    console.log(`第${index+1}个元素为: ${element}`);
});
// 输出:
// 第1个元素为: 1
// 第2个元素为: 2
// 第3个元素为: 3

以上就是常用的 JavaScript 数组操作函数汇总。有任何疑问,欢迎继续咨询。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript数组操作函数汇总 - Python技术站

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

相关文章

  • javascript获取dom的下一个节点方法

    当我们需要获取一个DOM元素的下一个兄弟节点时,有以下两个方法: 方法一:使用nextSibling属性 DOM节点对象拥有一个nextSibling属性,该属性用于获取当前节点的下一个兄弟节点。需要注意的是,这个属性获取到的兄弟节点可能是文本节点、注释节点等。 // 获取 id 为 "test" 的元素的下一个兄弟节点 var test…

    JavaScript 2023年6月10日
    00
  • JS 实现Base64编码与解码实例详解

    JS 实现Base64编码与解码实例详解 Base64是一种将二进制数据编码为ASCII字符的方法。通过该编码方式,可以将二进制数据以可读的方式在不同系统中传输或储存。 什么是Base64 在计算机中,数据存储都是以二进制位(bit)为单位的,但是在我们人类的角度下,二进制是很难读懂的,如00101011。因此为了呈现数据,可以采用16进制、ASCII等方式…

    JavaScript 2023年5月20日
    00
  • VUE脚手架框架编写简洁的登录界面的实现

    关于“VUE脚手架框架编写简洁的登录界面”的实现攻略,可以分为以下几个步骤来进行: 1. 创建Vue项目 首先,在命令行中输入以下命令,创建一个Vue项目: vue create my-project 其中my-project为项目名称,你可以自行替换。 创建完成之后,进入项目目录: cd my-project 2. 添加路由及登录页面组件 接下来,我们需要…

    JavaScript 2023年6月11日
    00
  • javascript 面向对象技术基础教程第1/2页

    JavaScript 面向对象技术基础教程攻略 概述 JavaScript 是一门基于对象编程的语言。面向对象编程 (OOP) 是一种典型的编程范式,它将问题抽象成一系列对象,然后通过对象之间的交互解决问题。在 JavaScript 中,有许多实现面向对象编程的技术,如对象、类和原型等。在本教程中,我们将通过介绍这些技术,帮助读者在 JavaScript 中…

    JavaScript 2023年6月10日
    00
  • JavaScript内核之基本概念

    关于“JavaScript内核之基本概念”的完整攻略,可以从以下几个方面来讲解。 1. 什么是JavaScript内核? JavaScript是一种高级编程语言,但是它需要在浏览器上执行,因此需要JavaScript引擎来解析和执行JavaScript代码。JavaScript引擎是JavaScript内核的核心组成部分,它是一种解释器或编译器,可以将Jav…

    JavaScript 2023年5月18日
    00
  • JavaScript Promise与async/await作用详细讲解

    JavaScript Promise与async/await作用详细讲解 Promise的概念及作用 Promise是ES6引入的一种异步编程的解决方案。Promise可以看作是一种容器,里面保存着一个异步操作的结果。Promise对象有三种状态:Pending(进行中)、Fulfilled(已成功)和Rejected(已失败)。当Promise对象的状态从…

    JavaScript 2023年5月28日
    00
  • JavaScript判断字符长度、数字、Email、电话等常用判断函数分享

    下面我将为大家分享一下关于JavaScript判断字符长度、数字、Email、电话等常用判断函数的攻略。 判断字符长度 在JavaScript中判断字符长度通常使用字符串的length属性来获取字符串的长度。length属性会返回一个整数,代表字符串中字符的数量。利用字符串的length属性,我们可以编写如下函数: function isStringLeng…

    JavaScript 2023年6月10日
    00
  • JavaScript仿百度图片浏览效果

    介绍JavaScript仿百度图片浏览效果所需要遵循的完整攻略: 步骤一:网页结构设计 要实现JavaScript仿百度图片浏览效果,需要先设计网页的结构。具体来说,需要将每个图片都包装在一个链接标签内部,然后这些链接标签再放置在一个父级div标签中。这样,每次点击一个链接标签,就会打开一个图片的浏览界面。 下面是一个示例代码: <div class=…

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