当前位置： 首页 > news >正文

js数组常用的方法（总结）

news 2025/9/11 18:43:40

目录

1.数组头和尾操作——push、pop、unshift/shift

2、数组转为字符串 —— join()

3、数组截取 —— slice()

4、数组更新 —— splice()

5、反转数组 —— reverse()

6、连接数组 —— concat()

7、ES6连接数组 —— ...

ES5数组新增方法

8、索引方法 —— indexOf()和 lastIndexOf() 

9、迭代方法

1、遍历循环 —— forEach()

2、映射 —— map()

3、过滤 —— filter()

4、判断 —— every()   都满足吗

5、判断 —— some()   有满足吗

ES6数组新增方法

10、Array.from() —— 将类数组的对象转换成数组

 11、Array.of() —— 将一组值转变为数组

12、find() —— 返回第一个匹配的数据

13、findIndex() —— 返回第一个匹配的数据的索引

 14、fill() —— 填充数组

15、includes() —— 判断数组是否包含指定的值，返回true  or  false

16、copyWithin() —— 拷贝元素

1.数组头和尾操作——push、pop、unshift/shift

尾部push可向数组的末尾添加一个或多个元素，并返回新的长度

影响

原数组

pop可向数组的末尾删除一个或多个元素，并返回新的长度
头部unshift可向数组的头部添加一个或多个元素，并返回新的长度
shift可向数组的头部删除一个或多个元素，并返回新的长度

代码示例：

let arr = [1,2,3];//数组尾操作
arr.push(4);
console.log(arr);
arr.pop(4);
console.log(arr);//数组头操作
arr.unshift(0);
console.log(arr);
arr.shift(0);
console.log(arr);

运行结果：

2、数组转为字符串 —— join()

join()将数组转为字符串，间隔默认为“，”，里面传参的话可以自定义间隔符。原数组不变

代码：

			let arr2 = [1,2,3]console.log(arr2.join())console.log(arr2.join(':'))console.log(arr2)

 运行结果：

3、数组截取 —— slice()

arr.slice(start , end); 

其中end为可选，且原数组不变

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

4、数组更新 —— splice()

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。（该方法会改变原始数组）

arr.splice(index , howmany , item1,.....,itemX)

index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。

item1, ..., itemX：可选。向数组添加的新项目。

返回值：含有被删除的元素的数组，若没有删除元素则返回一个空数组。


示例代码：

var arr = ["张三","李四","王五","小明","小红"];/**************删除"王五"****************/var arrReplace1 = arr.splice(2,1);	console.log(arrReplace1);  // ["王五"] console.log(arr);  // ["张三", "李四", "小明", "小红"] (原数组改变)//删除多个var arrReplace2 = arr.splice(1,2);	console.log(arrReplace2);  //  ["李四", "小明"] console.log(arr);  // ["张三", "小红"]/**************添加"小刚"****************/var arrReplace3 = arr.splice(1,0,"小刚");console.log(arrReplace3);  // [] (没有删除元素，所以返回的是空数组)console.log(arr);  // ["张三", "小刚", "小红"]//添加多个var arrReplace4 = arr.splice(3,0,"刘一","陈二","赵六");console.log(arrReplace4);  // []console.log(arr);  // ["张三", "小刚", "小红", "刘一", "陈二", "赵六"]/**************"王五"替换"小刚"****************/var arrReplace5 = arr.splice(1,1,"王五");console.log(arrReplace5);  // ["小刚"]console.log(arr);  // ["张三", "王五", "小红", "刘一", "陈二", "赵六"]//替换多个var arrReplace6 = arr.splice(1,4,"李四");console.log(arrReplace6);  // ["王五", "小红", "刘一", "陈二"]console.log(arr);  // ["张三", "李四", "赵六"]

5、反转数组 —— reverse()

方法用于颠倒数组中元素的顺序。改变原数组

代码示例：

let arr4 = ['苹果','香蕉','梨子'];
console.log(arr4.reverse());//['梨子', '香蕉', '苹果']
console.log(arr4);          //['梨子', '香蕉', '苹果']

6、连接数组 —— concat()

连接一个或多个数组，传参时连接数组，不传参时复制数组。不改变原数组

代码示例：

