数组中常用的方法

2023-10-31

一、push() 方法和 pop() 方法

push()方法用于向数组末尾添加一个或多个元素,并返回修改后的数组的新长度

const fruits = ['苹果', '香蕉'];
const res = fruits.push('橘子', '西瓜');
console.log(fruits);  //[ '苹果', '香蕉', '橘子', '西瓜' ]
console.log(res);     //4

pop() 方法用于删除并返回数组的最后一个元素

const fruits = ['苹果', '香蕉', '橘子'];
const lastFruit = fruits.pop();
console.log(fruits);     // ['苹果', '香蕉']
console.log(lastFruit); //橘子

二、shift() 方法和 unshift() 方法

shift() 方法用于删除并返回数组的第一个元素。

const fruits = ['苹果', '香蕉', '橘子'];
const firstFruit = fruits.shift();
console.log(fruits);      //[ '香蕉', '橘子' ]
console.log(firstFruit);  //苹果

unshift() 方法用于向数组的开头添加一个或多个元素,并返回修改后的数组的新长度。

const fruits = ['苹果', '香蕉'];
const newLength = fruits.unshift('橘子', '西瓜');
console.log(fruits);        //[ '橘子', '西瓜', '苹果', '香蕉' ]
console.log(newLength); //4

三、slice() 方法

slice() 方法用于从数组中截取指定位置的元素,返回一个新的数组。

语法是:array.slice(start, end),其中,startend都是可选参数,表示选取的元素的起始位置和结束位置。如果不传入参数则默认选取整个数组。该方法返回的是一个新的数组,包含从startend不包括end)的元素。

const names = ['张三', '李四', '王五', '赵六'];
const slicedNames = names.slice(1, 3);
const slicedNames1 = names.slice();
const slicedNames2 = names.slice(0);
const slicedNames3 = names.slice(2);
const slicedNames4 = names.slice(3);
const slicedNames5 = names.slice(4);

//slice不改变原数组
console.log(names);          //[ '张三', '李四', '王五', '赵六' ] 
console.log(slicedNames);  //[ '李四', '王五' ]
console.log(slicedNames1); //[ '张三', '李四', '王五', '赵六' ] 
console.log(slicedNames2); //[ '张三', '李四', '王五', '赵六' ] 
console.log(slicedNames3); //[ '王五', '赵六' ]
console.log(slicedNames4); //[ '赵六' ]
console.log(slicedNames5); //[] 参数大于等于4时就输出空数组

四、splice() 方法

splice() 方法用于从数组中删除、替换或添加元素,并返回被删除的元素组成的数组,它会直接修改原数组。

语法:array.splice(start, deleteCount, item1, item2, ...)

其中,start表示要修改的起始位置,deleteCount表示要删除的元素个数,item1、item2等表示要添加的元素。如果deleteCount为0,则表示只添加元素,不删除元素。

//实现删除
let arr = [1,2,3,4,5]
console.log(arr.splice(0,2));  //[ 1, 2 ] 返回被删除的元素
console.log(arr);  //[ 3, 4, 5 ]   该方法会改变原数组

//实现添加
let arr2 = [1,2,3,4,5]
console.log(arr2.splice(1,0,666,777)); //[] 返回空数组,没有删除元素
console.log(arr2);  //[ 1, 666, 777, 2, 3, 4, 5 ]  原数组改变了

// 实现替换
let arr3 = [1,2,3,4,5]
console.log(arr3.splice(2,1,"aaa","bbb")); //[ 3 ]  返回被删除的一个元素
console.log(arr3);  //[ 1, 2, 'aaa', 'bbb', 4, 5 ]  可以添加字符串

let arr4 = [1,2,3,4,5]
console.log(arr4.splice(1,4,666)); //[ 2, 3, 4, 5 ]  返回被删除的四个元素
console.log(arr4);  //[ 1, 666 ]

五、join() 方法

join() 方法用于将数组中的所有元素以指定的分隔符连接成一个字符串

