let 和 const
var
在申明变量时,会申明提前。let
和const
在申明变量的时候,变量不会提前,不允许重复声明;const
会申明一个指针不变的变量;
console.log(A) //A is not defined
let A = 1
let A = 1
console.log(A) //1
const B = 2
B = 1 //Assignment to constant variable
const B = { a:2 }
B.a = 1 //{ a:1 }
{} 块级作用域
ES6允许块级作用域的任意嵌套;块级作用域使得获得广泛应用的立即执行函数表达式(IIFE)不在必要;
立即执行函数:立即执行函数的出现是为了不污染全局变量
let A = 1
{
{
let A = 2
};
{
let B = 3
};
}
console.log(A) //1
变量的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值
let [ x,y ] = [ 1,2,3 ] //x = 1; y = 2
let [ x, ,z ] = [ 1,2,3 ] //X = 1; z = 3
let [ x,y=2 ] = [ 1 ] //x = 1; y = undefined
let [ x,y=2 ] = [ 1,undefined ] //x = 1; y = 2
let [ x,y=2 ] = [ 1,null ] //x = 1; y = null
let { x,y } = { y:2,x:1 } //x = 1; y = 2
let { x:x,y:y } = { y:2,x:1 } //x = 1; y = 2
let { A:x } = { A:1 } //x = 1
扩展运算符
扩展运算符可以将数组和对象以展开的方式展示或者运算;
let A = [ 1,2,3 ], B = [ 2,3,4 ]
let C = [ ...A, ...B ] //C = [ 1,2,3,2,3,4 ]
let A = { a:1, b:2 }, B = { b:3, c:4 }
let C = { ...A, ...B} //C = { a:1, b:3, c:4 }
let { A,B, ...C } = { A:1, B:2, a:3 } // A = 1, B = 2, c = {a:2}
独一无二的Symbol
ES6 之后,Javascript 拥有6种基本数据类型;string number null undefined boolean symbol代表着独一无二;
let A = Symbol('king');
let B = Symbol('King');
A==B //false
// Symbol.for 会保证拥有该字符串的symbol。没有才会创建;有则返回
let A = Symbol.for('king');
let B = Symbol.for('King');
A==B //true
let a = Symbol()
let A ={
a:1,
[a]:2
}
// A.a = 1; A['a'] = 1; A[a] = 2
Set 和 Map 的数据结构
Set 数据结构类似数组,但是它的成员的值都是唯一,没有重复的值;Map 类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键
const A = new Set([1])
[ 2,3,2,3 ].forEach( n => A.add(n) )
// A = [ 1,2,3 ]
Set 实例的操作方法(用于操作数据)
add(value
):添加某个值,返回Set
结构本身。delete(value)
:删除某个值,返回一个布尔值,表示删除是否成功。has(value)
:返回一个布尔值,表示该值是否为Set的成员。clear()
:清除所有成员,没有返回值。
Set 实例的遍历方法(用于遍历成员。)。
keys()
:返回键名的遍历器values()
:返回键值的遍历器entries()
:返回键值对的遍历器forEach()
:使用回调函数遍历每个成员
let A = new Map([
['name','张三'],
['sex',"男"]
])
// {"name" => "张三", "sex" => "男"}
Map 实例的操作方法(用于操作数据)
set(key,value)
:添加某个值,返回Map
结构本身。delete(key)
:删除某个值,返回一个布尔值,表示删除是否成功。has(key)
:返回一个布尔值,表示该值是否为Map的成员。get(key)
:查找map中对应的key
值,没有则 undefined。clear()
:清除所有成员,没有返回值。
Map 实例的遍历方法(用于遍历成员。)。
keys()
:返回键名的遍历器values()
:返回键值的遍历器entries()
:返回键值对的遍历器forEach()
:使用回调函数遍历每个成员
Promise 异步编程
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大;Promise对象存在三种状态:pending
(进行中)、fulfilled
(已成功)和rejected
(已失败)
const promise = new Promise((fulfill,reject)=>{
// 可用于网络请求 等异步操作;
console.log('异步操作')
if(true){ // 可以通过条件判断执行不同的状态或只执行成功
fulfill('成功')
}else{
reject('失败')
}
})
promise.then(function(value) {
// 成功后的回调
console.log(value)
},function(error) {
// 失败后的回调
console.log(error)
})
.catch((err)=>{ // 和then 第二个参数对比,建议使用 catch 捕获
// 执行状态失败的回调(包括代码出错)
})
.finally(() => {
// 无论怎样都会执行的回调
});
Generator 异步编程
Generator
是 ES6 提供的一种异步编程解决方案;它有两个特征。一是,function
关键字与函数名之间有一个星号;二是,函数体内部使用yield表达式. Generator
函数和普通函数最大区别在于它是分段执行
function* generator(){
console.log(1)
yield 'hello'
console.log(2)
yield 'word'
console.log(3)
return 'end'
}
let gen=generator()
gen.next() //1 { value: 'hello', done: false }
gen.next() //2 { value: 'word', done: false }
gen.next() //3 { value: 'end', done: true }
gen.next() // { value: undefined, done: true }
generator 的方法
throw()
:在函数体外抛出错误。 可以在Generator
函数体内或体外使用try捕获;return()
:可以返回给定的值,并且终结遍历Generator
函数
// 状态机
var clock = function* () {
while (true) {
yield false;
yield true;
}
};
Async 语法糖
Async
可以看做为 Generator
的语法糖; await
后可以跟Promise
或其他异步操作,只有异步操作执行才会继续执行;而且Async
会返回Promise
对象;Promise
对象只有在async
体内的异步操作都完成后才会改变状态,除非return 或者体内抛出异常
async function demo(){
console.log(1)
await 'hello'
console.log(2)
await 'word'
console.log(3)
return 'end'
}
demo()
.then(val=>console.log(val))
.catch(err=>console.log(err))
.finally(val=>console.log(val))
// 1 2 3 'end' undefined 会依次执行
Class 类的定义
Es6引入了 class 这个概念, 你可以看做为这是个语法糖,他的功能 Es5 都能实现。
class Name{
constructor(x,y){ // 构造方法
this.name = x
this.sex = y
}
toString(val){
return this.x +'是'+ val
}
}
let a=new Name('李四','男性')
Es6 通过 extends 指定继承关系;
class Point { }
class ColorPoint extends Point {
constructor(){
super() //可以用来获取父级this
}
}