1.三点语法

 下述为三种三点语法
    1.  ...剩余参数 
    function fn(...arg){

    }

    2. 数组方式
    var arr=[1,2,3,4];
    var arr1=[...arr]; //[1, 2, 3, 4]
    console.log(arr1)

    3. 对象方式
    var obj={a:1,b:2,c:3};
    var obj1={...obj};
    console.log(obj1) //{a: 1, b: 2, c: 3}


例:
    1.  ...剩余参数    不再使用arguments
    function fn(...arg){
        console.log(arg);
    }

    fn(1,2,3,4,5,6,7);  //[1, 2, 3, 4, 5, 6, 7] 会自动转换为数组

    function fn(a,b,...arg){
        console.log(a,b,arg); //1 2  [3, 4, 5]
    }

    fn(1,2,3,4,5)


    2.数组方式
    var arr=[1,2,3,4];
    var arr1=[...arr,5,6,7,8]; // ...arr能放前面也能放后面
    console.log(arr1)          //[1, 2, 3, 4, 5, 6, 7, 8]
    var arr1=[...arr];
    console.log(arr1===arr)    //false

    var arr2=arr.concat(arr1);
    var arr2=[...arr,...arr1];
    console.log(arr2)         // [1, 2, 3, 4, 1, 2, 3, 4]

    var arr=[1,2,3,5,6];
    // Math.max()
    // Math.max.apply(null,arr);  //以前找最大值是这样的
    var max=Math.max(...arr); 
    console.log(max)    //6


    3.对象的释放方式
    var obj={a:1,b:2,c:3};
    var obj1={...obj};//复制对象  但是是一个新的对象
    console.log(obj1===obj)  //false

    var obj1={...obj,d:5,e:6};
    console.log(obj1)   //{a: 1, b: 2, c: 3, d: 5, e: 6}


    4.对应函数
    function fn(a,b){
        console.log(a,b);
     }
    var obj={a:1,b:2};
    fn(...obj);//错误 只支持数组
    

    function fn(...obj){//错误  只支持数组
     }
    fn({a:1,b:2})

2.案例-各种运动

1.碰撞运动
    var div1=document.querySelector(".div1");
    var div0=document.querySelector(".div0");

    var x=0,y=0,speedX=2,speedY=2;
    setInterval(animation,16);

    function animation(){
        //这两句是触底反弹
        if(y>div0.offsetHeight-div1.offsetHeight || y<0) speedY=-speedY;
        if(x>div0.offsetWidth-div1.offsetWidth || x<0) speedX=-speedX;

        x+=speedX;
        y+=speedY;
        div1.style.left=x+"px";
        div1.style.top=y+"px";
    }

2.圆周运动
    var r=100;
    var angle=0;
    var div1=document.querySelector(".div1");
    var x=0,y=0,speed=1,initX=200,initY=200;   //initx inity 默认坐标位置  speed转速

    setInterval(animation,16);

    function animation(){            //这里是让他不断地加转速
        if((angle+=speed)>360){
            angle-=360;
            speed++;
        }
        x=initX+Math.sin(Math.PI/180*angle)*r;   //sin函数 把所有的角度都转换成方向
        y=initY+Math.cos(Math.PI/180*angle)*r;
        div1.style.left=x+"px";
        div1.style.top=y+"px";
    }

   
   
    /* 
    1\2000ms 运行完成所有距离
    2、每秒运行多少次
    
    */

