用到过的ES6

188 阅读5分钟

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