const fruits = ['苹果', '香蕉', '橘子'];
const joinedString = fruits.join(',');
console.log(fruits);  //[ '苹果', '香蕉', '橘子' ]
console.log(joinedString); //苹果,香蕉,橘子

六、concat() 方法

concat() 方法用于合并两个或多个数组,返回一个新的数组。

const fruits = ['火龙果', '蓝莓', '西瓜', '葡萄'];
fruits.forEach(fruit => {
  console.log(fruit); //火龙果 蓝莓 西瓜 葡萄
});

七、forEach() 方法

forEach() 方法用于对数组中的每个元素执行一个回调函数。

const fruits = ['火龙果', '蓝莓', '西瓜', '葡萄'];
fruits.forEach(fruit => {
  console.log(fruit); //火龙果 蓝莓 西瓜 葡萄
});

八、map() 方法

map() 方法用于对数组中的每个元素执行一个回调函数,并返回一个新的数组,新数组中的元素为回调函数的返回值

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers); //[ 1, 4, 9, 16, 25 ]

九、filter() 方法

filter() 方法用于筛选、过滤数组中符合条件的元素,并返回一个新的数组。

//筛选出偶数
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); //[ 2, 4 ]

十、reduce() 方法

reduce() 方法是数组对象的一个方法,用于将数组中的所有元素按照指定的规则进行归并计算,返回一个最终值。

语法:array.reduce(callback, initialValue)

该方法接收两个参数,第一个参数是一个回调函数,第二个参数是一个初始值。回调函数中可以接收四个参数,分别是:

  1. accumulator:累加器,用于存储上一次回调函数的返回值或初始值。
  2. currentValue:当前元素的值。
  3. currentIndex:当前元素的索引。
  4. array:数组对象本身。

initialValue是初始值,可选参数。

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((acc, num) => {
  return acc + num
}, 10);
console.log(sum); //25
//如果初始值是设为0,则输出15

十一、fill() 方法

JS中的fill方法可以填充一个数组中的所有元素,它会直接修改原数组。

语法:array.fill(value, start, end)

其中,value表示要填充的值,start和end表示要填充的起始位置和结束位置。如果不传入start和end,则默认填充整个数组。该方法返回的是被修改后的原数组。

let arr = [1, 2, 3, 4, 5];
arr.fill(0);
console.log(arr); // [0, 0, 0, 0, 0]

//将数组中从位置2到位置4(不包括位置4)的元素都填充为6
arr.fill(6, 2, 4);
console.log(arr);  //[ 0, 0, 6, 6, 0 ]

十二、数组查找API

1.includes()方法

includes方法用于检查数组中是否包含某个元素,如果包含则返回 true,否则返回 false。

与 indexOf() 方法不同,includes() 方法不支持指定起始位置,它从数组的开头开始搜索。

const fruits = ['苹果', '香蕉', '橘子', '西瓜', 1, 2, 3];
console.log(fruits.includes('橘子')); //true
console.log(fruits.includes('葡萄')); //false
console.log(fruits.includes(3));      //true
console.log(fruits.includes(4));      //false

2.indexOf()方法

需要注意的是,indexOf方法只会返回第一个匹配项的位置。如果数组中存在多个相同的元素,该方法只会返回第一个元素的位置。

此外,indexOf方法还可以接受一个可选的第二个参数,用于指定从哪个位置开始查找。

const fruits = ['苹果', '蓝莓', '橘子', '西瓜', '葡萄'];
console.log(fruits.indexOf('橘子', 1));  //2  返回元素下标
console.log(fruits.indexOf('橘子', 3));  //-1  没有该元素
const arr = [1,2,3,4,5,6,7,6,6,5];
// 从下标6开始查找元素5
console.log(arr.indexOf(5,6)); //9

3.lastIndexOf()()方法

lastIndexOf() 方法用于查找数组中某个元素最后一次出现的索引(位置),如果找到则返回该索引值,否则返回 -1。

const fruits = ['火龙果', '橘子', '蓝莓', '西瓜', '葡萄', '橘子'];
console.log(fruits.lastIndexOf('橘子')); //5
console.log(fruits.lastIndexOf('柚子')); //-1

