当前位置:首页 > JavaScript

js数组实现

2026-03-13 22:12:44JavaScript

数组的基本操作

在JavaScript中,数组是一种用于存储多个值的有序集合。可以通过以下方式创建数组:

let fruits = ['apple', 'banana', 'orange'];
let numbers = new Array(1, 2, 3);

访问数组元素使用索引,索引从0开始:

console.log(fruits[0]); // 输出 'apple'

修改数组元素

直接通过索引赋值可以修改数组元素:

fruits[1] = 'pear';
console.log(fruits); // ['apple', 'pear', 'orange']

常用数组方法

添加/删除元素

// 末尾添加
fruits.push('grape'); 

// 开头添加
fruits.unshift('melon');

// 末尾删除
fruits.pop();

// 开头删除
fruits.shift();

数组拼接

let moreFruits = ['kiwi', 'mango'];
let allFruits = fruits.concat(moreFruits);

查找元素

js数组实现

let index = fruits.indexOf('orange'); // 返回索引
let exists = fruits.includes('apple'); // 返回布尔值

数组遍历

使用循环或高阶函数遍历数组:

// for循环
for(let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

// forEach
fruits.forEach(function(item) {
    console.log(item);
});

// map
let lengths = fruits.map(fruit => fruit.length);

多维数组

JavaScript支持多维数组(数组的数组):

let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];
console.log(matrix[1][2]); // 6

数组解构

ES6引入的解构赋值可以方便地从数组提取值:

js数组实现

let [first, second] = fruits;
console.log(first); // 'apple'
console.log(second); // 'pear'

数组扩展运算符

扩展运算符...可以用于合并数组或传递参数:

let newFruits = [...fruits, 'pineapple'];
console.log(newFruits); 

function sum(a, b, c) {
    return a + b + c;
}
let nums = [1, 2, 3];
console.log(sum(...nums)); // 6

数组排序

使用sort()方法对数组进行排序:

let numbers = [3, 1, 4, 2];
numbers.sort(); // [1, 2, 3, 4]

// 自定义排序
numbers.sort((a, b) => b - a); // 降序 [4, 3, 2, 1]

数组过滤

filter()方法创建满足条件的新数组:

let bigNumbers = numbers.filter(n => n > 2);
console.log(bigNumbers); // [3, 4]

数组reduce

reduce()方法将数组元素计算为单个值:

let sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 10

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

相关文章

js实现报表

js实现报表

使用JavaScript实现报表 在JavaScript中实现报表功能可以通过多种方式完成,常见的方法包括使用原生JavaScript、第三方库(如Chart.js、D3.js)或结合后端数据渲染。以…

js实现预览

js实现预览

文件上传预览实现 使用JavaScript实现文件上传预览功能,可以通过FileReader对象读取文件内容并显示预览。以下代码支持图片、文本和PDF文件的预览: // HTML部分需要包含…

js手势实现

js手势实现

手势识别实现方法 在JavaScript中实现手势识别通常涉及监听触摸事件(touchstart、touchmove、touchend)或鼠标事件(mousedown、mousemove、mouseu…

js实现按钮点击

js实现按钮点击

实现按钮点击的JavaScript方法 HTML按钮元素 在HTML中创建按钮元素,为其添加id或class以便JavaScript选择: <button id="myButton">点…

js分页实现

js分页实现

分页的基本原理 分页的核心是通过计算当前页码和数据偏移量,从服务器或本地数据中截取对应范围的数据进行展示。通常需要以下参数:当前页码(currentPage)、每页条数(pageSize)、总数据量(…

js实现原理

js实现原理

JavaScript 实现原理 JavaScript 是一种解释型语言,其实现原理涉及多个核心组件和运行机制,包括引擎、运行时环境、事件循环等。 引擎与解释执行 现代 JavaScript 引擎(如…