前端JS-Day27

直接复制对象会导致新旧对象指向同一地址，修改会同时发生。

深浅拷贝：只针对引用类型！

浅拷贝：拷贝的是地址，仅对简单数据类型有用。

1.拷贝对象：如果是简单数据类型则拷贝的是值，引用数据类型则拷贝的是对象！

常见方法：

① Object.assign(对象名)

② {...对象名}

对于简单数据类型是适用的，修改复制后对象的值不会影响到源对象！

const obj = {
    uname:'lwh',
    age: 18
}

const o = {}, p = {...obj};
Object.assign(o, obj);
o.age = 20;
p.age = 21;
console.log(o);
console.log(p);
console.log(obj);

但若对于复杂数据类型，则难以适用。由于浅拷贝复制地址相同，故复杂数据类型会指向同一对象，故修改深层对象，源对象也会发生改变！

const obj = {
    uname: 'lwh',
    age: 18,
    family: {
        person: 123
    }
}

const o = {}, p = { ...obj };
Object.assign(o, obj);
o.family.person = 1;
p.family.person = 2;
console.log(o);
console.log(p);
console.log(obj); //这样修改会导致源对象也发生修改！

2.拷贝数组

深拷贝：拷贝的是对象，而不是地址！

常见方法：

① 通过递归实现深拷贝：

function copy1(newObj, oldObj) {
            for (const v in oldObj) {
                if (oldObj[v] instanceof Array) {
                    newObj[v] = [];
                    copy1(newObj[v], oldObj[v]);
                } else if (oldObj[v] instanceof Object) {
                    newObj[v] = {};
                    copy1(newObj[v], oldObj[v]);
                } else {
                    newObj[v] = oldObj[v];
                }
            }
   }

② lodash/cloneDeep：JS扩展API

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <script>
        const obj = {
            uname: 'lwh',
            age: 18,
            family: {
                num: 4
            }
        };
        const o = _.cloneDeep(obj);
        console.log(o);
        console.log(obj);
　　</script>

③ JSON.stringify()和JSON.parse()实现：

JSON.stringify：把对象转化为JSON字符串。

JSON.parse：把JSON字符串转化为对象。

const obj = {
            uname: 'lwh',
            age: 18,
            family: {
                num: 4
            }
        };
        const o = JSON.parse(JSON.stringify(obj));
        console.log(o);
        console.log(obj);

异常处理：指预估代码执行过程中可能发生的错误，然后以最大程度避免错误的发生导致整个程序无法运行。

1.throw抛出异常：

throw new Error(错误信息)

① throw抛出异常信息，程序会终止运行！

② throw后跟着错误提示信息。

③ Error对象配合Error使用，能够设置更加详细的信息。

function fn(x, y) {
            if (!x || !y) {
                throw new Error('参数不能为空！');
            }
            return x + y;
        }
   console.log(fn());

2.try/catch捕获异常：用于捕获错误信息

try内写入可能发生错误代码，catch捕获异常(如果想中断代码要将整体写入函数且return)，finall是总会执行的代码。

(function errors() {
            try {
                // 预估错误代码
                const p = document.querySelector('p');
                p.style.color = 'red';
            } catch (error) {
                console.log(error.message);
                // 输出浏览器错误信息
                return;
                // 中断
            } finally {
                // 不管是否有错误，总会执行！
                alert('执行!');
            }
        })()

3.debugger：类似于断点操作，直接写入。

节流throttle：指连续触发事件，但是在n秒内只执行一次函数。

在轮播图点击效果、鼠标移动、页面尺寸缩放resize、滚动条滚动事例上增加节流。

案例：鼠标移动盒子内数字加1

const box = document.querySelector('.box');
        let i = 1;
        function mouseMove() {
            box.innerHTML = ++i;
            // 如果存在大量操作dom情况，可能引起卡顿！
        }

        // 节流函数
        function throttle(fn, times) {
　　　　　//fn：执行函数 times：延迟时间
            let startTime = 0;
            return function () {
                let time = Date.now();
                // 获取当前时间
                if (time - startTime >= times) {
                    fn();
                    // 起始时间 = 现在时间
                    startTime = time;
                }
            }
        }

        box.addEventListener('mousemove', throttle(mouseMove, 500));

防抖debounce：指触发事件后在n秒内只能执行一次，若在n秒内又触发了事件，则会重新计算函数执行时间。

案例：鼠标移动盒子内数字加1

const box = document.querySelector('.box');
        let num = 1;
        function mouseMove() {
            box.innerHTML = ++num;
        }

        function debounce(fn, time) {
            let timeId;
            return function () {
                if (timeId) clearTimeout(timeId);
                timeId = setTimeout(() => {
                    fn();
                }, time);
            }
        }

        box.addEventListener('mousemove', debounce(mouseMove, 200));