js 数组常用函数总结

目录

1、push

2、unshif

3、pop

4、shift

5、concat

6、slice

7、splice

8、join

9、indexOf

 10、lastIndexOf

 11、forEach

12、map

13、filter

14、reduce

15、sort

16、reverse

17、includes

18、some

19、every

 20、toString

21.、find

 22、findLast

23、 findIndex

24、findLastIndex

 25、fill

26、reduceRight

27、 at

28、 copyWithin

29、 flat

30、 flatMap

31、 Array.from

32、 Array.of()

33、Array.isArray()


1、push

功能:向数组末尾添加一个或多个元素,并返回数组的新长度

//1. 向数组末尾添加单个元素
const numbers = ["cat", "dog", "bird"];
const length = numbers.push( "pig");
console.log(numbers);  // ['cat', 'dog', 'bird', 'pig']
console.log(length);   // 4
//2、向数组末尾添加多个元素
const fruits = ['apple', 'banana'];
fruits.push('kiwi', 'orange');
console.log(fruits);  // ['apple', 'banana', 'kiwi', 'orange']

2、unshif

功能:向数组开头添加一个或多个元素,并返回数组的新长度

//1. 向数组开头添加单个元素
const numbers = ["cat", "dog", "bird"];
const length = numbers.unshift( "pig");
console.log(numbers);  // [ 'pig','cat', 'dog', 'bird']
console.log(length);   // 4
//1. 向数组开头添加多个元素
const fruits = ['banana', 'orange'];
fruits.unshift('apple', 'kiwi');
console.log(fruits);  // ['apple', 'kiwi', 'banana', 'orange']

3、pop

功能:删除数组的最后一个元素,并返回删除的元素

//删除数组的最后一个元素
const fruits = ['apple', 'banana', 'kiwi'];
const removedElement = fruits.pop();
console.log(fruits);          // ['apple', 'banana']
console.log(removedElement);  // 'kiwi'

4、shift

功能:删除数组的第一个元素,并返回删除的元素

//删除数组的第一个元素
const fruits = ['apple', 'banana', 'kiwi'];
const removedElement = fruits.shift();
console.log(fruits);          // ['banana', 'kiwi']
console.log(removedElement);  // 'apple'
//如果删除空数组,结果将返回undefined
const emptyArray = [];
const removedElement = emptyArray.shift();
console.log(emptyArray);     // []
console.log(removedElement);  // undefined

5、concat

功能:将两个或多个数组合并成一个新数组原数组不变

//1. 连接两个数组:
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const concatenatedArray = array1.concat(array2);
console.log(concatenatedArray);  // [1, 2, 3, 4, 5, 6]
//2. 连接数组和值:
const array = [1, 2, 3];
const value = 4;
const concatenatedArray = array.concat(value);
console.log(concatenatedArray);  // [1, 2, 3, 4]
//3. 连接多个数组:
const array1 = [1, 2];
const array2 = [3, 4];
const array3 = [5, 6];
const concatenatedArray = array1.concat(array2, array3);
console.log(concatenatedArray);  // [1, 2, 3, 4, 5, 6]

6、slice

功能:从数组中提取指定范围的元素并返回一个新数组

  • slice() 方法返回数组一部分的浅拷贝。

  • 返回一个新数组,并且不会修改原始数组

//array.slice(start,end);
//start 为提取元素起始位置的索引(包括该索引对应的元素);
//end 是提取元素结束位置的索引(不包括该索引对应的元素);
//如果未指定 end 参数,则提取从起始索引位置到数组末尾的所有元素。//1.提取指定范围内的元素
const fruits = ['apple', 'banana', 'kiwi', 'orange', 'grape'];
const slicedElements = fruits.slice(1, 4);
console.log(slicedElements);  // ['banana', 'kiwi', 'orange']//2.提取指定位置到数组末尾的元素
const numbers = [1, 2, 3, 4, 5];
const slicedElementsToEnd = numbers.slice(2);
console.log(slicedElementsToEnd);  // [3, 4, 5]//3.复制数组
const originalArray = [1, 2, 3, 4, 5];
const copiedArray = originalArray.slice();
console.log(copiedArray);  // [1, 2, 3, 4, 5]