4.findIndex()方法

findIndex() 方法用于查找数组中满足条件的元素的索引,如果找到则返回该索引值,否则返回 -1。

const arr = [1, 2, 3, 4, 5, 6];
const index = arr.findIndex(num => num > 3);
console.log(index);   //3  返回第一个符合条件的元素的下标
const index2 = arr.findIndex(num => num > 10);
console.log(index2); //-1  不存在符合条件的元素

十三、sort() 方法

sort() 方法用于对数组进行原地排序,会直接修改原始数组,而不会创建新的数组。默认情况下,它将数组元素视为字符串,并按照 Unicode 码点进行排序。但是,可以传入自定义的比较函数来实现基于其他规则的排序。

比较函数:比较函数接收两个参数,通常被称为 a 和 b,表示进行比较的两个元素。它应该返回一个负数、零或正数,表示 a 应该在 b 之前、与 b 相同位置还是在 b 之后。比较函数的返回值规则如下:

  1. 如果返回值小于 0,则 a 排在 b 前面。
  2. 如果返回值等于 0,则 a 和 b 的相对位置不变。
  3. 如果返回值大于 0,则 a 排在 b 后面。
const arr = [3, 1, 5, 2, 4];
arr.sort();
console.log(arr);  //[1, 2, 3, 4, 5]

//默认排序(按照 Unicode 码点排序)
const arr = ['f', 'k', 'c', 'a', 'b'];
arr.sort();
console.log(arr);  //[ 'a', 'b', 'c', 'f', 'k' ]

//使用比较函数进行自定义排序
const arr = [10, 2, 66, 26, 13, 1];
arr.sort((a, b) => a - b);
console.log(arr);  //[ 1, 2, 10, 13, 26, 66 ]

const arr = [10, 2, 66, 26, 13, 1];
arr.sort((a, b) => b - a);
console.log(arr);  //[ 66, 26, 13, 10, 2, 1 ]

十四、reverse() 方法

reverse() 方法用于反转数组中的元素顺序,即将数组元素进行逆序排列。

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

十五、toString()和toLocaleString()方法

toString方法将数组转换为一个由数组元素组成的字符串,元素之间用逗号分隔。

const arr = [1, 2, 3, 4, 5];
console.log(arr.toString());  //1,2,3,4,5
const arr2 = ['苹果', '蓝莓', '橘子', '西瓜', '葡萄'];
const arr3 = ['a', 'null', 'b', 'c', 'undefined', 'd', 'e']
console.log(arr2.toString());  //苹果,蓝莓,橘子,西瓜,葡萄
console.log(arr3.toString());  //a,null,b,c,undefined,d,e

toLocaleString方法将数组转换为一个由数组元素组成的字符串,元素之间同样用逗号分隔,但是它会根据当前环境的语言和地区设置来决定元素的格式。

//根据当前环境的语言和地区设置来决定元素的格式
const arr = [123456.789, new Date()];
//我补充写作的时间
console.log(arr.toLocaleString()); //123,456.789,2023/5/29 07:57:19

const arr2 = [1000, 2000, 3000];
const str = arr2.toLocaleString();
console.log(str); //1,000,2,000,3,000

十六、Array.from() 方法

Array.from() 是 JavaScript 中一个用于从类数组或可迭代对象创建新数组的静态方法。它接收一个可迭代对象或类数组的对象,并返回一个新的数组实例。

Array.from(iterable, mapFn, thisArg)

  1. iterable: 必需,一个可迭代对象或类似数组的对象,用于创建新的数组。
  2. mapFn (可选): 一个映射函数,用于对每个元素进行处理后返回新数组中的元素。
  3. thisArg (可选): 可选参数,执行 mapFn 函数时的 this 值。

     

//使用字符串创建数组
const str = "Hello";
const arr = Array.from(str);
console.log(arr); //[ 'H', 'e', 'l', 'l', 'o' ]
//使用类似数组的对象创建数组
const obj = {
  0: "榴莲",
  1: "牛油果",
  2: "蓝莓",
  length: 3
};
const arr = Array.from(obj);
console.log(arr);  //[ '榴莲', '牛油果', '蓝莓' ]
//使用映射函数处理数组元素
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = Array.from(numbers, num => num * 2);
console.log(doubledNumbers); //[ 2, 4, 6, 8, 10 ]

