JS常用数组方法（说明和使用）【包括ES6】

最新推荐文章于 2024-09-08 13:45:44 发布

置顶 Future_Love

最新推荐文章于 2024-09-08 13:45:44 发布

阅读量856

点赞数 1

分类专栏： JS数组方法前端文章标签： JS常见数组方法

本文链接：https://blog.csdn.net/Future_Love/article/details/100063012

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

JS数组方法

1 篇文章 0 订阅

订阅专栏

1、push()（末尾添加元素）

作用：向数组的末尾添加n个元素
参数：参数时新增的元素，可以串多个
返回值：新数组的数组成员的个数
原数组发生变化

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

2、pop()（删除最后一项）

作用：删除数组的最后一项
参数：不需要传参数
返回值：被删除的那一项
原数组发生改变

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

3、unshift()（开始位置添加一项）

作用：向数组的开始位置添加n个元素
参数：参数是新增的元素，可以是多个
返回值：新数组的长度
原数组发生改变

	let arr = [1,2,3,4,5]
	console.log(arr.unshift(2))    // 6
	console.log(arr)  //[2,1,2,3,4,5]

4、shift()（开始位置删除一项）

作用：删除数组的第一项
参数：不需要传参数
返回值：被删除的那一项
原数组发生改变

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

5、splice()（删除、添加、修改元素）

作用：删除元素，并向数组添加新元素
参数：
- splice(m,n);从索引m开始，删除n项
- splice(m);从索引m开始删除到末尾
- splice(m,n,x,…);从索引m开始删除n项，并将x添加到原来位置；添加项可以是多个（如果删除项为0个，那么添加是在m元素前面）
返回值：是个数组，数组中是被删除的项
原数组发生变化

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

6、indexOf()（从左向右查询）不兼容IE低版本浏览器：IE6,7,8

作用：检测数组中是否存在某个元素
参数：被查询的元素（m,n）从索引n开始，m第一次出现的索引位置
返回值：
- 返回数组中第一次匹配到的元素的索引
- 如果数组中没有匹配项返回-1
原数组不发生变化

	let arr = [1,2,3,4,5,2]
	let arr1 = arr.indexOf(2)
	console.log(arr1)  // 1
	let arr2 = arr.indexOf(9)
	console.log(arr2)  // -1

7、lastIndexOf()（从左到右查询）不兼容IE低版本浏览器：IE6,7,8

作用：检测数组中是否存在某个元素
参数：被检测的元素
返回值：
- 返回数组中最后一次匹配到的元素的索引
- 如果数组中没有匹配项返回-1
原数组不发生变化

	let arr = [1,2,3,4,5,2]
	let arr1 = arr.lastIndexOf(2)
	console.log(arr1)  // 5
	let arr2 = arr.lastIndexOf(9)
	console.log(arr2)  // -1

8、slice()（截取）

作用：按照起始和结束位置的索引截取数组
参数：
- 有两个参数slice(m,n)：从索引m开始，截取到索引n；（包前不包后）
- 有一个参数slice(m)：从索引m开始截取到末尾；
- 没有参数：数组的克隆；(slice(0)也是数组的克隆)；
- 以上情况参数都支持负数，负数情况会默认被加上数组的长度，处理成正数
返回值：截取的数组
原数组不发生变化

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

9、sort()（排序）

作用：对数组的元素进行排序
参数：
- 没有参数sort()：只能排序数组成员项是相同位数的数字
- sort(function(a,b){return a-b})：从小到大排序
- sort(function(a,b){return b-a})：从大到小排序
返回值：排序之后的数组
原数组发生变化

	   var ary=[1,3,10,50,2,120,30];
       ary.sort(function fn(a,b){
           return a-b;//这里是一个回调函数，把函数当作实参传给sort的方法
       })
       console.log(ary);

10、reverse()（倒序）

作用：使数组中元素倒序
参数：不需要参数
返回值：成员倒序的数组
原数组发生变化

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

11、concat()（拼接数组）

作用：拼接两个或多个数组
参数：
- 不传参数：数组的克隆
- 传参数：将传入的参数拼接到数组中、可以传多个
返回值：拼接之后的新数组
原数组不发生变化

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

12、join()（数组拼接成字符串）

作用：将数组的成员项通过制定字符拼接成字符串
参数：
- 不传参数：会默认按照逗号拼接
- 传参数：会按照参数字符拼接
返回值：拼接之后的字符串
原数组不发生变化

	var arr = [1,2]
	var result = arr.join();
	console.log(result);//'1,2'

13、map()（映射）

