ES6新特性

let和const命令

var

之前，写js变量的时候。只有一个关键字：var

但var有一个问题，就是定义的变量有时候会成为全局变量。

例如：

for(var i = 0; i < 5; i++){ console.log(i); } console.log("循环外：" + i);

输出结果：

可以看出，在循环外部也可以获取到变量i的值，显然变量i的作用域范围太大了，在做复杂页面时，会带来很大的问 题。

let

let所声明的变量，只在let所在的代码块内有效。

例如：（把var改成let）

for(let i = 0; i < 5; i++){ console.log(i); } console.log("循环外：" + i);

输出结果：

这样，就把变量的i的作用域控制在了循环内部。

const

const声明的变量是常量，不能被修改；类似于Java中的final关键字。

例如：

const a = 10; console.log("a = " , a); //给a重新赋值 a = 20; console.log("a = " , a);

输出结果：

可以看到，变量a的值是不能修改的。

字符串扩展

字符串API

在ES6中，为字符串扩展了几个新的API

includes(“xxx”)：返回布尔值，表示是否包含xxxstartsWith(“xxx”)：返回布尔值，表示是否以xxx开头endsWith(“xxx”)：返回布尔值,表示是否以xxx结尾

示例：

let str = "Hello Javascript"; console.log(str, "中是否包含 hello ==>", str.includes("hello")); console.log(str, "中是否包含 hi ==>", str.includes("hi")); console.log(str, "中是否以 h 开头==>", str.startsWith("h")); console.log(str, "中是否以 a 开头==>", str.includes("a")); console.log(str, "中是否以 a 结尾==>", str.includes("a")); console.log(str, "中是否以 t 结尾==>", str.includes("t"));

输出结果：

字符串模板

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

示例：

<script type="text/javascript"> let str = ` hello Java and JavaScript `; console.log(str); </script>

输出结果：

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

解构表达式

什么是解构？

​ ES6中允许安装一定模式从数组对象中提取值，然后对变量进行赋值，这样被称之为解构

数组解构

例如，有一个数组

let arr = [1,2,3]

之前，想要获取其中的值，只能通过下标。但ES6可以这样做：

let arr = [1,2,3]; const [a,b,c] = arr; // a,b,c将与arr中的每个位置对应来取值 console.log(a,b,c); const [x] = arr; // 只匹配一个参数值 console.log(x);

结果：

对象解构

例如，定义一个对象

const person = { name: "Tom", age: 20, language: ['Java','JavaScript','Python'] }

使用解构表达式取值：

const {name,age,language} = person; // {}内的属性名必须是person的属性名 console.log(name); console.log(age); console.log(language); // 如果想用其他变量接收，需要指定别名 const {name:n} = person; console.log("n: ",n);

结果：

函数优化

函数数默认值

在ES6之前，无法给一个函数参数设置默认值，只能采用变通写法：

// 如果没有给参数b传值，则b=1 function add(a,b){ b = b || 1; return a+b; } console.log(add(10)); //输出11 console.log(add(10，20)); //输出30

使用了ES6之后，可以这样写

function add(a,b = 1){ return a+b; } console.log(add(10)); //输出11 console.log(add(10，20)); //输出30

函数箭头

ES6中，定义一个函数的简写方式：

一个参数时：

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

多个参数时

let sum = function(a,b){ return a + b; } // 简写为： let sum2 = (a,b) => a + b;

没有参数时

// 没有参数时，需要用()进行占位，代表参数部分 let hello = function(){ console.log("Hello ...") } // 简写为： let hello2 = () => console.log("Hello ...")

当有多行代码时，可以使用{ }括起来

let sum3 = (a.b) =>{ return a+b; } let hello3 = () =>{ console.log("Hello"); console.log("World"); }; hello3();

对象的函数属性简写

比如有一个Person对象，里面有eat()方法

