前端知识总结之es5/es6

工作中使用了五年的ES5/ES6，今天来总结下。

1、es5和es6的区别

ECMAScript5，即ES5，是ECMAScript的第五次修订，于2009年完成标准化
　　ECMAScript6，即ES6，是ECMAScript的第六次修订，于2015年完成，也称ES2015
　　ES6是继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）promise
　　Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大
　　13）Symbol
　　Symbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的
　　14）Proxy代理
　　使用代理（Proxy）监听对象的操作，然后可以做一些相应事情

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

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

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

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

4、设计一个对象，键名的类型至少包含一个symbol类型，并且实现遍历所有key

let name = Symbol(‘name’);
let product = {
[name]:“洗衣机”,
“price”:799
};
Reflect.ownKeys(product);

5、如何使用Set去重

let arr = [12,43,23,43,68,12];
let item = […new Set(arr)];
console.log(item);//[12, 43, 23, 68]

6、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’;

7、es5和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）监听对象的操作，然后可以做一些相应事情

8、实现一个类模板字符串的功能 基本的字符串格式化。

将表达式嵌入字符串中进行拼接。
用$来界定在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(‘‘)就能解决类模板字符串的功能letname{=}^{\prime }we{b}^{\prime };letage=10;letstr{=}^{\prime }你好，${name} 已经 ${age}岁了’
str = str.replace(/${([^}]*)}/g,function(){
return eval(arguments[1]);
})
console.log(str);//你好，web 已经 10岁了

9、 Set、Map的区别？

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

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 + ‘)’;
}
}

11、设计一个对象，键名的类型至少包含一个symbol类型，

并且实现遍历所有key
let name = Symbol(‘name’);
let product = {
[name]:“洗衣机”,
“price”:799
};
Reflect.ownKeys(product);

12、forEach、for in、for of三者区别

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

13.使用两种方法，来依次输出0到9？

var funcs = []
for (var i = 0; i < 10; i++) {
funcs.push(function() { console.log(i) })
}
funcs.forEach(function(func) {
func()
});

• 利用ES5 闭包解决这个问题
var funcs = []
for (var i = 0; i < 10; i++) {
funcs.push((function(value) {
return function() {
console.log(value)
}
}(i)))
}
funcs.forEach(function(func) {
func()
});
• ES6 let
var funcs = []
for (let i = 0; i < 10; i++) {
funcs.push(function() {
console.log(i)
})
}
funcs.forEach(function(func) {
func()
});

14.ES6的模板字符串的新特性

• 基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定
• 在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。
箭头有哪些新特点？
• 不需要function关键字来创建函数
• 省略return关键字
• 继承当前上下文的 this 关键字
以下代码依次输出内容是？

15.map 和 forEach 的区别/filter和some的区别？？

map和forEach的区别：
• map 的返回值为数组，forEach的返回为undefined
• map 不会改变原数组，forEach 可以改变
filter和some的区别
• filter 返回满足回掉函数返回true的元素数组
• some 检查是否有满足回掉函数的数据，回掉函数返回true 则some返回true

16.生动形象解释forEach、filter、map、some、every、find、findIndex、reduce间的区别

17.普通函数和箭头函数的区别：

1. 箭头函数没有prototype(原型)
2. 箭头函数的this在定义的时候继承自外层第一个普通函数的this。
3. 如果箭头函数外层没有普通函数，严格模式和非严格模式下它的this都会指向window(全局对象)
4. 箭头函数本身的this指向不能改变，但可以修改它要继承的对象的this。
5. 箭头函数的this指向全局，使用arguments会报未声明的错误。
6. 箭头函数的this指向普通函数时,它的argumens继承于该普通函数
7. 使用new调用箭头函数会报错，因为箭头函数没有constructor
8. 箭头函数不支持new.target
9. 箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名
10. 箭头函数相对于普通函数语法更简洁优雅
    主要分为这几个方面的区别： 1、this指向 2、arguments 3、箭头函数没有原型 4、箭头函数不能使用new来构造 5、不允许重命名参数 6、语法更优雅 7、 不支持new.target
    箭头函数的注意事项：
11. 箭头函数一条语句返回对象字面量，需要加括号
12. 箭头函数在参数和箭头之间不能换行
13. 箭头函数的解析顺序相对||靠前
14. 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
    不适用场景：箭头函数的this意外指向和代码的可读性。