听阳光的猫

道阻且长、望你如一

0%

Javascript面试题

发表于 更新于 分类于
本文字数： 12k 阅读时长 ≈ 11 分钟

【JavaScript】typeof和instanceof的区别

image-20201002224535001

数据类型可以分为基本数据类型和引用数据类型

基本数据类型 ：String、Number、Boolean 、Null、Undefined、Symbol、BigInt ;

引用数据类型：Object;

typeof 一般被用于判断一个变量的类型，我们可以利用 typeof 来判断number, string, object, boolean,

function, undefined, symbol 这七种类型。

Object.prototype.toString.call() 我们可以利用这个方法来对一个变量的类型来进行比较准确的判断

instanceof 检测的左边必须是引用类型：数组、对象、用new()创建的对象；右边必须是函数

【JavaScript】相等(==)和全等(===)运算符的区别

null == undefined true

'false' == false 这个会转换为0 false

【JavaScript】对调两个变量的多种方法

  1. 临时变量法

    1
    2
    3
    4
    5
    var a = 3,
        b = 5,
        c = b;
    b = a;
    a = c;

  2. 加减法

    1
    2
    3
    4
    5
    var a = 3,
        b = 5;
    a = a + b;
    b = a - b;
    a = a - b;

  3. 数组法

    1
    2
    3
    4
    5
    var a = 3,
        b = 5;
    a = [a, b];
    b = a[0];
    a = a[1];

  4. 对象法

    1
    2
    3
    4
    5
    var a = 3,
        b = 5;
    a ={ a:b, b:a};
    b = a.b;
    a = a.a;

  5. 数组运算法

    1
    2
    3
    var a = 3,
        b = 5;
    a = [b, b = a][0];

  6. 按位异或法

    1
    2
    3
    4
    5
    var a = 3,
        b = 5;
    a = a ^ b;
    b = b ^ a;
    a = a ^ b;

  7. 解构赋值法

    1
    2
    3
    var a = 3,
        b = 5;
    [a, b] = [b ,a]

【CSS】如何让超宽文本替换为省略号

image-20201003103146569 

1
2
3
4
width:100px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

【JavaScript】document.write()和innerHTML的区别

image-20201003104428828 

1
2
3
window.onload = function(){
    document.write("大家好，我是蛋老师！");
}
1
2
3
var two = document.getElementById("two");
two.innerHTML = "鸡蛋"；
two.innerHTML += "蛋老师666"

【JavaScript】删除排序数组中的重复项

  1. 遍历移除法 array.splice(index,howmany) 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var nums = [1, 1, 2];
    for (var i = 0; i < nums.length; i++){
        if (nums[i] === nums[i+1]) {
            nums.splice(i,1);
            i--;
        }
    }
    console.log(nums);
    console.log(nums.length);

  2. 双指针法

    1
    2
    3
    4
    5
    6
    7
    8
    var nums = [2, 2, 4, 4, 6];
    for (var father = 0, child = 0; father < nums.length; father++){
        if(nums[child] !== nums[father]){
            child++;
            nums[child] = nums[father];
        }
    }
    console.log(child + 1)

【JavaScript】打乱数组内元素顺序

Fisher-Yates shuffle

1
2
3
4
5
6
7
8
9
10
11
12
var students = ["学生1", "学生2", "学生3", "学生4", "调皮学生"]; 

var length = students.length, index, temp;

for (var point = length - 1; point >= 0; point--){
    index = Math.floor(Math.random() * point);
    temp = students[index]; 
    students[index] = students[point];
    students[point] = temp;
}

console.log(students);

【JavaScript】二分法寻找数组元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var arr = [3, 48, 66, 71, 99, 101, 120, 151, 188, 209]
function searching(target){
    var start = 0, end = arr.length - 1, middle, element;
    while(start <= end){
        middle = Math.floor((start + end) / 2);
        element = arr[middle];
        if(element === target){
            return middle;
        } else if(target < element){
            end =middle - 1;
        } else {
            start = middle + 1;
        }
    }
}

【HTML】元素属性href和src的区别

href:Hypertext Reference 超文本 应用或者参照—— link和a使用

建立通道，让当前元素或文档和引用资源进行联系，需要引用资源的时候可以通过通道进行引用。

src:source 资源 ——–img、style 、script 、input 、iframe 使用

