ES6新特性汇总

1. let 和 const

let 声明的变量,作用范围是let声明变量所在的代码块

const 声明的变量,是常量,值不能修改否则报错

2. 字符串扩展方法

str01.inclueds(str02) 字符串str01中是否包含字符串str02,返回结果布尔值

str01.startWith(str02) str01是否以str02开头,返回结果布尔值

str01.endWith(str02) str01是否以str02结尾,返回结果布尔值

3.字符串模板(多行字符串)

• es6支持多行字符串
• 使用的是 ` ` (对应英文输入法状态下,Tab键上面的反向单引号 )

let str01 = `
aaa
bbb
cc
`

4.解构表达式

ES6中允许按照一定模式从数组和对象中取值,然后按照变量进行赋值.(解构Destructuring)

数组解构赋值

let arr = [123,false,"aaa"]

//数组解构赋值使用[]
let [x,y,z] = arr
console.log(`x=${x},y=${y},z=${z}`)
let [a,b] = arr
console.log(a, b)

输出结果如下:

对象解构赋值

const person = {
	name: "tom",
	age: 15,
	address: ["GD","guangzhou","baiyunshan"]
}

//对象解构赋值,使用{}大括号
let {name,age,address} = person
console.log(`name=${name}, age=${age}, address=${address} `)

//解构赋值,并把解构的元素值赋值给新的元素
let {name:n,age:a,address:ad} =  person
console.log(`n=${n}, a=${a}, ad=${ad} `)

输出结果如下:

5. 方法形参的默认值

• 方法的形参直接赋值

function add(a,b=1){
	console.log(a+b)
}
add(5)

function add(a=2,b=1){
	console.log(a+b)
}
add(5)

6. 箭头函数

(形参01,形参02,…) => {函数体…}

7.对象的函数简写方式

8.数组新增方法 map 和 reduce

map() 接收一个函数,将原数组的所有元素执行这个函数后生成新的元素,并把新的元素数组返回

• 举例如下:
  
• 输出结果:
  

reduce(param01,param02)

(1)param01(m,n) 是一个函数,必要参数

(1.1)该函数第一个参数m是reduce函数上一次处理的结果

(1.2)该函数第二个参数n是数组中需要处理的下一个元素

流程:

