2023最全前端ES6面试题

ES6新增方法面试题

1. let const var比较

1）var允许重复声明，let、const不允许。

2）var会提升变量的声明到作用域的顶部，但let和const不会（白话来说，就是let和const没有变量提升）。

3）只要作用域内存在let、const，它们所声明的变量或常量就会自动“绑定”这个区域，不再受外部作用域的影响。

4）全局作用域中，var声明的变量，通过function声明的函数，会自动变为window对象的变量，属性或方法，但const和let不会。

5）var没有块级作用域，let和const有块级作用域。

2. 反引号（`）标识

ES6 模板字符串(Template String)是增强版的字符串，用反引号(`)标识，而不是单引号（’）或双引号（“）引号；它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

3. 函数默认参数

1）ES6可以给函数参数提供默认值。

2）对象参数和默认值以及 解构。

3）有默认值的形参最好放到最后。

4）有默认值的函数的length属性。

4. 箭头函数

1）箭头函数比普通函数更加简洁；

2）箭头函数没有自己的this；

3）箭头函数继承的this指向永远不会变；

4）call()、apply()、bind()等方法不能改变箭头函数中this的指向；

5）箭头函数不能作为构造函数使用；

6）箭头函数没有自己的arguments对象；

7）箭头函数没有prototype；

5. 属性简写

6. 方法简写

7. Object.keys()方法，获取对象的所有属性名或方法名

8. Object.assign ()原对象的属性和方法都合并到了目标对象

9. for...of 循环

1）for...in循环读取键名，for...of循环读取键值。如果要通过for...of循环，获取数组的索引，可以借助数组实例的entries方法和keys方法

2）or of:不同于forEach方法，它可以与break、continue和return配合使用

3）for in会遍历出原型对象以及对象本身属性值

4）遍历数组时 无法break或者return false

10. import和export

export 语法声明用于导出函数、对象、指定文件（或模块）的原始值。

export 有两种模块导出方式：命名式导出（名称导出）和默认导出（定义式导出），命名式导出每个模块可以多个，而默认导出每个模块仅一个。

import 语法用于从已导出的模块、脚本中导入函数、对象、指定文件（或模块）的原始值。

import 模块导入与 export 模块导出功能相对应，也存在两种模块导入方式：命名式导入（名称导入）和默认导入（定义式导入）。

import 的语法跟 require 不同，而且 import 必须放在文件的最开始，且前面不允许有其他逻辑代码，这和其他所有编程语言风格一致。

11. Promise对象

promise和async和await的区别是什么

1）都是处理异步请求的方式；

2）promise是es6的语法，async和await是es7的语法；

3）promise是返回对象，我们要用.then和.catch的方法处理和捕获，书写方式是链式的

async await是通过try catch进行捕获异常；

4）async await最大的优点就是让代码看起来像同步一样，只要遇到await就是返回结果，然后再执行后边的操作，

promise.then()的返回方式，会出现请求还没返回，就执行后边的操作；

12. 解构赋值

当我们把它们传递给函数时，函数可能不需要整个对象/数组。它可能只需要对象/数组的一部分。

解构赋值 是一种特殊的语法，它使我们可以将数组或对象“拆包”至一系列变量中，因为有时这样更方便。

解构操作对那些具有很多参数和默认值等的函数也很奏效。我们马上会看到类似的例子。

13. set数据结构（可用于快速去重）

①set是一系列无序（因为set没有下标(索引号)）、没有重复值的数据集合（数组有序）。不可以用字面量的形式创建，只能用实例化形式创建

②方法和属性

1）add //添加成员

2）has //判断是否有某个成员

3）delete //删除某个成员，当删除不存在的成员时什么都不会发生，也不会报错

4）clear //清除所有成员

14. Spread Operator 展开运算符(...)

1）将字符串转成数组

2）将集合转成数组

3）两个数组的合并

4）在函数中，用来代替arguments参数

15. 字符串新增方法

1）includes()，startsWith()，endWith()

includes()：返回布尔值，作用：判断是否找到需要查找的字符（串）

startsWith()：返回布尔值，作用：判断参数字符（串）是否在原字符串的头部

endWith()：返回布尔值，作用：判断参数字符（串）是否在原字符串的尾部

2）repeat()

repeat()：指将原字符串进行重复多少次再返回，不会改变原数据

3）padStart()，padEnd()

ES2017(ES8)引入了字符串长度补全的功能。padStart()头部补全，padEnd()尾部补全

4）trimStart()，trimEnd()，trim()

ES2019(ES20)对字符串新增了trimStart()，trimEnd()这两个方法。它们与trim()作用一致，trimStart()用来消除字符串头部的空格，trimEnd()用来消除字符串尾部空格。

5）replaceAll()

ES2021引入了replaceAll()方法，为了解决replace()只能替换匹配第一个满足条件的字符，增加了这个可以全局替换的方法。

6）at()

at()方法接收一个整数作为参数，返回参数指定位置的值，支持负索引（倒着查找）。如果参数大于字符长度，返回值为undifined。

ES6数组面试题

1. forEach()

1）对数组进行遍历循环，对数组中的每一项运行给定函数。

2）这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。

2. map()

1）指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

2）必须要return，返回一个新数组

3. filter()

1）“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

4. reduce()

1）reduce（function（sum,number）{...},0）要有两个参数，第一个参数一定要初始化

5. some()

1）判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

6. every()

1）判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true

7. find()方法

1）find（）方法只会找到第一个符合的，找到之后就会直接返回，就算下面还有符合要求的，也不会再找下去

ES6编程题

1. 使用解构，实现两个变量的值的交换

2. 利用数组推导，计算出数组 [1,2,3,4] 每一个元素的平方并组成新的数组。

3. 使用ES6改下面的模板

let iam = "我是";

let name = "王德发";

let str = "大家好，"+iam+name+",多指教。";

改： let iam =我是;

let name =王德发;

let str =大家好，${iam+name},多指教。;