let arr5 = [1,2,3];
let arr6 = [4,5,6];
let newArr = arr5.concat(arr6);
console.log(arr5.concat());  //[1, 2, 3]
console.log(newArr);         //[1, 2, 3, 4, 5, 6]
console.log(arr5);           //[1, 2, 3]

7、ES6连接数组 —— ...

[..数组1,...数组2,...数组3,..,...数组N]； 就可以将两个或者多个数组进行连接，不改变原数组

代码示例：

let arr7 = ['a','b','c'];
let arr8 = ['d','e','f'];
let arr9 = ['g','h','i'];// ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']
console.log([...arr7,...arr8,...arr9]);

ES5数组新增方法

8、索引方法 —— indexOf()和 lastIndexOf() 

.indexOf(查找的字符,[从哪开始])     从前往后找，查找到字符首次出现的位置下标，没找到返回-1

.lastIndexOf(查找的字符,[从哪开始])     从后往前找，查找到字符首次出现的位置下标，没找到返回-1

代码示例：

let array = [1,2,3,4,2];
console.log(array.indexOf(2));     //1
console.log(array.indexOf(2,2));   //4
console.log(array.lastIndexOf(2)); //4

9、迭代方法

这几个方法语法都一样，都不会改变原数组

1、遍历循环 —— forEach()

array.forEach(function(value,key,arr){

        ...

})

value:必选，当前元素的值；

key:可选，当前元素的索引值；

arr:可选，当前元素所属的数组对象。

代码示例：

let arr = ['a','b','c','d'];
arr.forEach(function(a,b,array){console.log(a+'--'+b+'--'+array)
})

运行结果：

2、映射 —— map()

返回新数组，新数组是原数组处理后的值。

代码示例：

let arr = ['a','b','c','d'];
var arr2 = arr.map(function(a,b){return a+'00';
})
console.log(arr2)

 运行结果：

3、过滤 —— filter()

创建一个新的数组，返回的是对原数组进行筛选过滤

代码示例：

let arr3 = ['a','b','c','d'];
var arr4 = arr3.filter(function(a,b){return b>2;
})
console.log(arr4);//['d']

4、判断 —— every()   都满足吗

判断所有选项是否都满足条件，是返回true

代码示例：

			let arr3 = [1,2,3,4,5];let result1 = arr3.every(function(a,b){return a>3;})console.log(result1);let result2 = arr3.every(function(a,b){return a>0;})console.log(result2);

运行结果：

5、判断 —— some()   有满足吗

判断所有选项是否有满足条件，是返回true

代码示例：

			let arr3 = [1,2,3,4,5];let result1 = arr3.some(function(a,b){return a>3;})console.log(result1);let result2 = arr3.some(function(a,b){return a>12;})console.log(result2);

运行结果：

ES6数组新增方法

10、Array.from() —— 将类数组的对象转换成数组

代码示例：

let json ={'0':'星','1':'期','2':'六',length:3}
let arr2 = Array.from(json);
console.log(arr2);

运行结果：

 11、Array.of() —— 将一组值转变为数组

方法是将一组值转变为数组，参数不分类型，只分数量，数量为0返回空数组。

    let arr1 = Array.of(1,2,3);	let arr2 = Array.of([1,2,3]);let arr3 = Array.of(undefined);let arr4 = Array.of();console.log(arr1); // [1, 2, 3]console.log(arr2); // [[1, 2, 3]]console.log(arr3); // [undefined]console.log(arr4); // []

12、find() —— 返回第一个匹配的数据

        作用: 返回第一个匹配的数据

        参数: 回调函数

        返回值: 指定数据的下标值或undefined

        用法: 数组.find(回调函数)

let arr = [5,4,3,2,1];
let arr1 = arr.find((v,k)=>{return v==4;
})
let arr2 = arr.find((v,k)=>{return v==0;
})
console.log(arr);
console.log(arr1);
console.log(arr2);

其中，find() 对于空数组，函数是不会执行的。find() 并没有改变数组的原始值。

运行结果：

let array = [{name:'小王',age:18},{name:'小张',age:13}
];
let array1 = array.find((v,k)=>{return v.age>12;
})
console.log(array1);

 只返回满足条件的第一个，运行结果如下：

13、findIndex() —— 返回第一个匹配的数据的索引

跟find()相似，只不过find()返回的是第一个匹配的数据，而findIndex()返回的是第一个匹配的下标。

代码示例：

