百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

ES6史上最全数JS数组方法合集-02-数组操作

myzbx 2025-07-03 18:19 3 浏览

数组生成 array.of

let res = Array.of(1, 2, 3)
console.log(res) // [1, 2, 3]

下标定位 indexOf

用于查找数组中是否存在某个值,如果存在则返回某个值的下标,否则返回-1

let list = [1, 2, 3];
console.log(list.indexOf(2))  // 1
console.log(list.indexOf('饼干'))  // -1

元素存在 includes

检测数组中是否存在该元素,返回布尔

let list = [1, 2, 3];
console.log(list.includes(2))  // true

数组添加 push

向数组后面添加元素,返回值为数组的length

let list = [1, 2, 3];
let res = list.push(1)
console.log(res) // 4

数组头添加 unshift

向数组的头部添加元素,返回值为数组的length

let list = [1, 2, 3];
let res = list.unshift(0)
console.log(res) // 0,1,2,3

数组反转 reverse

用于数组反转,返回新数组

let list = [1, 2, 3]
let res = list.reverse()
console.log(res) //  [3, 2, 1]

数组拼接 join

用于数组以什么形式拼接,返回字符串

let list = [1, 2, 3]
let res = list.join('-')
console.log(res)  // 1-2-3

数组排序 sort

用于数组排序,接收函数参数,排序规则根据参数函数返回值,返回新数组

  • 返回值为正数,后面的挪到前面
  • 返回值为负数,保持不动
  • 返回值为0,保持不动
let list = [1, 2, 3]
let sortRes = list.sort((a, b)=> b-a)
console.log(sortRes)  // [3, 2, 1]

数组合并 concat

用于合并数组,返回新数组

let list = [1, 2, 3]
let res = list.concat([4, 5, 6])
console.log(res)  // [1, 2, 3, 4, 5, 6]

数组遍历(each)

for、for...of...、forEach

const list = [1, 2, 3, 4, 5, 6, 7, 8,, 10, 11];

for (let i = 0, len = list.length; i < len; i++) {
  if (list[i] === 5) {
    break; // 1 2 3 4
    // continue; // 1 2 3 4 6 7 8 undefined 10 11
  }
  console.log(list[i]);
}

for (const item of list) {
  if (item === 5) {
    break; // 1 2 3 4
    // continue; // 1 2 3 4 6 7 8 undefined 10 11
  }
  console.log(item);
}

list.forEach((item, index, arr) => {
  if (item === 5) return;
  console.log(index); // 0 1 2 3 5 6 7 9 10
  console.log(item); // 1 2 3 4 6 7 8  10 11
});

三者都是基本的由左到右遍历数组

  • forEach 无法跳出循环;for 和 for ..of 可以使用 break 或者 continue 跳过或中断。
  • for ...of 直接访问的是实际元素。for 遍历数组索引,forEach 回调函数参数更丰富,元素、索引、原数组都可以获取。
  • for ...of 与 for 如果数组中存在空元素,同样会执行。

补充 forEach中执行异步任务

  • forEach中执行异步任务,不会等待异步任务完成,这个时候可以用 for ..of替代。

数组转换(map)

将一个对象数组的某个属性以逗号拼接起来:重点map可以遍历数组,而且不改变原始数组数据,可以通过map返回一个经过修饰的新数组

比如输入[{"a":1},{"a":2},{"a":3},{"a":4},{"a":5}]返回1,2,3,4,5

function getFileCode(array){
  let result = null;
  if(array && array.length>0){
      result = array.map((item,index)=>{
          return item.fileCode;
      }).join(",");
  }
  return result;
}

数组过滤(filter)

可以过滤数组中指定的元素

const list = [
{ name: '头部导航', type: 'nav', id: 1 },,
{ name: '轮播', type: 'content', id: 2 },
{ name: '页脚', type: 'nav', id: 3 },
];
const resultList = list.filter(item => {
  console.log(item);
  return item.type === 'nav';
});
// resultList: [
//   { name: '头部导航', type: 'nav', id: 1 },
//   { name: '页脚', type: 'nav', id: 3 },
// ]

const newList = list.map(item => {
  console.log(item);
  return item.id;
});
// newList: [1, empty, 2, 3]

// list: [
//   { name: '头部导航', type: 'nav', id: 1 },
//   empty,
//   { name: '轮播', type: 'content', id: 2 },
//   { name: '页脚', type: 'nav', id: 3 },
// ]

数组查询(find)

  • find 方法返回数组中满足 callback 函数的第一个元素的值。如果不存在返回undefined。
  • findIndex 它返回数组中找到的元素的索引,而不是其值,如果不存在返回 -1。
