ES6之数组操作

es6中对于数组操作添加了4种方法:

1.map —— 映射(一个对应一个)

2.reduce —— 汇总(多个出来一个)

3.filter —— 过滤

4.forEach —— 迭代/循环。

1.map

直接上代码理解的更快:

<script>
    let arr=[1,2,34,55];
    let result = arr.map(item=>item*2)
    console.log(result);
</script>

返回结果:

上面的代码表示 arr 里面的元素,每个都乘以2,即每个元素都执行该方法。

2.reduce

这个理解起来可能比map要略微复杂一点,我们经常看到的计算购物车的总价啊,计算平均数啊什么的,就可以用这个方法。先看个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数组——reduce</title>
</head>
<body>
    <script>
        let arr=[1,5,34,55];
        let sum = arr.reduce(function(tmp,item,index){
            console.log(tmp,item,index) 
        })
    </script>
</body>
</html>

返回的结果如下:

从返回结果可以轻松得出 item 是当前的那个元素,index 是索引(从1开始),那tmp对应的是什么呢?它在这里面就相当于一个中间值的作用。比如在这个例子中,就表示第一次是1,第2次是6(1+5),第3次是40(6+34),最后是95(40+55)。

所以我们如果需要获取上面数组的平均数的话,可以按下面这样写:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数组——reduce</title>
</head>
<body>
    <script>
        let arr=[1,5,34,55];
        let sum = arr.reduce(function(tmp,item,index){
            if(index!=arr.length-1){ //不是最后一次
                return tmp+item
            }else{//最后一次计算平均值
                return (tmp+item)/arr.length
            }   
        })
        console.log(sum)
    </script>
</body>
</html>

3.filter

过滤。在用到搜索功能的时候,条件过滤是很常见的一个功能了。那么这个方法该如何使用呢?

比如说,我们现在有一个json数据,想要获取到满足某个条件的值,就可以像下面这样写:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数组——filter</title>
</head>
<body>
    <script>
        /*
        获取价格大于100的食品
        */
        let food=[
            {title:'龙虾',price:'20'},
            {title:'螃蟹',price:'80'},
            {title:'花螺',price:'120'},
            {title:'鲍鱼',price:'200'}
        ]
        let rich = food.filter(json=>json.price>100)
        console.log(rich);
    </script>
</body>
</html>

返回结果如下图:

是不是感觉用起来很酸爽~~

4.forEach

这个看这个名字,估计就能猜是干嘛的了。就是循环数组的。看下面例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数组——forEach</title>
</head>
<body>
    <script>
        let arr=[199,24,5,34,55,72];
        arr.forEach((item,index)=>{
            console.log (`${index}:${item}`)
        })
    </script>
</body>
</html>

看到返回结果如下:

index就表示索引,item就表示当前元素的值。

上述就是es6中新增的4种操作数组的方法。说的很浅显,自己学习时做的一个笔记,所以不要觉得这玩意太弱智了哈~~

原文地址:https://www.cnblogs.com/sese/p/9470961.html