JS数组API: push、pop 、unshift 、splice、filter、reduce、concat、 forEach...

文章目录

          • push()
          • pop()
          • shift()
          • unshift()
          • slice()
          • splice()
          • join()
          • concat()
          • forEach()
          • map()
          • filter()
          • reduce()
          • fill()
          • 数组查找API
            • includes()
            • indexOf()
            • lastIndexOf()
            • findIndex()
            • sort()
            • reverse()
            • toString()
            • toLocaleString()
            • Array.from()

push()

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

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

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

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

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

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

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

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

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

语法是:array.slice(start, end),其中,start和end都是可选参数,表示选取的元素的起始位置和结束位置。如果不传入参数则默认选取整个数组。该方法返回的是一个新的数组,包含从start到end(不包括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 fruits1 = ['苹果', '橘子'];
const fruits2 = ['西瓜', '蓝莓'];
const combinedFruits = fruits1.concat(fruits2);
console.log(combinedFruits); //[ '苹果', '橘子', '西瓜', '蓝莓' ]
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)

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

  • accumulator:累加器,用于存储上一次回调函数的返回值或初始值。
  • currentValue:当前元素的值。
  • currentIndex:当前元素的索引。
  • 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
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
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
lastIndexOf()

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

const fruits = ['火龙果', '橘子', '蓝莓', '西瓜', '葡萄', '橘子'];
console.log(fruits.lastIndexOf('橘子')); //5
console.log(fruits.lastIndexOf('柚子')); //-1
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 之后。比较函数的返回值规则如下:

  • 如果返回值小于 0,则 a 排在 b 前面。
  • 如果返回值等于 0,则 a 和 b 的相对位置不变。
  • 如果返回值大于 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()

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()

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

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

  • iterable: 必需,一个可迭代对象或类似数组的对象,用于创建新的数组。
  • mapFn (可选): 一个映射函数,用于对每个元素进行处理后返回新数组中的元素。
  • 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 ]

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

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

相关文章

Vue3.4正式发布,更快、更强、更好用

Vue 3.4 正式发布,更快、更强、更好用! 12 月 28 日,Vue 3.4 正式发布,代号为“🏀 Slam Dunk”,即灌篮高手。这个版本进行了许多重要的内部改进,其中最引人瞩目的是重写的模板解析器。新的解析…

RK3399平台入门到精通系列讲解(实验篇)IO 多路复用实验之poll实验

🚀返回总目录 文章目录 一、IO 多路复用:poll介绍二、实验源码2.1、Makefile2.2、poll 实验驱动2.3、poll 驱动测试应用程序一、IO 多路复用:poll介绍 IO 多路复用是一种同步的 IO 模型。IO 多路复用可以实现一个进程监视多个文件描述符。 一旦某个文件描述符准备就绪,就通…

Vue2面试题:说一下虚拟DOM的原理?

虚拟dom是对真实dom的抽象,本质是JS对象 在生成真实DOM之前,vue会把模板编译为一个虚拟dom,当里面某个DOM节点发生变动时,通过diff算法对比新旧虚拟DOM,发现不一样的地方直接修改在真实的DOM上 优点: 可以…

osg - 光照

OSG全面支持 OpenGL 的光照特性,包括材质属性(material property)、光照属性(light property)和光照模型 (lighting model)。与 OpenGL 相似,OSG中的光源也是不可见的,而非渲染一个灯泡或其他自然形状。同样,光源会创建着色效果&a…

进程的程序替换(exec函数)【Linux】

进程的程序替换详解exec函数【Linux】 程序替换的原理exec系列函数函数理解命令理解(助记) 关于程序替换中环境变量的解释exec函数之间的关系exec函数的使用execlexeclpexecleexecv 程序替换的原理 进程的程序替换就是让子进程执行新程序, 执…

C 语言用户输入详解:scanf、fgets、内存地址解析及实用指南

C 语言中的用户输入 您已经学习了 printf() 函数用于在 C 语言中输出值。 要获取用户输入,可以使用 scanf() 函数: // 声明一个整数变量,用于存储我们从用户那里获得的数字 int myNum;// 提示用户输入一个数字 printf("请输入一个数字…

Java 8 新特性

Java 8 新特性 Java 8 (又称为 jdk 1.8) 是 Java 语言开发的一个主要版本。 Oracle 公司于 2014 年 3 月 18 日发布 Java 8 ,它支持 函数式编程,新的 JavaScript 引擎,新的日期 API,新的Stream API 等。 1、新特性 Java8 新增…

QT_02 窗口属性、信号槽机制

