当前位置:首页 > JavaScript

js数组 实现

2026-03-02 08:38:04JavaScript

js数组 实现

数组的创建与初始化

在JavaScript中,数组可以通过多种方式创建:

js数组 实现

  • 字面量方式:直接使用方括号 [] 定义数组。
    const arr1 = [1, 2, 3]; // 包含数字的数组
    const arr2 = ['a', 'b', 'c']; // 包含字符串的数组
  • 构造函数方式:通过 new Array() 创建。
    const arr3 = new Array(1, 2, 3); // 等价于 [1, 2, 3]
    const arr4 = new Array(3); // 创建长度为3的空数组(元素为empty)

数组的常用方法

JavaScript数组提供丰富的内置方法,以下是一些核心操作:

添加/删除元素

  • push():向数组末尾添加元素,返回新长度。
    const arr = [1, 2];
    arr.push(3); // arr变为 [1, 2, 3]
  • pop():删除并返回数组的最后一个元素。
    const last = arr.pop(); // last = 3,arr变为 [1, 2]
  • unshift():向数组开头添加元素。
    arr.unshift(0); // arr变为 [0, 1, 2]
  • shift():删除并返回数组的第一个元素。
    const first = arr.shift(); // first = 0,arr变为 [1, 2]

遍历与转换

  • forEach():遍历数组元素。
    [1, 2, 3].forEach(item => console.log(item * 2)); // 输出 2, 4, 6
  • map():返回新数组,每个元素经过函数处理。
    const doubled = [1, 2, 3].map(x => x * 2); // doubled = [2, 4, 6]
  • filter():返回满足条件的新数组。
    const evens = [1, 2, 3].filter(x => x % 2 === 0); // evens = [2]

查找与判断

  • includes():检查数组是否包含某值。
    [1, 2, 3].includes(2); // true
  • find():返回第一个满足条件的元素。
    const found = [1, 2, 3].find(x => x > 1); // found = 2
  • some()/every():检查是否有任意/所有元素满足条件。
    [1, 2, 3].some(x => x > 2); // true
    [1, 2, 3].every(x => x > 0); // true

数组的高级操作

合并与拆分

  • concat():合并数组,返回新数组。
    const merged = [1, 2].concat([3, 4]); // merged = [1, 2, 3, 4]
  • join():将数组元素拼接为字符串。
    [1, 2, 3].join('-'); // 返回 "1-2-3"

排序与反转

  • sort():按默认或自定义规则排序(原地修改)。
    [3, 1, 2].sort(); // [1, 2, 3]
    [3, 1, 2].sort((a, b) => b - a); // 降序 [3, 2, 1]
  • reverse():反转数组顺序。
    [1, 2, 3].reverse(); // [3, 2, 1]

其他实用方法

  • reduce():累计计算数组元素。
    const sum = [1, 2, 3].reduce((acc, val) => acc + val, 0); // sum = 6
  • Array.from():将类数组对象转为数组。
    Array.from('abc'); // ['a', 'b', 'c']

注意事项

  • 空位处理:使用 new Array(3) 创建的数组包含空位(empty),部分方法如 map() 会跳过空位。
  • 浅拷贝slice() 或展开运算符 [...arr] 可实现浅拷贝。
    const copy = [...[1, 2, 3]]; // copy = [1, 2, 3]

标签: 数组js
分享给朋友:

相关文章

js实现全选

js实现全选

实现全选功能的方法 在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件,并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式: 基础DOM操作实现 通过获取所有目标复选框…

vue实现数组

vue实现数组

vue实现数组操作 在Vue中操作数组需要使用Vue提供的响应式方法,直接修改数组元素不会触发视图更新。以下是常见的数组操作方法: 添加元素 使用push、unshift或splice方法添加元素:…

js轮播图实现原理

js轮播图实现原理

轮播图的基本原理 轮播图通过动态切换显示的内容(图片、文本等)实现视觉上的滑动效果。核心原理是利用CSS和JavaScript控制元素的显示与隐藏,或通过变换位置实现滑动动画。 实现方法一:…

链表实现js

链表实现js

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和一个指向下一个节点的指针(单向链表)或两个指针(双向链表)。与数组不同,链表在内存中非连续存储,插入和删除操作更高效,但随机…

js实现滚动

js实现滚动

实现滚动效果的方法 在JavaScript中实现滚动效果可以通过多种方式完成,以下是一些常见的方法: 使用window.scrollTo() window.scrollTo()方法可以将页面滚动到指…

js实现定位

js实现定位

使用Geolocation API获取当前位置 在JavaScript中,可以通过浏览器内置的Geolocation API获取用户的地理位置信息。该API需要用户授权才能访问位置数据。 if (n…