var、let、const
- var声明的变量在其作用域之外也会生效,且有变量提升.
- let声明的变量,只在当前作用域内生效
- const用来声明常量,不能重新赋值
- 尽量使用let和const,避免变量污染,节省了储存空间
模板字符串``
- 在ES6中输入字符串的时候可以用反引号``包裹字符串,字符串中需要用变量时用${变量}即可,比
''
包裹字符串更加灵活方便
扩展
函数的扩展
- 可以为参数设置默认值
function Person(name='jinx',age=18){
this.name = name;
this.age = age;
}
let p = new Person()
p//{name:'jinx',age:18}
- 箭头函数
- 单个参数时
var f = a =>a f(2) //输出2
- 无参数时
var f = () => 2 f() //输出2
- 有多个参数
var f = (arg1,arg2,...)=>{ console.log(arg1) console.log(arg2) ... } f(1,2,3)//输出1,2,3...
- 函数体内的 this 对象就是定义时所在的对象,而不是使用时所在的对象
- 箭头函数不可以当做构造函数,也就是说不可以用new命令
- 箭头函数不存在arguments对象,可以用rest参数代替
- 不可以使用 yield 命令,因此箭头函数不能用作Generator 函数。
- 绑定this
- 函数绑定运算符是井排的双 冒号(
::
),双冒号左边是一个对象,右边是一个函数 。该运 算符会自动将左边的对象作为上下文环境(即 this 对象〉绑定到右边的函数上。
foo :: bar ; //等同于 bar . bind(foo) ; foo : : bar ( ... arguments) ; //等同于 bar.apply(foo , arguments) ; //如果双冒号左边为空,右边是一个对象的方法,则等于将该方法绑定在该对象上 let log= ::console .log; //等同于 var log = console .log.bind(console) ;
- 函数绑定运算符是井排的双 冒号(
数组
- 扩展运算符
...
console.log(...[1, 2, 3]); // 1 2 3 console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5
- 对象扩展
- 属性名表达式
- ES6允许字面量定义对象时,把表达式放入
[]
内
let lastWord = 'last word'; const a = { 'first word': 'hello', [lastWord]: 'world', ['end'+'symbol']: '!' }; a['first word'] // 'hello' a[lastWord] // 'world' a['last word'] // 'world' a['endsymbol'] // '!'
- 对象扩展运算符
...
let z = { a: 3, b: 4 }; let n = { ...z }; // 关键点 n // { a: 3, b: 4 }
解构赋值
- 解构可以理解就是一个作用:简化你变量赋值的操作。
- 数组场景
let [name,job] = ['xiaoming','student']
console.log(name)//xiaoming
//本质上这种写法属于模式匹配,只要等号两边模式相同,左边就会被赋予对应的值
let [ , ,third]=['a','b','c']
console.log(third)//'c'
let [head,body,...tail] = [1,2,3,4,5]
console.log(tail)//[3,4,5]
//也可以使用默认值。但是默认值生效的前提是:ES6内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。
let[x,y='b']=['a'] //x='a',y='b'
let[z=1] = [undefined] //z=1
let[k=1] = [null] //null
- 对象场景
const person = {
name:'xiaoming',
job:'student'
}
let{
name,
job
}
console.log(job)//student
//有时赋值为变量时,可能出现以下情况
let name='xiaoming',job='student'
let obj = {
name:name,
job:job
}
//此时可以简写为
let obj = {
name,
job
}
//对象也可以用默认值,前提同样是,对象的属性值严格等于undefined
var {x=3} = {x:undefined} //x:3
var {y=3} = {y:undefined} //null
- 字符串场景
//字符串之所以能被解构赋值,是因为此时将字符串转换成了类似数组的对象
const [a,b,...arr] = 'hello'
console.log(arr)//["l","l","o"]
let {length:len} = 'hello'
console.log(len) //5
。
promise
- Promise 是异步编程的一种解决方案: 从语法上讲,promise是一个对象,从它可以获取异步操作的消息;从本意上讲,它是承诺,承诺它过一段时间会给你一个结果。 promise有三种状态:pending(等待态),fulfiled(成功态),rejected(失败态);状态一旦改变,就不会再变。创造promise实例后,它会立即执行。
- promise的用途
- 回调地狱,代码难以维护, 常常第一个的函数的输出是第二个函数的输入这种现象
- promise可以支持多个并发的请求,获取并发请求中的数据
- 这个promise可以解决异步的问题,本身不能说promise是异步的
- 基本用法
let p = new Promise((resolve,reject)=>{
//异步操作,用settimeout模拟
setTimeout(()=>{
let num = Math.ceil(Math.random()*10); //生成1-10的随机数
if(num<=5){
resolve(num);
}
else{
reject('数字太大了');
}
},2000)
})
p.then((data)=>{
//运行成功
console.log('resolved',data)
},(err)=>{
//运行失败
console.log('rejected',err)
})
- promise 有两个回调函数 第一个是成功的回调函数 resolve 第二个是失败的回调函数 reject
- 你也可以return 一个promise 回调函数相同
类Class
- 不再需要用构造函数来模拟类了~
class Person{
sayHello(){
console.log('Hi!');
}
}
- constructor方法
- constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法,一个类中必须有construtor方法,如果没有显式定义,一个空的constructor方法会默认添加。
继承
- ES6新增了
extends
关键字,实现继承更加方便和清晰了
class Point{
constructor(x,y){
this.x = x;
this.y = y;
}
}
class ColorPoint extends Point{
constructor(x,y,color){
this.color = color
}
}
//这样写并不能继承构造函数中的属性值和方法,需要加上super关键字:
class ColorPoint extends Point{
constructor(x,y,color){
super(x,y)//调用父类的construtor(x, y),相当于ES5中的call。注意的是,super要放在子类构造函数的第一行
this.color = color
}
}
let cp = new ColorPoint(25,8,'green')
模块化module
- 在ES6之前,没有统一的模块化方案,各个社区都有一些方案,主流的有AMD(RequireJS)、CMD(SeaJS)以及CommonJS
- ADM/CMD是用于浏览器,commonjs用于服务器
- ES6在语言标准的层面上,实现了模块功能,且更加简洁实用,成为了通用的模块化方案
- 详情可见文档
关于ES6,阮一峰大佬的文档非常详细,建议多读多看ES6