会把资源下载下来，代替当前元素，然后嵌入到文档中。

【CSS】如何水平居中元素

  1. 行内元素设置水平居中

    1
    2
    /*设置其父元素*/
    text-align:center;

  2. 块级元素设置水平居中

    1
    2
    3
    /* 设置宽度(块级元素不设置宽度的话默认占满一栏，这样居中就没效果) */
    width:100px;
    margin:0 auto;

  3. 浮动元素

    1
    2
    3
    4
    float:left;
    position:relative;
    left:50%;
    transform:translateX(-50%);

  4. 绝对定位

    1
    2
    3
    position:absolute;
    left:50%;
    transform:translateX(-50%);

【JavaScript】函数作用域

image-20201003153250461

image-20201003153928081

【JavaScript】加法运算

image-20201003161356373

image-20201003161430785

image-20201003161508961

image-20201003161550987

image-20201003161637385

image-20201003161729153

image-20201003161758967

第二个空对象在前面会被忽略。后面的空数组转化为数字。

【JavaScript】九九乘法表

image-20201004082942150 

1
2
3
4
5
6
7
8
9
document.write("<table>");
    for (var row = 1; row < 10; row++){
        document.write("<tr>")
        for (var column = 1; column <= row; column++){
            document.write("<td>" + column + "×" + row + "=" + row*column + "</td>")
        }
        document.write("</tr>")
    }
document.write("</table>");

image-20201004085141784 

1
2
3
4
5
6
7
8
9
10
11
12
document.write("<table>");
    for (var row = 1; row < 10; row++){
        document.write("<tr>")
        for (var blank = 9 - row; blank > 0; blank--){
            document.write("<td></td>")
        }
        for (var column = row; column > 0; column--){
            document.write("<td>" + row + "×" + column + "=" + row*column + "</td>")
        }
        document.write("</tr>")
    }
document.write("</table>");

【JavaScript】this关键字

this指向的是谁(对象)最后调用了它

image-20201004091418745

this未明确指明对象，因此会使用默认绑定window全局对象。

严格模式下，输出的this值会变成undefined

image-20201004095312070 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var name = '小红';
function a(){
    var name = '小白'
    console.log(this.name);
}
function d(i) {
    return i();
}
var b = {
    name: '小黄',
    detail:function(){
        console.log(this.name);
    },
    bibi:function(){
        return function(){
            console.log(this.name);
        };
    },
}
var c = b.detail;
b.a = a;
var e = b.bibi();
a();
c();
b.a();
d(b.detail);
e();

【JavaScript】闭包

image-20201004155345884

image-20201004155722209

【JavaScript】两数之和 Two Sum

1
2
3
4
5
6
7
8
9
10
11
12
13
var nums = [2, 7, 11, 15];
var target = 26;

var twoSum = function(nums, target) {
    var box = {};
    // 或者换为var box = new Map()
    for (var i = 0; i <nums.length; i++){
        if(box[target-nums[i]] >= 0){
            return [box[target - nums[1], i]];
        };
        box[num[i]] = i;
    }
}

【JavaScript】伪类和伪元素的区别

image-20201004175311734

