MS1-CSDN博客

1、如何实现三栏布局（左右两边固定宽度，中间自适应）？

绝对定位布局：position + margin

原理：absolute将定位元素偏离正常文档流，不占用正常文档流的位置。absolute元素的父元素没有position定位，absolute元素相对于body定位。所有main元素的margin值为left和right元素的宽度。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        html {
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        .container {
            height: 100%
        }

        /*左右进行绝对定位*/
        .left,
        .right {
            position: absolute;
            height: 100%;
            top: 0;
            background: #ff69b4;
        }

        .left {
            left: 0;
            width: 100px;
        }

        .right {
            right: 0;
            width: 200px;
        }

        /*中间用margin空出左右元素所占的空间*/
        .main {
            height: 100%;
            margin: 0 100px 200px 0;
            background: #659;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div class="main">Main</div>
    </div>
</body>
复制代码

2、如何实现弹窗水平垂直居中？

3、=/==/===、!与!!的区别？

=、==、===三者的区别；

=、一个等号是赋值运算，把等号右边的值付给左边的变量，是从右想做计算，并且运算优先级最低；

==。两个等号是比较运算，会得到一个真/假的逻辑只，遇到左右两边是不同的数据类型，默认会进行数据类型转换；

===、三个等号是绝对的相等，只有数据类型一样才有可比性，遇到左右两边数据类型不同，并不会像==一样进行数据类型转换；

!和!!：

!是取反的意思；先将其它的数据类型转换为布尔类型；然后在取反；

!!是将其他的数据类型强制转换为布尔类型，相当于Boolean；

4、30 == '30' 的过程是怎样的？

30为数值类型，而'30'未字符串类型，因此等号两边的数据类型不相等，需要进行转换类型；

由于一个是数值，另一个字符串，所以需要将字符串转换成数值再进行比较，即 '30' => 30;

这时等号两边同样为数值型数据，即 30 == 30，所以返回 true

5、以下代码输出的是什么？为什么呢？

for (var i = 0; i < 5; i++) {
    setTimeout(function timer() {
        console.log(i)
    }, 0)
}
//5
复制代码

for循环的计数器，就很合适使用let命令。

for (let i = 0; i < 10; i++) {
  // ...
}

console.log(i);
// ReferenceError: i is not defined
复制代码

上面代码中，计数器i只在for循环体内有效，在循环体外引用就会报错。

下面的代码如果使用var，最后输出的是10。

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10
复制代码

上面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10。

如果使用let，声明的变量仅在块级作用域内有效，最后输出的是 6。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6
复制代码

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。

另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc
复制代码

上面代码正确运行，输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。

MS1

1、如何实现三栏布局（左右两边固定宽度，中间自适应）？

2、如何实现弹窗水平垂直居中？

3、=/==/===、!与!!的区别？

4、30 == '30' 的过程是怎样的？

5、以下代码输出的是什么？为什么呢？

6、你有使用过闭包吗？

7、模块化的异步加载怎样做？

8、window.onload什么时候执行

9、js深浅拷贝