ES6基础教程，常见特性随笔
自从2015年6月17日，ECMAScript 6发布正式版本，即ECMAScript 2015发布以来，ES6获得越来越多JS开发者的喜爱，方便简洁。添加了更多的功能，js前景一片大好。下面简单的介绍一下ES6的基础特性，希望可以帮助大家简单的了解ES6。也顺便加固下我的基础。
正文：
1.let
语句声明一个块级作用域的本地变量，并且可选的将其初始化为一个值。
let 于 var 区别：
主要区别在于 let块级作用域， var却是在整个函数都是可见的。
1 var vararr=[],letarr=[]; 2 for(var i = 0; i < 10; i++) { 3 var a={ 4 testFun:function(){ 5 alert(i); 6 } 7 } 8 vararr.push(a); 9 } 10 vararr[6].testFun();//10 11 for(let i = 0; i < 10; i++) { 12 var a={ 13 testFun:function(){ 14 alert(i); 15 } 16 } 17 letarr.push(a); 18 } 19 letarr[6].testFun();//6
这个例子用var的话需要用闭包实现，具体就不写了。
2.const
用法：定义常量；一旦定义，你只能去读取它，不要进行其他操作。
这个就很简单了，常量声明之后必须初始化不允许修改值。
3.箭头函数
语法：(这里写参数列表)=>{这里写函数返回值}，这个函数永远是匿名的。this 指向函数所在的上下文环境没有 arguments 对象。
首先减少了匿名函数代码量，锁定了this（js里面很容易跑偏的this）
1 var obj = { 2 test: function () { 3 setTimeout(function () { 4 console.log(this) 5 }); 6 } 7 } 8 obj.test();//window 9 var obj2 = { 10 func: function() {}, 11 test: function () { 12 var that = this; //此时的this就是obj对象 13 setTimeout(function () { 14 console.log(that) 15 }); 16 } 17 } 18 obj2.test();//Object(obj2) 19 //es6 20 var obj3 = { 21 func: function() {}, 22 test: function () { 23 setTimeout(() => {console.log(this)}); 24 } 25 } 26 obj3.test();//Object(obj3)
4.解构赋值
1.数组得解构赋值
“模式匹配”为变量赋值；var [a, b, c] = [1, 2, 3];
不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。
let [a, [b], d] = [1, [2, 3], 4]; a // 1 b // 2 d // 4
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
1 var { bar, foo } = { foo: "aaa", bar: "bbb" }; 2 foo // "aaa" 3 bar // "bbb" 4 5 var { baz } = { foo: "aaa", bar: "bbb" }; 6 baz // undefined 7 8 //也可以显示的转换 9 var { foo: baz } = { foo: 'aaa', bar: 'bbb' }; 10 baz // "aaa" 11 //也可以分解字符串（数组） 12 var [a, b, c, d, e] = 'hello'; 13 a // "h" 14 b // "e" 15 c // "l" 16 d // "l" 17 e // "o" 18 //提取json数据，解构赋值对提取json对象中的数据，尤其有用。 19 20 var jsonData = { 21 id: 42, 22 status: "OK", 23 data: [867, 5309] 24 }; 25 26 let { id, status, data: number } = jsonData; 27 28 console.log(id, status, number[1]);
5.函数参数的默认值
不再需要我们在函数里面进行判断复制初始值。减少代码量提高了代码的可读性,增加了代码的可控性。
1 function test(a,b,c,d){ 2 a=a||1; b=b||false; c=c||"" ;d={}; 3 } 4 function test(a=1){ 5 a; 6 }
6.rest&spread 函数自动匹配参数
rest表述性状态传递，感觉用语言不好概括，看下栗子吧。
1 function fn(...re){ 2 console.log(re); 3 } 4 5 fn(1,2,3,4);//[1,2,3,4] 6 7 8 function fn(normal,...re){ 9 console.log(re); 10 } 11 12 fn(1,2,3,4);//[2,3,4]
spread能把数组展开
1 function fn(...re){ 2 //这里 spread 就把一个数组展开了 3 ott(...re); 4 } 5 6 fn(1,2,3,4);//10 7 8 function ott(a,b,c,d){ 9 console.log(a+b+c+d); 10 }
7.模板字符串
模板字符串是一种新的用来拼接字符串的方式，只是用来拼接字符串。
let firstname = 'lao',lastname = 'wang'; let str = `my mane is ${firstname} ${lastname}`; console.log(str);// my name is lao wang
8.类
用法 class ClassName{ constructor(){ //当我们在实例化一个对象的时候，首先会执行这个构造函数，这意味 //着，刚你在 new 一个类的时候，你可以在 constructor 里面做 //一些初始化的事情 } }
1 class Animal { 2 constructor(a,b,c){ 3 this.a = a; 4 this.b = b; 5 this.c = c; 6 } 7 8 move(){ 9 console.log('i can move'); 10 } 11 } 12 13 //实例化一个类 14 let dog = new Animal(1,2,3); 15 16 console.log(dog.a,dog.b,dog.c);// 1 2 3 17 18 class Human extends Animal{ 19 constructor(age){ 20 21 //super 的意思是它会执行一个父类的构造函数，然后你可以在这里 22 //面给父类的构造函数赋值。你可以给它三个参数，你也可以什么都不 23 //给，但是你要执行一下 super 这个函数让父类的构造函数执行一下 24 //就可以了 25 26 super(1,2,3); 27 this.age= age; 28 } 29 30 //你可以覆盖掉父类的方法 31 move(){ 32 console.log('i can run'); 33 } 34 } 35 36 let jim = new Human('18'); 37 console.log(jim.age);//18 38 console.log(jim.a);//1 39 jim.move();// i can run
jim:
9.模块化
js 模块化，类似于后台的借口
a.js
1 //import 后面的这个变量是用来接受你导入的模块的默认导出值的，你可以自定义不同的名字,花括号就是用来拿到 export 里面导出的内容的，花括号里面名字必须和 export 里面的名字一样 2 import fnnn,{fn1,fn2} from './b.js'; 3 4 fnnn()//fn
5 fn1();//fn1
6 fn2();//fn2
b.js
function fn1(){ consolo.log('fn1'); }` function fn2(){ console.log('fn2'); } //export 这是 ES6 的模块化规范里面用来暴露出口的关键字 export { fn1, fn2 } export default function fn(){ console.log('fn'); }
commonJS 的模块化规范
a.js
1 const fnnn = require('./b.js'); 2 3 fnnn.fn1();//fn1 4 fnnn.fn2();//fn2
b.js
function fn1(){ consolo.log('fn1'); }` function fn2(){ console.log('fn2'); } module.exports = { fn1, fn2 }