ES6语法

1.this的概念及指向问题

this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是调用函数的那个对象。

this的使用情况：

1、作为普通函数调用，这时函数属于全局性调用，因此this就代表全局对象window（回调函数，函数表达式）

2、作为对象方法的调用，这时this就指这个当前对象。（事件处理函数同理）

3、作为构造函数调用，所谓构造函数，就是通过这个函数生成一个新对象（实例）。这时，this就指这个新对象（实例）。

2.apply 、 call 、bind的介绍（函数的方法）

apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；第一个参数都是this要指向的对象，也就是想指定的上下文；从第二个参数开始，就是函数的本身的参数；

但bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。

call apply bind区别( 函数的方法, 改变this指向，但参数不同)

面试题：apply 、 call 、bind的区别。

面试题：函数的防抖和节流

应用总结

我们都知道定时器的匿名函数里不能写this，它会指向window，但有了bind方法以后，我们可以随意设定this 的指向。

利用变量赋值改变this执行（将正确的this存储下来)。

3.JSON对象的介绍

JSON是前后交互最好的数据格式。

**JSON 是一种轻量级的数据交换格式。**它是基于 ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

JSON的特点：

json:是一种轻量级的数据交换格式。不是js独有的。

json组成：简单值+‘对象’+'数组’

json里面字符串需要添加双引号。

json没有var关键字,没有分号(;)等js相关的语法。

JSON的静态方法：

JSON.parse( )：用于从一个字符串中解析出json对象，具有json检测功能。

JSON.stringify( )：用于从一个对象解析出字符串

eval()

4.ES6语法介绍 http://es6.ruanyifeng.com/

let和const命令

ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。即let所声明的变量就“绑定”这个区域，不再受外部的影响。

Let声明的不存在变量提升

let不允许在相同作用域内，重复声明同一个变量。

ES6允许块级作用域的任意嵌套，外层无法读取内层作用域的变量，反之可以

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const声明的常量，也与let一样不可重复声明。

const的作用域与let命令相同：只在声明所在的块级作用域内有效。

总结：后面的工作中，多使用常量。

普通函数声明，函数表达式

值不会改变

引入模块

变量的解构赋值–快速的给变量赋值。

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构.

解构的作用是可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者 obj[key]等传统方式进行赋值

数组的解构赋值

对象的解构赋值

字符串的解构赋值–类数组和数组一样。

函数返回多个值–一般会用到数组解构。

扩展运算符

扩展运算符用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值

字符串扩展

模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量（${}）。

repeat(n)方法返回一个新字符串，表示将原字符串重复n次。

includes()：返回布尔值，表示是否找到了参数字符串。

startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。

endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

函数的扩展

函数参数默认值

箭头函数的概念及特点

箭头函数有几个使用注意点及应用总结。

1、箭头函数最吸引人的地方是简洁。同时函数体内this对象，就是定义时所在的对象，而不是使用时所在的对象。This不会改变了。（普通函数的this是调用时候确定）

2、不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

3、不可以使用arguments对象，该对象在函数体内不存在。

4、箭头函数一定是匿名函数。

5、箭头函数适合于无复杂逻辑纯函数场景下，例如用在map、reduce、filter、foreach的回调函数(函数当作参数)定义中；

6、不要在最外层定义箭头函数，因为在函数内部操作this会很容易污染全局作用域window。最起码在箭头函数外部包一层普通函数，将this控制在可见的范围内；

Symbol类型

symbol–表示独一无二的值，它是js中的第七种数据类型，属于基本类型

Symbol():首字母大写。

Symbol 函数前不能使用new,否则会报错，原因在于symbol是一个原始类型的值，不是对象。

1、symbol函数接收一个字符串作为参数，表示对symbol的描述，主要是为了在控制台显示，或者转为字符串的时候，比较容易区分。描述的内容相同仅仅表示的是描述，不代表其他的意义。

2、作为对象的属性名。

注意事项

不能直接使用[symbol()]作为键值，最好添加对应的参数进行区分，而且也不能被 for…in遍历出来。但可以通过 Object.getOwnPropertySymbols(obj)方法获取一个对象所有的symbol属性。

Set（array）和Map(object)结构

ES6提供了数据结构Set. 它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set 本身是一个构造函数，用来生成 Set 数据结构，数组作为参数。

每一项即是键也是值,键和值是相同的。

创建一个Set；

Set类的属性–size（长度）

Set类的方法

Set.add(value) 添加一个数据，返回Set结构本身，允许进行链式操作。

Set.delete(value) 删除指定数据，返回一个布尔值，表示删除是否成功。

Set.has(value) 判断该值是否为Set的成员，返回一个布尔值。

Set.clear() 清除所有的数据，没有返回值。

forEach()：使用回调函数遍历每个成员

数据结构–map

JavaScript 的对象（Object），只能用字符串当作键。这给它的使用带来了很大的限制。ES6 提供了 Map 数据结构。它类似于对象，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Symbol类型当作key输出时 无法确认是同一个key.

二维数组做参数

map类的属性–size

map类的方法

map.set(key,value) :设置键名key对应的键值value,然后返回整个map结构，如 果key已经有值，则键值会被更新，否则就生成该键，可以链式操作。

map.get(key) get方法读取key对应的键值，如果找不到key，返回undefined

map.delete(key) 删除某个键，返回true.如果删除失败，返回false.

map.has(key) 方法返回一个布尔值，表示某个键是否在当前map对象之中。

map.clear() 清除所有数据，没有返回值

map.entries() 返回键值对的遍历器

map.forEach() 使用回调函数遍历每个成员。

Generators生成器函数（iterator接口）

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。

Generator 函数是一个状态机，封装了多个内部状态。

Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield（产出）表达式，定义不同的内部状态.

Generator 函数会返回一个遍历器对象，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。

总结一下，调用 Generator 函数，返回一个遍历器对象，代表 Generator 函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。

遍历器（Iterator）它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

Iterator 的作用有三个：

一是为各种数据结构，提供一个统一的、简便的访问接口；

二是使得数据结构的成员能够按某种次序排列；

三是 ES6 创造了一种新的遍历命令for…of循环，Iterator 接口主要供for…of消费。

一个数据结构只要部署了Symbol.iterator属性，就被视为具有 iterator 接口，就可以用for…of循环遍历它的成员。也就是说，for…of循环内部调用的是数据结构的Symbol.iterator方法。

for…of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、以及字符串。

for…of与其他遍历语法的比较

for循环这种写法比较麻烦，因此数组提供内置的forEach方法。

forEach没有返回值，无法中途跳出forEach循环，break命令或return命令都不能奏效。

for…in循环有几个缺点。
数组的键名是数字，但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。
for…in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
某些情况下，for…in循环会以任意顺序遍历键名。

总之，for…in循环主要是为遍历对象而设计的，不适用于遍历数组

for…of循环相比上面几种做法，有一些显著的优点。
有着同for…in一样的简洁语法，但是没有for…in那些缺点。
不同于forEach方法，它可以与break、continue和return配合使用。
提供了遍历所有数据结构的统一操作接口。

数组和对象的扩展

数组的扩展方法

Array.from()方法用于将对象转为真正的数组(类数组转数组)

Array.of()方法用于将一组值，转换为数组。

fill()方法使用给定值，填充一个数组。

对象的扩展方法

对象的简洁表示法

Object.assign()用于对象的合并，将源对象的所有可枚举属性，复制到目标对象。

class(类)面向对象编程

**ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。**通过class关键字，可以定义类。
基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。