当前位置:首页 > JavaScript

js数组 实现

2026-03-02 08:38:04JavaScript

js数组 实现

数组的创建与初始化

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

  • 字面量方式:直接使用方括号 [] 定义数组。
    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实现跳转

js实现跳转

使用 window.location 跳转 通过修改 window.location.href 或直接使用 window.location 实现页面跳转,适用于普通跳转或带参数的 URL。 //…

js如何实现继承

js如何实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例能够访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Paren…

js实现类

js实现类

JavaScript 实现类的几种方式 JavaScript 是一种基于原型的语言,但在 ES6 之后引入了 class 语法糖,使得实现类更加直观。以下是几种常见的实现方式: 使用构造函数 传统…

js轮播图实现原理

js轮播图实现原理

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

js实现pdf在线预览

js实现pdf在线预览

使用PDF.js实现PDF在线预览 PDF.js是由Mozilla开发的一个开源JavaScript库,可以在网页中直接渲染PDF文件。以下是实现PDF在线预览的步骤: 引入PDF.js库 在H…

js实现换肤

js实现换肤

使用CSS变量实现换肤 通过CSS变量可以轻松实现主题切换功能。CSS变量在根元素中定义,通过JavaScript动态修改这些变量值。 :root { --primary-color: #349…