拿到了一套笔试题，简单写了一下

1.介绍一下CSS盒模型

一个盒子主要属性为 width height padding border padding
标准盒模型：宽高即为content
怪异盒模型：宽高+内边距+边框 为content

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

display: none 属于操作dom来实现显隐 会改变页面布局
visibility:hidden 属于通过css来实现显隐 不脱离文档流 相当于一直占用页面的位置

3.写出以下代码的输出

//JavaScript
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);

134652

4.写出以下代码的输出

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

112 3 1 ud

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

//TypeScrip
class Stack {
  array: [];
  constructor() {
    this.array = [];
  }
  in(value: never) {
    // 你的代码
    this.array.push(value);
  }
  out() {
    // 你的代码
    return this.array.pop();
  }
  top() {
    // 你的代码
    return this.array.slice(-1);
  }
  size() {
    // 你的代码
    return this.array.length;
  }
}
// 要求当执行下列代码时，能输出预期的结果
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组件，满足弹出消息通知、关闭消息通知即可

import React, { useState } from 'react';

const index = () => {
  const [type, setType] = useState(false);
  return (
    <>
      <button onClick={() => setType(!type)}>{type ? '关闭' : '弹出'} </button>
      {type ? <div style={{ margin: '0 auto' }}>Message</div> : ''}
    </>
  );
};
export default index;

7.实现一个能对数组去重的方法

// 输入 array = [1,5,2,3,2,5,4] 输出 [1, 5, 2, 3, 4]
function unique(array) {
// 在这里实现
  var  newArr = array.filter( (item,index)=>{
 return  array.indexOf(item)==index  
})
}

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

function fetchData(callback) {
    setTimeout(() => {
        callback("我是返回的数据")
    }, 5000)
}
// 实现下面的函数
function promiseFecth() {
function promiseFecth() {
  return new Promise((resolve, reject) => {
    fetchData((value) => resolve(value));
  });
}
}
promiseFecth().then((res) => {
    console.log(res) // 我是返回的数据
})

9.给出如下地址数据格式，实现函数 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: any, id: any, arr: any = []) {
  // 在这里实现你的代码
  address.forEach((e: any) => {
    if (e.id === id) {
      arr.push(e.name);
    }
    if (e.children) {
      getNameById(e.children, id, arr);
    }
  });
  return arr;
}

10.小 A 实现了一个合并两个数组的函数，假如你来 review 他实现的代码，请从代码实现、代码风格、代码规范等角度给出你对下列代码的意见

// 小A created at 2021-06-01
// 驼峰命名不规范
let mergeTwoarr=(a1,a2)=>{
// 可尝试使用concat 
  a2.map(item=> {
    a1.push(item)
  })
//去掉打印断电
console.log('结果是',a1)
return a1
}