面试题-ES6

108 阅读4分钟

1.let和const命令

let和const的相同点:

1.声明变量没有变量提升
console.log(a) // 报错
let a = 123
2.是一个块级作用域
if (true) {
    let b = 123
    console.log(b)
}
console.log(b) // 报错
3.同一作用域下,不能重复声明
let a = 123
let a = 456
console.log(a) //报错

let和const的不同点:

let声明的变量可以改变,const声明的常量不可以改变。
const a = 123
a = 456 //报错

2.模板字符串

模板字符串是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

3.函数的默认值

ES5写法
function add(num1,num2){
    num1 = num1 || 10
    um2 = num2 || 20
    return num1+num2
}
ES6写法
function add(num1=10,num2=20){
    return num1+num2
}

4.函数的剩余参数

剩余参数:由三个点...和一个紧跟着的具名参数指定...keys
function fn(obj,...keys){
    console.log(keys)  //['汪汪', '大鸭子', '老母鸡']
}
fn('喵喵','汪汪','大鸭子','老母鸡')

5.扩展运算符

对象的扩展运算符

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }

数组的扩展运算符

let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr = [...arr1,...arr2]
console.log(arr) //[1, 2, 3, 4, 5, 6]

6.箭头函数

普通函数

function sum(a, b) { 
    return a + b 
}

箭头函数

const sum = (a, b) => a + b

7.解构赋值

从数组和对象中提取值,对变量进行赋值,这被称为解构

以前,为变量赋值,只能直接指定值。
let a = 1;
let b = 2;
let c = 3;
ES6 允许写成下面这样。
let [a, b, c] = [1, 2, 3];

对象的解构赋值
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

8.Set

类似于数组,但它的一大特性就是所有元素都是唯一的,没有重复。我们可以利用这一唯一特性进行数组的去重工作。

有三个常用属性
add 添加元素
delate 删除元素
has 校验元素
let set = new Set()			
// 添加元素
set.add('喵喵')
set.add('狗子')	

// 删除元素
set.delete('喵喵')

// 校验元素
console.log(set.has('喵喵'))	
console.log(set)
数组去重
let arr = [1,2,2,3,3,3]
let set = [...new Set(arr)]
console.log(set)

9.Map

类型是键值对的有序列表,键和值可以使任何类型。

set()添加键/值对
get()获取值
has()进行查询
delete()删除
clear()清除
let map = new Map([
    ['name','王大顺']
])
// 添加
map.set('age',18)
map.set('sex','男')
// 获取
console.log(map.get('name'))
// 查询
console.log(map.has('age'))
// 删除
map.delete('sex')
// 清除
map.clear()
			
console.log(map)

10.Promise

(1)Promise是什么:

Promise是异步编程的一种解决方案,比传统的回调函数和事件更合理和强大。

所谓Promise,简单来说就是一个容器,里面保存着某个未来才会结束的事情。从语法上说,Promise是一个对象,从他可以获取异步操作的消息。

(2)Promise特点:

Promise的状态不受外界影响

一旦状态改变,就不会再变,任何时候都是可以得到这个结果的。

(3).Promise的实例有三个状态:

pending(进行中)

resolved(已完成)

rejected(已拒绝)

(4)Promise的实例有两个过程:

pending -> resolved(成功)

pending -> rejected(失败)

(5)优点:

将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。流程更加清晰,代码更加优雅。

Promise对象提供统一的接口,使得控制异步操作更加容易。

(6)缺点:

无法取消Promise,一旦新建它就会立即执行,无法中途取消。

如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。

当处于pending状态时,无法得知目前进展到哪一个阶段。

(7)手写promise

function fn(flag) {
        return new Promise((resolve, reject)=> {
		if (flag === true) {
			resolve('promise状态为成功!')
		};
		if (flag === false) {
			reject('promise状态失败!')
		};
	}).then(function(res) {
			console.log(res);
		},
		function(err) {
			console.log(err);
		})
}
fn(true)
fn(false)

11.async和await

有些时候我们一个流程里使用了太多的promise,会发现then也一大堆,仿佛又回到了之前的回调地狱,理解起来也没那么容易。

先创建一个函数,async放到函数前面, async执行后返回的是一个Promise对象

async function a() {
    console.log(1)
}

await的意思就是同步,而且await必须在async标记的函数里面才能使用,不然会报错,Promise函数前面加上await,说明等待,需要这个代码执行完毕,才能执行下面的

async function a() {
    console.log( await b())
    // return 1
}
function b() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2)
        }, 1000)
    })
}
a()  // 2

12.Class 类

在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类。

class 的本质是 function。

它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。

类声明:

class Person{
	constructor(name,age){
		this.name = name
		this.age = age
	}
	onName(){
		console.log(this.name)
	}
	onAge(){
		console.log(this.age)
	}
}
let p1 = new Person('大顺',28)
console.log(p1.onName)

constructor 方法:

constructor 方法是类的默认方法,创建类的实例化对象时被调用。

new:

class 的实例化必须通过 new 关键字。

继承

通过 extends 实现类的继承

class Child extends Father { ... }

13.export和export default

export和export default 都可用于导出常量、函数、文件、模块等

export导出多个 export default导出单个

使用import导入