let array1 = array.findIndex((v,k)=>{return v.age>12;
})
console.log(array1);

 运行结果：

 14、fill() —— 填充数组

fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

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

value：必需。填充的值。

start：可选。开始填充位置。如果这个参数是负数，那么它规定的是从数组尾部开始算起。

end：可选。停止填充位置 (默认为 array.length)。如果这个参数是负数，那么它规定的是从数组尾部开始算起。

let arr = [1,2,3,4,5,6,7,8];
let arr1 = arr.fill(0);
console.log(arr);  //[0, 0, 0, 0, 0, 0, 0, 0]
console.log(arr1); //[0, 0, 0, 0, 0, 0, 0, 0]let arr2 = [1,2,3,4,5,6,7,8].fill(0,1);    
let arr3 = [1,2,3,4,5,6,7,8].fill(0,1,2); 
console.log(arr2);  //[1, 0, 0, 0, 0, 0, 0, 0]
console.log(arr3); //[1, 0, 3, 4, 5, 6, 7, 8]

注意：fill()会修改本身的数组。

15、includes() —— 判断数组是否包含指定的值，返回true  or  false

方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

语法：arr.includes(searchElement ,  fromIndex)

searchElement ： 必须。需要查找的元素值。

fromIndex：可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

let array = ['aaa','bbb','ccc','ddd','eee'];
let array1 = array.includes('aaa');
console.log(array1); //truelet array2 = array.includes('aaa',1);
console.log(array2); //false

16、copyWithin() —— 拷贝元素

方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中，会覆盖原有成员

语法：array.copyWithin(target ,  start ,  end)

target ：必需。从该位置开始替换数据。

start ：可选。从该位置开始读取数据，默认为 0 。如果为负值，表示倒数。

end： 可选。到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
 

    let arr = [1,2,3,4,5,6];let result1 = [1,2,3,4,5,6].copyWithin(0);let result2 = [1,2,3,4,5,6].copyWithin(0,1);let result3 = [1,2,3,4,5,6].copyWithin(1,3,5);let result4 = [1,2,3,4,5,6].copyWithin(1,2,-1);let result5 = [1,2,3,4,5,6].copyWithin(1,-4,6);console.log(result1);  // [1, 2, 3, 4, 5, 6]console.log(result2);  // [2, 3, 4, 5, 6, 6]console.log(result3);  // [1, 4, 5, 4, 5, 6]console.log(result4);  // [1, 3, 4, 5, 5, 6]console.log(result5);  // [1, 3, 4, 5, 6, 6]

http://www.lryc.cn/news/132776.html

相关文章：

  • Linux：shell脚本：基础使用（5）《正则表达式-sed工具》
  • 关于ubuntu下面安装cuda不对应版本的pyTorch
  • 【SA8295P 源码分析】26 - QNX Ethernet MAC 驱动 之 emac_rx_thread_handler 数据接收线程 源码分析
  • 70 # 协商缓存的配置：通过修改时间
  • 适合程序员的DB性能测试工具 JMeter
  • java实现人物关系抽取
  • Docker网络与资源控制
  • 图片怎么转换成pdf格式？可以试试这样转换
  • [国产MCU]-W801开发实例-GPIO输入与中断
  • Layui列表表头去掉复选框改为选择
  • Flutter实战·第二版-第三章 基础组件笔记
  • 一文彻底理解时间复杂度和空间复杂度(附实例)
  • Mysql的索引详解
  • .netcore windows app启动webserver
  • 泰迪大数据挖掘建模平台功能特色介绍
  • 【问题】java序列化，什么时候使用
  • 【最新可用】VMware中ubuntu与主机window之间使用共享文件夹传输大文件
  • A. Two Semiknights Meet
  • 〔011〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇
  • 在ubuntu+cpolar+rabbitMQ环境下，实现mq服务端远程访问
  • Vue elementui 实现表格selection的默认勾选,翻页记录勾选状态
  • CloudCompare——统计滤波
  • nodejs+vue古诗词在线测试管理系统
  • 174-地下城游戏
  • Linux定时任务crontab
  • golang字符串切片去重
  • git如何检查和修改忽略文件和忽略规则
  • Android AppCompatActivity标题栏操作
  • 解决conda activate报错
  • FreeMarker--表达式和运算符的用法(全面/有示例)