ES6基础笔记

常用语法

let,const,class,extends,super,arrow functions,template string,destructuring,default,rest arguments

let,const

声明变量

let,声明块级作用域

let name ='cc'

while (true){

let name ='zhc'  

const.log(name) //zhc

break

}

conse.log(name)  //cc

const  声明的是常量，不可改变

class 类,extends 继承,super

class Animal{

              constructor(){

              this.type='animal'

              }

              say(say){

              console.log(this.type + 'say' + say)

              }

}

let animal = new Animal()

animal.says('hello') //animal says hello

//继承

class Cat extends Animal{

             constructor(){

             super()

             this.type='cat'

        }

}

let cat = new Cat()

cat,says('hello')  //cat says hello

super关键字，指代父类的实例(即父类的this对象，子类必须在constructor方法里调用supre方法，否则新建实例会报错，因为子类没有自己的this对象，通过super得到this对象)  实质是先创造父类的实例对象this

arrow function

function(i) {return i+1;}  //ES5

(i)=>i+1 //ES6

or

function(x,y){

x++;

y--;

return x+y;

}  //es5

(x,y)=> {x++;y--;return x+y}  //es6

class Animal{

     constructor(){

              this.type='animal'}

     says(say){

           setTimeout(function(){

                     console.log(this.type+'says'+say)

                },1000)

            }

}

var animal =new Animal()

animal.says('hi')   //报错

报错了，因为setTimeout种的this指向的是全局对象，

传统解决方法是先this传给变量，用变量来指定

says(say){ 

       var s = this;

       setTimeout(function(){

       console.log(s.type + 'says' + say)},1000)

       }

第二种是bind(this)

says(say){

      setTimeout(function(){

      console.log(this.type + ' says ' + say)}.bind(this),1000)

}

ES6

says(say){

       setTimeout( ()=>{

             console.log(this.type + 'says' + say)},1000)

}

当用箭头函数时，函数体内的this就是定义时所在的对象，而不是使用时所在的对象，箭头函数例的this是继承外面的，所以内部的this就是外层代码块的this

template string

将大段html内容插入到文档中，

$("#reusult").append(' There are <b>${basket.count}</b> items in your basket,<em>${basket.onSale}</em> are on sale!  ');

用反引号(' ')标识起始,用${} 引用变量，而且所有空格和缩进都会被保留在输出之中

destructuring 

按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构(Destructuring)

例子;

let cat = 'ken'

let dog = 'lili'

let zoo = {cat: cat,dog:dog}

console.log(zoo)  //object {cat:"ken",dog:"lili"}

ES6

let cat = 'ken'

let dog = 'lili'

let zoo = {cat,dog}

consolg.log(zoo)

反过来可以

let dog = {type: "animal",many:2}

let {type,many} = dog

console.log(type,many)  

defalut ,rest 

default 默认,调用方法时忘记传参数，传统的加上type=type||'cat'

function animal(type){

       type=type||'cat'

        console.log(type)

}

animal()

ES6可以这样

function animal(type='cat'){

          console.log(type)

}

animal()

Rest arguments

function animals(...types){

     console.log(types)

}

animals('cat','dog','fish')    //["cat","dog","fish"]

import export

若有两个js文件，index.js和content.js,现在想在index.js中使用content.js返回的结果，

传统require.js写法

首先定义

//content.js

define('content.js',function(){

                                    return 'a cat';

                                                  } )

然后require

//index.js

require(['./content.js'],function(animal){

                                  console.log(animal); // a cat

})   

CommonJS写法

//index.js

var animal = require('./content.js')

//content.js

module.exports = 'a cat'

ES6写法

import animal from './content'

//index.js

import animal from './content

//content.js

export default 'a cat';

ES6 module其他高级用法

//content.js

export default 'a cat'

export function say(){

               return 'hello'

}

export const type='dog'

export命令除了输出变量,还可以输出函数，甚至是类（react的模块基本都是输出类）

//index.js

import {say,type} from './content'

let says = say()

console.log('the ${type} says ${says}')  //the dog says hello

输入时候大括号里面的变量名，必须与导入模块(content.js)对外接口的名称相同，如果还希望输入content.js中输出的默认值(default),可以写在大括号外面

//index.js

import animal,{say,type} from ',/comtent'

let says = say()

console.log(' the ${type} says ${says] to ${animal} ')  //the dog says hello to a cat

修改变量名

es6中 as实现一键换名

//index.js

import animal,{say,type as animalType} from './content'

let says = say()

console.log('the ${animalType} says ${says} to ${animal}')   //the dog says hello to a cat

模块的整体加载

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面

//index.js

import animal,* as content from './content'

let says = content.say()

console.log('the ${content.type} says ${says}  to ${animal} ')  //the dog says hello to a cat

通常*跟as一起使用比较合适