ES6学习笔记

写好的es6的代码可以通过babel-cli插件转化为es5的代码 
npm install babel-cli -g
babel之前是个专用的es6转化es5的工具，因为es6的代码在浏览器中的没法跑起来，但是现在babel的功能更加强大了，比如react的jsx也是通过babel来转化
的，所以现在babel可以转化多种类型的js代码，不再是专用的es6转es5的解析器了，解析工作由配置文件来实现。

.babelrc{
 "presets":["es2015"],
 "plugins":[]
}
touch .babelrc//创建一个配置文件.babelrc,将上述对象配置进去

因为babel是个多功能的解析器，因此想把es6转化为es5,还需要安装专门的转化es6为es5的插件babel-preset-es2015。

npm install --save-dev babel-preset-es2015

babel安装完成之后就可以用来转化了。babel es6.js -o es5.js
ES6代码的头部要引用严格模式 'use strict' 

1，template 模板字符串

let name = "叮呤";
let age = 26;
//es5拼接字符串
console.log(name+"年龄是"+age+"岁");
//es6拼接字符串
console.log(`${name}年龄是${age}岁`)

2，箭头函数

let say = name => name;
let write = (name,age) => {

  var a = 5;

  `${name} is ${age+a} years old` 

}

//相当于es5的

let say = function(name){

  return name;

}

let write = function(name,age){

  let a = 5;

  return `${name} is ${age+a} years old`

}




let r = arr.map(function(item,index,arr){
    return item+item;
})
let r1 = arr.map(item => item+item)


//箭头函数里的this关键字不会改变，并且箭头函数也不支持bind、call、apply。箭头函数里的this指向不再看运行时的this，而是看定义时的this了

let fun(){

　　setInterval(function(){

　　　　console.log(this.id);//window的id

　　})

}

let fun1 = () =>{　

　　  setInterval(function(){

　　　　console.log(this.id);//调用该方法时的this的id

　　})

}

let obj = {id:123}

fun.call(obj)//输出window的id，undefined

fun1.call(obj)//输出为obj的id，123



