ES6新特性相关面试题（持续更新中）

1. var let const 声明提升

• var必须先声明再使用否则结果是undefined
• const或let如果不先声明就会报错

console.log(num);
var num = 123;   // undefined

2.变量覆盖

• 使用var声明变量如果存在两个相同的变量进行赋值后面的后覆盖前面的变量值
• let不会出现这种情况，只会报错显示

var num1 = 12;
var num1 = 34;
// let num2 = 12;  // 使用let声明变量，如果变量重复会进行提示
// let num2 = 34;
console.log(num1);

3.var没有块级作用域

• var在方法里面是没有块级作用域的，在方法外面也可以访问到定义的变量值

function fn() {
	for(let i = 0; i < 3; i++) {
	console.log(i);  // 0 1 2 
	}
	console.log(i);  // 3
}
fn();

4.const特性

• const定义的变量不建议进行修改，否则报错
• const支持声明提升和块级作用（和let属性基本一致）
• const定义的一般是常量，需要大写

const DEMO = 123;
DEMO = 456;  // 会报错
console.log(DEMO);

5.解构赋值

• 使用es6新特性快速交换两个变量的值

let a = 1;
let b = 2;
[a, b] = [b, a]   // a = 2, b = 1 

6.数组去重

let arr = [1, 2, 3, 4, 1, 2, 3, 4, 5];
let res = [...new Set(arr)];   // res = [1, 2, 3, 4, 5]

7.promise 的异步和同步执行

• promise的构造函数在new的一瞬间，里面的函数体都会依次全部执行
• promise的then方法是属于异步执行会被放在最后进行执行

const promise = new Promise((resolve, reject) => {
	console.log(1);
	resolve();
	console.log(2);
})
promise.then(() => {
	console.log(3);
})
console.log(4);   // 最终答应的结果是 1 2 4 3

8. 使用promise进行异步加载图片

// 1. 声明一个图片地址
let imgUrl = 'http://res.vmallres.com/cmscdn/CN/2023-05/e38cea3d510e42a9ba851fab8bb72add.png'
// 2. 创建一个回调函数，将图片地址作为参数传入
const imgFunction = ((url) => {
// 3. 返回一个promise对象
	return new Promise((resolve, reject) => {
	// 4. 创建一个div标签，然后new一个img对象
		let _div = document.createElement('div');
		// 5. 将div标签添加到dom元素中
		document.appendChild(_div);
		const img = new Image();
		img.src = url;
		// 6. 将img的onload属性和onerror属性赋值给resovle , reject
		img.onload = resolve;
		img.onerror = reject;
		// 7. 将img标签添加到div里面
		_div.appendChild(img);
	})
})
// 8. 调用回调函数使用then和catch方法接收返回结果
imgFunction(imgUrl)
	.then(() => {console.log('图片加载成功.')})
	.catch((err) => {console.log('图片加载失败.' + err)})

仅供个人参考学习使用，如有错误欢迎大家指正，谢谢!!!