ES6系列面试题

Suzie5

已于 2024-07-08 14:48:44 修改

阅读量357

点赞数 3

文章标签： es6 javascript 前端

于 2024-07-05 20:21:28 首次发布

本文链接：https://blog.csdn.net/m0_54110728/article/details/140215161

版权

web前端面试 - 面试官系列

一、var、let、const之间的区别

1、var

用 var 声明的变量既是全局变量，也是顶层变量。顶层对象在浏览器环境指的是 window 对象，在 node 指的是 global 对象。

使用 var 声明的变量存在变量提升的情况

console.log(a) // undefined
var a = 20

// 编译阶段会将其变成以下执行
var a
console.log(a)
a = 20

使用 var 可以对一个变量进行多次声明，后面声明的变量会覆盖前面声明的变量

var a = 20 
var a = 30
console.log(a) // 30

在函数中使用 var 声明变量时，该变量是局部的

var a = 20
function change(){
    var a = 30
}
change()
console.log(a) // 20

在函数内不使用 var 声明变量，该变量是全局的

var a = 20
function change(){
   a = 30
}
change()
console.log(a) // 30

2、let

let 用法类似于 var，也是用于声明变量。

使用 let 声明的变量只在所在的代码块内有效

{
    let a = 20
}
console.log(a) // ReferenceError: a is not defined.

使用 let 声明的变量不存在变量提升

console.log(a) // 报错ReferenceError
let a = 2

只要块级作用域内存在 let 命令，这个区域就不再受外部影响

var a = 123
if (true) {
    a = 'abc' // ReferenceError
    let a;
}

let 不允许在相同作用域中重复声明

let a = 20
let a = 30
// Uncaught SyntaxError: Identifier 'a' has already been declared

3、const

const 声明一个只读的常量，一旦声明，常量的值就不能改变。这意味着，const 一旦声明变量，就必须立即初始化，不能留到以后赋值。如果之前用 var 或 let 声明过的变量，再用 const 声明同样会报错。

var a = 20
let b = 20
const a = 30
const b = 30
// 都会报错

4、区别

变量提升：var 存在变量提升；let 和 const 不存在。
暂时性死区：var 不存在暂时性死区；let 和 const 存在，即在声明变量后才可以获取和使用该变量。
块级作用域：var 不存在块级作用域；let 和 const 存在。
重复声明：var 允许重复声明；let 和 const 不允许。
修改声明的变量：var 和 let 允许修改声明的变量；const 不允许。

二、ES6中数组新增的扩展

1、扩展运算符...

将数组转换为以逗号为分隔符的参数序列
可以将某些数据结构转为数组

[...document.querySelectorAll('div')]

能够更简单实现数组的复制

const a1 = [1, 2];
const [...a2] = a1;
// [1,2]

数组的合并也更为简洁

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

注意：使用扩展运算符实现的是浅拷贝，修改了引用指向的值时，会同步反映到新数组。如果将扩展运算符用于数组赋值，只能放在参数的最后一位。

2、Array.from()

将两类对象转为真正的数组：类似数组的对象和可遍历的对象。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

3、Array.of()

将一组值转换为数组。

Array.of(3, 11, 8) // [3,11,8]

4、实例对象新增的方法

copyWithin()
find()、 findIndex()
fill()
entries()、keys()、values()
includes()
flat()、flatMap()

三、ES6中对象新增的扩展

1、属性的简写

当对象的键名和对应值名相等的时候，可以进行简写。

const baz = {foo:foo}

// 等同于
const baz = {foo}

2、属性名表达式

表达式可以定义方法名，允许字面量定义对象时将表达式放在括号内。

let lastWord = 'last word';

const a = {
  'first word': 'hello',
  [lastWord]: 'world'
};

a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"

let obj = {
  ['h' + 'ello']() {
    return 'hi';
  }
};

obj.hello() // hi

四、ES6中的Promise及使用场景

Promise 是异步编程的一种解决方案，通过链式操作降低了编码的难度，增强了代码可读性。

1、状态

promise 对象仅有三种状态：

pending 进行中
fulfilled 已成功
rejected 已失败

2、特点

对象的状态不受外界影响，只有异步操作的结果可以决定当前是哪一种状态
一旦状态改变（从 pending 变为 fulfilled 和从 pending 变为 rejected），就不会再变，任何时候都可以得到这个结果

3、用法

const promise = new Promise(function(resolve, reject) {});

Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 和 reject

resolve 的作用是将 Promise 对象的状态从“未完成”变为“成功”
reject 的作用是将 Promise 对象的状态从“未完成”变为“失败”

4、实例方法

Promise 构建出来的实例存在 then()、catch()、finally() 三个方法。

then() 是实例状态发生改变时的回调函数，第一个参数是 resolved 状态的回调函数，第二个参数是 rejected 状态的回调函数，then() 方法返回的是一个新的 Promise 实例。

catch() 方法是用于指定发生错误时的回调函数。

finally() 方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。

5、使用场景

将图片的加载写成一个 Promise，一旦加载完成，Promise 的状态就发生变化。

封装ajax/axios请求

五、箭头函数和普通函数的区别

不能作为构造函数：箭头函数作为匿名函数，是不能作为构造函数的，不能使用 new
无 arguments：箭头函数不绑定 arguments
没有自己的this：箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值
this环境：箭头函数当方法使用的时候没有定义this绑定

var obj = {
    a: 10,
    b: () => {
        // 因为箭头函数捕获的是obj{}这个对象的环境，然后这个环境的this指向的是window【找出块作用域的外部一层就是他的环境】
        console.log(this.a); //undefined
        console.log(this); //window
    },
    c: function() {
        console.log(this.a); //10
        console.log(this); //obj{...}
    }
}
obj.b();
obj.c();