es6常见面试题汇总

文章目录

• • 一、es6新增了什么?
  • 二、es5和es6的区别，说一下你所知道的es6？
  • 三、var、let、const之间的区别？
  • 四、使用箭头函数应注意什么？
  • 五、介绍下 Set、Map的区别？
  • 六、ES6的模板字符串有哪些新特性？并实现一个类模板字符串的功能？
  • 七、ECMAScript 6 怎么写 class ，为何会出现 class？
  • 八、Promise构造函数是同步执行还是异步执行，那么 then 方法呢？
  • 九、setTimeout、Promise、Async/Await 的区别？
  • 十、promise有几种状态，什么时候会进入catch？
  • 十一、Promise 中reject 和 catch 处理上有什么区别？
  • 十二、forEach、for in、for of三者区别？
  • 十三、Es6解构赋值？
  • 十四、Es6扩展运算符？
  • 十五、Es6中Symbol是什么，有什么作用？
  • 十六、Set是什么，有什么作用？
  • 十七、Map是什么，有什么作用？
  • 十六、谈谈你对深拷贝和浅拷贝的理解？

一、es6新增了什么?

1、块级作用域变量（let和const）
let和const关键字可以用来声明块级作用域变量，使得变量只在当前作用域内有效。

{let x = 1;const y = 2;console.log(x); // 1console.log(y); // 2
}
console.log(x); // ReferenceError: x is not defined
console.log(y); // ReferenceError: y is not defined

2、箭头函数
箭头函数是一种新的函数声明方式，可以更简洁地定义函数。

const add = (x, y) => x + y;
console.log(add(1, 2)); // 3let a = ()=>{alert(1);}
a();

3、解构赋值
解构赋值可以用来快速地从数组或对象中提取值并赋给变量。

const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c); // 1 2 3const obj = {x: 1, y: 2, z: 3};
const {x, y, z} = obj;
console.log(x, y, z); // 1 2 3

4、默认参数
函数可以设置默认参数，当调用函数时没有传入该参数时，会使用默认值。

const greet = (name = "World") => `Hello, ${name}!`;
console.log(greet()); // Hello, World!
console.log(greet("Alice")); // Hello, Alice!

5、模板字符串
模板字符串可以用来更方便地拼接字符串。

const name = "World";
console.log(`Hello, ${name}!`); // Hello, World!

6、扩展运算符
扩展运算符可以用来将数组或对象展开成一系列参数。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]const obj1 = {x: 1, y: 2};
const obj2 = {z: 3};
const obj3 = {...obj1, ...obj2};
console.log(obj3); // {x: 1, y: 2, z: 3}

7、类和继承
ES6引入了class关键字来定义类和继承关系。

class Animal {constructor(name) {this.name = name;}speak() {console.log(`${this.name} makes a noise.`);}
}class Dog extends Animal {speak() {console.log(`${this.name} barks.`);}
}const d = new Dog("Rex");
d.speak(); // Rex barks.

8、Promise
Promise是一种新的异步编程方式，可以更方便地处理异步操作，解决地狱回调非常好用。

const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
wait(1000).then(() => console.log("1 second passed."));

resolved [成功后调用]
rejected [失败后调用]
Promise的状态只有这 2 种, 且一个 promise 对象只能改变一次

9、async/await

async 也是处理异步的，它是对 Promise 的一种扩展，让异步更加方便
async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。当函数执行的时候，一旦遇到 await 就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

10、数据结构 Map

Map 是一个构造函数，通过 new 生成 Map 数据结构实例。 类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应。

11、for…of 循环

可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如 arguments对象、DOM NodeList 对象）、字符串。 for…of 不能遍历普通 Object 对象。 for…in 循环，只能获得对象的键名，不能直接获取属性值。 for…of 循环，允许遍历获得属性值。

12、数据结构Set

Set 是一个构造函数，通过 new 生成 Set 数据结构实例。 类似于数组，但是成员的值都是唯一的，没有重复的值。

二、es5和es6的区别，说一下你所知道的es6？

