js学习第15天-CSDN博客

本文链接：https://blog.csdn.net/weixin_50915530/article/details/126670746

### map

map :映射，由键值对构成的容器

set(key,value) 向集合中添加一个元素：key以存在，则为改，不存在则为增

get(键) 根据键去取值

delete(键) 删除集合中的某个数

has(键) 判断集合中是否有某个值

clear() 清空集合

### es6模板字符串

"" 和'' 不支持换行无法直接用innerHTML=直接添加元素

所以有`` 可以直接把html中的复制过来写进结构

dom对象.innerHTML = `<li></li>`

ES6模板字符串使用变量 ${变量名} oUl.innerHTML += `<li>${i}</li>`;

### es6新增数组迭代方法

遍历：对数组的每个元素执行相同的操作

1：循环数组

2：操作每个元素(功能)

ES5新增数组的迭代遍历函数

1： forEach

功能：遍历数组，执行回调函数

参数：forEach(回调函数)

function(元素数值，[元素下标]，[数组名]){

}

返回值：无

2： map

map和forEach功能几乎一模一样

唯一的区别：map可以有返回值，该返回值是由回调函数return构成的数组

return 是啥，就是一堆返回值构成的一个数组

3： filter

功能：过滤，根据回调函数返回的布尔值，决定是否保留该元素

运动的步骤：

1、开始运动前，先清除已有定时器（因为：是连续点击按钮，物体会运动越来越快,造成运动混乱）

2、开启定时器，计算速度

3、把运动和停止隔开（if/else),判断停止条件，执行运动

匀速运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: hotpink;
            top:200px;
        }
        #box1{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: hotpink;
            top:400px;
        }
    </style>
</head>
<body>
    <button>运动</button>
    <div id="box"></div>
    <div id="box1"></div>
</body>
</html>
<script>
    let btn = document.querySelector("button")
    let obox = document.querySelector("#box")
    let obox1 = document.querySelector("#box1")
    let time;

    // 封装的思想    可以实现重复的调用
    function Move(obj){
           clearInterval(time)
            time = setInterval(function(){
                obj.style.left =obj.offsetLeft + 5 +"px";
               if(obox.offsetLeft == 200){
                clearInterval(time)
               } 
         },50)
    }
    btn.onclick = function(){
        Move(obox)
        //  Move(obox1)
    }
















</script>