JS中的map()方法

map定义和方法 
map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理的后值。 
map()方法按照原始数组元素顺序依次处理元素。 
注意: 
map不会对空数组进行检测 
map不会改变原始数组 
arr.map(function(currentValue,index,arr),thisValue) 
参数说明 
function(currentValue,index,arr) 
必须,函数,数组中的每个元素都会执行这个函数函数参数 
函数参数 
currentValue 必须 当前元素值 
index 可选 当前元素的索引值 
arr 可选 当前元素属于的数组对象。 

 

我们看个小demo,就会一目了然

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>map方法</title>
</head>
<body>
    <p>点击按钮将数组中的每个元素乘以输入框指定的值,并返回新数组</p>
    <p>
        最小年龄:
        <input type="number" id="age" value="10" />
    </p>
    <button id="btn">点我</button>
    <p id="data">新数组</p>

    <script type="text/javascript">
        var btn = document.getElementById("btn");
        var data = document.getElementById("data");
        var age = document.getElementById("age");
        var numbers = [25,36,121,49];

        function myFunction(num,index,arr){
            console.log('arr',arr);
            console.log('index',index);
            console.log('num',num);
            return num * age.value;
        }

        btn.onclick = function(){
            data.innerHTML = numbers.map(myFunction);
        }

    </script>
</body>

 

下面是前端展示效果:(点击按钮之后)

 

 

 

 

没有更多推荐了,返回首页