ECMAScript5，即ES5，是ECMAScript的第五次修订，于2009年完成标准化ECMAScript6，即ES6，是ECMAScript的第六次修订，于2015年完成，也称ES2015ES6是继ES5之后的一次改进，相对于ES5更加简洁，提高了开发效率ES6新增的一些特性：
1）let声明变量和const声明常量，两个都有块级作用域ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明
2）箭头函数ES6中的函数定义不再使用关键字function()，而是利用了()=>来进行定义
3）模板字符串模板字符串是增强版的字符串，用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符串
4）解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值
5）for of循环for…of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象，以及字符串
6）import、export导入导出ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用
7）set数据结构Set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数
8）… 展开运算符可以将数组或对象里面的值展开；还可以将多个值收集为一个变量
9）修饰器 @decorator是一个函数，用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函数
10）class 类的继承ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念11）async、await使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成
12）promisePromise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大
13）SymbolSymbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的
14）Proxy代理使用代理（Proxy）监听对象的操作，然后可以做一些相应事情

三、var、let、const之间的区别？

var声明变量可以重复声明，而let不可以重复声明
var是不受限于块级的，而let是受限于块级
var会与window相映射（会挂一个属性），而let不与window相映射
var可以在声明的上面访问变量，而let有暂存死区，在声明的上面访问变量会报错
const声明之后必须赋值，否则会报错
const定义不可变的量，改变了就会报错
const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错

四、使用箭头函数应注意什么？

（1）用了箭头函数，this就不是指向window，而是父级（指向是可变的）
（2）不能够使用arguments对象
（3）不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误
（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数

五、介绍下 Set、Map的区别？

应用场景Set用于数据重组，Map用于数据储存Set：　
（1）成员不能重复
（2）只有键值没有键名，类似数组
（3）可以遍历，方法有add, delete,has
Map:
（1）本质上是健值对的集合，类似集合
（2）可以遍历，可以跟各种数据格式转换

六、ES6的模板字符串有哪些新特性？并实现一个类模板字符串的功能？

基本的字符串格式化。
将表达式嵌入字符串中进行拼接。
用${}来界定在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。
ES6反引号(``)就能解决类模板字符串的功能

let name = 'web';
let age = 10;
let str = '你好，${name} 已经 ${age}岁了'
str = str.replace(/\$\{([^}]*)\}/g,function(){return eval(arguments[1]);})
console.log(str);//你好，web 已经 10岁了

七、ECMAScript 6 怎么写 class ，为何会出现 class？

ES6的class可以看作是一个语法糖，它的绝大部分功能ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法

//定义类
class Point { constructor(x,y) { //构造方法this.x = x; //this关键字代表实例对象this.y = y; } toString() {return '(' + this.x + ',' + this.y + ')'; }
}

八、Promise构造函数是同步执行还是异步执行，那么 then 方法呢？

promise构造函数是同步执行的，then方法是异步执行的

九、setTimeout、Promise、Async/Await 的区别？

事件循环中分为宏任务队列和微任务队列
其中setTimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行async函数表示函数里面可能会有异步方法，await后面跟一个表达式
async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行

十、promise有几种状态，什么时候会进入catch？

三个状态：
pending、fulfilled、reject
两个过程：
padding -> fulfilled、padding -> rejected当pending为rejectd时，会进入catch

十一、Promise 中reject 和 catch 处理上有什么区别？

reject 是用来抛出异常，catch 是用来处理异常
reject 是 Promise 的方法，而 catch 是 Promise 实例的方法
reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch
网络异常（比如断网），会直接进入catch而不会进入then的第二个回调

十二、forEach、for in、for of三者区别？

forEach更多的用来遍历数组
for in 一般常用来遍历对象或json
for of数组对象都可以遍历，遍历对象需要通过和Object.keys()
for in循环出的是key，for of循环出的是value

十三、Es6解构赋值？

• 数组的解构赋值

// 数组的解构赋值const arr = ['小1','小2','小3','小泽']let [b,q,h,ze] = arr // 或者等于 ['小1','小2','小3','小泽']console.log(b);console.log(q);console.log(h);

• 对象的解构赋值

//对象的解构赋值
let redian = {name: '1',chaozuo: function () {console.log('1');},dance: function () {console.log('2');}}
​let {chaozuo,dance} = redian;chaozuo();dance();

十四、Es6扩展运算符？

…能将「数组」转为逗号分隔的「参数序列] ,是 rest 的逆运算

