WEB 前端面试题 （实战）（大全）

原生JS

(1）什么是JavaScript？

JavaScript是一个弱类型的、支持面向过程和面向对象编程的，主要工作在浏览器一侧给网页提供动态功能的、解释型的编程语言；
在发展过程中JavaScript也可以基于Node环境开发服务端应用，是很多前后端框架的底层实现技术！

（2） 简单介绍一下JS基本类型

原生JS中基本类型包括
字符串String
数值类型Number、
布尔类型Boolean
空值类型Null、
未声明类型Undefined
ES6中提供了新的唯一值类型Symbol

拓展

面试官可能会追问：Object算不算基本类型？ | 还有其他的吗？

原生JS中面向对象编程的理念是一切皆对象，有些资料里面也会把Object当成基本类型对待

（3） 字符串如何转换成布尔类型？

字符串可以和布尔类型进行转换，空字符串转换结果是false，非空字符串转换结果是true
在项目中一般对字符串的有效值判断直接放在if条件中进行隐式判断

const response = getListJson()// 获取接口字符串数据
if(response.data) { // data存储的字符串格式的json数据
…有效数据
} else {
… 无效数据，提示错误
}

（4） 数值类型是如何转换布尔类型

数值可以转换成布尔类型，0的转换结果是false，非0转换结果true
项目中大部分场景中主要做非0判断，可以直接将数值放在if条件中进行隐式判断，或者可以和逻辑运算符结合起来进行默认值赋值处理
const price = goodsPrice || 1
一部分场景中0也属于有效数据，可以借助??运算符进行赋值和判断处理
const price = goodsPrice ?? 1

（5） 字符串是如何转换成数值的？

其他问法：parseInt('111', 2)转换结果是什么？

数值可以是字符串形式的，所以字符串类型的数字可以转换成数值
parseInt()可以将字符串数字转换成整数
parseFloat()可以将字符串数字转换成浮点数
如果字符串包含字母和数字，数字开头的话转换结果截取数字部分；如果字母开头转换结果NaN
parseInt()转换的时候可以指定进制单位，如parseInt('111', 2)当成2进制转换结果是7

（6） 都了解过哪些运算符？

原生JS常用的运算符赋值运算符、算术运算符、比较运算符、逻辑运算符、三元/三目运算符
一些算法结构中为了提高性能会用到位运算符

（7） ||和??运算符区别是什么？

常规声明变量的时候如果没有赋值就会默认存储undefined
变量默认值赋值一般出现在函数或者数据处理流程中，使用||和??进行默认值赋值
||赋值时会将空字符串和0这样的数据当成无效数据，赋值指定默认数据
??赋值时只会判断null和undefined当成无效数据，赋值指定默认数据

（8） 给变量赋值的方式有哪些？

其他问法：你项目中是怎么给变量做初始化处理的？10%概率

变量的声明和赋值方式有不同的形式

• 标准方式可以直接声明变量并且赋值数据，let a = 12; let a = 10, b = 12;
• 也可以先声明变量(let a;)，需要的时候赋值数据(a=11)，赋值数据之前变量中存储的是undefined
• 如果需要多个相同数据的变量，可以进行连续赋值，let a = b = c = 1

（9） 变量的命名有什么规范？

其他问法：你们项目组变量是什么命名的？ 5%概率

变量语法规则是字母、数字、下划线、$符号组成，数字不能开头
我们项目中要求变量尽量做到使用英文单词做到见名知意，使用小驼峰命名法进行命名处理

（10） 你了解过预解析吗？

其他问法：你知道什么是变量提升吗？ 70%概率

原生JS中使用var声明的变量，存在预解析处理操作
声明的变量在当前作用域中会将变量的声明部分提前到最前面，赋值部分保留在原位置，也被称为变量声明提升
主要作用就是为了保障当前作用域中使用这个变量不会报错，提高代码的容错性

（11） let、var、const区别？

其他问法：原生JS中var声明变量和ES6中let、const声明变量有什么区别？80%概率

var声明变量是原生JS中的声明方式，主要区分声明全局变量和局部变量，存在变量预解析
let和const都是ES6中提供的用于声明变量和常量的方式，是对var的补充
let声明的变量存在块级作用域、不能重复声明，没有变量预解析
const主要用于声明常量

（12） 谈谈你对命名空间和作用域的理解?

其他问法：命名空间和作用域的区别？80%概率

命名空间是包含了当前作用域范围中的所有变量、函数、类型等数据的空间！
（所有数据）
作用域是某个变量、某个函数或者某个数据可以被访问的范围！
（单个数据）

（13） 简单谈一下作用域链?

其他问法：一个变量是怎么被访问到的？50%概率

每个变量可以被访问的范围是它的作用域，原生JS中不同的作用域之间形成作用域链
变量的访问顺序是按照作用域链的过程被访问，首先读取当前作用域中的变量，如果没有该变量的声明就会继续访问上一级作用域，如果所有作用域中都没有访问到该变量就会报错提示变量没有定义！

（14） 都有哪些作用域？

其他问法：什么是作用域链 ？50%概率

每个变量可以被访问的范围是它的作用域，原生JS中不同的作用域之间形成作用域链
从大到小依次是环境作用域、系统作用域、全局作用域、局部作用域、嵌套/[闭包]作用域

（15） 你是怎么理解if-else的?

其他问法：你项目中如果出现了大量条件分支，你是怎么使用if-else的？ 10%概率

项目中如果出现的分支并不是很多，可以直接使用if-else的多分支结构进行判断处理即可，我自己的项目中一般要求6个分支以内使用多分支结构
如果分支数量比较庞大，为了提高代码的可读性，同时降低代码的重复率可以借助数组或者对象和if双分支结构进行语法优化

---

const role = “会员” // 游客、管理员
if(role === “会员”) {…}
else if(role === “管理员”){…}
else if(role === “游客”) {…}
else {…}

const level = {“青铜1”: […], “青铜2”: […], …, “王者22星”: […]}
const info = level[“王者11星”]
if(info){
…
} else {
…
}

（16） continue和break的区别？

continue和break都可以出现在循环结构中
continue终止本次循环直接开始下一次循环
break直接跳出循环
break还可以出现在switch-case中用于结束一个分支

（17） 如何跳出forEach()循环？

其他问法：forEach()循环结构可以使用break吗？ 10%概率

break只能跳出循环结构 forEach()是一个函数无法使用break完成跳出循环的操作 forEach()`函数参数是一个闭包函数，也不能使用return跳出循环

---

forEach()满足跳出循环的条件时抛出异常，外部代码中使用try-catch捕获异常的方式跳出循环
let jobs = [“需求工程师”, “开发工程师”,…]

// 1、无法跳出
jobs.forEach(item => {
…
break; 无法跳出循环，报错~break无法使用在switch和循环结构之外的其他地方
return; 无法跳出循环，只会结束本次循环闭包函数直接开始下一次循环，不会报错
})

// 2、跳出
try{
jobs.forEach(item => {
…
if(满足条件) {
throw new Error(“自定义错误”)
}
})
} catch(e) {
捕获错误，代码继续向下执行
}

（18） 数组中常见的函数

其他问法：请说出至少5个数组的操作函数，65%概率

push() / pop()
unshift() / shift()
forEach() / map() / filter()
indexOf()/lastIndexOf()
find()/findLast()
findIndex()/findLastIndex()
include()
startsWith()/endsWith()
match()/search()
reverse() / sort()
…

数组中常见的函数

（19）观察代码，筛选符合条件的数据

const accounts = [“admin”, “manager”, “tom123”, “jerry”, “shuke_123”]
// 需求：保留账号长度在6~18位的账号
// 考察：filter()
accounts = accounts.filter(item => { return item.length >= 6 && item.length <= 18 })

（20） 观察代码，按照需求转换合理的数据

const accounts = [“admin”, “manager”, “tom123”, “jerry”, “shuke_123”]
// 需求：将上述账号统一加上部门前缀-dept
// 考察：map()
accounts = accounts.map(item => { return dept${item} })

（21） 数组中数据剔重

其他问法：请将数组中重复的数据剔重 ；65%概率(笔试题)

const accounts = [“admin”, “manager”, “admin”, “jerry”, “jerry”]
// 需求：将上述代码中的重复数据剔除
// 考察：代码逻辑思考能力、新技术点掌握能力
let newAccounts = new Set(accounts) // ES6 Set类型
accounts = Array.from(newAccounts) // ES6 Array.from()类型转换

xxxxxxxxxx // 使用普通for循环，可以|（除非要求使用底层代码实现）否则不推荐
function uniqueArr(arr) {
let newArr = []
for(var i = 0; i < arr.length ; i++) {
if(!newArr.includes(item)) {
newArr.push(item)
    }
}
return newArr