7、splice

功能:删除、替换或添加元素到数组的指定位置。

//array.splice(start,deleteCount,item1,item2,...)
//start 是要修改的起始位置的索引;
//deleteCount 是要删除的元素数。
//您可以根据需要指定item1、item2等参数来插入新元素。
//如果未指定deleteCount,则删除从起始索引位置开始的所有元素。//1.删除元素
const numbers = [1, 2, 3, 4, 5];
const deletedElements = numbers.splice(2, 2);
console.log(numbers);          // [1, 2, 5]
console.log(deletedElements);  // [3, 4]//2.更换元素
const fruits = ['apple', 'banana', 'kiwi'];
const replacedElements = fruits.splice(1, 1, 'orange', 'grape');
console.log(fruits);             // ['apple', 'orange', 'grape', 'kiwi']
console.log(replacedElements);   // ['banana']//3.插入元素
const colors = ['red', 'blue', 'green'];
colors.splice(1, 0, 'yellow', 'purple');
console.log(colors);  // ['red', 'yellow', 'purple', 'blue', 'green']

8、join

功能:使用指定的分隔符将数组中的所有元素连接成字符串。

//array.join(separator)
//分隔符是可选字符串参数,指定元素之间的分隔符,默认为逗号(,)//1.数组之间用“-”分隔
const fruits = ['apple', 'banana', 'kiwi'];
const joinedString = fruits.join('-');
console.log(joinedString);  // "apple-banana-kiwi"//2.默认使用逗号作为分隔符
const numbers = [1, 2,3, 4, 5];
const joinedStringDefault = numbers.join();
console.log(joinedStringDefault);  // "1,2,3,4,5"

9、indexOf

 功能:返回指定元素在数组中第一次出现的索引,如果没有找到则返回-1。

//array.indexOf(searchElement,formIndex)//1.搜索数组项第一次出现时的下标位置
const fruits = ['apple', 'banana', 'kiwi', 'banana', 'orange'];
const index = fruits.indexOf('banana');
console.log(index);  // 1//2.从指定位置开始从前向后查找数组项第一次出现的下标位置
const numbers = [1, 2, 3, 4, 5, 3, 2, 1];
const indexFromIndex = numbers.indexOf(3, 3);
console.log(indexFromIndex);  // 5

 10、lastIndexOf

功能:返回指定元素在数组中最后一次出现的索引,如果没有找到则返回-1。

//array.lastIndexOf(searchElement,formIndex)
//searchElement表示要查找的元素,
//fromIndex则是起始查找位置。
//如果没有设置fromIndex,则默认从数组末尾开始查找。
//该方法返回最后一个匹配的元素的位置,若没有找到,则返回-1。//1.搜索数组项最后一次出现时的下标位置
const fruits = ['apple', 'banana', 'kiwi', 'banana', 'orange'];
const lastIndex = fruits.lastIndexOf('banana');
console.log(lastIndex);  // 3//2.从指定索引位置开始从后向前查找第一个出现的下标位置
const numbers = [1, 2, 3, 4, 5, 3, 2, 1];
const lastIndexFromIndex = numbers.lastIndexOf(3, 4);
console.log(lastIndexFromIndex);  // 2

 11、forEach

功能:对数组中的每个元素执行指定的函数,不返回新数组。

//forEach()方法不能中断或跳过迭代。

12、map

功能:对数组中的每个元素执行指定的函数,并返回由执行结果组成的新数组

//array.map(callback(element,index,array));
//callback是回调函数const numbers = [1,2,3,4,5,6];
const doubledNumbers = numbers.map(el=>el * 2);
console.log(doubledNumbers );  // [2,4,6,8,10,12]

13、filter

功能:根据指定条件过滤掉数组中符合条件的元素,返回一个新数组

//array.filter(callback(element,index,array));const numbers = [1,2,3,4,5,6];
const oddNumbers = numbers.filter(el=> el%2);
console.log(oddNumbers );  // [1,3,5]

14、reduce

功能:对数组中的所有元素执行指定的归约函数,并返回单值结果。将数组缩减为单个值。