• 数组的展开

// 数组的展开const arr = [1, 2, 3]function fn () {console.log(arguments);}fn(...arr); //fn(1, 2, 3)

• 对象的展开

// 对象的展开const one = {1: 'one'}const two = {2: 'two'}const three = {3: 'three'}const four = {4: 'four'}// 进行对象的合并const hero = {...one,...two,...three,...four}console.log(hero); // {1: 'one', 2: 'two', 3: 'three', 4: 'four'}

十五、Es6中Symbol是什么，有什么作用？

Symbol是ES6引入的第七种原始数据类型（说法不准确，应该是第七种数据类型，Object不是原始数据类型之一，已更正），所有Symbol()生成的值都是独一无二的，可以从根本上解决对象属性太多导致属性名冲突覆盖的问题。对象中Symbol()属性不能被for…in遍历，但是也不是私有属性

十六、Set是什么，有什么作用？

Set是ES6引入的一种类似Array的新的数据结构，Set实例的成员类似于数组item成员，区别是Set实例的成员都是唯一，不重复的。这个特性可以轻松地实现数组去重

十七、Map是什么，有什么作用？

Map是ES6引入的一种类似Object的新的数据结构，Map可以理解为是Object的超集，打破了以传统键值对形式定义对象，对象的key不再局限于字符串，也可以是Object。可以更加全面的描述对象的属性

十六、谈谈你对深拷贝和浅拷贝的理解？

浅拷贝是把一个对象所有的属性值和方法复制给另一个对象，直接把一个对象赋给另一个对象，让他们指向同一个对象；深拷贝是把一个对象的属性和方法一个个找出来，在另一个对象开辟出一个空间，一个个存储到另一个对象中。

浅拷贝

• 直接赋值

	let arr = [1,2,3,4];let result = arr;result[0] = '1234';console.log(arr);console.log(result);

• 数组
• concat

	const result = [].concat(arr);result[3].name = 'ptu'console.log(arr);console.log(result);

• slice

	const result = arr.slice(0)result[3].name = 'ptu';console.log(arr);console.log(result);

• 扩展运算符

	const result = [...arr];​result[3].name = 'ptu';console.log(arr);console.log(result);

• 对象：使用Object.assign(空对象，旧对象)

      const school = {name: 'ptu',add: ['福州', '莆田', '厦门'],founder: {name: '小宝',age: 18}};
​const result = Object.assign({},school);result.add[0] = '泉州';console.log(school);console.log(result);

深拷贝

• JSON：先用 JSON.stringify 将对象转为字符串，再使用 JSON.parse 将字符串转为一个新对象，缺点就是不能复制方法

//源对象const school = {name: 'ptu',add: ['福州', '莆田', '厦门'],founder: {name: '小宝',age: 18}};
​//JSON//stringify 对象转字符串//parse  字符串转对象//将对象转为字符串const str = JSON.stringify(school);console.log(school);console.log(str);console.log(typeof str);//将 JSON 字符串转化为新的对象const obj = JSON.parse(str);//修改新对象属性obj.add[2] = '漳州'console.log(obj);   

• 封装一个函数，实现递归深拷贝

    //封装一个函数 实现递归深拷贝function deepClone(data) {//创建一个容器let container;//获取目标数据类型let type = getDataType(data) //Array ||  Object//判断if(type === 'Object') {container = {}}if(type === 'Array') {container = []}
​//属性的添加//先遍历data数据 for...infor(let i in data) {//获取属性类型let type = getDataType(data[i])if(type === 'Array' || type === 'Object') {container[i] = deepClone(data[i]); //继续递归}else {container[i] = data[i];}}return container;}
​//封装一个函数 获取获取数据类型function getDataType(data) {return Object.prototype.toString.call(data).slice(8,-1)}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！