3.点到哪动到哪-这样写太麻烦
    var div1=document.querySelector(".div1");
    var bool=false,speedX=0,speedY=0,x=0,y=0,time=0; //设置初始值 默认布尔值为false不能动
    document.addEventListener("click",clickHandler);

    setInterval(animation,16);

  
    function clickHandler(e){
        time=Math.ceil(2000/16);
        speedX=(e.clientX-(div1.offsetLeft+div1.offsetWidth/2))/time; //offsetwidth是div1的半径
        speedY=(e.clientY-(div1.offsetTop+div1.offsetHeight/2))/time;
        bool=true;
    }


    function animation(){
        if(!bool) return;
        if(time<0){
            return bool=false;
        }
        time--;
        x+=speedX;
        y+=speedY;
        div1.style.left=x+"px";
        div1.style.top=y+"px";
    }

 4.弹跳悠悠球
    var div1=document.querySelector(".div1");
    document.addEventListener("click",clickHandler);
    setInterval(animation,16);


    function clickHandler(e){
        var tween=new TWEEN.Tween({x:div1.offsetLeft,y:div1.offsetTop}); //初始位置
        tween.to({x:e.clientX-div1.offsetWidth/2,y:e.clientY-div1.offsetHeight/2},2000); //目标位置，时间
        tween.easing(TWEEN.Easing.Bounce.Out); //缓动
        tween.repeat(1); //重复
        tween.yoyo(true); //悠悠球
        tween.onUpdate(updateHandler); //每次更新执行函数
        tween.start(); //开始
    }

    function updateHandler(){
        // console.log(this)
        div1.style.left=this.x+"px";
        div1.style.top=this.y+"px";
    }

    function animation(){
        TWEEN.update();
    } 

3.案例-单选框和多选框

    <script type="module">
    import Radio from "./js/Radio.js";
    var arr=["游泳","跑步","看电影","写程序","玩游戏"];

    arr.forEach(item=>{
        var ck=new Radio(item,"hobby");
        ck.appendTo("body");
        ck.addEventListener("change",changeHandler);
    })


    var list=["男","女"];
    list.forEach(item=>{
        var ck=new Radio(item,"sex");
        ck.appendTo("body");
        ck.addEventListener("change",changeHandler);
    })

    function changeHandler(e){
        console.log(e);
    }

4.轮播图

        var icon,left,right,imgCon,prev,crousel,ids;
        var pos=0,bool=false,time=300; //pos=0 默认定位值是0 设置一个time为了防抖
        init();
        function init(){
            crousel=document.querySelector(".crousel"); //鼠标在图片div上时不动 自动轮播 所以监听它
            icon=document.querySelector(".icon");  //点击小圆点
            left=document.querySelector(".left");  //点击左右按钮
            right=document.querySelector(".right");
            imgCon=document.querySelector(".img-con"); //

            //给他们做一个监听点击事件
            icon.addEventListener("click",iconClickHandler); 
            left.addEventListener("click",bnClickHandler);
            right.addEventListener("click",bnClickHandler);

            changePrev(icon.children[pos]); //初始化第0项 

            setInterval(autoChange,16);  //自动轮播
            crousel.addEventListener("mouseleave",mouseHandler);  //鼠标离开
            crousel.addEventListener("mouseenter",mouseHandler);  //鼠标进入
        }

        function mouseHandler(e){
            if(e.type==="mouseleave"){
                bool=true;
                time=300;  //离开时成新设置200
            }else{
                bool=false;
            }
        }

        function bnClickHandler(e){    //左右按钮的事件
            if(ids) return;   //ids不能存在 存在就跳出
            if(this===left){
                if(--pos<0)pos=4;
            }else{
                if(++pos>4)pos=0;
            }
            imgMove()                 
            changePrev(icon.children[pos]); //传递对应的小圆点位置
        }

        function iconClickHandler(e){   //小圆点按钮事件
            if(ids) return;
            if(e.target.nodeName!=="LI") return; //标签名不是li就跳出
            pos=Array.from(icon.children).indexOf(e.target);//icon.children转换成数组 找到他是第几个 就能设置pos了
            changePrev(icon.children[pos]); //传递对应的小圆点位置
            imgMove();
        }

        function imgMove(){            //图片移动时
            imgCon.style.left=(-pos*100)+'vw';
            //这是节流处理(翔哥的防抖)
            ids=setTimeout(function(){ //600ms内才进来
                clearTimeout(ids);    //清除定时器
                ids=undefined;        //这就表示清除了
            },600)
        }

        function changePrev(elem){    //点击小圆点后的颜色改变
            if(prev){
                prev.style.backgroundColor="transparent"
            }
            prev=elem;               //prev=这个小圆点
            prev.style.backgroundColor="red";
        }

        function autoChange(){      //自动轮播 鼠标在图片上就不会自动轮播 离开时开始计时
            if(!bool) return; 
            time--;
            if(time>0) return;
            time=300;
            var evt=new MouseEvent("click");
            right.dispatchEvent(evt);
        }