面试合集_ 字节宝

每次的分割代表一次面试～

<img>的 title 和 alt 有什么区别？
描述常见的 HTTP 状态码和 HTTP 方法
IE 与火狐的事件机制有什么区别？什么是事件冒泡？如何阻止冒泡？
在浏览器地址栏中输入一个 URL 后回车，背后会进行哪些技术步骤？
如何实现一个 JS 对象的深度克隆？
请简单描述 Vue 双向绑定底层实现原理，常用到的指令及 Vue 实例的生命周期
编程实现获取 URL 中的参数：
a）指定参数名称，返回该参数的值或者空字符串;
b）不指定参数名称，返回全部的参数对象或者{};
c）如果存在多个同名参数，则返回数组;

代码语言：javascript复制

function getUrlParam(url, key){

};

给出两个单词 word1 和 word2 ，找出将 word1 转换成 word2 所使用的最少的步骤数（每个操作记为一步）。你可以对一个单词进行以下三种操作：
- a）插入一个字符;
- b）删除一个字符;
- c）替换一个字符;

代码语言：javascript复制

function minDistance(word1, word2){
    
};

HTTP request 报文结构是怎样的？
如何进行网站性能优化，请简述。
HTTP状态码及其含义？
display: none; 与 visibility: hidden; 的区别？
如何判断一个对象是否为函数？
如何分别水平、垂直居中一个元素？
什么是 web 语义化？ html5 有哪些语义化标签？语义化有什么好处？
以下程序输出结果是？

代码语言：javascript复制

function fn(a) {
	console.log(a);
	var a = 2;
	function a() {};
	console.log(a);
}
fn(1);

以下程序输出结果是？

代码语言：javascript复制

var a = 10;
a.pro = 10;
console.log(a.pro   a);
var s = 'hello';
s.pro = 'world';
console.log(s.pro   s);

写出几种 js 跳转的常见方式？
写出输出结果

代码语言：javascript复制

console.log(typeof null);
console.log(typeof {});
console.log(typeof []);
console.log(typeof undefined);

写出输出结果？

代码语言：javascript复制

function printing() {
	console.log(1);
	setTimeout(function() {
		console.log(2);
	}, 1000);
	setTimeout(function() {
		console.log(3);
	}, 0);
	console.log(4);
}
printing();

写出客户端存储 localStorage 和 sessionStorage 的 set、get 方法， localStorage 和 sessionStorage 有何区别？
通过JS获取页面尺寸、屏幕的方法？
列举JS实现跨域的几种方式？
列举几种立即执行函数的实现方式。

代码语言：javascript复制

var numberArray = [3, 6, 2, 4, 1, 5];

1）实现对该数组的倒排，输出[5, 1, 4, 2, 6, 3]
2）实现对该数组的的将序排列，输出[6, 5, 4, 3, 2, 1];
编写一个方法，去掉一个数组的重复元素
写一个简单的 ajax 示例
JavaScript有哪些方法定义对象？

以下写法均为个人解答，不代表正确性，有兴趣可以自己写写～

#题 1

代码语言：javascript复制

function getString (string) {
  const Reg = /^[a-zA-Z]*$/
  const newString = []
  const stringArr = string.split('')
  let preString = ''
  
  for (const str of stringArr) {
    if (Reg.test(str) || str === "'") {
      if (preString === '?') {
        newString.push(str.toUpperCase())
      } else {
        newString.push(str)
      }
    }
    preString = str
  }
  return newString.join('')
}

const string = `I'm?？？？driving？??？to？?beijing？?？？after？breakfast`

console.log(getString(string))

#题 2

代码语言：javascript复制

const numberList = []

function getNumberList (start, end) {
  start = parseInt(start)
  end = parseInt(end)
  if (start <= end) {
    if (start > 0 && start % 3 === 0) {
      numberList.push(start)
      getNumberList(start   3, end)
    } else {
      getNumberList(  start, end)
    }
  }
}

getNumberList(1, 100)

console.log(numberList)

#题 3

代码语言：javascript复制

