前端面试题-八股文

<!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>
      #main {
        width: 400px;
        height: 400px;
        border: 1px solid black;
        /* position: relative; */
        /* display: flex;
        justify-content: center;
        align-items: center; */
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }
      #content {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        /* position: absolute; */
        /* top: 50%;
        left: 50%; */
        /* 指的是子盒子 宽高的一半 */
        /* transform: translate(-50%, -50%); */
        /* h */
        /* margin-top: -50px; */
        /* w */
        /* margin-left: -50px; */
        /* margin: auto; */
      }
    </style>
  </head>
  <body>
    <!--
      1、定位法
        1)父相子绝，子盒子top:50%;left:50%;transform:translate(-50%,-50%);
        2)父盒子设置display: table-cell; vertical-align: middle; text-align: center;
      2、弹性盒布局：
        1)父盒子设置display:flex; 子盒子设置margin:auto; (父盒子中只有一个盒子时采用)
        2)父盒子设置 display:flex; justify-content: center; align-items: center;
    -->
    <div id="main">
      <!-- <div id="content"></div> -->
      <img id="content" src="002.jpg" alt="" />
    </div>
  </body>
</html>

2、var let const 三者的区别：

　　var 是ES5的属于函数作用域或者块级作用域具有变量提升可以重复声明重复赋值

　　let 是ES6的属于块级作用域不具有变量提升不能重复声明

　　const 是ES6的属于块级作用域 x x x

3、深拷贝与浅拷贝

　　深浅拷贝主要针对的对象是引用类型。

　　内存：分为4个区域，栈区、堆区、全局静态区、只读区。全局变量存储在全局数据区中，局部变量存储在栈中。

　　栈堆区别：基本数据类型的数据存储在栈；引用数据类型的数据存储在堆，然后在栈中存储在堆中对应的地址。基本数据类型数据值类型，引用数据类型属于地址类型。

　　基本数据类型赋值算什么拷贝？不存在拷贝，赋值的是值。

　　引用数据类型数组的赋值是浅拷贝，拷贝的是内存地址，并不是数据

　　解构赋值一维数组和对象是深拷贝，多维是浅拷贝

　　浅拷贝：两个对象同时引用了一个地址，一个改变都变

var people = {
        id: "007",
        name: "刘德华",
        books: ["三国演义", "水浒传", "红楼梦"],
      };
      console.log(people);
      var people2 = {};
      for (let key in people) {
        people2[key] = people[key];
      }
      people2.books.push("西游记");
      console.log(people, people2);

　　深拷贝：开辟了新的内存地址，存放值两个对象互不影响

var obj = {
        name: "rql",
        age: 24,
        toy: {
          name: "phone",
        },
      };
      function deepCopy(newObj, obj) {
        var newObj = newObj || {};
        for (var key in obj) {
          if (typeof obj[key] === "object") {
            newObj[key] = obj[key].constructor === Array ? [] : {};
            deepCopy(newObj[key], obj[key]);
          } else {
            newObj[key] = obj[key];
          }
        }
        return newObj;
      }

      var obj1 = deepCopy({}, obj);
      console.log(obj1);

function deepClone(source) {
        const targetObj = source.constructor === Array ? [] : {};
        for (let keys in source) {
          if (source.hasOwnProperty(keys)) {
            if (source[keys] && typeof source[keys] === "object") {
              targetObj[keys] = source[keys].constructor === Array ? [] : {};
              targetObj[keys] = deepClone(source[keys]);
            } else {
              targetObj[keys] = source[keys];
            }
          }
        }
        return targetObj;
      }
      let objC = {
        title: "深拷贝",
        age: 12,
        arr: [1, 2, 3, 4],
        obj: {
          name: "武神",
        },
      };
      // 赋值是浅拷贝
      let newObjC = objC;
      //   let newObjC = deepClone(objC);
      newObjC.arr.push(999);
      newObjC.obj.name = "无神";

      console.log(objC, newObjC);