文章目录
- 1、说说你了解的ES6新增特性
- 2、var、let、const之间的区别
- 3、使用箭头函数应注意什么？
- 4、ES6的模板字符串有哪些新特性？并实现一个类模板字符串的功能
- 5、介绍下 Set、Map的区别？
- 6、ECMAScript 6 怎么写 class ，为何会出现 class
- 7、Promise构造函数是同步执行还是异步执行，那么 then 方法呢？
- 8、setTimeout、Promise、Async/Await 的区别
- 9、promise有几种状态，什么时候会进入catch？
- 10、下面的输出结果是多少
- 11、设计一个对象，键名的类型至少包含一个symbol类型，并且实现遍历所有key
- 12、下面Set结构，打印出的size值是多少
- 13、Promise 中reject 和 catch 处理上有什么区别
- 14、使用class 手写一个promise
- 15、如何使用Set去重
- 16、将下面for循环改成for of形式
- 17、理解 async/await以及对Generator的优势
- 18、forEach、for in、for of三者区别
- 19、说一下es6的导入导出模块
1、说说你了解的ES6新增特性
let声明变量和const声明常量，两个都有块级作用域
ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明
箭头函数
ES6中的函数定义不再使用关键字function()，而是利用了()=>来进行定义
特点：箭头函数中的this始终指向箭头函数定义时的离this最近的一个函数，如果没有最近的函数就指向window。
模板字符串
模板字符串是增强版的字符串，用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符串
var name = '丁香医生';
var desc = '丁香医生是面向大众的科普性健康类网站';
var html = function(name, desc){
var tpl = '公司名：' + name + '\n'+
'简介：'+ desc;
return tpl;
}
而现在：
var html = `公司名：${name}
简介：${desc}`;
解构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值
for of循环
for…of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象，以及字符串
应用场景
//arguments是个类数组对象，通常先要将其转换为数组才能遍历，但for...of可以直接遍历
function sum() {
let sum = 0
for(let num of arguments){
sum += num
}
console.log(sum); //15
}
sum(1,2,3,4,5)
//遍历字符串
let name = 'Asher';
for (let char of name){
console.log(char); //A s h e r
}
//遍历nodelists，效果如下图
<style type="text/css">
.completed {
text-decoration: line-through;
}
</style>
<body>
<ul>
<li>yoga</li>
<li>boxing</li>
<li>press</li>
</ul>
<script type="text/javascript">
const lis = document.querySelectorAll('li');
for(let li of lis){
li.addEventListener('click',function(){
this.classList.toggle('completed');
})
}
</script>
</body>
import、export导入导出
ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用
set数据结构
Set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数
应用
1、数组去重
let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
// [3, 5, 2]
2、并集（Union）、交集（Intersect）和差集（Difference）
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}
// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}
// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}
… 展开运算符
可以将数组或对象里面的值展开；还可以将多个值收集为一个变量
应用
1. 合并数组
arr1.push(...arr2) // 将arr2 追加到数组的末尾
arr1.unshift(...arr2) // 将arr2 追加到数组的开头
2. 拷贝数组
var arr = [1,2,3];
var arr2 = [...arr]; // 和arr.slice()差不多
arr2.push(4)
//记住：数组中的对象依然是引用值，所以不是任何东西都“拷贝”过去了。
3.将arguments或者NodeList转换为Array
var myFn = function(...args) {
// ...
}
4. 使用Math函数
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
//相当于Math.min.apply(numbers);
修饰器 @
decorator是一个函数，用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函数
class 类的继承
ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念
class Person
{
constructor(name, age) {
this.name = name;
this.age = age;
}
sayName(){
console.log("the name is:"+this.name);
}
}
class Worker extends Person{
constructor(name, age,job) {
super(name, age);
this.job = job;
}
sayJob(){
console.log("the job is:"+this.job)
}
}
var worker = new Worker('tcy',20,'teacher');
worker.sayJob();//the job is:teacher
worker.sayName();//the name is:tcy
async、await
使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程,提高代码的简洁性和可读性
async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成
// 2s 之后返回双倍的值
function doubleAfter2seconds(num) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2 * num)
}, 2000);
})
}
async function testResult () {
let first = await doubleAfter2seconds(10);
let second = await doubleAfter2seconds(20);
console.log(first + second);
}
promise
Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大
new Promise((resolve,reject)=>{
if('成功') resolve(1);
if('失败') reject(0);
}).then(()=>{
console.log("成功");
}).catch(()=>{
console.log("失败");
})
它有三种状态，分别是pending-进行中、resolved-已完成、rejected-已失败。
Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回调。在回调中执行一些操作（例如异步），如果一切都正常，则调用 resolve，否则调用 reject。对于已经实例化过的 promise 对象可以调用 promise.then() 方法，传递 resolve 和 reject 方法作为回调。then()方法接收两个参数：onResolve和onReject，分别代表当前 promise 对象在成功或失败时。
var promise = new Promise((resolve, reject) => {
var success = true;
if (success) {
resolve('成功');
} else {
reject('失败');
}
}).then(
(data) => { console.log(data)},
(err) => { console.log(err)}
)
promise的执行过程
setTimeout(function() {
console.log(0);
}, 0);
var promise = new Promise((resolve, reject) => {
console.log(1);
setTimeout(function () {
var success = true;
if (success) {
resolve('成功');
} else {
reject('失败');
}
},2000);
}).then(
(data) => { console.log(data)},
(data) => { console.log(data)}
);
console.log(promise); //<pending> 进行中
setTimeout(function () {
console.log(promise); //<resolved> 已完成
},2500);
console.log(2);
//1
//Promise {<pending>}
//2
//0
//成功
//Promise {<resolved>: undefined}
Symbol
Symbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的
let s1 = Symbol()
let s2 = Symbol('another symbol')
let s3 = Symbol('another symbol')
s1 === s2 // false
s2 === s3 // false
//symbol是唯一的
应用场景1：使用Symbol来作为对象属性名(key)
在这之前，我们通常定义或访问对象的属性时都是使用字符串，比如下面的代码：
let obj = {
abc: 123,
"hello": "world"
}
obj["abc"] // 123
obj["hello"] // 'world'
而现在，Symbol可同样用于对象属性的定义和访问：
const PROP_NAME = Symbol()
const PROP_AGE = Symbol()
let obj = {
[PROP_NAME]: "一斤代码"
}
obj[PROP_AGE] = 18
obj[PROP_NAME] // '一斤代码'
obj[PROP_AGE] // 18
随之而来的是另一个非常值得注意的问题：就是当使用了Symbol作为对象的属性key后，在对该对象进行key的枚举时，会有什么不同？在实际应用中，我们经常会需要使用Object.keys()或者for...in来枚举对象的属性名，那在这方面，Symbol类型的key表现的会有什么不同之处呢？来看以下示例代码：
let obj = {
[Symbol('name')]: '一斤代码',
age: 18,
title: 'Engineer'
}
Object.keys(obj) // ['age', 'title']
for (let p in obj) {
console.log(p) // 分别会输出：'age' 和 'title'
}
Object.getOwnPropertyNames(obj) // ['age', 'title']
由上代码可知，Symbol类型的key是不能通过Object.keys()或者for...in来枚举的，它未被包含在对象自身的属性名集合(property names)之中。所以，利用该特性，我们可以把一些不需要对外操作和访问的属性使用Symbol来定义。
也正因为这样一个特性，当使用JSON.stringify()将对象转换成JSON字符串的时候，Symbol属性也会被排除在输出内容之外：
JSON.stringify(obj) // {"age":18,"title":"Engineer"}
我们可以利用这一特点来更好的设计我们的数据对象，让“对内操作”和“对外选择性输出”变得更加优雅。
然而，这样的话，我们就没办法获取以Symbol方式定义的对象属性了么？非也。还是会有一些专门针对Symbol的API，比如：
// 使用Object的API
Object.getOwnPropertySymbols(obj) // [Symbol(name)]
// 使用新增的反射API
Reflect.ownKeys(obj) // [Symbol(name), 'age', 'title']
应用场景2：使用Symbol来替代常量
先来看一下下面的代码，是不是在你的代码里经常会出现？
const TYPE_AUDIO = 'AUDIO'
const TYPE_VIDEO = 'VIDEO'
const TYPE_IMAGE = 'IMAGE'
function handleFileResource(resource) {
switch(resource.type) {
case TYPE_AUDIO:
playAudio(resource)
break
case TYPE_VIDEO:
playVideo(resource)
break
case TYPE_IMAGE:
previewImage(resource)
break
default:
throw new Error('Unknown type of resource')
}
}
如上面的代码中那样，我们经常定义一组常量来代表一种业务逻辑下的几个不同类型，我们通常希望这几个常量之间是唯一的关系，为了保证这一点，我们需要为常量赋一个唯一的值（比如这里的'AUDIO'、'VIDEO'、 'IMAGE'），常量少的时候还算好，但是常量一多，你可能还得花点脑子好好为他们取个好点的名字。
现在有了Symbol，我们大可不必这么麻烦了：
const TYPE_AUDIO = Symbol()
const TYPE_VIDEO = Symbol()
const TYPE_IMAGE = Symbol()
这样定义，直接就保证了三个常量的值是唯一的了！是不是挺方便的呢。
应用场景3：使用Symbol定义类的私有属性/方法
我们知道在JavaScript中，是没有如Java等面向对象语言的访问控制关键字private的，类上所有定义的属性或方法都是可公开访问的。因此这对我们进行API的设计时造成了一些困扰。
而有了Symbol以及模块化机制，类的私有属性和方法才变成可能。例如：
在文件 a.js中
const PASSWORD = Symbol()
class Login {
constructor(username, password) {
this.username = username
this[PASSWORD] = password
}
checkPassword(pwd) {
return this[PASSWORD] === pwd
}
}
export default Login
在文件 b.js 中
import Login from './a'
const login = new Login('admin', '123456')
login.checkPassword('123456') // true
login.PASSWORD // oh!no!
login[PASSWORD] // oh!no!
login["PASSWORD"] // oh!no!
由于Symbol常量PASSWORD被定义在a.js所在的模块中，外面的模块获取不到这个Symbol，也不可能再创建一个一模一样的Symbol出来（因为Symbol是唯一的），因此这个PASSWORD的Symbol只能被限制在a.js内部使用，所以使用它来定义的类属性是没有办法被模块外访问到的，达到了一个私有化的效果。
Proxy代理
使用代理（Proxy）监听对象的操作，然后可以做一些相应事情
ES6原生提供了Proxy构造函数，用来生成Proxy实例。
var proxy = new Proxy(target, handler);
Proxy对象的所有用法，都是上面的这种形式。不同的只是handle参数的写法。其中new Proxy用来生成Proxy实例，target是表示所要拦截的对象，handle是用来定制拦截行为的对象。
var proxy = new Proxy({}, {
get: function(target, property) {
return 35;
}
});
proxy.time // 35
proxy.name // 35
proxy.title // 35
上面是一个拦截读取属性的行为的例子。要使Proxy起作用，必须针对Proxy实例进行操作，而不是针对目标对象（target）进行操作。
2、var、let、const之间的区别
- var声明变量可以重复声明，而let不可以重复声明
- var是不受限于块级的，而let是受限于块级
- var会与window相映射（会挂一个属性），而let不与window相映射
- var可以在声明的上面访问变量，而let有暂存死区，在声明的上面访问变量会报错
- const声明之后必须赋值，否则会报错
- const定义不可变的量，改变了就会报错
- const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错
3、使用箭头函数应注意什么？
- 用了箭头函数，this就不是指向window，而是父级（指向是可变的），在使用=>定义函数的时候，this的指向是定义时所在的对象，而不是使用时所在的对象
- 不能够使用arguments对象
- 不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误
- 不可以使用yield命令，因此箭头函数不能用作 Generator 函数
this的指向总是让人困扰，但是有了=>以后妈妈再也不用担心你使用this了
class Animal {
constructor(){
this.type = 'animal'
}
says(say) {
setTimeout(function () {
console.log(this.type + 'says' + say)
},1000)
}
}
var animal = new Animal()
animal.says('hi') // undefined says hi
我们再来看看=>的情况
class Animal() {
constructor() {
this.type = 'animal'
}
says(say) {
setTimeout(() => {
console.log(this.type + ' says ' + say)
}, 1000)
}
}
var animal = new Animal()
animal.says('hi') // animal says hi
4、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岁了
5、介绍下 Set、Map的区别？
应用场景
Set用于数据重组，Map用于数据储存
Set
- 成员不能重复
- 只有键值没有键名，类似数组
- 可以遍历，方法有add, delete,has
Map
- 本质上是健值对的集合，类似集合
- 可以遍历，可以跟各种数据格式转换
6、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})`; //在windows键盘上，``是英文输入法下tab按键上面那个键。
//'('+this.x+','+this.y+')';
}
}
let p =new Point(1,2);
p.toString(); //"(1,2)"
7、Promise构造函数是同步执行还是异步执行，那么 then 方法呢？
promise构造函数是同步执行的，then方法是异步执行的
8、setTimeout、Promise、Async/Await 的区别
事件循环中分为宏任务队列和微任务队列
其中setTimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行
promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行
async函数表示函数里面可能会有异步方法，await后面跟一个表达式
async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行
9、promise有几种状态，什么时候会进入catch？
三个状态：pending、fulfilled、reject
两个过程：pending -> fulfilled、pending -> rejected
当pending为rejected时，会进入catch
10、下面的输出结果是多少
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
Promise 新建后立即执行，所以会先输出 1，2，而 Promise.then() 内部的代码在 当次事件循环的结尾立刻执行，所以会继续输出4，最后输出3.
11、设计一个对象，键名的类型至少包含一个symbol类型，并且实现遍历所有key
let name = Symbol('name');
let product = {
[name]:"洗衣机",
"price":799
};
Reflect.ownKeys(product);
//Reflect.ownKeys() :相当于Object.getOwnPropertyNames(target) concat(Object.getOwnPropertySymbols(target)
12、下面Set结构，打印出的size值是多少
let s = new Set();
s.add([1]);
s.add([1]);
console.log(s.size);
//2
两个数组[1]并不是同一个值，它们分别定义的数组，在内存中分别对应着不同的存储地址，因此并不是相同的值
都能存储到Set结构中，所以size为2
13、Promise 中reject 和 catch 处理上有什么区别
- reject 是用来抛出异常，catch 是用来处理异常
- reject 是 Promise 的方法，而 catch 是 Promise 实例的方法
- reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch
- 网络异常（比如断网），会直接进入catch而不会进入then的第二个回调
14、使用class 手写一个promise
//创建一个Promise的类
class Promise{
constructor(executer){//构造函数constructor里面是个执行器
this.status = 'pending';//默认的状态 pending
this.value = undefined//成功的值默认undefined
this.reason = undefined//失败的值默认undefined
//状态只有在pending时候才能改变
let resolveFn = value =>{
//判断只有等待时才能resolve成功
if(this.status == pending){
this.status = 'resolve';
this.value = value;
}
}
//判断只有等待时才能reject失败
let rejectFn = reason =>{
if(this.status == pending){
this.status = 'reject';
this.reason = reason;
}
}
try{
//把resolve和reject两个函数传给执行器executer
executer(resolve,reject);
}catch(e){
reject(e);//失败的话进catch
}
}
then(onFufilled,onReject){
//如果状态成功调用onFufilled
if(this.status = 'resolve'){
onFufilled(this.value);
}
//如果状态失败调用onReject
if(this.status = 'reject'){
onReject(this.reason);
}
}
}
15、如何使用Set去重
let arr = [12,43,23,43,68,12];
let item = [...new Set(arr)];
console.log(item);//[12, 43, 23, 68]
let item1 = Array.from(new Set(arr));
console.log(item1);//[12, 43, 23, 68]
16、将下面for循环改成for of形式
let arr = [11,22,33,44,55];
let sum = 0;
for(let i=0;i<arr.length;i++){
sum += arr[i];
}
答案：
let arr = [11,22,33,44,55];
let sum = 0;
for(value of arr){
sum += value;
}
遍历数组:for in 和 for of
for(let i in arr ){
console.log(arr[i])
}
for(let i of arr){
console.log(i);
}
17、理解 async/await以及对Generator的优势
- async await 是用来解决异步的，async函数是Generator函数的语法糖
- 使用关键字async来表示，在函数内部使用 await 来表示异步
- async函数返回一个Promise对象，可以使用then方法添加回调函数
- 当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句
async较Generator的优势：
- 内置执行器。Generator 函数的执行必须依靠执行器，而 Aysnc 函数自带执行器，调用方式跟普通函数的调用一样
- 更好的语义。async 和 await 相较于 * 和 yield 更加语义化
- 更广的适用性。yield命令后面只能是 Thunk 函数或 Promise对象，async函数的await后面可以是Promise也可以是原始类型的值
- 返回值是 Promise。async 函数返回的是 Promise 对象，比Generator函数返回的Iterator对象方便，可以直接使用 then() 方法进行调用
18、forEach、for in、for of三者区别
-
forEach更多的用来遍历数组
-
for in 一般常用来遍历对象或json
-
for of数组对象都可以遍历，遍历对象需要通过和Object.keys()
-
for in循环出的是key，for of循环出的是value
var user = {name:‘张三’,age:10,sex:‘男’}
for(let index in user){
console.log(index+’:’+user[index])
//“name:张三”"age:10"“sex:男”
}
for(let index of Object.keys(user)){
console.log(index+’:’+user[index])
//“name:张三”"age:10"“sex:男”
}
19、说一下es6的导入导出模块
导入通过import关键字
// 只导入一个
import {sum} from "./example.js"
// 导入多个
import {sum,multiply,time} from "./exportExample.js"
// 导入一整个模块
import * as example from "./exportExample.js"
导出通过export关键字
//可以将export放在任何变量,函数或类声明的前面
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
//也可以使用大括号指定所要输出的一组变量
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
//使用export default时，对应的import语句不需要使用大括号
let bosh = function crs(){}
export default bosh;
import crc from 'crc';
//不使用export default时，对应的import语句需要使用大括号
let bosh = function crs(){}
export bosh;
import {crc} from 'crc';
本文链接：https://blog.csdn.net/qq_39903567/article/details/114990474
4944
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