let startDay = {
  hour: 1,
  timer: null,
  setup (user) {
    console.log(`${user} 起床啦`)
  },
  brush (user) {
    console.log(`${user} 去刷牙呢`)
  },
  work (user) {
    console.log(`${user} 去工作啦`)
  },
  sleep (user) {
    console.log(`${user} 要睡觉啦`)
  },
  coding (user) {
    console.log(`${user} 开始写代码啦`)
  },
  demand (user) {
    console.log(`${user} 的需求评审`)
  },
  daily (user) {
    console.log(`${user} 写日报`)
  },
  start () {
    if (this.hour >= 1 && this.hour < 24) {
      switch (this.hour) {
        case 8:
          execute(this.hour)
          break
        case 9:
          execute(this.hour)
          break
        case 10:
          execute(this.hour)
          break
        case 11:
          execute(this.hour)
          break
        case 16:
          execute(this.hour)
          break
        case 22:
          execute(this.hour)
          break
        default:
          break
      }
    } else {
      this.hour = 0
    }
  },
  open () {
    console.log('开始了')
    this.timer = setInterval(() => {
      console.log(this.hour   '点')
      this.start()
      this.hour  = 1
    }, 1000)
  },
  close () {
    clearInterval(this.timer)
    this.timer = null
    console.log('stop')
  }
}
const config = {
  my: {
    8: startDay.setup,
    9: startDay.brush,
    10: startDay.work,
    22: startDay.sleep
  },
  a: {
    10: startDay.coding,
    16: startDay.demand,
    22: startDay.daily
  },
  b: {
    11: startDay.coding,
    23: startDay.daily
  }
}

function execute (hour) {
  config.my[hour] && config.my[hour]('我')
  config.a[hour] && config.a[hour]('小 a')
  config.b[hour] && config.b[hour]('小 b')
}

startDay.open()

#火花思维

#1. Vuex 的几个属性

#2. 深拷贝和浅拷贝，如何实现深拷贝

#3. Vue 双向绑定原理

#4. 手写 bind 函数

#5. 算法题：给一个数组，每个元素只占用一个个位数，返回这个数组 1 后的数组

代码语言：javascript复制

input: [1, 2, 3]
output: [1, 2, 4]

input: [9, 9]
output: [1, 0, 0]

#6. 算法题：给一个英文句子，返回最长的单词

#7. Vue 组件传参

#8. Vuex 可以直接通过 `this.$store.state` 去修改吗？

#9. ES6 map 和 set

#10. 算法题：给一个字符串，去除重复次数最少的字符

代码语言：javascript复制

input: abcedde
output: edde

input: abbccdddaa
output: adddaa

#11. 最近的项目亮点

#12. Vuex 实际应用

#13. 懒加载

#好未来

#1. 浏览器的事件循环机制

#2. 如何构建的前端应用

#3. 浏览器缓存机制

#4. 写过小程序吗？

#5. 如何实现的懒加载

#6. 深拷贝浅拷贝

#7. Webpack 如何优化的

#8. Vue 常用的 API

#9. 网页加载不出来可能出现的问题？三个层面

用户
CDN
部署

#10. flex: 1; 的含义

#1. 问了问项目

#2. 怎么实现的动态渲染表单

#3. 懒加载如何实现？

#4. 队列上传怎么实现的？

#5. 手写队列上传

#6. 防抖节流概念区别？

#7. 手写防抖函数

#8. 如何优化 webpack 打包速度的？

#9. 对项目的优化有哪些？

#10. Vue 双向绑定原理？

#0. 问项目

#1. 如何控制并发请求

#2. JS 作用域原理

#3. 垃圾回收机制

#4. 前端部署形式

#5. 算法：给一个整数，判断是否为回文

#6. EventLoop

#7. 宏任务、微任务。哪个先执行？

#8. Promise 原理

#9. Promise 实现

#10. JS 特性

#11. 变量提升原理

#12. 你是如何学习 JS 的

#13. 闭包原理

#58 一面

#1. CSS 如何实现水平垂直居中？几种方式？

#2. flex 如何实现的水平垂直居中

#3. position 定位有几种，区别分别是什么？

#4. 浮动布局如何实现？带来的副作用如何清除？

#5. 防抖、节流函数的区别以及如何实现？在业务中的场景是什么？

#6. JS 作用域链如何理解的？

#7. Vue 和 React 之间的区别？

#8. JS 的原型继承，如果 a 是 b 的父级如何实现？

#9. 发布-订阅模式，以及如何实现？

#10. Vue 双向绑定原理？

#11. Vue-router 原理？有几种模式？

#12. history 模式和 hash 的区别？

#13. 如果用 history 模式会有什么问题？

#14. Vue 组件之间传参的方式有几种，以及如何实现？兄弟组件之间如何传参？

#15. Promise 的使用，如果让你实现一个简单的 Promise 你会如何实现？

#16. 算法：给一个人名的数组，可能有重复的，返回一个人名的数组，如果是重复的，在人名后面加编号

#17. 算法：对象的展开扁平化

#18. this 的指向以及如何修正？

#19. 浏览器的 EventLoop

#20. 宏任务和微任务的顺序，什么是宏任务？什么是微任务？

#21. nodejs 用过吗？用来干嘛？

#22. nodejs 和浏览器的EventLoop

#23. 浏览器的垃圾回收机制？nodejs 的垃圾回收机制？

#24. Webpack 的基本打包原理

#25. 写过 Webpack 的插件吗？

#26. Webpack 的理解

#1. this 指向的问题

#2. 箭头函数的作用？

#3. 来做道题吧，这个输出什么？