QT - 窗口属性、信号槽机制 1. 设置窗口属性 窗口设置 1,标题 2,大小 3,固定大小 4,设置图标在 widget.cpp 文件中: //设置窗口大小,此时窗口是可以拉大拉小的 //1参:宽度 //2参:高度 this->resize(800, 600); //设置窗口标题 this->setWindowTitle("…

Docker中的核心概念

1.镜像 Image 一个镜像就代表一个软件。mysql镜像、redis镜像、mq镜像 2.容器 Container 一个镜像运行一次就会生成一个容器,容器就是一个运行的软件服务。 3.远程仓库 Repository 远程仓库用来存储所有软件的镜像,Docker Hub 4.本地仓库 用来存储…

Ubuntu18.04配置静态ip

文章目录 查看网卡名、ip地址、网关切换root用户,进入配置文件配置静态IP 查看网卡名、ip地址、网关 首先查看网卡名、ip地址、网关,找到对应的网卡名并记录其地址 ifconfigroute -n切换root用户,进入配置文件 sudo -icd /etc/netplanvim …

Linux系统中MYSQL重置密码(针对root忘记密码)

⼀ .进⼊MySql配置⽂件中 vi /etc/my.cnf 在最后⼀⾏添加免密码登陆: skip-grant-tables :wq 保存退出 ⼆.重启MySql service mysql restart 或 systemctl restart mysqld.service 三. 登陆数据库 mysql -uroot -p 让输⼊密码直接回⻋就可以 四.修改MySql密码 use mysql…

听GPT 讲Rust源代码--compiler(11)

File: rust/compiler/rustc_mir_transform/src/simplify.rs 在Rust源代码中,rust/compiler/rustc_mir_transform/src/simplify.rs文件是Rust编译器中一系列进行MIR(中间表示)简化的转换的实现。MIR是Rust编译器中用于进行优化和代码生成的中间…

开源大数据集群部署(一)集群实施规划

作者:櫰木 本次集群规划信息 本次实际生产业务体量存在巨大差异,但集群规划内容相同,因此建议实际生产环境按照按照一定比例扩展即可。 主机操作系统要求 软件信息参数配置8C16G操作系统版本CentOS Linux release 7.8.2003 (Core)java版本…

深入理解 BEM:前端开发中的命名约定革命

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

Python+OpenCV 零基础学习笔记(6):ROI

文章目录 相关链接运行环境前言ROI颜色区域分割颜色通道合并 相关链接 【2022B站最好的OpenCV课程推荐】OpenCV从入门到实战 全套课程 CSDN标题里个括号对应视频的分P OpenCVPython CSDN专栏 Gitee 项目地址 运行环境 Python:3.11.5Anaconda:23.7.4IDE:vscode运行环境&#x…

长虹智能电视41机芯(PM41i)强制刷机升级

适配型号: 3D51C4000i 3D60C4000i 3D60C4300i 升级方法: 第 1 步,将升级程序拷贝到U 盘根目录下,请保持根目录升级文件的唯一性文件名必须采用:chandroid_ota_PM41i_datapart.zip、upgrade_PM41i_EMMC_V1.00010_part…

WebSocket的优点和缺点:一文详解。

WebSocket 的优缺点 WebSocket 协议是一种双向通信协议,它使用单个 TCP 连接实现全双工通信,这使它比传统的 HTTP 协议更有效率。 WebSocket 优点 双向通信: WebSocket 协议支持双向通信,使服务器和客户端之间的通信更加方便和快…

Elasticsearch 中映射参数doc_values 和 fielddata分析比较

一、doc_values 默认情况下,大部分字段是索引的,这样让这些字段可被搜索。倒排索引(inverted index)允许查询请求在词项列表中查找搜索项(search term),并立即获得包含该词项的文档列表。 倒排…

vscode 格式化代码后反而出现红色波浪线格式报错

表现: vscode 代码文件格式化之后,反而出现红色波浪线,提示 应该换行/缩进不正确 等等格式不规范之类的信息。 原因: 因为同时开启了两个格式化插件,且两者的规则有冲突。 就我自己的情况而言:格式化代…

漫谈广告机制设计 | 【预告】万剑归宗:机制设计提高平台广告收入的绝招

读者们好,新年快乐,祝大家新的一年工作顺利,万事如意。 假期更新了两篇文章oCPC实践录 | 以基木鱼为例谈线索类有效转化的设计与智能客服的问题和oCPC实践录 | 目标ROI的出价与转化回传调控算法,欢迎讨论、评论、点赞、分享、转发…