Interview__Question.md · 技术痞瑞/18K笔试

## 前端笔试题 — Question

`期望薪资：18K`

### 前端基础知识

1.  介绍⼀ 下CSS盒模型

content + padding + border + margin

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

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

2.  display: none 和 visibility: hidden 的区别

3. 写出以下代码的输出结果

```js
   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);
   ```

4. 写出以下代码的输出结果

```js
   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()
   ```

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

FILO

```js
   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
   ```

### 编程题

6. 任选框架  （React、 Vue、 Angular） 实现 ⼀个Message组件， 满⾜

弹出消息通知、 关闭消息通知 即可

7.  实现 ⼀个能对数组去重的⽅法

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

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

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

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

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

```js
   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) { 
     // 在这⾥实现你的代码 
   }
   ```

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

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

```js
    // ⼩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]
    ```

技术痞瑞/18K笔试

简介

发行版

贡献者

近期动态

技术痞瑞/18K笔试 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

技术痞瑞/18K笔试