代码语言：javascript复制

const a = function () {
  const x = {
    m: function () {
      console.log(this)
    },
    n: () => {
      console.log(this)
    }
  }
  return x
}
const b = {}
const c = a.call(b)

c.m()
c.n()

#4. JS 的作用域和作用域链讲讲？

#5. EventLoop 机制？

#6. 宏任务和微任务？

#7. 哪些是宏任务？哪些是微任务？

#8. new 的作用？

#9. 实现一个 new

代码语言：javascript复制

const Car = function () {}

const car = new Car

const car1 = New(Car)

// 实现 New

#10. 说说变量提升

#11. 为什么有变量提示？

#12. let 和 const 有变量提升吗？

#13. 像 var 一样使用 let 和 const 有什么问题吗？（暂时性死区）

#14. 为什么会有暂时性死区？

#15. ES6 了解吗？Promise 能解释一下吗？

#16. Promise 除了 then cache 还有别的方法吗？

#17. HTTPS 和 HTTP 的区别？

#18. HTTPS 的原理？

#19. 说一下浏览器的缓存机制

#20. CSS 的定位有几种？

#21. 分别相对于什么元素来定位的？

#22. 来做道题吧，实现 reduce

代码语言：javascript复制

Array.prototype.customReduce = function () {

}

#23. 实现一个 render 函数

用 Javascript 对象模拟 DOM 树，并实现它的 render 方法，通过调用该方法可以转成真正的 DOM 节点。例如我们已经实现了 element.js，通过 require('element.js')，我们可以定义 ul，如下：

代码语言：javascript复制

const el = require('./element.js')；
const ul = el('ul', {id: 'list'}, [
  el('li', {class: 'item'}, ['Item 1']),
  el('li', {class: 'item'}, ['Item 2']),
  el('li', {class: 'item'}, ['Item 3'])
])

现在 ul 只是一个 JavaScript 对象表示的 DOM 结构，页面上并没有这个结构。我们可以根据这个 ul 构建真正的 <ul>，最终当我们这样调用时，

代码语言：javascript复制

const ulRoot = ul.render();
document.body.appendChild(ulRoot);

body 中就有了真正的 DOM 结构，如下

代码语言：javascript复制

<body> 
  <ul id='list'>
    <li class='item'>Item 1</li>
    <li class='item'>Item 2</li>
    <li class='item'>Item 3</li>
  </ul>
</body>

也就是说，我们需要实现 element.js

点击查看代码

代码语言：javascript复制

function el (tag, data, el) {
  return {
    render: function () {
      const element = document.createElement(tag)
      element.el = el
    
      if (data) {
        for (let key in data) {
          switch (key) {
            case 'id':
            case 'class':
              element.setAttribute(key, data[key])
              break
            default: break
          }
        }
      }
    
      for (let i = 0; i < el.length; i  ) {
        if (el[i].render) {
          element.append(el[i].render())
        } else {
          element.append(el[i])
        }
      }
      return element
    }
  }
}

#24. 写一个双向链表，实现 insert 和 removeAt 方法

Javascript 构造一个双向链表，并且实现它的插入和删除方法，例如 insert(position, element) 表示在 position 位置插入值为 element 的节点，removeAt(position) 表示删除 position 位置的节点。

代码语言：javascript复制

// 链表节点
class Node {
    constructor(element) {
        this.element = element
        this.prev = null
        this.next = null
    }
}

自我介绍
项目的作用？
项目的整体流程
如何制作或者获取素材的
说说跨域（我说了三种 CORS，JSONP，图片探测）
什么是跨域？（协议，端口，域名）
Options 请求
简单请求，复杂请求
只要是复杂请求就一定有 Options 请求吗？（）
你们项目里有跨域这类问题吗？
写 Promise.all
正则表达式，开头是字母，结尾是数字
说说防抖和节流。以及写一个节流，只不过是 500ms 后在去执行
Vue 了解吗？能写吗？
Webpack 怎么样？
有什么要问我的吗？

自我介绍
使用 React 还是 Vue？（我说都用过，Vue2 React16.8）
React 和 Vue 的区别？
React 的 Hooks 和 Class 组件的区别？
React 的 fiber 简单说说
Diff 算法，Vue 和 React 或者你说一个你知道就行。（我说的 React）
React 的 Diff 算法复杂度？（O(n)）
React 的 Diff 算法内部实现？（组件、树、Element）
介绍一下你最熟悉的项目
看你有前端规范的实践，简单说说举个例子
看你简历有设计模式相关的，能简单介绍几个设计模式么？
比如现在有不同设备进行身份识别，你如何利用策略模式进行设计？
算法：有一个数组，已经排好序了，寻找一个目标，如果找到了返回下标，否则返回 -1 ，类似 indexOf 函数（二分查找）
有什么想问我的吗？
输入一个正数 N, 输出所有和为 N 的连续正数序列.

