用数组存储标坐标返回的对象

      今天找了个鼠标拖动盒模型并实现返回效果的作业，主要的知识盲区还是对于盒模型在页面的坐标的返回值存储的一个问题，下面方法不是我原创，但却是是一个不错的方法，所以给大家分享一下。

首先我们会用到push这个方法以及对象：

  //定义两个变量，其为盒子与页面的距离 这里为getX与getY
                arr.push({
                    X: getX,
                    Y: getY
                }) //将盒子与document的数组输出给arr

然后我们声明一个新数组，这里用arr = [] 来代替，我们使用push后会把对象添加到arr的最后一位即返回一次坐标就成为arr = [{x,y}, (第二次){x,y}]，数组里会生成一个对象，对象里面存储了每次返回的x、y坐标。

 //定义一个数组来存储push过来的对象
            var arr = [{
                X: div.offsetLeft,
                Y: div.offsetTop
            }];

这样就形成了一个对返回坐标的存储效果。如果要实现动画式还原则需要使用另一个方法:pop。即封装一个setInterval定时器，每次计时结束后都删除数组最后的一个对象，然后再返回里面的对象，再把对象里面的x、y值给盒子的height和width。如果我们的数组长度为0时加入一个判断条件，利用clearInterval将定时器删除即可。

​
var timer = setInterval(function () {
                    if (arr.length != 0) { //如果数组长度为0清除定时器
                        var num = arr.pop(); //定义num ，使用定时效果每次删除一个数组，则返回该 
                    //数组的值
                        div.style.left = num.X + 'px'
                        div.style.top = num.Y + 'px'
                        console.log(num.X, num.Y);
                    } else {
                        clearInterval(timer)
                    }
                }, 16)

​

所以总结一下这个题考验的还是我们对数组元素添加和删除的熟练度。

这里我总结了一下数组的删减方法：

    <script>
        //添加数组元素
        //push 在数组后面添加新元素
        var arr = [1, 2, 3]
        arr.push(4); //将数组4添加到arr数组
        console.log(arr) //将添加后的数组输出
        //push 完毕后，返回的结果时新数组的长度
        //原数组也会发生变化

        // unshift 在数组的开头添加一个或者多个元素
        arr.unshift('qwq')
        console.log(arr);
        //unshift 完毕后，返回的结果时新数组的长度
        //原数组也会发生变化

        //删除数组元素
        //pop() 它可以删除数组的最后一个元素
        arr.pop(); //后不跟参数
        console.log(arr);
        console.log(arr.pop()); //删除哪个元素，返回哪个元素

        //shift() 它可以删除数组的第一个元素
        arr.shift(); //后不跟参数
        console.log(arr);
        console.log(arr.shift()); //删除哪个元素，返回哪个元素
    </script>

虽然不是最好用的，还是希望帮助大家！