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()
//
//true8.增强对象字面量
对象字面量现在可以添加__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 sayconstructor是类的构造函数，创建一个实例时会自动执行该函数
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"]
});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
