千锋web前端开发项目教程_1000集完全零基础入门HTML5+CSS3+JS到

# 不同类型数据赋值时的区别

=> 1. 基本数据类型，会直接将栈里面的数据赋值给其他变量，赋值结束后，两个变量相互之间没有关系，互不影响

  => 2. 引用数据类型，会将栈里面的地址赋值给其他变量，该地址会指向堆里面的同一条数据，造成数据共享的问题：其中一个改变。另一个会跟着改变

# 浅拷贝

=> 对于数据的第一层，拷贝的是值，而其他层级，拷贝的依然是地址。

  => 方式一： ...展开运算符 

+ var newObj = {...obj}

=> 方式二： var newObj = Object.assign({}, obj)

# 深拷贝

=> 无论引用数据的层级，拷贝的都是值

  => 方式一： JSON对象

   + var newObj = JSON.parse(JSON.stringify(obj))

+ 缺陷：会自动忽略undefined和方法，将正则变成空对象

=> 方式二： lodash库

   + 1. 导入库文件地址

    + 2. 调用_.cloneDeep方法

# 放大镜效果

=> 步骤：

   + 1. 动态渲染页面

     =》 小图片，大图片和缩略图的渲染

      =》 动态设置大图片盒子的宽高（蒙层的移动和大图片的移动是等比例的）

      =》 大图片盒子的宽高 = 蒙层的宽高 * 大图片的宽高 / 小盒子的宽高

    + 2. 缩略图的切换效果

     =》 选项对应的内容只有一个盒子，只能通过修改盒子里面的图片路径实现

    + 3. 鼠标的移入移出效果

    + 4. 蒙层跟随鼠标移动和大图片的跟随移动

     => 1. 蒙层的移动范围需要边界限定

      => 2. 鼠标在蒙层的中心位置

      => 3. 大图片是往相反方向移动

      => 4. 大图片的移动距离 = -（蒙层的移动距离 * 大图片的宽高 / 小盒子的宽高）