数组常使用的方法

news2024/9/24 16:34:52

1. join (原数组不受影响)

该方法可以将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。

返回值:返回一个新的字符串

const arr=[1,3,4,2,5]
  console.log(arr.join('-');//1-3-4-2-5

2. push

该方法可以在数组的最后面,添加一个或者多个元素

结构: arr.push(值)

返回值:返回的是添加元素后数组的长度.

  const arr=[1,2,3,4,5]
  console.log(arr.push(8));

控制台打印

3. pop

该方法可以在数组的最后面,删除一个元素

结构: arr.pop()

返回值:返回的是删除的元素.

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

4. unshift

该方法可以在数组的最前面,添加一个或者几个元素

结构: arr.unshift(值)

返回值: 返回的是添加元素后数组的长度

  const arr=[1,2,3,4,5]
  console.log(arr.unshift(9));

5. shift

该方法可以在数组的最前面,删除一个元素

结构: arr.shift()

返回值: 返回的是刚才删除的元素.

6. reverse 翻转数组

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

8. sort

该方法可以对数组进行排序.

const arr=[1,2,3,4,5]
 const newArr = arr.sort(function(a,b){
    // return a-b;//从小到大排序 12345
    return b-a;//从大到小排序 54321
})
console.log(newArr);

大->小

小到大

8. concat

该方法可以把两个数组里的元素拼接成一个新的数组

返回值: 返回拼接后的新数组

 const arr=[1,2,3,4,5]
 const newArr = [6,7,8,9,10]
console.log(arr.concat(newArr));

9. slice 截取 出来

该方法可以从数组中截取指定的字段,返回出来

返回值:返回截取出来的字段,放到新的数组中,不改变原数组

(1)arr.slice(start,end) ;从start下标开始截取,一直到end结束,不包括end

let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(0,3)//newArr = [0,1,2];

(2)arr.slice(start) ;从start下标开始截取,一直到最后

let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(2)//newArr = [2,3,4,5,6,7];

(3)arr.slice( ) ;全部截取

let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(2)//newArr = [0,1,2,3,4,5,6,7];

10. splice

数组。splice(下标,删除的个数),返回的是删除后的新数组

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

//查找元素在数组中的位置

12. indexOf

判断数组在元素中的位置,找到了返回该元素的下标,否则返回-1

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

特殊用法:

(1) arr.indexOf (ele,fromIndex),从fromIndex这个下标开始,元素第一次出现的位置

用来判断元素是否存在于数组中!

if (arr.indexOf(ele) === -1){//说明元素不存在!!
    console.log('元素不存在!)
} else {
    console.log(' 元素存在! ')
}

13. includes

判断数组中是否存在某个元素,在的话就返回true,否则false

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

13. lastIndexOf

该方法用来查找元素最后一次在数组中出现的位置,返回的是最后一次出现的下标

const arr=[1,2,3,4,5,3,4,6,6,7,8]
 
console.log(arr.lastIndexOf(6));

ES5新增的遍历数组方法

1. forEach( )

该方法等同于for循环,没有返回值

arr.forEach(function(item,index,arr){
//里面的function是一个回调函数,
//item: 数组中的每一项;
//index:item 对应的下标索引值
//arr: 就是调用该方法的数组本身
})

2.map( )

映射,该方法使用和forEach大致相同,但是该方法有返回值,返回一个新数组,新数组的长度和原数组长度相等

3. filter( )

filter方法: 有返回值, 过滤出符合条件的元素

 const arr=[1,2,3,4,5,3,4,6,6,7,8]
const newArr = arr.filter((item,index)=>{
  return item>5
})
console.log(newArr);

4. some

判断数组中有没有符合条件的项(只要有,就返回true),如果一个都没有,才返回false

let arr3 = [
  { name: "zs", age: 18, done: "notYet" },
  { name: "ls", age: 20, done: true },
  { name: "ww", age: 22, done: true }
];
let res5 = arr3.some(function(item) {
  return item.done;
});
console.log(res5);

5. every

判断数组中所有的项是否满足要求,如果全都满足,才返回true,否则返回false

let res6 = arr3.every(function(item) {
  return item.done;
});
console.log(res6);

6. find

找到符合条件的项,并且返回第一项

let arr4 = [
  { id: 3, name: "ls", done: false },
  { id: 1, name: "zs", done: true },
  { id: 2, name: "ww", done: true }
];
// var res7 = arr4.find(function(item) {
//   return item.done;
// });
// console.log(res7);

7. findIndex

找到符合条件的项的下标,并且返回满足条件第一个下标

  const arr=[1,2,3,4,5,3,4,6,6,7,8]
const newArr = arr.findIndex((item,index)=>{
  return item>5
})
console.log(newArr);

8.reduce

(1)求和计算

var arr1 = [1,2,3,4,5] ;
    var new1 = arr1.reduce(function(pre,next,index){
            return pre+next ;
             //pre+next=10+5=15
    })
    console.log(new1);
    

(2)扁平化数组

    var arr2 = [[1,2,3],[4,5],[6,7]] ;
    var new2 = arr2.reduce(function(pre,next,index){
            return pre.concat(next);    //前数组拼接后数组 .concat()
    })
     console.log(new2);

(3)对象数组叠加计算

    var arr3 = [
    {price:10,count:1},
    {price:15,count:2},
    {price:10,count:3}
    ];
    var new3 = arr3.reduce(function(pre,next,index){
            return pre+next.price*next.count;
    },0)    //在原数组第一项添加为0,不改变原数组,则可不操作第一项
    console.log(new3);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/340707.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

(考研湖科大教书匠计算机网络)第四章网络层-第一、二节:网络层概述及其提供的服务

获取pdf:密码7281专栏目录首页:【专栏必读】考研湖科大教书匠计算机网络笔记导航 文章目录一:网络层概述(1)概述(2)学习内容二:网络层提供的两种服务(1)面向连…

nginx越界读取缓存漏洞(CVE-2017-7529)

range格式: Range: <unit><range-start>- Range: <unit><range-start>-<range-end> Range: <unit><range-start>-<range-end>, <range-start>-<range-end> range事例&#xff1a; Range: bytes500-999 //表示第…

Spring Security简介

前面我们已经完成了传智健康后台管理系统的部分功能&#xff0c;例如检查项管理、检查组管理、套餐管理、预 约设置等。接下来我们需要思考2个问题&#xff1a; 问题1&#xff1a;在生产环境下我们如果不登录后台系统就可以完成这些功能操作吗&#xff1f; 答案显然是否定的&am…

微前端-模块联邦

一、 Module Federation 模块联邦概述 Module Federation 即为模块联邦&#xff0c;是 Webpack 5 中新增的一项功能&#xff0c;可以实现跨应用共享模块。 二、快速上手 需求 通过模块联邦在容器应用中加载微应用。 应用结构 products ├── package-lock.json ├──…

程序的机器级表示part3——算术和逻辑操作

目录 1.加载有效地址 2. 整数运算指令 2.1 INC 和 DEC 2.2 NEG 2.3 ADD、SUB 和 IMUL 3. 布尔指令 3.1 AND 3.2 OR 3.3 XOR 3.4 NOT 4. 移位操作 4.1 算术左移和逻辑左移 4.2 算术右移和逻辑右移 5. 特殊的算术操作 1.加载有效地址 指令效果描述leaq S, DD…

【项目实战】32G的电脑启动IDEA一个后端服务要2min!谁忍的了?

一、背景 本人电脑性能一般&#xff0c;但是拥有着一台高性能的VDI&#xff08;虚拟桌面基础架构&#xff09;&#xff0c;以下是具体的配置 二、问题描述 但是&#xff0c;即便是拥有这么高的性能&#xff0c;每次运行基于Dubbo微服务架构下的微服务都贼久&#xff0c;以下…

使用太极taichi写一个只有一个三角形的有限元

公式来源 https://blog.csdn.net/weixin_43940314/article/details/128935230 GAME103 https://games-cn.org/games103-slides/ 初始化我们的三角形 全局的坐标范围为0-1 我们的三角形如图所示 ti.kernel def init():X[0] [0.5, 0.5]X[1] [0.5, 0.6]X[2] [0.6, 0.5]x[0…

每天10个前端小知识 【Day 12】

&#x1f469; 个人主页&#xff1a;不爱吃糖的程序媛 &#x1f64b;‍♂️ 作者简介&#xff1a;前端领域新星创作者、CSDN内容合伙人&#xff0c;专注于前端各领域技术&#xff0c;成长的路上共同学习共同进步&#xff0c;一起加油呀&#xff01; ✨系列专栏&#xff1a;前端…

I.MX6ULL内核开发9:kobject-驱动的基石

目录 一、摘要 二、重点 三、驱动结构模型 四、关键函数分析 kobject_create_and_add()函数 kobject_create()函数 kobject_init&#xff08;&#xff09;函数 kobject_init_internal(&#xff09;函数 kobject_add&#xff08;&#xff09;函数 kobject_add_varg&am…

JAVA集合专题4 ——ArrayDeque + BlockingQueue

目录ArrayDeque的特点BlockingQueue什么是BlockingQueue?什么叫阻塞队列?阻塞队列的应用场景是什么?BlockingQueue的阻塞方法是什么?BlockingQueue的四类方法codecode2ArrayDeque的特点 ArrayDeque是Deque接口子实现ArrayDeque数据结构可以表示为: 队列、双端队列、栈Arra…

C语言学习笔记(三): 选择结构程序设计

if语句 if(){} if (a1){printf("hehe");} //单独一个ifif(){}else{} int a 1, b 2;if (a b) {printf("haha"); //if else}else{printf("hehe");}if(){}else if(){} int a 1, b 2;if (a b) {printf("haha");}else if (a …

io的基本原理-nio

io的基本原理-nioio读写的基本原理io的模型1.同步阻塞IO2. 同步非阻塞IO3. IO多路复用4. 异步IO5.半同步半阻塞半异步IOnio是什么&#xff1f;NIO 的核心原理&#xff1a;java版代码cpp版本I/O&#xff08;Input/Output&#xff09;是计算机科学中指计算机和外部设备进行数据交…

Java Set集合

7 Set集合 7.1 Set集合的概述和特点 Set集合的特点 不包含重复元素的集合没有带索引的方法&#xff0c;所以不能使用普通for循环 Set集合是接口通过实现类实例化&#xff08;多态的形式&#xff09; HashSet&#xff1a;添加的元素是无序&#xff0c;不重复&#xff0c;无索引…

线程和QObjects

QObject的可重入性&#xff1a; QThread继承了QObject&#xff0c;它发出信号以指示线程开始或完成执行&#xff0c;并提供一些插槽。 QObjects可以在多个线程中使用发出调用其他线程中槽的信号&#xff0c;并将事件发布到在其他线程中“活动”的对象。这是可能的&#xff0…

redis可视工具AnotherRedisDesktopManager的使用

redis可视工具AnotherRedisDesktopManager的使用 简介 Another Redis DeskTop Manager 是一个开源项目&#xff0c;提供了以可视化的方式管理 Redis 的功能&#xff0c;可供免费下载安装&#xff0c;也可以在此基础上进行二次开发&#xff0c;主要特点有&#xff1a; 支持 W…

Matlab中安装NURBS工具箱及使用

文章目录前言一、NURBS工具箱的安装1 打开matlab&#xff0c;点击附加功能2 输入nurbs3 下载后压缩包解压4 将解压后的文件夹放到matlab文件夹的toolbox文件夹里面5 选择“预设路径”上方的“预设”二、NURBS工具箱的使用2.1 NURBS 结构&#xff1a;2.2 对NURBS工具箱的初步理解…

关于表的操作 数据库(3)

目录 前期准备工作&#xff1a; 一、单表查询&#xff1a; 二、多表查询&#xff1a; 前期准备工作&#xff1a; 修改数据库的配置文件&#xff0c;&#xff0c;使其可以显示库名&#xff0c;其中//d代表当前使用的数据库名 注&#xff1a;vim /etc/my.cnf.d/mysql-server.c…

Session与Cookie的区别(四)

咖啡寄杯的烦恼 虽然店里生意还可以&#xff0c;但小明无时无刻不想着怎么样发大财赚大钱&#xff0c;让店里的生意变得更好。 他观察到最近好多便利商店开始卖起了咖啡&#xff0c;而且时不时就买一送一或是第二件半价&#xff0c;并且贴心地提供了寄杯的服务。 寄杯就是指说你…

《剑指offer》:数组部分

一、数组中重复的数字题目描述&#xff1a;在一个长度为n的数组里的所有数字都在0到n-1的范围内。 数组中某些数字是重复的&#xff0c;但不知道有几个数字是重复的。也不知道每个数字重复几次。请找出数组中任意一个重复的数字。 例如&#xff0c;如果输入长度为7的数组{2,3,1…

C语言fscanf和fprintf函数的用法详解

fscanf() 和 fprintf() 函数与前面使用的 scanf() 和 printf() 功能相似&#xff0c;都是格式化读写函数&#xff0c;两者的区别在于 fscanf() 和 fprintf() 的读写对象不是键盘和显示器&#xff0c;而是磁盘文件。这两个函数的原型为&#xff1a;int fscanf ( FILE *fp, char …