作用：方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值；
参数：参数是一个回调函数；数组有几项，回调函数就执行多少次；在回调函数中处理数组中的每项；
返回值：映射的新数组；
原数组不发生变化；
示例：var ary = [1,2,3]; ary.map(function(item,index,arr){});
- item是遍历数组的每一项
- index是遍历数组的索引
- arr就是原数组

	let ary = [1,2,3,4,5]
	ary.map( (item,index,arr)=>{
	        item= item* 2
	        console.log(`item:${item}    index:${index}     arr:${arr}`)
	})   
	console.log(ary)

14、forEach()（遍历数组）

作用：遍历数组；
参数：参数是一个回调函数；数组有几项，回调函数就执行多少次；
返回值：没有返回值；undefined；
原数组不发生变化；
示例：var ary = [1,2,3]; ary.forEach(function(item,index,arr){});
- item是遍历数组的每一项
- index是遍历数组的索引
- arr就是原数组

	let ary = [1,2,3,4,5]
	ary.forEach( (item,index,arr)=>{
        console.log(`item:${item}    index:${index}     arr:${arr}`)
    })   
    //  item:1    index:0     arr:1,2,3,4,5
    //  item:2    index:1     arr:1,2,3,4,5
    //  item:3    index:2     arr:1,2,3,4,5
    //  item:4    index:3     arr:1,2,3,4,5
    //  item:5    index:4     arr:1,2,3,4,5

	let ary = [1,2,3,4,5]
	ary.forEach( (item,index,arr)=>{
       item= item* 2
       console.log(`item:${item}    index:${index}     arr:${arr}`)
    })   
    console.log(ary)
    // item:2    index:0     arr:1,2,3,4,5
    // item:4    index:1     arr:1,2,3,4,5
    // item:6    index:2     arr:1,2,3,4,5
    // item:8    index:3     arr:1,2,3,4,5
    // item:10   index:4     arr:1,2,3,4,5
    // [1, 2, 3, 4, 5]

ary.forEach()和ary.map()的区别
1、 ary.forEach()是和for循环一样，是代替for。ary.map()是修改数组其中的数据，并返回新的数据。
2、ary.forEach() 没有return ary.map() 有return。
3、map有映射，forEach没有映射。

15、toString()（数组转字符串）

作用：数组转字符串；
参数：不需要参数；
返回值：一个字符串，由数组的每项组成，数组的每一项用逗号隔开；
原数组不发生变化；

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

16、find(查找)

从左到右依次进行查找，找到符合条件的那一项，直接返回，不再进行查找；如果找不到，那么返回undefined；返回true,说明就找到了；
find会根据回调函数的返回值，判断是否要继续向右查找；

	let arr = [12,3,45,6,78];
	let  a =  arr.find((item,index)=>{
        console.log(100);//输出三次
        return item>20;
    })
    console.log(a);//45

17、 filter(过滤)

过滤;原数组不发生改变；返回一个过滤后的新数组

	let arr = [12,3,45,6,78];
	let ary = arr.filter((item,index)=>{
        // 根据当前函数的返回值是true来获取这一项；如果是false，返回值中就没有这一项；
        return item>30;
    });
    console.log(arr);//[12, 3, 45, 6, 78]
    console.log(ary);//[45, 78]

18、every

每一个都是true则返回true，如果有一个是false，那么直接返回false；只要找到false，直接结束，不再继续向下查找；返回值是布尔值

		let arr = [12,3,45,6,78];
		let e = arr.every((item,index)=>{
        	return item>13;
	    })
    	console.log(e);//false

19、some

返回一个布尔值；只要有一个符合条件就返回true；找到true，就不再向右进行查找；

	let arr = [12,3,45,6,78];
	let a  = arr.some((item,index)=>{
        console.log(100);
        return item>10;
    })
    console.log(a);//true

20、includes

返回一个布尔值；如果有就返回true；，没有就返回false；

	let  arr = [12,3,45,6,78];
	console.log(arr.includes(45));//true

21、reduce

迭代数组的所有项，累加器，数组中的每个值（从左到右）合并，最终计算为一个值

	let arr = [12,3,45,6,78];
	let  a = arr.reduce((prev,next)=>{
        // prev : 第一次代表数组的第一项，以后都代表上一次回调函数的返回值；
        console.log(prev,next);//第一次输出：112 3，第二次输出：115 45，第三次输出：160 6，第四次输出：166 78
        return prev +next;
    });
    console.log(a);//244

reduce回调函数后面可以传一个参数

	let arr = [12,3,45,6,78];
	let  a = arr.reduce((prev,next)=>{
        console.log(prev,next);//第一次输出：100 12，第二次输出：100 3，第三次输出：100 45，第四次输出：100 6，第五次输出：100 78
        return 100;
    },100);
    console.log(a);//100