JavaScript 数组方法大全(口语化+超详细版)

​JavaScript 数组方法大全(口语化+超详细版)​​

数组就像是一个可以装很多东西的魔法盒子 ,JavaScript 提供了超多方法让我们增删改查、排序、遍历这个盒子里的东西。下面分门别类介绍,保证你一看就懂!


​**🔥 一、增删改查(基本操作)​**​

​1. 添加元素​

  • ​**push()​ → 往屁股后面塞**​(返回新长度)

    bash 复制代码
    let fruits = ['苹果', '香蕉'];
    fruits.push('橘子');  // ['苹果', '香蕉', '橘子']
  • ​**unshift()​ → 往前面插**​(返回新长度)

    perl 复制代码
    fruits.unshift('西瓜');  // ['西瓜', '苹果', '香蕉', '橘子']

​2. 删除元素​

  • ​**pop()​ → 从屁股后面踢走**​(返回被踢的元素)

    perl 复制代码
    fruits.pop();  // '橘子' → 剩下 ['西瓜', '苹果', '香蕉']
  • ​**shift()​ → 从前面踢走**​(返回被踢的元素)

    perl 复制代码
    fruits.shift();  // '西瓜' → 剩下 ['苹果', '香蕉']

​3. 替换/插入(万能方法)​​

  • ​**splice()​ → ​手术刀**,想切哪就切哪(会修改原数组)

    perl 复制代码
    let arr = ['A', 'B', 'C', 'D'];
    arr.splice(1, 2, 'X', 'Y');  // 从索引1开始,删2个,插入'X'和'Y'
    console.log(arr);  // ['A', 'X', 'Y', 'D']

​**🔍 二、查找与判断**​

​1. 找元素​

  • ​**indexOf()​ → 找 第一次出现的位置**​(找不到返回 -1)

    less 复制代码
    ['苹果', '香蕉', '橘子'].indexOf('香蕉');  // 1
  • ​**includes()​ → ​ 有没有这个东西?​**​(返回 true/false)

    less 复制代码
    ['A', 'B'].includes('B');  // true
  • ​**find()​ → 按条件找第一个符合的**​

    bash 复制代码
    let users = [{id: 1, name: '小明'}, {id: 2, name: '小红'}];
    users.find(user => user.id === 2);  // {id: 2, name: '小红'}

​2. 判断数组​

  • ​**Array.isArray()​ → ​这是数组吗?​**​

    javascript 复制代码
    Array.isArray([1, 2]);  // true
    Array.isArray('123');   // false

​**🔄 三、遍历与转换**​

​1. 循环数组​

  • ​**forEach()​ → ​把每个元素都摸一遍**​(没有返回值)

    ini 复制代码
    [1, 2, 3].forEach(num => console.log(num * 2));  // 2, 4, 6
  • ​**map()​ → ​把每个元素加工一下,返回新数组**​

    dart 复制代码
    let doubled = [1, 2, 3].map(num => num * 2);  // [2, 4, 6]
  • ​**filter()​ → ​筛出符合条件的**​

    dart 复制代码
    let evens = [1, 2, 3, 4].filter(num => num % 2 === 0);  // [2, 4]

​2. 合并/拼接​

  • ​**concat()​ → ​把多个数组合并**​(不修改原数组)

    css 复制代码
    [1, 2].concat([3, 4]);  // [1, 2, 3, 4]
  • ​**join()​ → ​把数组变成字符串**​

    bash 复制代码
    ['A', 'B', 'C'].join(' - ');  // "A - B - C"

​**📊 四、排序与计算**​

​1. 排序​

  • ​**sort()​ → ​默认按字母排序**​(会修改原数组)

    css 复制代码
    ['Banana', 'Apple', 'Orange'].sort();  // ['Apple', 'Banana', 'Orange']

    ​**⚠️ 注意**​:数字排序要自己写规则!

    css 复制代码
    [10, 2, 5].sort((a, b) => a - b);  // [2, 5, 10]

​2. 计算​

  • ​**reduce()​ → ​把数组压缩成一个值**​(比如求和)

    dart 复制代码
    [1, 2, 3].reduce((sum, num) => sum + num, 0);  // 6
  • ​**some()​ → ​有没有至少一个符合条件?​**​

    ini 复制代码
    [1, 2, 3].some(num => num > 2);  // true
  • ​**every()​ → ​是不是全部符合条件?​**​

    ini 复制代码
    [1, 2, 3].every(num => num > 0);  // true

​**💡 五、其他实用方法**​

​1. 反转数组​

  • ​**reverse()​ → ​倒着排**​(会修改原数组)

    scss 复制代码
    [1, 2, 3].reverse();  // [3, 2, 1]

​2. 截取数组​

  • ​**slice()​ → ​切一块出来**​(不修改原数组)

    scss 复制代码
    [1, 2, 3, 4].slice(1, 3);  // [2, 3](从1开始,到3之前)

​3. 扁平化数组​

  • ​**flat()​ → ​把嵌套数组"压平"​**​

    scss 复制代码
    [1, [2, [3]]].flat(2);  // [1, 2, 3](2代表压平2层)

​4. 检查空位​

  • ​**fill()​ → ​批量填充值**​

    scss 复制代码
    new Array(3).fill(0);  // [0, 0, 0]

​**🚀 总结:什么时候用什么方法?​**​

需求 推荐方法
​往数组加东西​ push() / unshift()
​从数组删东西​ pop() / shift()
​查找元素​ indexOf() / find()
​遍历数组​ forEach() / map()
​筛选数组​ filter()
​数组变字符串​ join()
​排序​ sort()
​计算总和​ reduce()
​合并数组​ concat()

​**🎯 终极口诀**​

  • **增删改查用 push/pop/splice**
  • **查找用 indexOf/find**
  • **遍历用 forEach/map**
  • **计算用 reduce/some/every**
  • **排序用 sort,合并用 concat**

数组方法就像工具箱里的工具,用对了事半功倍。

相关推荐
Highcharts.js1 小时前
React 中原生支持使用 JSX 组件配置自定义表格 Highcharts Grid
前端·javascript·react.js·前端框架·jsx·highcharts·自定义表格
Java后端的Ai之路1 小时前
【AIAgent开发】-Agent工具封装成CLI(纯干货!!!)
java·javascript·人工智能·agent·cli
薛定谔的猫-菜鸟程序员1 小时前
Electron开发超详细教程(从入门到放弃)
前端·javascript·electron
最强小杰2 小时前
DeepSeek V4 Flash + Codex CLI 接入教程:原生 Responses API 适配,从配置到跑通收藏这篇就够了(2026)
java·前端·python·ai
静水leo2 小时前
使用 Whistle 拦截接口并模拟后端响应
前端
掘金者阿豪2 小时前
SQL Server数据迁移完成后,凌晨的数据库告警该怎么查?
前端·后端
JudithHuang2 小时前
React 嵌套路由与布局
前端·react.js·arcgis·react·react router
htzyl2062 小时前
前端阶梯——第四十三章、实战二:待办清单To-Do
前端·javascript·html
程序员大阳3 小时前
HTML+CSS+JS对话式实战(1)-开篇:认识我们要做的社团活动发布平台
javascript·css·html·实战·系统·平台·社团活动发布