【CSS】垂直居中

  1. padding 缺点：父元素不能设置固定高度

    1
    2
    3
    4
    div {
        width: 200px;
        padding: 50px 0;
    }

  2. inline-height 优点：父元素可以设置固定高度

    1
    2
    3
    p {
        line-height: 100px;
    }

  3. flex布局 缺点：兼容性

    1
    2
    3
    4
    5
    6
    7
    div {
        height: 200px;
        width: 170px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

  4. absolute 缺点：脱离文档流

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
        <style>
            div {
                position: relative;
                width: 200px;
                height: 170px;
            }
            
            i {
                height: 50px;
                width: 50px;
                position: absolute;
                top: 50%;
                /* margin-top: -25px; */
                transform: translateY(-50%);
            }
        </style>

    <body>

        <div>
            <i></i>
        </div>

    </body>

  5. grid布局 缺点：兼容性

    1
    2
    3
    4
    5
    6
    ul {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        align-items: center;
        justify-content: center;
    }

  6. 伪元素 优点：兼容性好

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
        <style>
            div.search {
                display: inline-block;
                vertical-align: middle;
            }
            
            div.main::after {
                content: "";
                display: inline-block;
                background-color: gold;
                height: 100%;
                width: 0;
                vertical-align: middle;
            }
        </style>


    <body>
        <div class="main">
            <div class="search">
                <form action="">
                    <input type="text" placeholder="技术蛋老师...">
                    <div class="button"><i></i></div>
                </form>
            </div>
        </div>
    </body>

【JavaScript】小数精度问题

image-20201006181930036

【JavaScript】[‘1’,’2’,’3’].map(parseInt)

image-20201006183311035

image-20201006182306149

parseInt(*string*, *radix*) 解析一个字符串并返回指定基数的十进制整数， radix 是2-36之间的整数，表示被解析字符串的基数。

image-20201006183421421

image-20201006182452734 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
['1','2','3'].map(parseInt); // [1,NaN,NaN]

// 刨析

// map有三个参数:数组元素，元素索引，原数组本身
// parseInt有两个参数,元素本身以及进制
// 理清了这两个就好办了,
// ['1','2','3'].map(parseInt); 等于如下
['1','2','3'].map(function(item,index,array){
    return parseInt(item,index); // 是不是一目了然
});

// parseInt("1",0); => 1
// parseInt("2",1); => NaN
// parseInt("3",2); => NaN

【CSS】触发BFC

  1. position:absolute/fixed;
  2. float:left/right;
  3. overflow:auto/hidden/scroll;
  4. display:inline-block/flex;

【JavaScript】var、let、const的区别

image-20201006190436863

【JavaScript】多行省略

  1. -webkit-box 缺点：私有属性

    1
    2
    3
    4
    5
    6
    7
    p {
        height: 200px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
    }

  2. 双重伪元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    p {
        height: 100px;
        overflow: hidden;
        position: relative;
        padding-right: 1em;
        text-align: justify;
    }

    p::before {
        content: "...";
        position: absolute;
        right: 0;
        bottom: 0;
    }

    p::after {
        content: "";
        width: 1em;
        height: 1em;
        display: inline;
        position: absolute;
        right: 0;
        margin-top: 0.5em;
        background-color: #f0f;
    }

  3. linear-gradient

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    p {
        height: 210px;
        overflow: hidden;
        text-align: justify;
        position: relative;
    }

    p::after {
        content: "";
        position: absolute;
        height: 1.2em;
        width: 20%;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #f6acc8 80%);
        right: 0;
        bottom: 0;
        margin-bottom: 0.2em;
    }

【JavaScript】倒计时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <section>
        <p>请在以下时间对视频点赞</p>
        <span class="daySpan"></span>
        <span class="hourSpan"></span>
        <span class="minuteSpan"></span>
        <span class="secondSpan"></span>
        <p>感谢观看</p>
    </section>
    <script src="./index.js"></script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const daySpan = document.querySelector('.daySpan'),
    hourSpan = document.querySelector('.hourSpan'),
    minuteSpan = document.querySelector('.minuteSpan'),
    secondSpan = document.querySelector('.secondSpan'),
    deadline = new Date('2020-10-15 00:00');

function countdown() {
    const now = new Date(),
        timeRemaining = deadline - now;
    let day, hour, minute, second;
    if (timeRemaining < 0) {
        return 0;
    }

    second = Math.floor(timeRemaining / 1000 % 60);
    minute = Math.floor(timeRemaining / 1000 / 60 % 60);
    hour = Math.floor(timeRemaining / 1000 / 60 / 60 % 24);
    day = Math.floor(timeRemaining / 1000 / 60 / 60 / 24);

    daySpan.innerHTML = day + '天';
    hourSpan.innerHTML = hour + '时';
    minuteSpan.innerHTML = minute + '分';
    secondSpan.innerHTML = second + '秒';

    setTimeout(countdown, 1000);
}

countdown();

【JavaScript】display:none/visibility:hidden/opacity:0

image-20201006221425265

【JavaScript】箭头函数与普通函数的区别

image-20201006222209212

【CSS 】不使用border创建边框

image-20201006224101456

**box-shadow** 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

  1. 边框

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <style>
    	input {
        	border: none;
        	outline: none;
        	border-bottom: 1px solid #3797a4;
        	padding-bottom: 10px;
    	}

    	input:focus {
        	border: none;
        	padding-bottom: 0;
        	box-shadow: 0 0 0 5px #fcf876;
    	}
    </style>
    <body>
        <form action="">
            <input type="text" placeholder="你好呀">
        </form>
    </body>

  2. 内边框

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
        img {
            position: relative;
            z-index: -1;
        }
        
        div {
            height: 500px;
            width: 320px;
            box-shadow: insert 0 0 0 50px rgba(123, 104, 255, 0.2);
        }
    <section>
        <div>
            <img src="./icons.png" alt="">
        </div>
    </section>

  3. 双边框

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
           img {
               margin: 50px;
               width: 500px;
               box-shadow: 0 0 0 10px #32e0c4, 
                           0 0 0 30px white, 
                           -40px -40px #ff9595, 
                           40px 40px #ff9595;
           }
       
    <div>
           <img src="./icons.png" alt="">
       </div>

箭头函数中的this的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script>
  // 什么时候使用箭头
  // setTimeout(function () {
  //   console.log(this);
  // }, 1000)
  //
  // setTimeout(() => {
  //   console.log(this);
  // }, 1000)

  // 问题: 箭头函数中的this是如何查找的了?
  // 答案: 向外层作用域中, 一层层查找this, 直到有this的定义.
  // const obj = {
  //   aaa() {
  //     setTimeout(function () {
  //       console.log(this); // window
  //     })
  //
  //     setTimeout(() => {
  //       console.log(this); // obj对象
  //     })
  //   }
  // }
  //
  // obj.aaa()


  const obj = {
    aaa() {
      setTimeout(function () {
        setTimeout(function () {
          console.log(this); // window
        })

        setTimeout(() => {
          console.log(this); // window
        })
      })

      setTimeout(() => {
        setTimeout(function () {
          console.log(this); // window
        })

        setTimeout(() => {
          console.log(this); // obj
        })
      })
    }
  }

  obj.aaa()
</script>
</body>
</html>

【CSS 】 calc()应用场景

  1. 水平垂直居中

    1
    2
    3
    4
    5
    6
    img {
    height: 250px;
    width: 400px;
    padding-top: calc(50vh-250px/2);
    padding-left: calc(50vw-400px/2);
    }

  1. 最小外边距

    1
    2
    3
    div {
      width: calc(100% - 200px);
    }

  1. 渐变色

    1
    2
    3
    4
    5
    body {
      --t: 20deg;
      background: 
    linear-gradient(calc(var(--t)*10), rgba(255, 0, 0, .8), rgba(255, 0, 0, 0)70.71%), 	linear-gradient(calc(var(--t)*20), rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%), linear-gradient(calc(var(--t)*30), rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%), linear-gradient(calc(var(--t)*40), rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%), linear-gradient(calc(var(--t)*50), rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%), linear-gradient(calc(var(--t)*60), rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);
    }

  1. 两栏布局

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .left {
      background-color: #f00;
      float: left;
      width: 30%;
      margin-right: 10px;
    }

    .right {
      background-color: #ff0;
      float: right;
      width: calc(70% - 10px);
    }

  1. 特定位置

    1
    2
    3
    4
    5
    6
    img {
      position: absolute;
      height: 150px;
      margin-top: calc(100% - 830px);
      margin-left: calc(100% - 830px);
    }

  1. 响应式页面

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @media screen and (max-width: 500px) {
      body {
        background-color: #f0f;
      }
      div {
        width: calc(100% / 3);
        height: calc(100% / 3);
        background-color: #0f0;
      }
    }

【JavaScript】Symbol 类型的注意事项

image-20210324123100912

【JavaScript】 10个常用正则表达式

测试网站 https://regexr.com/

image-20210324124940789

image-20210324125018796

image-20210324125108519

image-20210324125245734

image-20210324125331437

image-20210324125415524

image-20210324125449131

image-20210324125519246

image-20210324125543465

image-20210324125611793

【JavaScript】 script标签defer和async的区别

script 标签有2个属性 async（异步） 和 defer（推迟）；

他们的功能是：
async：他是异步加载，不确定何时会加载好；页面加载时，带有 async 的脚本也同时加载，加载后会立即执行，如果有一些需要操作 DOM 的脚本加载比较慢时，这样会造成 DOM 还没有加载好，脚本就进行操作，会造成错误。
defer：页面加载时，带有 defer 的脚本也同时加载，加载后会等待 页面加载好后，才执行。