ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,早已经在2015年6月正式发布了。虽然发布了,但并不是所用的浏览器都是兼容ES6语法的。目前使用的还大多是ES5的语法,使用ES6语法一般会与webpack等管理工具一起使用,使用(例如babel)帮助进行ES6语法到ES5语法的转化。
当然,作为新一代的标准,各大浏览器也在努力的兼容它。
总结一下ES6的新特性
1.增加新的定义变量关键字——let、const
let —— 使用块级作用域
以前js只有全局作用域和函数作用域,但es6中有块级作用域,let定义的变量只能在块级作用域内使用
{
let name = "firewithwind"
}
console.log(name)//报错,name只能在对象内部使用
const —— 声明常量
const可以定义一个常量
const name = "firewithwind"
name = "othername"//报错,常量不能被重新赋值
const限制的是分配值的动作,如果是引用类型,指针不变,指向的变量内容是可变的
const name = []
console.log(name)
name.push("a new name")
console.log(name)
2.解构
以前的方法
function returnName() {
return ['a', 'b', 'c']
}
var a = returnName()
var name1 = a[0], name2 = a[1], name3 = a[2]
ES6方法
function returnName() {
return ['a', 'b', 'c']
}
let [name1, name2, name3] = returnName()
解构对象
function returnName() {
return {a: "a", b: "b", c: "c"}
}
let {a: name1, b: name2, c: name3} = returnName()
console.log(name1, name2, name3)
3.字符模板
以前js连接字符串用+,ES6使用的字符模板,用`..${}.`来表示
let name1 = "food", name2 = "drink"
let want = `I wantsome ${name1} and ${name2}`
console.log(want)
带标签的模板,标签的表现实际是一个函数,接收两部分参数
let name1 = "food", name2 = "drink"
let want = map`I want some ${name1} and ${name2}`
function map(strings, ...values) {
let result = ''
console.log(strings)
console.log(values)
for (var i = 0; i < values.length; i ++) {
result += strings[i]
result += values[i] + "(let me see)"
}
result += strings[i]
return result
}
console.log(want)
//["I want some ", " and ", "", raw: Array(3)]
//["food", "drink"]
//I want some food(let me see) and drink(let me see)
4.新的字符串方法——startsWith, endsWith, includes
let string = "Today is a good day"
console.log(string.startsWith("Today"))
console.log(string.endsWith("day"))
console.log(string.includes("is"))
5.参数默认值
ES6中函数定义时可以给参数指定默认值,如果不传递该参数,则使用默认值
function printValue(name, age=120) {
console.log(`name is ${name} and age is ${age}`)
}
printValue("fire")
//"name is fire and age is 120"
6.新的操作符“…”——展开或合并
展开
let name = ['a', 'b']
console.log(name)//["a", "b"]
console.log(...name)//a b
可以看到将name数组展开输出
一般用在将一个数组的元素整合到另一个数组
合并
function returnName(name, ...others) {
console.log(name)
console.log(others)
}
returnName("a", "b", "c", "d")
//a
//["b", "c", "d"]
可以看懂除了name指定接收的参数,其他参数被合并到others数组里面
通常用与函数接收参数,表示其他参数接收到该数组内
7.箭头函数
let fun = rest => rest + " is a arg"
console.log(fun("name"))
//
//"name is a arg"
//"如果有多个参数,要用()包括起来"
let fun2 = (a, b) => a === b
console.log(fun2("name", 'name'))
//
//true
let fun3 = (a, b) => {
console.log(a === b)
}
fun3()
//
//true
8.增强对象字面量
对象字面量现在可以添加__proto__属性,了解js原型结构的都知道,在创建一个对象的实例时,该实例会自动添加__proto__属性,该属性指向构造函数的原型(prototype),相当于原型继承
let Person = {
say: function() {
console.log("I can say")
}
}
let yperson = {
color: "yellow",
__proto__: Person,
walk: function() {
console.log("I can walk")
}
}
yperson.say()
对象字面量的方法也不用使用function关键字
let person = {
say() {
console.log("I can say")
}
}
person.say()
9.迭代器——generator
自己实现一个迭代器
// 接收一个数组
function chef(arr) {
let i = 0
return {
next() {
let done = (i >= arr.length)
let value = (!done) ? arr[i++] : undefined
return {
done: done,
value: value
}
}
}
}
let test = chef(['a', 'b'])
console.log(test.next())
console.log(test.next())
console.log(test.next())
使用生成器生成一个迭代器
function* chef(arr) {
for (let i =0; i < arr.length; i ++) {
yield arr[i]
}
}
let test = chef(['a', 'b'])
console.log(test.next())
console.log(test.next())
console.log(test.next())
10.类的定义——class
calss一直是es5的保留字,在es6中将class正式使用,可以创建类
class Person{
constructor(name) {
this.name = name
}
say() {
console.log("I can say")
}
}
let p = new Person("a name")
p.say()
//
//I can say
constructor是类的构造函数,创建一个实例时会自动执行该函数
es6的类中定义了两个方法set 和 get,用于对类的变量进行操作
class Person{
constructor(name) {
this.name = name,
this.day = []
}
set days(d) {
this.day.push(d)
}
get days() {
return this.day
}
say() {
console.log("I can say")
}
}
let p = new Person("a name")
p.days = "1"
p.days = "2"
console.log(p.days)
添加静态方法:不需要实例化就可使用的方法——static
class Person{
constructor(name) {
this.name = name,
this.day = []
}
set days(d) {
this.day.push(d)
}
get days() {
return this.day
}
say() {
console.log("I can say")
}
static eat() {
console.log("I can eat")
}
}
Person.eat()
继承——extends
class Person{
constructor(name) {
this.name = name,
this.day = []
}
set days(d) {
this.day.push(d)
}
get days() {
return this.day
}
say() {
console.log("I can say")
}
static eat() {
console.log("I can eat")
}
}
class YPer extends Person{
constructor(name) {
super(name)
}
}
let AChinese = new YPer("lili")
AChinese.say()
11.异步——Promise
Promise用来实现函数的异步执行,他有三个状态:
Fulfilled——执行成功
Rejected——失败
Pending——初始状态
先看一下Promise对象的构建形式
let step = new Promise(function(resolve, reject) {
if(true) {
resolve(confident)
} else {
reject("error")
}
})
Promise接收以一个接收一个参数的函数,该函数包含两个方法:resolve和reject
如果条件满足则执行resolve方法,否则,执行reject
Promise支持链式调用,then方法和catch方法
then方法接收两个函数作为参数,第一个函数为成功回调,第二个为失败回调,该函数返回一个Promise对象,所以可以链式调用
function step(confident) {
returnnew Promise(function(resolve, reject) {
if(confident) {
resolve(confident)
} else {
reject("error")
}
})
}
step(true).then(function(mes) {
console.log(mes)
}, function(err) {
console.log(err)
})
catch是接收失败回调
function step(confident) {
return new Promise(function(resolve, reject) {
if(confident) {
resolve(confident)
} else {
reject("error")
}
})
}
step(false).then(function(mes) {
console.log(mes)
}).catch(function(err){
console.log(err)
})
Promise.all 和 Promise.race
Promise.all接收一个Promise对象的数组为参数,then里面传递结果数组
var p1 = new Promise(function (resolve) {
setTimeout(function () {
resolve("Hello");
}, 3000);
});
var p2 = new Promise(function (resolve) {
setTimeout(function () {
resolve("World");
}, 1000);
});
Promise.all([p1, p2]).then(function (result) {
console.log(result); // ["Hello", "World"]
});