//array.reduce(callback(accumulator,currentValue,index,array));
//参数说明:callback是回调函数,可以接受四个参数:
//accumulator:累加器,用于保存计算结果。
//currentValue:当前遍历的元素。
//index:当前遍历元素的索引。
//array:正在遍历的数组。const numbers = [2,3,1,4];
let result = numbers.reduce((sum, current) => sum + current, 2);  
console.log(result);//12

15、sort

功能:对数组元素进行排序。

//1.不传递参数调用sort,会直接修改原数组,返回排序后的数组
const fruits = ['banana','apple','kiwi','pear'];
fruits.sort();
console.log(fruits); //['apple','banana','kiwi','pear']//2.传入比较函数,该函数接受两个参数,返回一个代表比较结果的数字
const numbers = [10,5,8,2,3];
numbers.sort((a,b)=>a-b);
console.log(numbers );  // [2,3,5,8,10]

16、reverse

功能:反转数组中元素的顺序。会直接修改原数组,不会创建新数组

//reverse会直接修改原数组,不会返回新数组,可以使用slice()先复制一个新数组,再reverse
const numbers = [1,2,3,4,5];
const reversedNumbers = numbers.slice().reverse();
console.log(numbers);  // [1,2,3,4,5]
console.log(reversedNumbers);  //[5,4,3,2,1]

17、includes

功能:判断数组是否包含指定元素,返回true或false。

//array.includes(searchElement,formIndex)//1. 检查数组是否包含特定元素
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3));  // true
console.log(numbers.includes(6));  // false//2.使用fromIndex参数指定搜索的起始位置
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3, 2));  // true, search starts from index 2
console.log(numbers.includes(3, 4));  // false, search starts from index 4//3. 检查数组中是否包含字符串
const fruits = ['apple', 'banana', 'kiwi', 'pear'];
console.log(fruits.includes('banana'));  // true
console.log(fruits.includes('grape'));   // false

18、some

功能:检查数组中是否至少有一个元素满足指定条件,返回true或false。

//array.some(callback(element,index,array));//1、检查数组中是否有大于10的元素
const numbers = [5, 8, 12, 3, 9];
const hasGreaterThan10 = numbers.some(element => element > 10);
console.log(hasGreaterThan10);  // true//2. 检查数组中是否有偶数
const numbers = [3, 7, 5, 12, 9];
const hasEvenNumber = numbers.some(element => element % 2 === 0);
console.log(hasEvenNumber);  // true//3. 检查数组中是否存在包含特定字符的字符串
const fruits = ['apple', 'banana', 'kiwi', 'pear'];
const hasStrWithChar = fruits.some(element => element.includes('a'));
console.log(hasStrWithChar);  // true//4、检查数组中是否存在满足复杂条件的元素
const students = [{ name: 'Alice', score: 85 },{ name: 'Bob', score: 92 },{ name: 'Charlie', score: 76 },
];
const hasPassingScore = students.some(student => student.score >= 80);
console.log(hasPassingScore);  // true

19、every

功能:检查数组中所有元素是否满足指定条件,返回true或false。

//array.every(callback(element,index,array));//1.检查数组中的所有元素是否都大于 0
const numbers = [5, 8, 12, 3, 9];
const allGreaterThan0 = numbers.every(element => element > 0);
console.log(allGreaterThan0);  // true//2.检查数组中的所有元素是否都是偶数
const numbers = [2, 4, 6, 8, 10];
const allEvenNumbers = numbers.every(element => element % 2 === 0);
console.log(allEvenNumbers);  // true//3.检查数组中的所有字符串是否以大写字母开头
const words = ['Apple', 'Banana', 'Cherry', 'Durian'];
const allUpperCaseStart = words.every(element => /^[A-Z]/.test(element));
console.log(allUpperCaseStart);  // true//4.检查数组中的所有对象是否满足特定条件
const students = [{ name: 'Alice', score: 85 },{ name: 'Bob', score: 92 },{ name: 'Charlie', score: 76 },
];
const allPassingScore = students.every(student => student.score >= 80);
console.log(allPassingScore);  // false

 20、toString

功能:toString() 方法返回一个由逗号分隔的字符串。 它不会修改原始数组


