1.JavaScript 包含 3 个部分, 分别是 ECMAScript,DOM 和 BOM.
ES5 是 ECMAScript 的第 5 个版本, ES6 是第 6 个版本.
ECMAScript 是核心, 它规定了语言的语法, 类型, 关键字, 保留字, 操作符, 语句, 对象; DOM 文档对象模型; BOM 是浏览器对象模型
2.ES5 在以前的版本上增加了一些 Array 方法, Object 方法, strict 模式等; 而 ES6 又在向下兼容的条件下新增了一些属性方法. 因此 ES6 相对于 ES5 具有一些特性:
块级作用域, let 关键字, const 常量, 赋值结构, 字符串模板生成器等等
3.ES6 教程: https://www.runoob.com/w3cnote/es6-tutorial.html
教程讲得非常详细, 下面这张图做出来概述
图片来自菜鸟教程
ES6 的详细学习 (关于 ES6 进行具体的学习, 笔记记录在下方)
1.let 和 const
let 和 const 是在 ES6 中新增的两个关键字. let 限定了变量只在代码块内使用, 不会进行变量提升 (而 var 会有变量提升);const 定义静态变量, 使用 const 定义变量必须进行赋值, 且静态变量不允许对其进行改变.
let 使用在计数器中效果会很好: 这里面使用 let 的循环, 每次输出的 j 都是不同的变量
- for (var i = 0; i < 10; i++) {
- setTimeout(function(){
- console.log(i);
- })
- }
- // 输出十个 10
- for (let j = 0; j < 10; j++) {
- setTimeout(function(){
- console.log(j);
- })
- }
- // 输出 0123456789
ReferenceError: 参数错误, 没有定义该变量
undefined: 没有给变量赋值就使用, 但是该变量已经存在
SyntaxError: 语法错误, 如使用 const 定义变量却不对它赋值
2. 解构赋值
剩余运算符:
- // 数组模型的解构
- let [a, ...b] = [1, 2, 3];
- //a = 1
- //b = [2, 3]
- // 对象模型的解构
- let {
- a, b, ...REST
- } = {
- a: 10, b: 20, c: 30, d: 40
- };
- // a = 10
- // b = 20
- // REST = {
- c: 30, d: 40
- }
3. 数据类型 Symbol
在 ES6 中新增了数据类型 Symbol, 其用途有如下几点:
. 作为对象的属性名, 可以保证属性名不重复
. 定义常量, 保证常量是独特的
.Symbol.for() 类似于单例模式
.Symbol.keyFor() 返回一个已经登记的 Symbol 类型值得 key
相同参数 Symbol() 返回的值不相等
- let sy = Symbol("KK");
- console.log(sy); // Symbol(KK)
- typeof(sy); // "symbol"
- // 相同参数 Symbol() 返回的值不相等
- let sy1 = Symbol("kk");
- sy === sy1; // false
4. 关于 set 和 Map
set 对象存储的值总是唯一的
5.Proxy 和 Reflect
ES6 中定义了 Proxy 和 Reflect 对 API 进行一些操作. 基本方法和实例方法有点多, 这里不做详细的记录, 用到的时候去具体搞清楚.
6.ES6 字符串
ES6 中扩展了对字符串的处理方法, 如判断是否包含子串, 以前用 indexOf(),ES6 中有:
- includes()
- startsWith()
- endWith()
- // 重复字符串
- repeat()
- // 字符串补全
- padStart()
- padEnd()
- // 模板字符串, 反引号' 可以用来定义多行字符串的
- let string1 = `Hey,
- can you stop angry now?`;
- console.log(string1);
- // Hey,
- // can you stop angry now?
- // 字符串插入变量和表达式 $(), 变量名写在 ${
- } 中,${
- } 中可以放入 JavaScript 表达式.
- //...
7. 字符串数值
ES6 在 Math 对象上新增了 17 个数学静态方法, 这些方法通过 Math 调用;
......
8.ES6 对象
对象字面量: 允许对象属性直接写变量; 函数名简写等
对象拓展运算符: 拷贝对象的所有可遍历的属性; 合并两个对象. 需要注意的是, 当拓展对象中和现有的对象有相同属性时, 后面的会覆盖前面的
- let person = {
- name: "Amy", age: 15
- };
- let someone = {
- ...person, name: "Mike", age: 17
- };
- someone; //{
- name: "Mike", age: 17
- }
对象的新方法:
- // 复制源对象的所有可枚举对象
- Object.assign(target, source_1, ...)
- // 比较两个值是否严格相等
- Object.is(value1, value2)
9.ES6 数组
包含一些数组的操作方法, 如数组的创建, 遍历, 包含, 数组缓冲区, 定型数组等
10.ES6 函数
在参数和箭头函数方面做了扩展. 例如可以定义不定长度的参数, 在回调函数中使用箭头函数可以解决使用 this 的问题 (具体的问题, 还有使用的注意点要看一下教程, 教程中很清晰)
11. 迭代器
迭代器是 ES6 中引入的遍历机制, 可以通过 Symbol.itertor 创建迭代器进行遍历.
12.class 类
13.ES6 模块
基本的用法:
- /*-----export [test.JS]-----*/
- let myName = "Tom";
- export {
- myName as exportName
- }
- /*-----import [xxx.JS]-----*/
- import {
- exportName
- } from "./test.js";
- console.log(exportName);// Tom
export defualt 命令:
- var a = "My name is Tom!";
- export default a; // 仅有一个
- export default var c = "error";
- // error,default 已经是对应的导出变量, 不能跟着变量声明语句
- import b from "./xxx.js"; // 不需要加 {
- }, 使用任意变量接收
14.ES6 Promise 对象
Promise 是一个对象, 用来进行异步编程. Promise 有三个状态, 分别是 pending(正在进行),fulfilled(成功),rejected(失败);Promise 的状态只能由 pending 转向 fulfilled 或者 rejected.fulfilled 和 rejected 都是属于 resolved 状态.
15.Generator 函数
该函数可以通过关键字 yeild 将函数执行流挂起, 以实现异步操作.
在函数名前面加上 * 表示该函数是 Generator 函数, 在函数内部使用 yeild 关键字来定义函数内部的状态对象.
通过. next() 方法遍历对象, 当 next() 方法不传入参数的时候, yeild 表达式的返回值是 undefiend, 当 next() 方法有传入参数时, 该参数会作为上一步 yeild 的返回值. 具体的例子如下:
- function* sendParameter(){
- console.log("strat");
- var x = yield '2';
- console.log("one:" + x);
- var y = yield '3';
- console.log("two:" + y);
- console.log("total:" + (x + y));
- }
- var sendp1 = sendParameter();
- sendp1.next();
- // strat
- // {value: "2", done: false}
- sendp1.next();
- // one:undefined
- // {value: "3", done: false}
- sendp1.next();
- // two:undefined
- // total:NaN
- // {value: undefined, done: true}
next 传参
- var sendp2 = sendParameter();
- sendp2.next(10);
- // strat
- // {
- value: "2", done: false
- }
- sendp2.next(20);
- // one:20
- // {
- value: "3", done: false
- }
- sendp2.next(30);
- // two:30
- // total:50
- // {
- value: undefined, done: true
- }
16.async 函数
async 是 ES7 才有的, 与 Promise 和 Generator 有很大关联.
async 函数返回一个 Promise 对象, 可以通过 then 添加回调函数;
async 函数执行时可能会遇到 await 表达式, 这时会将触发的异步操作执行完毕之后再继续执行 async 函数;
await 关键字在 async 函数内部有效, 外部会报语法错误
来源: http://www.jianshu.com/p/e32a0d6c544a