今天记录一下平时经常会用到的一些数组方法~~
数组常用的几个方法~~·
1:ES6系列笔记-数组方法filter(过滤)
就是留下经过我们处理的符合条件的结果 过滤也就是筛选的意思
例子1:过滤掉不能被3整除的数,打印出来能被整除的数
html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
body>
<script>//过滤器filterlet 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>
打印结果如下:
![7eadd264761f2905e3b7c0ef16269558.png](https://i-blog.csdnimg.cn/blog_migrate/99e1625ad824f6198c8e23b671e3c3f4.png)
或者这样写,效果是一样的
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>
打印结果如下:
![f909553df5c95b8edf45e375eba9f0d0.png](https://i-blog.csdnimg.cn/blog_migrate/2c97474242322355343af1c60caae898.png)
例子2:过滤商品价格小于10000元的商品,打印大于10000元的商品
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>
打印结果如下:
![9c19271cf88ae2716f8bfb35597e3efc.png](https://i-blog.csdnimg.cn/blog_migrate/a4eb49f7c863f2e1ac51dace198b034b.png)
2:ES6系列笔记-数组方法map(映射)
一般写法
//一般写法
let arr=[12,5,8];
let result= arr.map(function(item){
return item*2;
})
console.log(result)
![16dd14c8be18136cff7960ce7eaf5669.png](https://i-blog.csdnimg.cn/blog_migrate/f6300f63a455b2cdb5aa4380e4da5939.png)
箭头函数写法
//箭头函数
let arr=[10,5,8];
let result= arr.map(item=>{
return item*2;
})
console.log(result)
![a4cc22352ae85b079723319c4a076724.png](https://i-blog.csdnimg.cn/blog_migrate/d6e96aa1fd2aac7aaa4b2a703c6ebf8d.png)
去掉花括号的写法(只有一个return的时候,{}可以省略)
let arr=[10,5,9];
let result=arr.map(item=>item*2);
console.log(result)
![00259c916d25d9f10bfc1d3cfd1b6157.png](https://i-blog.csdnimg.cn/blog_migrate/7c470592f8e4608304dc8ff1c58db8aa.png)
示例:判断数组所对应的的状态是否及格
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>
![e0e84c608c1ef10232e0107f9871260c.png](https://i-blog.csdnimg.cn/blog_migrate/65501bb00b4efdd35fb709d45a4bccd6.png)
3:ES6系列笔记-数组方法reduce
reduce应用场景:计算数组中所有值的总和
数组求和:
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>
打印结果如下:
![c6b8eed93a48014625286c450c025339.png](https://i-blog.csdnimg.cn/blog_migrate/37f62238f4d57dc755ccc95ff9a7296b.png)
4:ES6系列笔记-数组方法 forEach循环遍历(迭代)
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>
打印结果如下:
![f01d776bcf1d59e04d7e34c245992480.png](https://i-blog.csdnimg.cn/blog_migrate/474ec99a0c55c6b956ff7a37b7836c7c.png)
参数index
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>
打印结果如下:
![7193add856556194de7f0a5b7cfd58f1.png](https://i-blog.csdnimg.cn/blog_migrate/1134555d6f441564933ab308a867be6b.png)