const colors = ["Red", "Green", "Blue", "Yellow", "Purple"];
console.log(colors.toString( )); //"Red, Green, Blue, Yellow, Purple"

21.、find

ES5 使用 indexOf() 和 lastIndexOf() 方法来查找数组中的元素。 find() 方法是在 ES6 中引入的。

功能:返回数组中满足条件的第一个元素的。如果没有找到合适的元素,则返回 undefined。

let numbers = [1, 3, 4, 6, 7];
console.log(numbers.find(e => e % 2 == 0)); // 4

 22、findLast

功能:返回数组中满足条件的最后一个元素的。如果没有找到合适的元素,则返回 undefined。

let numbers = [1, 3, 4, 6, 7];
console.log(numbers.findLast(e => e % 2 == 0)); // 6

23、 findIndex

功能:返回数组中满足条件的第一个元素的索引如果没有找到合适的元素,则返回 -1。

let numbers = [1, 15, 7, 8, 10, 15];
let index = numbers.findIndex(number => number === 15);
console.log(index); // 1

24、findLastIndex

功能:返回数组中满足条件的最后一个元素的索引,如果没有找到合适的元素,则返回 -1。

let numbers = [1, 15, 7, 8, 10, 15];
let index = numbers.findLastIndex(number => number === 15);
console.log(index); // 5

 25、fill

功能:将数组中的所有元素更改为静态返回修改后的数组


let numbers = [1,2,3,4,5,6];//1.fill(value)将数组中所有元素修改为value
let result = numbers.fill(0);
console.log(result);//[0,0,0,0,0,0]//2.fill(value, start)将数组中从start开始的元素(包括start)修改为value
let result = numbers.fill(0,2);
console.log(result);//[1,2,0,0,0,0]//3.fill(value, start, end) 
//将数组中从start开始的元素(包括start)到end结束的元素(不包括end)修改为value
let result = numbers.fill(0,2,4);
console.log(result);//[1,2,0,0,5,6]

26、reduceRight

功能:对数组中的所有元素从右到左执行指定的归约函数,从而产生一个输出值。


const list = [😀, 😫, 😀, 😫, 🤪];
list.reduceRight((⬜️, ⚪️) => ⬜️ + ⚪️); // 🤪 + 😫 + 😀 + 😫 + 😀const list = [1, 2, 3, 4, 5];
list.reduceRight((total, item) => total + item, 0); // 15

27、 at

返回指定索引处的值。索引前加负号,表示从右向左找。

const list = [1, 2, 3, 4, 5];
console.log(list.at(1)); // 2
console.log(list.at(-1)); // 5
console.log(list.at(-2)); // 4

28、 copyWithin

复制数组中的数组元素,并返回修改后的新数组。

  • 第一个参数是开始复制元素的目标。
  • 第二个参数是开始复制元素的索引。
  • 第三个参数是停止复制元素的索引。
const list = [1, 2, 3, 4, 5];
const result = list.copyWithin(0, 3, 4); 
console.log(result);// [4,2,3,4,5]const list = [1, 2, 3, 4, 5,6];
const result = list.copyWithin(0, 3, 5); 
console.log(result);// [4,5,3,4,5,6]

29、 flat

返回一个新数组,其中所有子数组元素递归连接到指定深度。

const list = [1, 2, [3, 4, [5, 6]]];
const result = list.flat(Infinity); 
console.log(result);// [1, 2, 3, 4, 5, 6]

30、 flatMap

 返回通过将给定的回调函数应用于数组的每个元素而形成的新数组。

const list = [1, 2, 3];
const result = list.flatMap((el) => [el, el * el]);
console.log(result); // [1, 1, 2, 4, 3, 9]

31、 Array.from

从类数组或可迭代对象创建一个新数组。

const list = "123456";
let result =Array.from(list); 
console.log(result);//[1,2,3,4,5,6]const range = (n) => Array.from({ length: n }, (_, i) => i + 1);
console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

32、 Array.of()

使用可变数量的参数创建一个新数组,而不管参数的数量或类型。

const list = Array.of(1, 2, 3, 4, "apple",{name:"Lucy",age:18});
console.log(list);//[1,2,3,4,"apple",{"name": "Lucy","age": 18}]

