前端面试八股文详情—上

发布时间：2023-03-24 09:43:35 所属栏目：教程来源：

导读：第一板块：JavaScript
ES6 新增内容
1、模板字符串变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式

2、箭头函数

3 class 类的继承

class Animal {}
class Dog extends Animal {
construc

第一板块：JavaScript
ES6 新增内容
1、模板字符串变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式

2、箭头函数

3 class 类的继承

class Animal {}
class Dog extends Animal {
constructor(name) {
super();
// this.name = name
}
}
3、module

4、promise

5、const / let

6、扩展运算符（...）

用于取出参数对象所有可遍历属性然后拷贝到当前对象
可用于合并两个对象
7、解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值，可以将属性/值从对象/数组中取出，赋值给其他变量。
let a,b,rest;
[a,b] = [10,20];
console.log(a);
// expected output: 10
console.log(b);
// expected output: 20
[a,...rest] = [10,20,30,40,50];
console.log(rest);
// expected output: Array [30,50]
8、 Symbol 数据类型一种新的原始数据类型，主要是为了避免属性名的重复

9、Map 一种新的数据结构，类似对象，Set 一种新的数据结构，类似数组

普通函数和箭头函数的区别？
1、箭头函数没有自己的 this 指向，它的 this 指向来源于它的上级，并且继承而来的 this 指向是无法改变的。

2、箭头函数由于没有自己的 this，所以不能作为构造函数。

3、箭头函数中没有 arguments（形参数组），但是可以访问外围函数的arguments对象

补充：ES6 箭头函数中的 this 和所在环境(外层)中的 this 指向一致

如何改变 this 指向
可以使用call()、apply()、bind() 来改变 this

Call bind apply的原理和区别
- call 方法 call()是 apply()的一颗语法糖，作用和 apply()一样，同样可实现继承，唯一的区别就在于 call()接收的是参数列表，而 apply()则接收参数数组。

- bind 方法 bind()的作用与 call()和 apply()一样，都是可以改变函数运行时上下文，区别是 call()和 apply()在调用函数之后会立即执行，而 bind()方法调用并改变函数运行时上下文后，返回一个新的函数，供我们需要时再调用.

1、第一个参数都是 this 的指向对象

2、 apply 的第二个参数是函数接受的参数，以数组的形式传入，且当第一个参数为null、undefined的时候，默认指向window(在浏览器中)，使用apply方法改变this指向后原函数会立即执行，且此方法只是临时改变this指向一次。

3、call 传入的第二个参数是一个参数列表（注意和apply传参的区别）。当一个参数为null或undefined的时候，表示指向window（在浏览器中），和apply一样，call也只是临时改变一次this指向，并立即执行。

4、 bind 传入的第二个参数也是一个参数列表(但是这个参数列表可以分多次传入，call则必须一次性传入所有参数)，但是它改变this指向后不会立即执行，而是返回一个永久改变this指向的函数，供我们需要时再调用.。

promise 用法以及相关原理用法有那些 API
1、promise是异步编程的一种解决方案，解决多个异步方法串行的问题，比如回调地狱等；

2、promise，简单地说就是一个容器，里面保存着某个未来才会结束的事件，从语法说promise是一个对象，从他可以获取异步操作的消息。promise提供统一的api，各种操作都可以用相同的方法进行处理.；

3、它接受一个 function 作为参数。function 中有两个形参，第一个表示请求成功的回调，第二个表示请求失败的回调，分别是 resolve 和 reject ；

4、.then 在成功的时候触发 .catch 在失败的时候触发

5、promise 的状态不受外界影响不可逆，三个状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）

promise对象的状态改变只有两种可能：从pending变为fulfilled或从pending变为rehected；
6、有两个很重要的 api：

Promise.all() 表示所有的 Promise 数组中的方法都成功之后触发
返回一个新的promise，只有所有的promise都成功才能成功，只要有一个失败了就直接失败；

Promise.race() 表示数组中只要有一个完成就结束
返回一个promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝；

回调地狱
回调函数中嵌套回调函数的情况就叫做回调地狱。它就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。

promise 和 async await 的区别
1、Promise是 ES6 中处理异步请求的语法，使用 .then() 来实现链式调用,使用 .catch() 来捕获异常。

2、async/await 是对 Promise 的升级，async用于声明一个函数是异步的，await是等待一个异步方法执行完成

3、async/await 用同步的写法写异步（await一个Promise对象），async/await 的捕获异常可以使用 try/catch 语法。（也可以使用 .catch 语法）用同步的方法写异步的代码；

let const var 的区别
var 关键字：
var 定义变量，可以声明同名变量，可以不进行初始化；（不初始化的情况下保存一个特殊值 undefined ）
var 不仅可以改变保存的值，也可以改变值的类型（合法但不推荐）；
var 定义的变量在函数作用域内有效；
var 声明变量存在变量提升，var 声明的变量可以挂载在 window 上；
let 声明：
let 定义变量，可以不进行初始化；（不初始化的情况下保存一个特殊值 undefined ）
let 不仅可以改变保存的值，也可以改变值的类型（合法但不推荐）；
let 用来定义局部变量，仅在块级作用域内有效；
let 不允许重复声明；
不存在变量提升的现象，所以一定要在定义后使用，否则报错（暂时性死区）；
在全局作用域中用 let 声明变量不会成为 window对象的属性；
const 声明：
const 定义的是常量，必须进行初始化（设置初始值）；
const 定义好之后“不能改变”；（不能改变栈里面的数据，堆里面的数据可改变；例如数字不可变，对象的属性等可变）
仅在块级作用域内有效；
const 不允许重复声明；
在全局作用域中用 const 声明变量不会成为 window对象的属性；

常见数组方法
push() 向数组尾部添加元素，返回添加后的数组长度，原数组改变
pop() 从数组的尾部删除一个元素，返回删除的元素，原数组改变
unshift() 向数组头部添加元素，返回添加后的数组长度，原数组改变
shift() 从数组的头部删除一个元素，返回删除的元素，原数组改变
Slice() 提取数组，(1 起 2 止止不算)原数组不变
splice() 剪接数组，(1 起 2 长 3 添加)原数组改变
reverse() 反转数组，原数组改变
sort() 按位比较
arr.sort(function(a,b){return a - b;}); 从小到大
arr.sort(function(a,b){return b - a;}); 从大到小
Join() 参数最为连接字符，连接数组，转换为字符串，原数组不变
concat() 合并数组，原数组不变 arr1.concat(arr2,arr3)
find 查找符合条件的项
findindex 查找符合条件项目的下标
toString()把数组转字符串(之间默认用逗号隔开)
ES5 数组的常用方法
indexOf() 查找数组中某元素第一次出现的索引，若无返回-1
lastindexOf() 查找数组中某元素最后一次出现的索引，若无返回-1
forEach() 遍历数组，不接受返回值
map() 映射数组,接受返回值
Filter() 筛选满足条件数组
Every() 判断数组里每一个元素是否符合条件
Some() 判断数组里是否有一个符合条件的元素
reduce() 数组值累加（两个值累加完传递给第一个元素，直到最后）
遍历
1、基本 for 循环
// for
var arr = [1,2,3];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]); // 1,3
}
2、for...of...遍历
// for...of...
var arr = [1,3];