• reduce()会从左到右依次把数组的元素用reduce函数处理,
• 假如当前元素下标为x,那么会把arr[x]的处理结果作为reduce下一次处理的第一个参数m,把arr[x+1]作为第二个参数n
• 如果是arr[0]
  • 当reduce()的第二个参数param02为空时,会把数组的前两个元素作为param01(m,n)的计算参数,
  • 当reduce(0的第二个参数param02不为空时,param02会作为param01(m,n)中的第一个参数m,arr[0]作为第二个参数n

(2)param02 是一个可选参数值

举例如下:

• reduce()函数第二个参数为空时

const arr = [1,2,-1,-2]

arr.reduce((a,b)=>{
	console.log("a+b=",a+b)
	return a+b
})

• 输出结果如下:
  
• reduce()第二个参数不为空时:

const arr = [1,2,-1,-2]

arr.reduce((a,b)=>{
	console.log("a+b=",a+b)
	return a+b
}, 100)

• 输出结果如下:
  

9. 展开运算符 … (扩展运算符)

• 展开一个数组

let arr01 = [1,2,3,4,5]
let arr02 = [6,7,8,9,10]
console.log(arr01,...arr02)
console.log(...arr01,...arr02)

• 输出结果如下:
  
• 合并数组

let arr01 = [1,2,3,4,5]
let arr02 = [6,7,8,9,10]
let arr03 = [...arr01,...arr02]
console.log(arr03)
console.log(...arr03)

输出结果如下:

• 展开数组,并用解构表达式赋值

const arr = [1,2,3,"mm","nn"]
let [x,y,z,...arr01] = arr
console.log(x,y,z,arr01)

输出结果:

• 字符串展开成一个数组

let str = "hello world!"
let arr = [...str]
console.log(arr)

输出结果:

10. Promise

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(
	//then()方法,异步执行成功的回调
	(value)=>{console.log(value)}
).cathch(
	//catch()方法,异步执行失败的回调
	(reason)=>{console.log(reason)}
);

• 示例:

const p = new Promise(function(resolve,reject){
	//定时器任务,模拟异步
	setTimeout(()=>{
		let num = Math.random();
		if(num<0.5){
			resolve("成功!num:" + num);
		}else{
			reject("出错!num:" + num);
		}
	},1000)
});

//调用promise
p.then(
	//小于0.5,表示正确
	(msg)=>{console.log(msg)}
).catch(
	//大于0.5,表示错误
	(msg)=>{console.log(msg)}
);

输出结果:

11. set 和 map

set 本身和数组类似,但是元素不重复

• set的构造函数,参数可以为空或者数组

let set = new Set();
let set2 = new Set([1,2,3])

• set常用的方法
  • set.add(param) 添加方法
  • set.clear() 清空方法
  • set.delete(value) 删除指定元素
  • set.has(value) 判断元素是否存在
  • set.forEach(()=>{}) 遍历元素
  • set.size 元素个数(不是方法,是属性)

map 和Object类似的结构.不同的是object强制key只能是字符串,map的key可以是任意值

• object结构 的集合
• map结构 的集合

构造函数 参数可以是一个数组,也可以是set,也可以是map

//接收一个元素为数组的数组
const map = new Map([['key01','value01'],['key02','value02'],['key03','value03']])
//或者接受一个set
const set = new Set([['key01','value01'],['key02','value02']])
const map02 = new Map(set)
//或者其他map
const map03 = new Map(map)

map常用方法

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的迭代器

12. class(类)的基本用法

定义类

class User{
	
}

构造函数

class User{
	//构造函数
	constructor(name,age=20){
		this.name = name;
		this.age = age;
	}
	//定义函数
	sayHello(){
		console.log("sayHello...");
	}
	//静态函数
	static isAdult(name,age){
		if(age>=18){
			console.log(name,"是成年人");
		}else{
			console.log(name,"是未成年人");
		}
	}
}

//创建对象
let user = new User("tom",15);
let user2 = new User("jerry");
//调用静态方法
User.isAdult(user.name,user.age);
User.isAdult(user2.name,user2.age);

13. Generator函数

Generator函数是ES6提供的一种异步编程解决方案,语法和传统函数完全不同.

Generator函数有2个特征:

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

function* hello(){
	yield "hello";
	yield "world";
	yield "abc";
	return "qq";
}

let h = hello();
console.log(h.next());
console.log(h.next());
console.log(h.next());
console.log(h.next());
console.log(h.next());

执行结果:

执行流程分析:

• 通过hello()返回的 h 对象,每次调用一次 next() 方法 会返回一个对象,该对象包含了 value值和done状态.
• 直到执行到 return 那一行 执行完毕, done的状态才为true,表示整个方法执行完毕.

通过 for(value of Generator-Object) 遍历一次性执行完成Generator函数

function* hello(){
	yield "aaa";
	yield "bbb";
	yield "ccc";
	return "ddd";
}

let hh = hello();

for( let v of hh){
	console.log(v);
}

• 执行结果如下:
  
• hh的数据类型是:
  

14. Babel ES6转ES5的转码器

• babel.js是一个es6转es5的转码器,使得es6的代码在浏览器和其他环境执行
• Google的traceur转码器也可以使ES6转ES5
• UmiJS(读音: 乌米) 阿里企业级开源的,可插拔的React框架

14.1 UmiJS (React框架)

UmiHS的安装

首先安装nodejs

安装tyarn(可以看作是优化的npm)

• tyarn 默认是用淘宝镜像

npm i yarn tyarn -g

安装 umi

tyarn global add umi

测试umi是否安装成功

umi

14.2 快速入门

• 项目根目录CMD窗口，使用初始化命令生成package.json文件,它是NodeJS约定的用来存放项目的信息和配置等信息的文件

tyarn init -y

• 通过umi 命令创建index.js文件
  可以看到项目根目录下的pages文件下创建好 index.js 和 index.css文件

umi g page index

• 然后可以讲ES6的代码放入到index.js中测试

15. Decorator(修饰器)

• 修饰器是一个函数,用来修改类的行为.ES2017引入这项功能,目前Babel转码器已经支持.
• 通过 修饰器 添加的 类的属性 是 静态属性

class User{
	constructor(name, age=20){
		this.name = name;
		this.age = age;
	}
}

function T(target){  //target--被修饰的对象
	console.log(target);
	target.contry = "中国";  // 通过修饰器添加的属性是静态属性 
}

console.log(User.contry);

16. 模块化

模块化定义

• 模块化就是把代码进行拆分,方便重复利用.类似Java中导包.
• js中没有包的概念,只有模块.

模块功能的命令 import和export

export 导出

class User{
	static sum = (a,b)=>{return a+b;}
}

export default User //默认导出 User

import 导入

import User from "./xxx路径/User"