33、Array.isArray()

如果给定值是一个数组,则返回 true。

const list = Array.isArray([1, 2, 3, 4, 5]);
console.log(list); // true
const list2 = Array.isArray(5); 
console.log(list2);// false

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

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

相关文章

JavaWeb学习——请求响应、分层解耦

目录 一、请求响应学习 1、请求 简单参数 实体参数 数组集合参数 日期参数 Json参数 路径参数 总结 2、响应 ResponseBody&统一响应结果 二、分层解耦 1、三层架构 三层架构含义 架构划分 2、分层解耦 引入概念 容器认识 3、IOC&DI入门 4、IOC详解 …

Cadence23学习笔记(十四)

ARC就是圆弧走线的意思: 仅打开网络的话可以只针对net进行修改走线的属性: 然后现在鼠标左键点那个走线,那个走线就会变为弧形: 添加差分对: 之后,分别点击两条线即可分配差分对: 选完差分对之后…

微服务实践和总结

H5原生组件web Component Web Component 是一种用于构建可复用用户界面组件的技术&#xff0c;开发者可以创建自定义的 HTML 标签&#xff0c;并将其封装为包含逻辑和样式的独立组件&#xff0c;从而在任何 Web 应用中重复使用。 <!DOCTYPE html> <html><head…

css in js 相比较 css modules 有什么好处?

CSS-in-JS 和 CSS Modules 都是用于管理 React 组件样式的流行方案&#xff0c;它们各有优势。相比 CSS Modules&#xff0c;CSS-in-JS 的主要好处包括: 动态样式&#xff1a;CSS-in-JS 可以轻松创建基于 props 或状态的动态样式&#xff0c;更灵活地处理复杂的样式逻辑。 无需…

【vue3|第18期】Vue-Router路由的三种传参方式

