前端面试题汇总
Author: Abbott Liu(刘建)
Create: 2020
Update: 2021/10/20
基础知识
数据类型种类
| 数据类型 | |
|---|---|
| String | 字符串 |
| Boolean | 布尔值 |
| Undefined | 没有初始化、定义的值 |
| Number | 数字 |
| Null | 不存在的对象 |
| Object |
数据类型分类
在ES5的时候，我们认知的数据类型确实是
6种：String、Boolean、undefined、Number、Null、Object
ES6中新增了一种Symbol
这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记。
谷歌67版本中还出现了一种 bigInt。是指安全存储、操作大整数。（但是很多人不把这个做为一个类型）。
JS数据类型：JS的基本类型和引用类型有哪些呢？
基本类型（单类型）：除Object。 String、Number、boolean、null、undefined。
引用类型：object。里面包含的function、Array、Date。
1、ES6 - Map 与 Set（数据结构）
ES6 - Map 与 Set（数据结构）
Map：它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。
const m = new Map();
const o = { p: 'Hello World' };
let t = m.set(o, 'content')
console.log(t);
t = m.get(o) // "content"
console.log(t);
t = m.has(o) // true
console.log(t);
t = m.delete(o) // true
console.log(t);
t = m.has(o) // false
console.log(t);2、CMD 和 AMD 区别
3、import 和 require 区别
4、冒泡算法、快速排序算法
5、this.$set
6、:data.sync
7、post 和 get 区别
8、TCP 和 UDP
9、扩展运算符(...)
10、上传文件时不刷新
具体描述：给出一个上传文件时不用刷新页面的方案，要求写出关键部分的js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="ipt1" type="file"/>
<button id="btn1">上传</button>
<script src="https://unpkg.com/axios/dist/axios.min.js">
var file = document.getElementById("ipt1").files[0];
var formData = new FormData();
formData.append('file',file);
axios.post('/',{formData})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</script>
</body>
</html>JavaScript部分
手写数组快速排序
“快速排序”的思想很简单，整个排序过程只需要三步：
(1)在数据集之中，选择一个元素作为”基准”(pivot)。
(2)所有小于”基准”的元素，都移到”基准”的左边;所有大于”基准”的元素，都移到”基准”的右边。
(3)对”基准”左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。
写一个function，清除字符串前后的空格。
兼容所有浏览器
function trim(str) {
if (str & typeof str === "string") {
return str.replace(/(^s*)|(s*)$/g,""); //去除前后空白符
}
}计算中文字符串的实际长度
let str = "刘建前端工程师123"
// 计算中文字符串的长度（方法1）
var helper = {};
helper.getRealLength = function(str) {
///<summary>获得字符串实际长度，中文2，英文1</summary>
///<param name="str">要获得长度的字符串</param>
var realLength = 0, len = str.length, charCode = -1;
for (var i = 0; i < len; i++) {
charCode = str.charCodeAt(i);
if (charCode >= 0 && charCode <= 128)
realLength += 1;
else
realLength += 2;
}
return realLength;
};
console.log('方法(1)length== ', helper.getRealLength(str))
// 计算中文字符串的长度（方法2）
var l = str.length;
var blen = 0;
for(i=0; i<l; i++) {
if ((str.charCodeAt(i) & 0xff00) != 0) {
blen ++;
}
blen ++;
}
console.log('方法(2)length== ', blen)
// 计算中文字符串的长度（方法3）
let regCN = /[\u0391-\uFFE5]/g
let len = 0
for(var i in str) {
// console.log(i);
// console.log(regCN.test(str[i]), regCN.lastIndex);
if(regCN.test(str[i])) {
// console.log(str[i] + "=2");
len += 2
} else {
// console.log(str[i] + "=1");
len += 1
}
}
// console.log(len)
str = str.replace(/[\u0391-\uFFE5]/g,"aa");
console.log('方法(3)length== ', str.length)前端面试题20201230
1、防抖和节流的区别？
一、防抖
场景：在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。这些需求都可以通过函数防抖动来实现。尤其是第一个需求，如果在频繁的事件回调中做复杂计算，很有可能导致页面卡顿，不如将多次计算合并为一次计算，只在一个精确点做操作。二、节流
防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。
高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率。三、区别
防抖：短时间内多次触发，最终在停止触发后的某个指定时间执行一次函数（只执行一次）
节流：短时间内多次触发，即使触发仍在继续也可以根据指定时间触发一次函数（至少执行一次）前端面试题20211023
全栈刘建介绍
百度搜索【前端刘建】或【全栈刘建】或【全栈工程师简历】可以搜到更多本人写的技术文章
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。