当前位置:首页 > 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
分享给朋友:

相关文章

js实现轮播图

js实现轮播图

轮播图实现方法 基础HTML结构 <div class="slider"> <div class="slides"> <img src="image1.jpg…

vue循环数组实现

vue循环数组实现

循环数组的实现方法 在Vue中循环数组通常使用v-for指令,以下是几种常见场景的实现方式: 基本数组循环 <template> <div> <ul>…

vue实现数组平均值

vue实现数组平均值

计算数组平均值的方法 在Vue中计算数组的平均值可以通过多种方式实现。以下是几种常见的方法: 方法一:使用计算属性 export default { data() { return…

js实现倒计时

js实现倒计时

使用 setInterval 实现倒计时 通过 setInterval 定时器每秒更新剩余时间,适用于简单倒计时场景。 function countdown(seconds, callbac…

js实现继承

js实现继承

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

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML…