一份扎实的前端笔试题

¶ 前端笔试题 — Question

本文原文转载自：

技术痞瑞/视频链接open in new window

技术痞瑞/原文mdopen in new window

¶ 前端基础知识

介绍⼀下CSS盒模型

content + padding + border + margin

正常盒模型：box-sizing: content-box

怪异盒模型：box-sizing: border-box

display: none 和 visibility: hidden 的区别

写出以下代码的输出结果

console.log(1);
setTimeout(function () { 
  console.log(2); 
}, 0);
new Promise(resolve => {
  console.log(3);
  resolve();
  console.log(4);
}).then(() => {
  console.log(5);
})
console.log(6);
复制成功

1
2
3
4
5
6
7
8
9
10
11
12

写出以下代码的输出结果

var name = 1
function test() {
  var name = 2
  console.log(this.name)
  return function inner() {
    console.log(name)
  }
}
test()// 1
test()()// 1 2
var b = {
  name: 3
}
b.test = test
b.test()// 3

var c = b.test
c()// 1
new test()
复制成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

实现⼀个栈数据结构，接⼝如下，请实现该类的 in、out、top、size 函数

FILO

class Stack {
  constructor() {}
  in(value) {
    //你的代码
  }
  out() {
    //你的代码
  }
  top() {
    //你的代码
  }
  size() {
    //你的代码
  }
}

// 要求当执⾏下列代码时，能输出预期的结果
const stack = new Stack()
stack.in('x')
stack.in('y')
stack.in('z')
stack.top() //  输出  'z'
stack.size()//  输出   3 
stack.out() //  输出  'z'
stack.top() //  输出  'y'
stack.size() // 输出   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
26

¶ 编程题

任选框架（React、 Vue、 Angular）实现⼀个Message组件，满⾜
弹出消息通知、关闭消息通知即可
实现⼀个能对数组去重的⽅法

// 输⼊ array = [1,5,2,3,2,5,4] 输出 [1, 5, 2, 3, 4] 
function unique(array) { 
  // 在这⾥实现 
}
复制成功

1
2
3
4

⽤Promise对fetchData进⾏包装，将回调的设计封装成then的形式

function fetchData(callback) { 
  setTimeout(() => { 
    callback("我是返回的数据") 
  }, 5000) 
}
// 实现下⾯的函数 
function promiseFecth() {
  // 你的代码
}
promiseFecth().then((res) => { 
  console.log(res) // 我是返回的数据 
})
复制成功

1
2
3
4
5
6
7
8
9
10
11
12

给出如下地址数据格式，实现函数 getNameById ,

输⼊address 和 id ，输出 id 对应的地址的 name

const address = [
  {
    id: 1,
    name: '北京市',
    children: [
      {
        id: 11,
        name: '海淀区',
        children: [
          {
            id: 111,
            name: '中关村',
          }
        ]
      }, {
        id: 12,
        name: '朝阳区',
      }
    ],
  }, {
    id: 2, name: '天津市'
  }]
// 请实现该函数 
// 输⼊：getNameById(address, 2)，输出："天津市" 
// 输⼊：getNameById(address, 111)，输出："中关村" 
// 输⼊：getNameById(address, 32)，输出："" （未查找到，输出空字符串） 
function getNameById(address, id) { 
  // 在这⾥实现你的代码 
}
复制成功

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

⼩ A 实现了⼀个合并两个数组的函数，假如你来 review 他实现的代码，

请从代码实现、代码⻛格、代码规范等⻆度给出你对下列代码的意⻅

// ⼩A created at 2021-12-30 
let mergeTwoarr=(a1,a2) =>{ 
  a2.map(item=> { 
    a1.push(item) 
  }) 
  console.log('结果是',a1) 
  return a1 
}

const merge = (arr1, arr2) => [...arr1, ...arr2]
复制成功

1
2
3
4
5
6
7
8
9
10

晓露寝安浅云逍遥十漾轻拟

¶ # 前端笔试题 — Question

¶ # 前端基础知识

¶ # 编程题

¶ 前端笔试题 — Question

¶ 前端基础知识

¶ 编程题