ES6
let/var 区别
let是块级作用域
var全局
const也是块级
-
对于数组和对象的元素进行修改,不算作对常量的修改,不会报错
-
因为并没有修改const定义变量指向的地址(指针)
-
解构
ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值
反引号
是ES6新增的,之前是'',"",ES6新增``
-
可以包括换行符
-
''只能使用+加号连接
特性
-
可以直接出现换行符
-
变量拼接
箭头函数
-
适合与this无关的回调函数
-
不适合与this有关的回调
rest参数
-
用于获取函数的实参,用来代替arguments
1.ES5获取实参的方式
function date(){ console.log(arguments) } date('aaa','bbb','ccc') console: 是一个对象
2.ES6 rest参数(...args)
function date(...args){ console.log(args) } date('aaa','bbb','ccc') console: 是一个数组 * rest参数必须放到参数最后 function date(a,b,...args){ console.log(a); console.log(b); console.log(args); } date(1,2,3,4,5,6) console: a=1, b=2, args=[3,4,5,6]
扩展运算符[...]
[...] 扩展运算符能将[数组]转换为逗号分隔的参数序列
eg
const tf = ['a','b','c'] funtion chunwan(){ console.log(arguments) } chunwan(tf) console: 是一个数组,只有[0]为全部
const tf = ['a','b','c'] function chunwan(){ console.log(arguments) } chunwan(...tf) console: [0]:'a' [1]:'b' [2]:'c'
Symbol 基本使用(?
-
ES6引入了一种新的原始数据类型Symbol,表示独一无二的值,他是js语言的第七种数据类型,是一种类似于字符串的数据类型
-
特点
-
Symbol的值是唯一的,用来解决命名冲突的问题
-
Symbol值不能与其他数据进行运算
-
Symbol定义的对象属性不能使用for...in循环遍历,但是可以使用Reflect.ownKeys来获取对象的所有键名
-
-
javascript数据类型
-
USONB you are so niubility
-
u undefined
-
s string symbol
-
o object
-
n null number
-
b boolean
-
-
1.Symbol 基本使用
迭代器(Iterator)
-
迭代器是一种接口,为各种不同的数据结构提供统一的访问机制,任何数据结构只要部署Iterator接口,就可以完成遍历操作
-
ES6创造了一种新的遍历命令for...of循环,Iterator接口主要提供for...of消费
-
原生具备iterator接口的数据(可用for of遍历)
-
Array
-
Arguments
-
Set
-
Map
-
String
-
TypedArray
-
NodeList
-
-
-
Iterator是Symbol内置属性 Symbol.Iterator
-
使用方法
-
let Iterator = xiyouSymbol.Iterator
-
console.log(Iterator.next())
-
-
-
需要自定义迭代数据时,需要想到迭代器
生成器
-
生成器函数是ES6提供的一种一步变成解决方案,语法行为与传统函数完全不同
书写方式
function * hanshu(){ console.log('aaaaa') } let iterator = gen(); iterator.next();
yield 函数代码分隔符
function * hanshu(){ console.log('1') yield '一只没有耳朵' console.log('2') yield '一只没有尾巴' console.log('3') yield '真奇怪' } iterator.next(); iterator.next(); iterator.next(); //每次执行一部分 //遍历 for(let v of hanshu()){ console.log(v) }
⭐Promise
-
Promise 是 ES6引入的异步编程的解决方案,语法上Promise是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果
使用方法
1. resolve(成功)
//实例化Promise对象 const p = new Promise(function(resolve,reject){ setTimeout(function(){ //假设data为数据库的数据 let data = '数据库中用户数据' //调用resolve即为成功 resolve(data)//假设回调成功 },1000) }) //调用promise后,可以调用promise对象then方法 //then方法接收两个参数,第一个成功后(resolve)调用,第二个失败时调用(reject) p.then(function(value){ console.log(value) },function(reason){ console.log(reason) })
2.reject(失败)
//实例化Promise对象 const p = new Promise(function(resolve,reject){ setTimeout(function(){ //失败 let err = '数据读取失败' reject(err) },1000) }) //调用promise后,可以调用promise对象then方法 //then方法接收两个参数,第一个成功后(resolve)调用,第二个失败时调用(reject) p.then(function(value){ console.log(value) },function(reason){ console.log(reason) })
Promise封装读取文件
Promise封装Ajax请求
-
then方法的返回结果是Promise对象,对象状态有回调函数执行结果决定
Promise函数可以链式调用
p.then(value=>{ • new Promise(){ • .............. }).then(value=>{ })
-
可以通过链式调用解决回调函数地狱
Set 集合
ES6提供了新的数据结构Set(集合),它类似于数组,但成员的值都是唯一的,集合实现了Iterator接口,所以可以使用【扩展运算符】和【for...of...】进行遍历集合的属性和方法
-
size 返回集合的元素个数
-
add 增加一个新元素,放回当前集合
-
delete 删除元素,返回boolean值
-
has 检测集合中是否包含某个元素,返回boolean值
Map
ES6提供了Map数据结构,也是键值对的集合,但是键的范围不限于字符串,各种类型的值(包括对象)都可以当做键,Map也实现了Iterator接口,所以可以使用【扩展运算符】和【for...of...】进行遍历集合的属性和方法
-
size 返回Map元素个数
-
set 增加一个新元素,返回当前Map
-
get 返回键名对象的键值
-
has 检测Map中是否包含某个元素,返回boolean值
-
clear 清空集合返回undefined
class 类
ES6提供了更接近传统语言的写法,引入了class(类)这个概念,作为对象的模板,通过class关键字可以定义类。
基本上ES6的class可以看作只是一个语法糖,他的绝大部分功能ES5都可以做到,新的class写法只是让对象圆形的写法更加清晰,更像面向对象编程的语法而已
知识点
-
class声明类
-
constructor定义构造函数初始化
-
extends继承父类
-
super调用父级构造方法
-
static定义静态此方法和属性
-
父类方法可以重写
数值扩展
-
二进制和八进制
-
Number.isFinite 检测一个数是否为优先数
-
Number.isNaN 检测一个数值是否为NaN
-
Number.parseInt Number.parseFloat 字符串转整数
-
Number.isInteger 判断一个数是否为整数
-
Math.trunc 将数字的小数部分抹掉
-
Math.sign 判断一个数到底为正数 负数 还是零
对象方法扩展
-
Object.is 判断两个值是否完全相等
判断NaN和NaN时为true,而===为false
-
Object.assign(模板,覆盖的) 对象的合并(后面的把前面的覆盖掉)
-
Object.setPrototypeOf 设置原型对象
模块化
模块化规范产品
ES6之前的模块化规范有
-
CommonJS => NodeJS,Browserify
-
AMD => requireJS
-
CMD => seaJS
ES6 模块化语法
模块功能主要有两个命令构成 export 和import
-
export命令用于规定模块的对外接口
-
import命令用于输入其他模块提供的功能
1.暴露=>export
2.导入=>import
1) import
2) 解构赋值
eg
import{school,teach} from './src/js/ms.js' console.log(school)
babel(略)
ES7 新特性
ES8新特性
async 和 await
回顾异步编程解决方案
-
生成器函数
-
Promise
-
async await