let objfn = {

　　id:123,

　　fun1:function(){

　　　　setTimeout(function(){

　　　　　　console.log(this.id)

　　　　})

　　},

　　fun2:function(){

　　　　setTimeout(()=>{console.log(this.id)})

　　},

　　fun3:()=>{//这里的this为window

　　　　setTimeout(()=>{console.log(this.id)//所以这里的this也为window})

　　}

}

objfn.fun1();//undefined

objfn.fun2();//123

objfn.fun3();//undefined

 

3,构造函数

在es5中没有构造函数与普通函数没有太大的区别，只用new来区分。在es6中用class表示一个真正的构造函数。

class Person{
  constructor(name){
    this.name = name;
    this.hobbies= [] 
  } 
  getName(){ console.log(this.name); }

  get hobby(){
    return this.hobbies
  }
  set hobby(hobby){
    this.hobbies.push(hobby)
　}
}
//用法
var p = new Person('叮呤')
p.hobby = 'sing'
p.hobby = 'dance'
console.log(p.habby())//['sing','dance']
p.getName();


class Student extends Person(){
  constructor(name,stuNo){
    super(name);//在子类构造函数中要先调用父类的构造函数
    this.stuNo = stuNo;
    this.name = name;
  }
  getStuNo(){
    console.log(this.stuNo);
  }
}
var student = new Student('叮呤'，’‘18);
console.log(super.getName(),student.getName())

 4,模块

在es5中，没有模块的功能，所以经常使用commonJS或者seaJs来实现。在es6中，在语言的规格上，实现了模块功能。

·export命令用于规定模块的对外接口。导出变量；导出变量为一个对象；导出函数或类（class）

·import命令用于输入其他模块提供的功能

　　1,其他js文件可以通过import命令加载这个模块

　　2，import命令接受一个对象，里面指定要从其他模块导入的变量名

　　3，模块的整体加载  import * as util from './util'

　　4，export default命令，为模块指定默认输出

　　5，export default对应的import语句不需要使用大括号，不使用export default对应的import语句需要使用大括号

　　6，一个模块只能有一个默认输出（export default）

·一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取

·如果你希望外部能读取模块内部的某个变量，就必须使用export关键字输出该变量

person.js:

var name = "张三"
var getName = function(){
      console.log(name);
}

export{name,getName}

entry.js

import {name,getName} from "./person.js"
getName();

每个模块都会有一个默认导出，即export default。导入的时候默认得到默认导出的部分

person.js:

export default print(word){
  console.log(word);
}

entry.js:

import Print from "./person.js"
Print("hello");//执行person中的print方法

5,迭代器Iterator

//原理：
let says = say(['hello','world']);
console.log(says.next());//{value:'hello',done:false}
console.log(says.next());//{value:'world',done:false}
console.log(says.next());//{value:undefined,done:true}

function say(words){
　　let i = 0;
　　return {
　　　　next(){
　　　　　　value:words[i],
　　　　　　done:i++>=words.length
　　　　}
　　}
}

 

 6，生成器generator

function* say(){
  yield "a";//将生成器认为一个数组，yield就相当于push
  yield "b";  
}
var says = say();
console.log(says.next());
console.log(says.next()); 

从ECMAScript2016（ES7）开始，ECMAScript就进入每年发布一次标准的阶段
微软的edge版本浏览器可以自动升级，那么以后js的新标准都可以及时支持。
pollyfile:在一些低版本浏览器中不支持es6,可以采用pollyfile模拟高版本浏览器（例如ajax在IE与高版本浏览器中差异就可以采用这种方法），
虽然会有所性能损耗。
淘宝移动端端页面，采用的是es6+react
js之父花了10天时间开发完成，所以js有较多缺陷，这些缺陷导致github上的js框架是最多的，但这些前端框架的生命周期不是很长，因为js在es6,es7的
发展下正在变得越来越完善。
es6的模块化定义更像php或者java，采用new的方式
在es6中实现了CMD,AMD，但是没有浏览器实现
7，变量定义
es5一般采用var来定义变量，var这种方式存在的弊端有：var没有块级作用域，定义后在当前闭包中都可以访问，如果变量名重复，就会覆盖前面定义的变量，
并且也有可能被他人修改。新的两种变量定义方式let和const。用let定义的变量具有块级作用域。用const定义的变量是静态变量，定义以后不可修改。
let声明的全局变量不会影响到window，循环时不会共享let定义的变量,同一个块作用域中重复定义会报错。const声明时一般用大写的名称，且在不同的程序
块中可以重复定义。
eg:

for(var i =0;i<3;i++){
 setTimeOut(function(){
    console.log(i);//3
 },1000)
}

for(let i =0;i<3;i++){
 setTimeOut(function(){
    console.log(i);//0,1,2 
 },1000)
}
//上述let定义的方式相当于使用了闭包
for(var i =0;i<3;i++){
;(function(i){
   setTimeOut(function(){
    console.log(i);//3
   },1000)
})
)
}

闭包的新写法：{},不再需要是;(function(){});
8，结构赋值
就是变量的批量赋值,一种模式匹配
数组的结构赋值，eg：

'use strict'//在IE6，7，8就表示一个普通的字符串，在高版本浏览器中表示用严格模式解析js。尽量使用严格模式进行开发，避免使用的插件用的严格模式，而自己代码不是严格模式导致的冲突
let arr = [0,1,2]
let a = arr[0];
let b = arr[1];
let c = arr[2];
//或
let [a, b, c] = arr//逗号后面也要加个空格

let arr2 = [1,[2.1,2.2,2.3],3]
let [a,b,c]=arr2

//不定参数
let arr3 = [1,2,3,4,5]
let [a,b,...other] = arr3//...为拓展运算符，拓展运算符不能放在中间rest element
console.log(a,b,other);//1,2,[3,4,5]

对象的结构赋值

'use strict'
let obj = {//对象是无序的，底层由哈希表实现
    a:'1',
    b:'2',
    c:'3'
}
let {x,y,z} = obj;//由于obj是非线性的，所以x,y,z的值不固定.所以采用下述方式进行对象的结构赋值
let {a:mya,b:myb,c:myc} = obj

 解构赋值与重命名

 

const offset = {x:100,y:200};
const {x:width,y:height} = offset;
//相当于x重命名为width,y重命名为height.可输出width与height查看
console.log(width);
console.log(height);

 

 

 

 利用解构组合对象和数组

const  obj1 = {a:1,b:2}
const  obj2 = {c:1,d:2}
console.log({...obj1,...obj2})//{a:1,b:2,c:1,d:2}

const flexdCenter = {alignItems:'center',justifyCenter:'center'}
<view style={{flexDirection:'column',...flexCener,flex:1}}></view>

 

 利用解构拷贝对象和数组

const obj = {a:1,b:2}
const cloneObj = {...obj}
obj === cloneObj //false
cloneObj   //{a:1,b:2}