首页/ 学科题库/ javascript/ 数组基础与操作
javascript 实战教程

数组基础与操作

2026-07-03 约 8 分钟 juanwangdev

数组基础与操作

数组是 JavaScript 最常用的数据结构,用于存储有序的元素集合。

数组字面量

JavaScript
const empty = [];
const nums = [1, 2, 3, 4, 5];
const mixed = [1, 'hello', true, { name: 'Tom' }];

创建方式

JavaScript
// 字面量(推荐)
const arr1 = [1, 2, 3];

// 构造函数
const arr2 = new Array(3);     // [empty × 3]
const arr3 = new Array(1, 2);  // [1, 2]

// Array.of(推荐替代 new Array)
const arr4 = Array.of(3);      // [3]
const arr5 = Array.of(1, 2);   // [1, 2]

// Array.from
const arr6 = Array.from('abc');           // ['a', 'b', 'c']
const arr7 = Array.from([1, 2, 3], x => x * 2); // [2, 4, 6]

索引与长度

索引访问

JavaScript
const arr = ['a', 'b', 'c'];
console.log(arr[0]);     // 'a'
console.log(arr[1]);     // 'b'
console.log(arr[arr.length - 1]); // 'c'

arr[1] = 'B';
console.log(arr);        // ['a', 'B', 'c']

console.log(arr[10]);    // undefined(越界不报错)

length 属性

JavaScript
const arr = [1, 2, 3, 4, 5];
console.log(arr.length);  // 5

arr.length = 3;           // 截断
console.log(arr);         // [1, 2, 3]

arr.length = 5;           // 扩展
console.log(arr);         // [1, 2, 3, empty × 2]

数组方法

增删元素

JavaScript
const arr = [2, 3];

arr.push(4, 5);       // [2, 3, 4, 5]
arr.pop();            // 返回 5,arr → [2, 3, 4]

arr.unshift(0, 1);    // [0, 1, 2, 3, 4]
arr.shift();          // 返回 0,arr → [1, 2, 3, 4]

splice 万能方法

JavaScript
const arr = ['a', 'b', 'c', 'd', 'e'];

// 删除
arr.splice(1, 2);           // ['a', 'd', 'e']

// 插入
arr.splice(1, 0, 'x', 'y'); // ['a', 'x', 'y', 'd', 'e']

// 替换
arr.splice(1, 2, 'B', 'C'); // ['a', 'B', 'C', 'd', 'e']

查找与判断

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

arr.indexOf(2);          // 1
arr.lastIndexOf(2);      // 3
arr.includes(3);         // true
arr.find(x => x > 2);   // 3
arr.findIndex(x => x > 2); // 2

切片与合并

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

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

const merged = [1, 2].concat([3, 4]);  // [1, 2, 3, 4]
方法是否改变原数组返回值
push/pop是新长度/删除元素
unshift/shift是新长度/删除元素
splice是删除的元素数组
slice否新数组
concat否新数组

数组遍历

for 循环

JavaScript
const arr = ['a', 'b', 'c'];

// 传统 for
for (let i = 0; i < arr.length; i++) {
  console.log(i, arr[i]);
}

// for...of(推荐)
for (const item of arr) {
  console.log(item);
}

forEach

JavaScript
arr.forEach((item, index, array) => {
  console.log(index, item);
});

map / filter / reduce

JavaScript
const nums = [1, 2, 3, 4, 5];

const doubled = nums.map(x => x * 2);       // [2, 4, 6, 8, 10]
const evens = nums.filter(x => x % 2 === 0);// [2, 4]
const sum = nums.reduce((acc, cur) => acc + cur, 0); // 15

遍历方式对比

方式可中断可访问索引返回新数组
for是是-
for...of是否-
forEach否是-
map否是是
filter否是是
reduce否是单值

要点总结

  1. 优先使用字面量 [] 创建数组,Array.of 替代 new Array
  2. length 可读写,修改可截断或扩展数组
  3. push/pop 操作末尾,unshift/shift 操作开头
  4. splice 是增删改的通用方法,slice 安全截取不改变原数组
  5. map/filter/reduce 是函数式遍历三件套,不改变原数组
想在手机上练这篇的配套题目?
使用微信 卷王开发者小程序/App,首页顶部扫一扫识别下方二维码,即可解锁本讲对应真题与错题本。
了解产品 App
← 上一篇 展开运算符与嵌套结构 下一篇 → 事件循环与任务队列