const list = [
{ name: '头部导航', id: 1 },
{ name: '轮播', id: 2 },
{ name: '页脚', id: 3 },
];
const result = list.find((item) => item.id === 3);
// result: { name: '页脚', id: 3 }
result.name = '底部导航';
// list: [
//   { name: '头部导航', id: 1 },
//   { name: '轮播', id: 2 },
//   { name: '底部导航', id: 3 },
// ]

const index = list.findIndex((item) => item.id === 3);
// index: 2
list[index].name // '底部导航';

数组判断(some)

some函数如果有一个元素存在则返回true

const list = [
{ name: '头部导航', id: 1 },
{ name: '轮播', id: 2 },
{ name: '页脚', id: 3 },
];
const result = list.some((item) => item.id === 3);
//result = true/false

相关推荐

C语言速成之数组:C语言数据处理的核心武器,你真的玩透了吗?

程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java、鸿蒙、嵌入式、人工智能等开发,专注于程序员成长的那点儿事,希望在成长的路上有你相伴!君志所向,一往无前!数组:C语言数据处理...

ES6史上最全数JS数组方法合集-02-数组操作

数组生成array.ofletres=Array.of(1,2,3)console.log(res)//[1,2,3]下标定位indexOf用于查找数组中是否存在某个值,如果存...

前端性能拉胯?这 8 个 JavaScript 技巧让你的代码飞起来!

在前端开发的江湖里,JavaScript就是我们手中的“绝世宝剑”。但为啥别人用剑就能轻松斩敌,你的代码却总拖后腿,页面加载慢、交互卡顿?别着急!今天带来8个超实用的JavaScript实...

12种JavaScript中最常用的数组操作整理汇总

数组是最常见的数据结构之一,我们需要绝对自信地使用它。在这里,我将列出JavaScript中最重要的几个数组常用操作片段,包括数组长度、替换元素、去重以及许多其他内容。1、数组长度大多数人都知道可...

手把手教你在Webpack写一个Loader

前言有的时候,你可能在从零搭建Webpack项目很熟悉,配置过各种loader,面试官在Webpack方面问你,是否自己实现过一个loader?如果没有去了解过如果去实现,确实有点尴尬,其...

const关键字到底该什么用?(可以用const关键字定义变量吗)

文|守望先生经授权转载自公众号编程珠玑(id:shouwangxiansheng)前言我们都知道使用const关键字限定一个变量为只读,但它是真正意义上的只读吗?实际中又该如何使用const关键字...

“JavaScript变量声明三兄弟,你真的会用吗?

在JavaScript中,var、let和const是声明变量的关键字,它们在作用域、变量提升、重复声明和重新赋值等方面有显著区别。以下是它们的相同点和不同点,并通过代码示例详细说明。一、相同点声明变...

ES6(二)let 和 const(es6 var let const区别)

let命令let和var差不多,只是限制了有效范围。先定义后使用不管是什么编程语言,不管语法是否允许,都要秉承先定义,然后再使用的习惯,这样不会出幺蛾子。以前JavaScript比较随意,...

js 里面 let 和 const的区别(js中的let)

在JavaScript(包括Vue、Node.js、前端脚本等)中,const和let是用于声明变量的两种方式,它们的主要区别如下:constvslet的区别特性constlet是否...

JDK21新特性:Sequenced Collections

SequencedCollectionsJDK21在JEP431提出了有序集合(SequencedCollections)。引入新的接口来表示有序集合。这样的集合都有一个明确的第一个元素、第二个...

动态编程基础——第 2 部分(动态编程是什么)

有两种方法可以使用动态规划来解决问题。在这篇文章中,我们将了解制表法。请参阅我的动态编程基础——第1部分了解记忆方法。记忆制表什么是动态规划?它是一种简单递归的优化技术。它大大减少了解决给定...

Lambda 函数,你真的的了解吗(lambda函数用法)

什么是lambda函数lambda函数是一个匿名函数,这意味着与其他函数不同,它们没有名称。这是一个函数,它添加两个数字,写成一个命名函数,可以按其名称调用它们:defadd(x,y):...

JavaScript 数组操作方法大全(js数组操作的常用方法有哪些)

数组操作是JavaScript中非常重要也非常常用的技巧。本文整理了常用的数组操作方法(包括ES6的map、forEach、every、some、filter、find、from、of等)...

系列专栏(六):解构赋值(解构赋值默认值)

ES6作为新一代JavaScript标准,已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,MozillaWeb开发者博客推出了《ES6InDepth》系列文章。CSDN...

js列表遍历方法解读(js遍历链表)

JavaScript提供了多种遍历数组(或列表)的方法。以下是一些常用的方法及其解读:for循环:vararray=[1,2,3,4,5];for(vari=0;...