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}