JavaScript数组入门与操作详解

本篇文章给大家分享《JavaScript数组创建与操作教程》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

JavaScript中数组是有序可变长对象，支持任意类型数据；常用字面量创建，操作分改变原数组（如push/splice）和不改变（如map/filter）两类，遍历推荐高阶函数，判断数组用Array.isArray()。

JavaScript中创建和操作数组非常直观，核心在于理解数组是**有序的、可变长度的对象**，能存储任意类型的数据。

创建数组的几种常用方式

最常见的是字面量语法，简洁高效：

• 字面量创建：const arr = [1, 'hello', true, {}];
• 构造函数创建（不推荐日常使用，易出错）：const arr = new Array(1, 2, 3); 或 new Array(5)（会创建长度为5的空数组，注意不是[undefined, undefined, ...]）
• Array.of() 和 Array.from()：适合处理类数组或映射生成。
  Array.of(1, 2, 3) → [1, 2, 3]；
  Array.from('abc') → ['a','b','c']；
  Array.from({length: 3}, (_, i) => i) → [0, 1, 2]

增删改查：常用操作方法

数组方法分两类：**改变原数组**（如 push/pop/shift/unshift/splice/sort/reverse）和**不改变原数组**（如 map/filter/find/slice/concat）。

• 末尾添加/删除：arr.push(4)（返回新长度），arr.pop()（返回被删元素）
• 开头添加/删除：arr.unshift('first')，arr.shift()
• 按位置插入或删除：arr.splice(1, 1, 'new')（从索引1删1个，插入'new'）
• 查找元素：arr.indexOf('hello')（返回索引或-1），arr.includes(2)（返回布尔值）
• 获取子数组：arr.slice(1, 3)（不修改原数组，返回新数组）

遍历与转换数据

避免用 for 循环硬写，优先选语义清晰的高阶函数：

• 遍历每个元素：arr.forEach(item => console.log(item))
• 生成新数组：arr.map(x => x * 2)
• 筛选符合条件的元素：arr.filter(x => typeof x === 'number')
• 累积计算（如求和）：arr.reduce((sum, cur) => sum + cur, 0)
• 检查是否全部/任一满足条件：arr.every(x => x > 0)，arr.some(x => x === 'hello')

实用小技巧和注意事项

数组不是真正的“类型”，而是对象，所以 typeof [] 是 "object"。判断是否为数组请用 Array.isArray(arr)。

• 空数组 [] 是真值（if([]){...} 会执行），但 arr.length === 0 才表示为空
• 访问越界索引不会报错，返回 undefined（arr[100]）
• 慎用 arr.toString() 或 arr + '' 转字符串——它会用逗号拼接，且对嵌套数组可能意外扁平化
• 想深拷贝数组？JSON.parse(JSON.stringify(arr)) 有局限（丢失函数、undefined、Date等），更安全可用 structuredClone(arr)（现代浏览器支持）或扩展运算符 [...arr]（仅浅拷贝）

基本上就这些。掌握字面量创建、splice/map/filter/reduce 这几个核心，再留意是否改变原数组，日常开发就够用了。

终于介绍完啦！小伙伴们，这篇关于《JavaScript数组入门与操作详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！