for (var i of arr) {
console.log(arr[i]); // 1,3
}
3、for...in...遍历
// for...in...
var arr = [1,3];

for (var i in arr) {
console.log(arr[i]); // 1,3
}
4、forEach()遍历
// forEach( item,index,arr )
var arr = [1,3];
arr.forEach((item,arr) => { // item为arr的元素，index为下标，arr原数组
console.log(item); // 1,3
console.log(index); // 0,1,2
console.log(arr); // [1,3]
});
5、map() 映射
// map() 映射
var arr = [1,3];
var arr1 = arr.map((item,arr) => {
// item为arr的元素，index为下标，arr原数组
console.log(item); // 1,3
console.log(index); // 0,2
console.log(arr); // [1,3]
return item * 2; // 返回一个处理过的新数组[2,4,6]
});
console.log(arr);
console.log(arr1); // 处理过的新数组[2,6]
6、filter()
var arr = [1,3];
var arr1 = arr.filter(function (item,arr) {
// item为arr的元素，index为下标，arr原数组
console.log(item); // 1,3]
return item > 2; // 返回一个过滤过的新数组[3]
});
console.log(arr);
console.log(arr1); // 过滤过的新数组[3]
7、some()
// some()
var arr = [1,3];
arr.some((item,arr) => {
// item为数组中的元素，index为下标，arr为目标数组
console.log(item); // 1,3]
});
8、every()
// every()
var arr = [1,3];
var arr1 = arr.every((item,3]
return item > 0; // true
});
console.log(arr); // [1,3]
console.log(arr1); // true
9、reduce()
// every()
var arr = [1,3];
var arr1 = arr.reduce((sum,item,arr) => {
// item为数组中的元素，index为下标，arr为目标数组,sum为上一次调用回调函数时的返回值,console.log(item);
console.log(index);
console.log(arr);
return sum + item;
},init);

（编辑：驾考网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!