当前位置:首页 > JavaScript

js 数组实现

2026-01-31 18:20:49JavaScript

数组的基本概念

在JavaScript中,数组是一种用于存储多个值的有序集合。数组中的每个值称为元素,每个元素在数组中有一个位置,称为索引。数组的索引从0开始,依次递增。

创建数组

数组可以通过数组字面量或Array构造函数创建。

// 使用数组字面量
const arr1 = [1, 2, 3, 4, 5];

// 使用Array构造函数
const arr2 = new Array(1, 2, 3, 4, 5);

// 创建空数组
const arr3 = [];
const arr4 = new Array();

访问数组元素

通过索引访问数组元素,索引从0开始。

const arr = ['a', 'b', 'c', 'd'];
console.log(arr[0]); // 输出 'a'
console.log(arr[2]); // 输出 'c'

修改数组元素

通过索引直接修改数组元素的值。

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

数组的常用方法

JavaScript提供了丰富的数组方法,用于操作和处理数组。

添加和删除元素

js 数组实现

const arr = [1, 2, 3];

// 在末尾添加元素
arr.push(4); // arr变为 [1, 2, 3, 4]

// 删除末尾元素
arr.pop(); // arr变为 [1, 2, 3]

// 在开头添加元素
arr.unshift(0); // arr变为 [0, 1, 2, 3]

// 删除开头元素
arr.shift(); // arr变为 [1, 2, 3]

合并数组

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = arr1.concat(arr2); // [1, 2, 3, 4]

截取数组

const arr = [1, 2, 3, 4, 5];
const sliced = arr.slice(1, 3); // [2, 3]

查找元素

js 数组实现

const arr = [1, 2, 3, 4, 5];
const index = arr.indexOf(3); // 2
const exists = arr.includes(3); // true

遍历数组

const arr = [1, 2, 3];

// 使用forEach
arr.forEach(item => console.log(item));

// 使用map
const doubled = arr.map(item => item * 2); // [2, 4, 6]

// 使用filter
const filtered = arr.filter(item => item > 1); // [2, 3]

// 使用reduce
const sum = arr.reduce((acc, item) => acc + item, 0); // 6

多维数组

JavaScript中的数组可以嵌套,形成多维数组。

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[1][2]); // 输出 6

数组的展开与解构

ES6引入了展开运算符和解构赋值,便于操作数组。

// 展开运算符
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

// 解构赋值
const [first, second, ...rest] = arr1;
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3]

数组的排序与反转

const arr = [3, 1, 4, 2, 5];

// 排序
arr.sort(); // [1, 2, 3, 4, 5]

// 反转
arr.reverse(); // [5, 4, 3, 2, 1]

数组的类型检查

使用Array.isArray方法检查一个变量是否为数组。

const arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true
console.log(Array.isArray('not an array')); // false

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

相关文章

vue.js实现轮播

vue.js实现轮播

Vue.js 实现轮播功能 使用第三方库(推荐) Vue.js 生态中有许多成熟的轮播组件库,例如 vue-awesome-swiper 或 swiper,它们功能丰富且易于集成。 安装 swipe…

js 实现vue模板

js 实现vue模板

实现 Vue 模板的 JavaScript 方法 通过原生 JavaScript 可以实现类似 Vue 的模板渲染功能,主要包括数据绑定、指令处理和模板解析。以下是核心实现思路: 数据绑定与响应式…

js实现复制功能

js实现复制功能

使用 document.execCommand 方法 这种方法适用于较旧的浏览器,但在现代浏览器中可能被逐步淘汰。通过创建一个临时的 textarea 元素,将文本内容放入其中,然后执行复制命令。…

js实现密码

js实现密码

密码强度验证 使用正则表达式验证密码强度是一种常见方法。以下代码检查密码是否包含大小写字母、数字和特殊字符,且长度至少为8位: function checkPasswordStrength(pass…

js图片上传实现

js图片上传实现

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API实现基础图片上传功能。HTML部分需要设置accept="image/…

js实现下拉刷新

js实现下拉刷新

监听触摸事件 通过监听 touchstart、touchmove 和 touchend 事件来检测用户下拉手势。记录触摸起始位置和移动距离。 let startY = 0; let currentY…