十七 fnd()方法

查找数组中符合条件的第一个元素,并返回该元素的值。如果没有符合条件的元素,则返回undefined。因此,在使用find方法时,需要先判断返回值是否为undefined,再进行后续操作。

const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];
const targetId = 2;
const targetObj = arr.find(obj => obj.id === targetId);
if (targetObj !== undefined) {
  console.log(targetObj.name);
} else {
  console.log('Not found');
}

需要注意的是,如果我们在使用targetObj时没有进行判断,而是直接访问其属性,那么在没有找到符合条件的对象时,会抛出TypeError异常,因为undefined是不能访问属性的。因此,在使用find方法时,一定要先判断返回值是否为undefined

十八. some方法

判断数组中是否存在符合条件的元素。如果存在,则返回true,否则返回false

const arr = [1, 2, 3, 4, 5];
const result = arr.some(item => item > 3);
console.log(result); // true

在上面的代码中,我们定义了一个数组arr,然后使用some方法判断数组中是否存在大于3的元素。由于数组中存在符合条件的元素,所以some方法返回true

注:findsome方法都是遇到符合条件的元素的元素就返回,不再检测后续元素,而find方法是返回元素本身,some方法是返回true

十九。every方法

判断数组中的所有元素是否都符合条件。如果都符合,则返回true,否则返回false

const arr = [1, 2, 3, 4, 5];
const result = arr.every(item => item > 0);
console.log(result); // true

在上面的代码中,我们定义了一个数组arr,然后使用every方法判断数组中的所有元素是否都大于0。由于数组中所有元素都大于0,所以every方法返回true

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

数组中常用的方法 的相关文章