例如输入 15, 结果: [[1, 2, 3, 4, 5], [4, 5, 6], [7, 8]]

代码语言：javascript复制

// let obj = {
//   a: {
//     b: {
//       c: {
//         d: 1,
//       },
//     },
//   },
//   e: 2,
//   f: {
//     g: 3,
//   },
// };


// result
// [[a, e, f], [b, g], [c], [d]]

1.curry 实现

代码语言：javascript复制

const add = (a, b, c) => a   b   c;
const curryAdd = curry(add);
console.log(curryAdd(1)(2)(3)); // 6
console.log(curryAdd(1, 2)(3)); // 6
console.log(curryAdd(1)(2, 3)); // 6

代码语言：javascript复制

// 实现 B 继承 A

function A(t) {
  this.t = t;
}
function B(t, s) {}

3.输出

代码语言：javascript复制

function fn(a) {
  console.log(a);
  var a = 123;
  console.log(a);
  function a() {}
  console.log(a);
  var b = function() {};
  console.log(b);
}
fn(1);

Vue2 和 Vue3 的区别
hooks 的设计思路

vue.js react node.js 编程算法 webpack

0 人点赞

面试合集

#题 1

#题 2

#题 3

#火花思维

#1. Vuex 的几个属性

#2. 深拷贝和浅拷贝，如何实现深拷贝

#3. Vue 双向绑定原理

#4. 手写 bind 函数

#5. 算法题：给一个数组，每个元素只占用一个个位数，返回这个数组 1 后的数组

#6. 算法题：给一个英文句子，返回最长的单词

#7. Vue 组件传参

#8. Vuex 可以直接通过 this.$store.state 去修改吗？

#9. ES6 map 和 set

#10. 算法题：给一个字符串，去除重复次数最少的字符

#11. 最近的项目亮点

#12. Vuex 实际应用

#13. 懒加载

#好未来

#1. 浏览器的事件循环机制

#2. 如何构建的前端应用

#3. 浏览器缓存机制

#4. 写过小程序吗？

#5. 如何实现的懒加载

#6. 深拷贝浅拷贝

#7. Webpack 如何优化的

#8. Vue 常用的 API

#9. 网页加载不出来可能出现的问题？三个层面

#10. flex: 1; 的含义

#1. 问了问项目

#2. 怎么实现的动态渲染表单

#3. 懒加载如何实现？

#4. 队列上传怎么实现的？

#5. 手写队列上传

#6. 防抖节流概念区别？

#7. 手写防抖函数

#8. 如何优化 webpack 打包速度的？

#9. 对项目的优化有哪些？

#10. Vue 双向绑定原理？

#0. 问项目

#1. 如何控制并发请求

#2. JS 作用域原理

#3. 垃圾回收机制

#4. 前端部署形式

#5. 算法：给一个整数，判断是否为回文

#6. EventLoop

#7. 宏任务、微任务。哪个先执行？

#8. Promise 原理

#9. Promise 实现

#10. JS 特性

#11. 变量提升原理

#12. 你是如何学习 JS 的

#13. 闭包原理

#58 一面

#1. CSS 如何实现水平垂直居中？几种方式？

#2. flex 如何实现的水平垂直居中

#3. position 定位有几种，区别分别是什么？

#4. 浮动布局如何实现？带来的副作用如何清除？

#5. 防抖、节流函数的区别以及如何实现？在业务中的场景是什么？

#6. JS 作用域链如何理解的？

#7. Vue 和 React 之间的区别？

#8. JS 的原型继承，如果 a 是 b 的父级如何实现？

#9. 发布-订阅模式，以及如何实现？

#10. Vue 双向绑定原理？

#11. Vue-router 原理？有几种模式？

#12. history 模式和 hash 的区别？

#13. 如果用 history 模式会有什么问题？

#14. Vue 组件之间传参的方式有几种，以及如何实现？兄弟组件之间如何传参？

#15. Promise 的使用，如果让你实现一个简单的 Promise 你会如何实现？

#16. 算法：给一个人名的数组，可能有重复的，返回一个人名的数组，如果是重复的，在人名后面加编号

#17. 算法：对象的展开扁平化

#18. this 的指向以及如何修正？

#19. 浏览器的 EventLoop

#20. 宏任务和微任务的顺序，什么是宏任务？什么是微任务？

#21. nodejs 用过吗？用来干嘛？

#22. nodejs 和 浏览器的EventLoop

#23. 浏览器的垃圾回收机制？nodejs 的垃圾回收机制？

#24. Webpack 的基本打包原理

#25. 写过 Webpack 的插件吗？

#26. Webpack 的理解

#8. Vuex 可以直接通过 `this.$store.state` 去修改吗？

#22. nodejs 和浏览器的EventLoop