日期:2024年7月17日 作者:Commas 签名:(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释:如果您觉得有所帮助,帮忙点个赞,也可以关注我,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^ 1.01365 = 37.7834;0.99365 = 0.0255 1.02365 = 1377.408…

EtherNet/IP网络基础

EtherNet/IP&#xff08;Ethernet Industrial Protocol&#xff09;是一种用于工业自动化的通信协议&#xff0c;基于以太网技术。它允许设备和控制系统之间进行高效的数据交换和通信。以下是EtherNet/IP网络的基础知识。 1. 什么是EtherNet/IP&#xff1f; EtherNet/IP是由O…

ctfshow SSTI注入 web369--web372

web369 这把request过滤了&#xff0c;只能自己拼字符了 ""[[__clas,s__]|join] 或者 ""[(__clas,s__)|join] 相当于 ""["__class__"]举个例子&#xff0c;chr(97) 返回的是字符 a&#xff0c;因为 97 是小写字母 a 的 Unicode 编码…

go操作aws s3

v2 官方推荐版本&#xff0c;需要go版本>1.20 安装 go get github.com/aws/aws-sdk-go-v2 go get github.com/aws/aws-sdk-go-v2/config go get github.com/aws/aws-sdk-go-v2/service/s3必要参数 bucket: 存储桶的名称 Region: 存储桶所在区域,例us-east-1 accessKey…

PHP运算符

PHP 运算符是用于执行各种操作&#xff08;如算术运算、比较、逻辑运算、字符串连接等&#xff09;的符号。在 PHP 中&#xff0c;运算符的命名主要是基于它们的功能和用法&#xff0c;而不是像变量或函数那样可以自定义名称。以下是一个关于 PHP 运算符的详细教程&#xff0c;…

unity2D游戏开发01项目搭建

1新建项目 选择2d模板,设置项目名称和存储位置 在Hierarchy面板右击&#xff0c;create Empty 添加组件 在Project视图中右键新建文件夹 将图片资源拖进来&#xff08;图片资源在我的下载里面&#xff09; 点击Player 修改属性&#xff0c;修好如下 点击Sprite Editor 选择第二…

Angular由一个bug说起之八:实践中遇到的一个数据颗粒度的问题

互联网产品离不开数据处理&#xff0c;数据处理有一些基本的原则包括&#xff1a;准确性、‌完整性、‌一致性、‌保密性、‌及时性。‌ 准确性&#xff1a;是数据处理的首要目标&#xff0c;‌确保数据的真实性和可靠性。‌准确的数据是进行分析和决策的基础&#xff0c;‌因此…

【目标检测】非极大值抑制(Non-Maximum Suppression, NMS)步骤与实现

步骤 置信度排序&#xff1a;首先根据预测框的置信度&#xff08;即预测框包含目标物体的概率&#xff09;对所有预测框进行降序排序。选择最佳预测框&#xff1a;选择置信度最高的预测框作为参考框。计算IoU&#xff1a;计算其他所有预测框与参考框的交并比&#xff08;Inter…

【数据结构】建堆算法复杂度分析及TOP-K问题

【数据结构】建堆算法复杂度分析及TOP-K问题 &#x1f525;个人主页&#xff1a;大白的编程日记 &#x1f525;专栏&#xff1a;数据结构 文章目录 【数据结构】建堆算法复杂度分析及TOP-K问题前言一.复杂度分析1.1向下建堆复杂度1.2向上建堆复杂度1.3堆排序复杂度 二.TOP-K问…

深度学习1-简介

人工智能&#xff08;AI&#xff09;旨在打造模仿智能行为的系统。它覆盖了众多方法&#xff0c;涵盖了基于逻辑、搜索和概率推理的技术。机器学习是 AI 的一个分支&#xff0c;它通过对观测数据进行数学模型拟合来学习决策制定。这个领域近年来迅猛发展&#xff0c;现在几乎&a…

前端地位蹭蹭蹭Up!!!

作者&#xff1a;溪饱鱼 链接&#xff1a;juejin.cn/post/7283642910301192244 顺便吆喝一句&#xff0c;如果你本科学历&#xff0c;对技术大厂有向往&#xff0c;对前后端测试岗位有兴趣&#xff0c;不对大厂外包有100%的排斥&#xff0c;可以看看这里&#xff0c;薪酬待遇确…

Ruby语言详解

Ruby语言详解 Ruby&#xff0c;作为一种简单快捷的面向对象脚本语言&#xff0c;自20世纪90年代由日本人松本行弘&#xff08;Yukihiro Matsumoto&#xff09;开发以来&#xff0c;便以其独特的魅力和强大的功能赢得了全球开发者的青睐。Ruby不仅继承了Perl、Smalltalk、Eiffe…

​ ​【Linux】-----工具篇(多模式编辑器vim介绍及配置)

目录 认识常用三种模式 基本操作 Ⅰ、进入/打开vim Ⅱ、模式转换 Ⅲ、退出vim 命令集 Ⅰ、命令模式下 移动光标 删除文字 复制 替换 撤销 批量化注释 批量化去注释 Ⅱ、底行模式下 列出行号 跳转至指定行 查找字符 保存文件 退出vim 查看文件 分屏操作 vim的简…

论文阅读:面向自动驾驶场景的多目标点云检测算法

论文地址:面向自动驾驶场景的多目标点云检测算法 概要 点云在自动驾驶系统中的三维目标检测是关键技术之一。目前主流的基于体素的无锚框检测算法通常采用复杂的二阶段修正模块,虽然在算法性能上有所提升,但往往伴随着较大的延迟。单阶段无锚框点云检测算法简化了检测流程,…

CUE-云原生配置语言

CUE 是一种服务于云化配置的强类型配置语言&#xff0c;由 Go team 成员 Marcel van Lohiuzen 结合 BCL 及多种其他语言研发并开源&#xff0c;可以说是 BCL 思路的开源版实现CUE 是一种服务于云化配置的强类型配置语言&#xff0c;由 Go team 成员 Marcel van Lohiuzen 结合 B…

AI OS

一&#xff0c;概念 AI OS, 或AI for OS&#xff0c;也就是近一年来伴随着人工智能的热度而衍生出的一个新的概念 - 人工智能操作系统。 为什么提出AI OS的概念&#xff1f; 这是因为人工智能技术的发展势头太过迅猛&#xff0c;尤其在深度学习、大模型等AI技术的突破后&…