ES6新特性

 ES6是JavaScript语言的新一代标准

let和const命令

var定义的变量有时会莫名其妙的成为全局变量，作用于范围是函数作用域，在做复杂页面时，会带来很大问题。

let 是块作用域，仅在所在代码块内有效 ，建议用let代替var；

const声明的变量是常量，不能被修改。

字符串扩展

includes() ：返回布尔值，表示是否找到了参数字符串。
startsWith() ：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith() ：返回布尔值，表示参数字符串是否在原字符串的尾部。

字符串模板

ES6中提供了`来作为字符串模板标记。

在两个 `之间的部分都会被作为字符串的值，可以任意换行。

结构表达式

// 解构表达式获取值
const {name,age,language} = person;
// 打印
console.log(name);
console.log(age);
console.log(language);

还可以通过        const {name:n} = person        来为name指定别名n

函数优化

函数参数默认值

function add(a , b = 1) {    //给b直接赋默认值
return a + b;
}
// 传一个参数
console.log(add(10));

箭头函数

一个参数

var print = function (obj) {
console.log(obj);
}
// 简写为：
var print2 = obj => console.log(obj);

两个参数

// 两个参数的情况：
var sum = function (a , b) {
return a + b;
}
// 简写为：
var sum2 = (a,b) => a+b;

多行代码，输出用 { }

var sum3 = (a,b) => {
return a + b;
}
// 多行，没有返回值
let sayHello = () => {
console.log("hello!");
console.log("world!");
}
sayHello();

对象的函数属性简写

let person = {
name: "jack",
// 以前：
eat: function (food) {
console.log(this.name + "在吃" + food);
},
// 箭头函数版：
eat2: food => console.log(person.name + "在吃" + food),// 这里拿不到this
// 简写版：
eat3(food){
console.log(this.name + "在吃" + food);
}
}

箭头函数结合解构表达式

const person = {
name:"jack",
age:21,
language: ['java','js','css']
}
function hello(person) {
console.log("hello," + person.name)
}

//使用箭头函数和结构表达式
var hi = ({name}) => console.log("hello," + name);
hi(person)

数组新增map和reduce方法

map（）        迭代方法

接收一个函数，将原数组中的所有元素用这个函数处理后的结果放入新数组返回。

reduce（）         归并方法

接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：

第一个参数是上一次 reduce 处理的结果

第二个参数是数组中要处理的下一个元素

reduce() 会从左到右依次把数组中的元素用 reduce 处理，并把处理的结果作为下次 reduce 的第一个参数。如果是 第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数。

reduce()是从前往后遍历，reduceRight()是从后往前。

扩展运算符                ...

将一个数组转为用逗号分隔的参数序列。

console.log (...[1, 2, 3]); //1 2 3
console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5
function add(x, y) {
return x + y;
}
var numbers = [1, 2];
console.log(add(...numbers)); // 3
// 数组合并
let arr = [...[1,2,3],...[4,5,6]];
console.log(arr); //[1, 2, 3, 4, 5, 6]
// 与解构表达式结合
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first, rest) //1 [2, 3, 4, 5]
//将字符串转成数组
console.log([...'hello']) //["h", "e", "l", "l", "o"]

Promise

Promise 是一个对象，从它可以获取异步操作的消息。 Promise 提供统一的 API ，各种异步操作都可以用同样的方法进行处理。

我们可以通过 Promise 的构造函数来创建 Promise 对象，并在内部封装一个异步执行的结果。

const promise = new Promise(function(resolve, reject) {
// ... 执行异步操作
if (/* 异步操作成功 */){
resolve(value);// 调用resolve，代表Promise将返回成功的结果
} else {
reject(error);// 调用reject，代表Promise会返回失败结果
}
});

如果我们想要等待异步执行完成，做一些事情，我们可以通过 promise 的 then 方法来实现：

promise.then(function(value){
// 异步执行成功后的回调
}).catch(function(error){
// 异步执行失败后的回调
})

const p = new Promise(function (resolve, reject) {
// 这里我们用定时任务模拟异步
setTimeout(() => {
const num = Math.random();
// 随机返回成功或失败
if (num < 0.5) {
resolve("成功！num:" + num)
} else {
reject("出错了！num:" + num)
}
}, 300)
})

console.log("ok");

// 调用promise    异步操作完成之后执行
p.then(value => {
console.log(value);    //成功执行
}).catch(value => {
console.log(value);    //失败执行
})

console.log("ok2");


//输出结果
// ok
// ok2
// 出错了！num:0.550577999192312

所以我们可以看到程序的执行顺序，先执行主程序，等异步操作完成，再执行异步程序