let person = { name: "Tom", // ES6之前 eat: function (food){ console.log(this.name + "在吃" + food); } // 箭头函数写法 eat2: food => console.log(person.name + "在吃" + food); // 简写版 eat3(food){ console.log(this.name + "在吃" + food); } }

箭头函数结合解构表达式

例如，有这样一个函数

const person = { name: "Tom", age: 20, language: ["Java","Python","JS"] } function hello(person){ console.log("Hello," + person.name); }

使用箭头函数和解构表达式的写法

var hi = ({name}) => console.log("hello," + name); hi(person);

Map和Reduce

在ES6中，数组新增了map() 和 reduce()方法

map()

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

例如：有一个字符串数组，要求把它转换为int数组

let arr = ['1','2','3','4'] console.log(arr); let newArr = arr.map(s => parseInt(s)); console.log(newArr);

结果：

reduce()

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

第一个参数是上一次reduce处理的结果，第二个参数是数组中要处理的下一个元素

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

例如：

const arr = [2,5,-10,20];

没有指定初始值：

指定了初始值：

运算符扩展

扩展运算符（spread）是三个点（…），将一个数组转为用逗号分隔的参数序列。

用法：

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; } const number = [1, 2]; console.log(add(...number)); // 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,6]; console.log(first,rest); // 1 [2,3,4,5,6] console.log([..."hello"]); // ["h","e","l","l","o"]

Promise

所谓Promise，简单来说就是容器，里面保存着某个未来才会结束的事件（通常为异步操作）的结果。从语法上说，Promise是一个对象，它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用这样的方式进行处理。

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

语法：

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

如果想用等到promise异步操作执行完成，做一些事情，可以通过promise的then()方法来实现：

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

如果想要处理Promise异步执行失败的事件，还可以跟上catch：

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

示例：

const promise = new Promise(function (resolve, reject) { setTimeout(() =>{ const num = Math.random(); if (num < 0.5){ resolve("success,num:" + num) }else { reject("error,num:" + num) } },300) }); // 调用promise promise.then(function (msg) { console.log(msg); }).catch(function (msg) { console.log(msg); })

结果：

Set和Map

ES6提供了Set和Map的数据结构。

Set

Set本质与数组类似。不同于Set中只能保存不同的元素，如果元素相同会被忽略。和Java中的Set集合非常相似。

构造函数：

let set = new Set(); set.add(1); // [1] let set2 = new Set([1,2,3,4,5]) // [1,2,3,4,5]

方法：

// 添加，元素内容不可重复，重复会被忽略 set.add() // 清空 set.clear() // 删除指定元素，删除的是元素内容，而不是下标 set.delete(value) // 判断指定元素是否存在 set.has(value) // 遍历 set.forEach(function(){}) // 元素个数 set.size

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([ ['key3','value3'], ['key4','value4'] ]); const map1 = new Map(map); const map2 = new Map(set);

方法：

map.set(key,value) map.clear() map.delete(key) map.has(key) map.forEach(function(key,value){}) map.size map.values() map.keys() map.entries() for(let key of map.keys()){ console.log(key); } console.log(...map.values())

class（类）的基本语法

JavaScript的传统方法是通过构造函数定义并生成对象。ES6中引入了class的概念，通过class关键字自定义类。

基本用法：

<script type="text/javascript"> class User{ // 构造函数 constructor(name,age = 20){ this.name = name; this.age = age; } // 定义方法 sayHello(){ return "Hello: " + this.name; } // 静态方法 static isAdult(age){ if (age >= 18){ return " 成年 " + age; } return " 未成年 " + age; } } let user = new User("Tom",23); console.log(user); console.log(user.sayHello()); // 静态方法需要使用类来调用 console.log(User.isAdult(user.age)); </script>

结果：

类的继承：

<script type="text/javascript"> class User{ // 构造函数 constructor(name,age = 20){ this.name = name; this.age = age; } // 定义方法 sayHello(){ return "Hello: " + this.name; } // 静态方法 static isAdult(age){ if (age >= 18){ return " 成年 " + age; } return " 未成年 " + age; } } class Jerry extends User{ constructor(){ super("Jerry",17); this.address = "Shanghai"; } } let jerry = new Jerry(); console.log(jerry); console.log(jerry.sayHello()); // 静态方法需要使用类来调用 console.log(Jerry.isAdult(jerry.age)); </script>

结果：

Generator函数

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

Generator函数有两个特征

function命令与函数名之间有一个*****号函数体内部使用yield语句定义不同的内部状态

用法：

<script type="text/javascript"> function * hello() { yield "hello"; yield "world"; return "over" } let hi = hello(); console.log(hi.next()); console.log(hi.next()); console.log(hi.next()); console.log(hi.next()); </script>

结果：

可以看到，通过hello()返回的hi对象，每调用一次next()方法返回一个对象，该对象包含了value值和done状态。知道遇到return关键字或者函数执行完毕，这个时候返回的done状态为true，表示已经执行完毕。

for…of循环

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

用法：

<script type="text/javascript"> function * hello() { yield "hello"; yield "world"; return "over" } let hi = hello(); for (let obj of hi) { console.log(obj); } </script>

输出结果：