ES6常见的数组方法，你知道几个？

- 日理万妓 2022-12-22 00:57 185阅读 0赞

##### 一：数组方法filter（过滤） #####

1：过滤掉不能被3整除的数，打印出来能被整除的数

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    	</body>
    	<script>
    		//过滤器filter
    		let arr = [12, 33, 66, 99, 5]
    		let result = arr.filter(item => {
    			if (item % 3 == 0) {
    				return true;
    			} else {
    				return false;
    			}
    		})
    		 console.log(result)
    	</script>
    </html>

打印结果如下：  
![fdf752050ad4e19566e52c837d0c0d8e.png][]

或者这样写，效果是一样的

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    	</body>
    	<script>
    		let arr = [11, 33, 66, 99, 5]
    		let result = arr.filter(item => {
    			return item % 3 == 0;
    		})
    		console.log(result)
    	</script>
    </html>

打印结果如下：  
![dd97725aa204604f3d288395a79f6158.png][]

2：过滤商品价格小于10000元的商品，打印大于10000元的商品

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    	</body>
    	<script>
    		//商品列表
    		let arr = [{
    				title: '笔记本电脑',
    				price: 12033
    			},
    			{
    				title: '智能音箱',
    				price: 99
    			},
    			{
    				title: '鼠标',
    				price: 33
    			},
    			{
    				title: '单反摄像机',
    				price: 20000
    			},
    		]
    		let result = arr.filter(item => item.price >= 10000);
    		console.log(result)
    	</script>
    </html>

打印结果如下：  
![2ef5aa45a05aed56070d8ae81999568c.png][]

##### 二：数组方法map（映射） #####

一般写法

//一般写法
    		let arr=[12,5,8];
    		let result=	arr.map(function(item){
    				return item*2;
    		})	
    		console.log(result)

![3c6b1c095d2133e3ec71dc1880fb9b8b.png][]

箭头函数写法

//箭头函数
    		let arr=[10,5,8];
    		let result=	arr.map(item=>{
    				return item*2;
    		})	
    		console.log(result)

![1e6e0ef1296ae0fde531dbd6268f6210.png][]

去掉花括号的写法（只有一个return的时候，\{\}可以省略）

let arr=[10,5,9];
    		let result=arr.map(item=>item*2);	
    		console.log(result)

![5a5a5bc054b532057317d4fe90fa71e2.png][]

示例：判断数组所对应的的状态是否及格

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    	</body>
    	<script>
    		let scroe = [12, 77, 88, 99, 33, 100, 59];
    		let result = scroe.map(item => item >= 60 ? '及格' : '不及格');
    		console.log(scroe)
    		console.log(result)
    	</script>
    </html>

![9318f8cb71f3b1797d835e6ba3573e3f.png][]

##### 三：数组方法reduce和forEach #####

1：reduce应用场景：计算数组中所有值的总和  
数组求和：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    	</body>
    	<script>
    		//一堆变成一个，算总数
    		let arr = [12, 33, 66, 99]
    		let result = arr.reduce(function(tmp, item, index) {
    			return tmp + item
    		})
    		console.log(result);
    	</script>
    </html>

打印结果如下：

![0082df71aa8e044dde53f13f46dc43d3.png][]

2：forEach循环遍历（迭代）

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    	</body>
    	<script>
    		let arr = [12, 4, 6, 89, 2]
    		arr.forEach(item => {
    			console.log(item)
    		})
    	</script>
    </html>

打印结果如下：  
![17c1243e664fb4647c023a00f283cf4a.png][]

参数index

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    	</body>
    	<script>
    		let arr = [12, 4, 6, 89, 2]
    		//参数index
    		arr.forEach((item,index) => {
    			console.log(index+ ':' +item)
    		})
    	</script>
    </html>

打印结果如下：  
![9addd87b5204f591bb94f3da092822ba.png][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[fdf752050ad4e19566e52c837d0c0d8e.png]: /images/20221120/ebebd725f014487b9314eab4145b5969.png
[dd97725aa204604f3d288395a79f6158.png]: /images/20221120/8c893d5fd8b84dd382cd4368c211d14a.png
[2ef5aa45a05aed56070d8ae81999568c.png]: /images/20221120/fdd9a6be21aa461f9b5b4f37f08dead6.png
[3c6b1c095d2133e3ec71dc1880fb9b8b.png]: /images/20221120/251deede7e644dd59e80e62f7a64fee3.png
[1e6e0ef1296ae0fde531dbd6268f6210.png]: /images/20221120/2c8707077b1545d5bbda223c67cc77b3.png
[5a5a5bc054b532057317d4fe90fa71e2.png]: /images/20221120/a5c6c008aea848a597e365fafb91cef4.png
[9318f8cb71f3b1797d835e6ba3573e3f.png]: /images/20221120/3c627ee7b84045358f3b6d02d4235aa6.png
[0082df71aa8e044dde53f13f46dc43d3.png]: /images/20221120/64629c39dae34c1ab0262bcfe455bcd9.png
[17c1243e664fb4647c023a00f283cf4a.png]: /images/20221120/f94a8868e4e3460084674938d62a7dc4.png
[9addd87b5204f591bb94f3da092822ba.png]: /images/20221120/28ef0feff3c54bd48cf67869e73ade33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201117134031636.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ==,size_16,color_FFFFFF,t_70#pic_center