当前位置:首页 > JavaScript

js数组实现

2026-02-01 00:05:24JavaScript

数组的基本创建与初始化

在JavaScript中,数组可以通过字面量或构造函数创建:

// 字面量方式  
const arr1 = [1, 2, 3];  

// 构造函数方式  
const arr2 = new Array(3); // 创建长度为3的空数组  
const arr3 = new Array(1, 2, 3); // 包含元素的数组  

数组的常见操作

添加/删除元素

// 末尾添加  
arr1.push(4); // [1, 2, 3, 4]  

// 开头添加  
arr1.unshift(0); // [0, 1, 2, 3, 4]  

// 末尾删除  
arr1.pop(); // [0, 1, 2, 3]  

// 开头删除  
arr1.shift(); // [1, 2, 3]  

截取与拼接

// 截取子数组(不改变原数组)  
const subArr = arr1.slice(1, 3); // [2, 3]  

// 拼接数组  
const newArr = arr1.concat([4, 5]); // [1, 2, 3, 4, 5]  

数组的遍历与转换

遍历方法

// forEach  
arr1.forEach(item => console.log(item));  

// map(返回新数组)  
const doubled = arr1.map(item => item * 2); // [2, 4, 6]  

过滤与查找

// filter  
const evens = arr1.filter(item => item % 2 === 0); // [2]  

// find  
const firstEven = arr1.find(item => item % 2 === 0); // 2  

多维数组与特殊操作

多维数组示例

const matrix = [[1, 2], [3, 4]];  
console.log(matrix[1][0]); // 3  

展开运算符与解构

js数组实现

// 合并数组  
const combined = [...arr1, ...newArr]; // [1, 2, 3, 4, 5]  

// 解构赋值  
const [first, second] = arr1; // first=1, second=2  

性能优化与注意事项

  • 避免频繁使用delete删除元素(会留下空位)。
  • 大规模数据操作时,优先选择for循环而非高阶函数(如forEach)。
  • 使用Array.from或扩展运算符转换类数组对象(如arguments)。

以上方法覆盖了JavaScript数组的常见使用场景,可根据需求灵活组合。

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

相关文章

vue循环数组实现

vue循环数组实现

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

js实现图片轮播

js实现图片轮播

实现基础图片轮播 使用HTML、CSS和JavaScript创建一个简单的图片轮播。HTML部分定义轮播容器和图片,CSS设置样式和动画效果,JavaScript处理轮播逻辑。 <div cl…

js 实现倒计时

js 实现倒计时

实现倒计时的基本方法 使用 JavaScript 实现倒计时可以通过 setInterval 或 setTimeout 结合日期计算来完成。以下是两种常见实现方式。 使用 setInterval 实…

js实现日历

js实现日历

实现日历的基本思路 使用JavaScript实现日历的核心是动态生成日期表格,并处理月份切换逻辑。需要计算当前月的天数、起始星期几,并动态渲染到页面上。 获取当前日期信息 通过Date对象获取当前年…

js 实现继承

js 实现继承

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

js实现图片预览

js实现图片预览

使用FileReader API实现图片预览 通过FileReader对象读取用户选择的图片文件并显示预览: const input = document.getElementById('image…