ES5新增的迭代函数

最新推荐文章于 2024-06-02 21:27:33 发布

我是打工人

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量248

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/szydqq/article/details/125812196

版权

一遍历分为两步

1.循环

2.循环中执行相应功能

  let arr = [5,6,7,4,8,3,9];

    for(let i=0; i<arr.length; i++){
        arr[i] += 10;
        console.log(arr[i]);
    }

数组迭代函数:帮我们把循环实现了，我们只需要写功能

二 \方法

①forEach

功能:遍历数组

参数:arr.forEach(回调函数)

回调函数: function 回调函数(元素的数值,[元素的下标],[数组名])

返回值:无

②map

功能:遍历数组

参数:arr.map(回调函数)

回调函数: function 回调函数(元素的数值,[元素的下标],[数组名])

返回值:在回调函数添加return,返回一个新数组

③ filter

功能:过滤,根据回调函数返回的布尔值，决定元素是否被存入新的数组

参数arr.filter(回调函数)

回调函数: function 回调函数(元素的数值,[元素的下标],[数组名])

返回值:根据回调函数返回的布尔值，决定元素是否被存入新的数组

三 `匀速运动

运动原理:

通过定时器改变元素的left或者top(width,heigth)

1.先清空定时器，避免运动混乱

2.计算速度,叠加位移(宽高)

3.达到条件终止定时器

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: hotpink;
            top:100px;
        }
    </style>
</head>
<body>
    <button>启动</button>
    <div id="box"></div>
</body>
</html>
<script>
    let oBox = document.querySelector("#box");
    let oBtn = document.querySelector("button");
    let time;
    oBtn.onclick = function(){
        clearInterval(time);
        time = setInterval(() => {
            oBox.style.left = oBox.offsetLeft + 5 + "px";
            if(oBox.offsetLeft == 800){
                clearInterval(time);
            }
        }, 50);
    }   
</script>

四,.运动函数的封装

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: hotpink;
            top:100px;
        }
        #box1{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: skyblue;
            top:300px;
        }
    </style>
</head>
<body>
    <button>启动</button>
    <div id="box"></div>
    <div id="box1"></div>
</body>
</html>
<script>
    let oBox = document.querySelector("#box");
    let oBox1 = document.querySelector("#box1");
    let oBtn = document.querySelector("button");
    let time;
    //封装函数
    function startMove(obj){
        clearInterval(time);
        time = setInterval(() => {
            obj.style.left = obj.offsetLeft + 5 + "px";
            if(obj.offsetLeft == 800){
                clearInterval(time);
            }
        }, 50);
    }
//调用函数
    oBtn.onclick = function(){
        startMove(oBox1);
    }   
</script>

五~速往返运动

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: hotpink;
            top:100px;
            left:400px;
        }
    </style>
</head>
<body>
    <button><<<<<<<</button>
    <button>>>>>>>></button>
    <div id="box"></div>
</body>
</html>
<script>
    let oBox = document.querySelector("#box");
    let oBtn = document.querySelectorAll("button");
    let time;
//函数的封装
    function startMove(obj,target){
        clearInterval(time);
        time = setInterval(()=>{
            let speed = target>obj.offsetLeft?5:-5;
            obj.style.left = obj.offsetLeft + speed + "px";
            if(obj.offsetLeft == target){
                clearInterval(time);
            }
        },50)
    }
    //函数的调用
    oBtn[0].onclick = function(){
        startMove(oBox,0);
    }   
    //函数的调用
    oBtn[1].onclick = function(){
        startMove(oBox,800);
    }  
</script>

六 `透明运动函数

<style>
        #box{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: red;
            top:100px;
            left:200px;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>
<script>
    let oBox = document.querySelector("#box");
    let time;
    //函数的封装
    function startMove(obj,target){
        clearInterval(time);
        time = setInterval(()=>{
            let speed = target > getComputedStyle(obj,false)["opacity"]?0.01:-0.01;
            obj.style.opacity = getComputedStyle(obj,false)["opacity"]/1 + speed;
            if(getComputedStyle(obj,false)["opacity"] == target){
                clearInterval(time);
            }
        },50);
    }
    //函数的调用
    oBox.onmouseover = function(){
        startMove(oBox,1);
    }
//函数的调用
    oBox.onmouseout = function(){
        startMove(oBox,0);
    }
</script>

七缓冲运动

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: hotpink;
            top:100px;
        }
    </style>
</head>
<body>
    <button>启动</button>
    <div id="box"></div>
</body>
</html>
<script>
    let oBox = document.querySelector("#box");
    let oBtn = document.querySelector("button");
    let time;
    //函数的封装
    function startMove(obj,target){
        clearInterval(time);
        time = setInterval(() => {
            //核心算法
            let speed = (target-obj.offsetLeft)/10;
            speed = Math.ceil(speed);
            obj.style.left = obj.offsetLeft + speed + "px";
            if(obj.offsetLeft == target){
                clearInterval(time);
            }
        }, 50);
    }
//函数的调用
    oBtn.onclick = function(){
        startMove(oBox,800);
    }   
</script>