set和map

map集合

本质是与 Object 类似的结构。不同在于， Object 强制规定 key 只能是字符串。而 Map 结构的 key 可以是任意对 象。即：

object 是 <string,object> 集合

map 是 <object,object> 集合

// map接收一个数组，数组中的元素是键值对数组
const map = new Map([
['key1','value1'],
['key2','value2'],
])
// 或者接收一个set
const set = new Set([
['key1','value1'],
['key2','value2'],
])
const map2 = new Map(set)
// 或者其它map
const map3 = new Map(map);

API

map.set(key, value);// 添加
map.clear();// 清空
map.delete(key);// 删除指定元素
map.has(key); // 判断是否存在
map.forEach(function(key,value){})//遍历元素
map.size; // 元素个数。是属性，不是方法
map.values() //获取value的迭代器
map.keys() //获取key的迭代器
map.entries() //获取entry的迭代器
用法：
for (let key of map.keys()) {
console.log(key);
}
或：
console.log(...map.values()); //通过扩展运算符进行展开

set集合

加强版map，本质与数组类似，但set中只能保存不同元素，如果元素相同会被忽略。

// Set构造函数可以接收一个数组或空
let set = new Set();
set.add(1);// [1]
// 接收数组
let set2 = new Set([2,3,4,5,5]);// 得到[2,3,4,5]

API

set.add(1);// 添加
set.clear();// 清空
set.delete(2);// 删除指定元素
set.has(2); // 判断是否存在
set.forEach(function(){})//遍历元素
set.size; // 元素个数。是属性，不是方法。

类（class）的基本语法

<script>
class User{
constructor(name, age = 20){ // 构造方法
this.name = name; // 添加属性并且赋值
this.age = age;
}
sayHello(){ // 定义方法
return "hello";
}
static isAdult(age){ //静态方法
if(age >= 18){
return "成年人";
}
return "未成年人";
}
}
let user = new User("张三");
// 测试
console.log(user); // User {name: "张三", age: 20}
console.log(user.sayHello()); // hello
console.log(User.isAdult(20)); // 成年人
</script>

类的继承

<script>
class User{
constructor(name, age = 20){ // 构造方法
this.name = name; // 添加属性并且赋值
this.age = age;
}
sayHello(){
return "hello"; // 定义方法
}
static isAdult(age){ //静态方法
if(age >= 18){
return "成年人";
}
return "未成年人";
}
}
class ZhangSan extends User{
constructor(){
super("张三", 30); //如果父类中的构造方法有参数，那么子类必须通过super调用父类的构造
方法
this.address = "上海";//设置子类中的属性，位置必须处于super下面
}
}
// 测试
let zs = new ZhangSan();
console.log(zs.name, zs.address);
console.log(zs.sayHello());
console.log(ZhangSan.isAdult(20));

Generator函数

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

Generator 函数有两个特征 :

一是 function 命令与函数名 之间有一个星号 :

二是 函数体内部使用 yield语 句定义不同的内部状态。

<script>
function* hello () {
yield "hello";
yield "world";
return "done";
}
let h = hello();    //迭代器
console.log(h.next()); //{value: "hello", done: false}
console.log(h.next()); //{value: "world", done: false}
console.log(h.next()); //{value: "done", done: true}
console.log(h.next()); //{value: undefined, done: true}
</script>

for...of

通过 for...of 可以循环遍历 Generator 函数返回的迭代器

<script>
function* hello () {
yield "hello";
yield "world";
return "done";
}
let h = hello();
for (let obj of h) {
console.log(obj);
}
</script>
// 输出：
//hello
//world

修饰器(Decorator)

修饰器 (Decorator) 是一个函数， 用来修改类的行为。相当于java中的注解；  ES2017 引入了这项功能， 目前 Babel 转码器己经支持。

转码器

umijs 

集成babel 

部署安装

1. 安装node  内有npm
2. 安装yarn   yarn相当于优化了的npm
3. 安装umi

模块化

模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。

而 JS 中没有包的概念，换来的是 模块。

模块功能主要由两个命令构成： export 和 import 。

export 命令用于规定模块的对外接口，

import 命令用于导入其他模块提供的功能。

export

class Util {
static sum = (a, b) => a + b;
}
//导出该类
export default Util;

import

使用 export 命令定义了模块的对外接口以后，其他 JS 文件就可以通过 import 命令加载这个模块。

//Index.js
//导入Util类
import Util from './Util'
//使用Util中的sum方法
console.log(Util.sum(1, 2));

通过 http://localhost:8000/ 进行访问测试。