随机推荐

  • DTO 的替代品

    点击 终码一生 关注 置顶公众号 每日技术干货 第一时间送达 数据传输对象是在进程之间承载数据的对象 使用它的动机是进程之间的通信通常通过远程接口完成 其中每次调用都是昂贵的操作 由于每次调用的大部分成本都与客户端和服务器之间的往返时间有关
  • I/Q信号

    当前的数字射频芯片 无一例外的用到了I Q信号 就算是RFID芯片 内部也用到了I Q信号 然而绝大部分射频人员 对于IQ的了解除了名字之外 基本上一无所知 I Q信号一般是模拟的 也有数字的比如方波 基带内处理的一般是数字信号 在出口处都
  • centos 普通用户操作 supervisor 报错

    当我们在centos系统中使用普通用户操作supervisor时 可能会有以下权限问题 error
  • vue---el-upload使用FormData多文件同时上传

    需求描述 使用el upload 手动上传方式进行文件上传 https element eleme cn zh CN component upload 当选择上传多个文件时 选择几个文件就会向后台发送几次请求 先后台要求同时一次请求发送多个
  • 基于LUT查找表方法的图像gamma校正算法FPGA实现,包括tb测试文件和MATLAB辅助验证

    目录 1 算法运行效果图预览 2 算法运行软件版本 3 部分核心程序 4 算法理论概述 5 算法完整程序工程 1 算法运行效果图预览 将gamma 2 2和gamma 1 2 2的数据分别导入到matlab进行对比 2 算法运行软件版本 m
  • 华为OD机试真题- 不含101的数【2023Q2】【JAVA、Python、C++】

    题目描述 小明在学习二进制时 发现了一类不含101的数 也就是 将数字用二进制表示 不能出现101 现在给定一个正整数区间 请问这个区间内包含了多少个不含101的数 输入描述 输入的唯一一行包含两个正整数 输出描述 输出的唯一一行包含一个整
  • 树莓派教程 - 1.1 树莓派GPIO库wiringPi 硬件PWM可调频率

    Git例程源码仓库 https github com ZhiliangMa raspberry git 使用到的硬件 led 200 左右的电阻 杜邦线 上一节使用最基本的 GPIO数字输出 led亮了 可如果想要调整led亮度怎么办 PW
  • 【C/C++面试必备

    作者 Linux猿 简介 CSDN博客专家 华为云享专家 Linux C C 云计算 物联网 面试 刷题 算法尽管咨询我 关注我 有问题私聊 关注专栏 数据结构和算法成神路 精讲 优质好文持续更新中 欢迎小伙伴们点赞 收藏 留言 一个由 c
  • 【快速部署一个k8s单节点】

    1 初始化脚本 bin bash swapoff a sed i r swap s etc fstab systemctl stop firewalld service systemctl disable firewalld service
  • 【C 练习】不创建临时变量,交换两个整数的值(异或实现)

    首先我们先来看两个算式 由此可以得出 1 任何数异或自己本身等于0 2 任何数异或0等于它本身 接下来分析算式
  • 机器学习之单变量线性回归(Linear Regression with One Variable)

    1 模型表达 Model Representation 我们的第一个学习算法是线性回归算法 让我们通过一个例子来开始 这个例子用来预测住房价格 我们使用一个数据集 该数据集包含俄勒冈州波特兰市的住房价格 在这里 我要根据不同房屋尺寸所售出的
  • 第九章 关系查询处理和查询优化

    第九章 关系查询处理和查询优化 9 1 关系数据库系统的查询处理 9 1 1 查询处理步骤 查询分析 对查询语句进行扫描 词法分析和语法分析 词法分析 从查询语句中识别出正确的语言符号 语法分析 进行语法检查 查询检查 合法性检查 视图转换
  • 【表格合并单元格】vue-elementul表格动态合并实现方法,合并行,合并列方法【详细讲解,看完就理解】

    功能 这个elementul表格单元格合并功能是很多地方会用到的 但是官方文档那个有点看的不明白 这里详细讲一下 这里包含有一个行的合并方法 一个列的合并方法 都是详细注释了的 讲解了他的规则 看完后就知道怎么用这个了 效果图 这里是合并的
  • DC-DC---升压斩波电路(BOOST)

    直流升压电路电路 原理图 工作波形 工作原理 分析升压斩波电路的工作原理时 首先假设电路中电感L值很大 电容C值也很大 当可控开关V处于通态时 电源E向电感L充电 充电电流基本恒定为I 同时电容C上的电压向负载R供电 因C值很大 基本保持输
  • LVM逻辑卷 (图文详细教程)

    目录 一 磁盘逻辑卷管理概念介绍 二 LVM逻辑卷管理命令 三 fdisk 常用命令 四 操作 1 安装LVM需要的插件 一般都自带了 2 查看磁盘 3 磁盘分区 PE 4 PV物理卷 5 VG卷组 6 LV逻辑卷 7 文件系统创建 8 挂
  • <mvc:annotation-driven/>与<mvc:default-servlet-handler/>之间的关系问题

    在做项目的时候 我希望静态资源由WEB服务器默认的Servlet来处理 所以我在配置文件中添加了如下的语句
  • 当删除oracle数据库user时发生row cache lock 等待事件

    在oracle数据库中做的动作如下 drop user abc hang住 等待事件为 row cache lock Hanganalyze 显示 Chains most likely to have caused the hang a C
  • Redis BoundValueOperations 接口文档 RedisTemplate整合 Boot

    BoundValueOperations 接口文档 因为官方文档并没有对方法的描述 源码里面也没有注释 所以在下面增加一份方法作用描述 方法中的 V K均为String BoundValueOperations
  • 阿里云ECS(CentOS 7.3)的搭建过程

    一 安装JDK和配置环境变量 1 创建jdk安装目录 创建过则跳转即可 mkdir p usr local src 2 使用wget命令下载jdk包 wget no check certificate no cookies header C
  • 数组中常用的方法

    一 push 方法和 pop 方法 push 方法用于向数组末尾添加一个或多个元素 并返回修改后的数组的新长度 const fruits 苹果 香蕉 const res fruits push 橘子 西瓜 console log fruit