ES6学习系列（1）：先来记住这些常用要点

前言

七月中旬，集中时间学习使用React框架的时候，接触到了很多ES6的语法。一开始看的时候，简直一脸蒙蔽，后面对看不懂的代码在google之后知道基本都是ES6的语法的使用。那么，我的学习领域肯定也得跟进扩展到ES6啦。现在，ES6也是前端工作者的基本标配了。
当然，我们可以按照阮一峰大大的教程来详细学习，http://es6.ruanyifeng.com/
但是考虑到时间成本，肯定先挑重点常用的来学习和记忆。
七月底的时候整理了ES6的几个比较常用和重要的语法，今天修整发布下，当然是配合栗子来记录的。
后面打算，对ES6的学习整理为一个系列，发布在博客记录，这是系列记录第一篇~嘻嘻。

目前ES6的支持情况：

使用gulp搭建一个ES6的开发转换环境，以作学习测试使用：
https://segmentfault.com/a/1190000004394726?utm_source=APP&utm_medium=iOS&utm_campaign=socialShare

let和const

对于var，我们通过例子来知晓var的变量影响的范围：
栗子1：
这个例子可以看到var a变量提升到全局，同名变量会被覆盖：

function aa(){
    var a=1;
    console.log(a); //1
    if(true){
        var a=2
    };
    console.log(a) //2
}

这是闭包中函数内的嵌套函数的使用情况下，嵌套函数内定义为var b的变量的变量提升程度的例子。可以看到，只提升到嵌套函数的顶部而已，没有再往上升一级。

function test() {
    var b=1;
    function a() {
        var b = 2
        console.log('闭包中的b:',b)
      
    }
    console.log('全局变量的b',b)
    return a;
}
var result=test();
result();

配合这个例子看：

function test() {
    var b=1;
    function a() {
      if (true) {
        var b = 2
        console.log(b)
      }
      return a;
    }
    console.log('b: ', b)
}
test() //b:1
let

let的用法和var类似，区别就是let所声明的变量，只在let命令所在的代码块内有效。也就是，let声明的变量不会提升，被锁在当前块。
看下面一系列的例子:

function test() {
    if(true) {
      console.log(a)//TDZ，俗称临时死区，用来描述变量不提升的现象
      let a = 1
    }
}
test()  //a is not defined

function test() {
    if(true) {
      let a = 1
    }
     console.log(a)
}
test()  //a is not defined

正确的使用就是，在let声明变量后，紧接着在同个作用域下使用：

function test() {
    if(true) {
      let a = 1
      console.log(a)
    }
}
test() // 1
const

const是声明常量用的。声明之后的常量，是read only，而不能被赋值的，否则会报错。

const  a=233;
a=666;
console.log(a)  //

而如果我们用const来声明一个对象Object ,那么这种情况下，反而可以修改对象内属性的值。记住const常量修改自身的值不可以，而修改test.a的值可以：

const test={
  a:1
}
test.a=2
console.log(test)

let和const的异同点：
相同点：let和const都只在当前块的作用域内有效而已，不会变量提升。
不同点：let声明的变量是可以重复赋值的，而const声明的常量不能被赋值。

在这里延伸一道经典面试题：
正常我们使用的for循环：

for(var i = 0; i < 5; i++) {
    console.log(i) //0,1,2,3,4
}

如果在其中加入回调：

for(var i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i) //5, 5, 5, 5, 5
  }, 0)
}
console.log(i) //5 i跳出循环体污染外部函数

将var改成let之后


for(let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i) // 0,1,2,3,4
  }, 0)
}
console.log(i)//i is not defined i无法污染外部函数
应用：

当希望变量保证不被恶意修改，使用const。例如在react中，props传递的对象是不可更改的，所以使用const声明；
声明一个对象的时候，推荐使用const；
当需要修改声明的变量值时，使用let，var能用的场景都可以使用let替代。

解构赋值

函数的扩展

rest参数

rest参数就是“扩展运算符...”。

let a=[1,2,3];
let [c,...d]=a;
console.log(c) //1
console.log(d) //2,3

注意：rest参数只能作为最后一个参数，之后不能有其他参数。否则会报错：

let a=[1,2,3];
let [...d,c]=a;

console.log(d) //报错：SyntaxError:Rest element must be last element in array

函数的length属性，不包括rest参数
(function(a){}).length //1
(function(a,...b){}).length //1

一个我觉得很好的数组push的例子：

function push(array,...items){
  items.forEach(function(item){
     array.push(item);
     console.log(item);
  });
  console.log(array);
}
var a=[];
push(a,1,2,3) 
//1,2,3
//[1,2,3]

另一个使用res参数来取代arguments对象的例子：

const pa=(...args) =>{
   console.log(args)
   return args.reduce((pre,cur)=>{
     return pre+cur;
   },0)
};
pa.apply(this,[1,2,3,4]) //10

在这个例子中做一个知识点延伸就是reduce()方法的使用。
Array.reduce(callback,[initialValue])
就是先得是一个数组来使用这个reduce()方法，然后reduce方法会对数组中的每一个元素都调用一次callback函数。initialValue是可填项，如果填了的话，就传入给callback函数中，作为累加的初始项。
而callback函数就是比如：

function add(first,second){
   return first+second;
}

学了这个reduce方法后，以后可以替代使用for循环来做累加的操作了。

所以这个例子就等同于：

const pa=function(...args){
   console.log(args)
   return args.reduce(function(pre,cur){
     return pre+cur;
   },0)
}
pa.apply(this,[1,2,3,4])
箭头函数

学习这个箭头函数，只需要谨记：

var f=v =>v;

等同于

var f=function(v){
   return v;
 };

如果函数没有参数或有多个参数时，那么就需要写一个圆括号()

var a=()=>5;
//等同于
var a=function(){
   return 5;
}

var sum=(a,b) =>{
  return a+b;
}
//等同于
var sum=function(a,b){
   return a+b;
}

const s=function(){
   return {
       a:'hello world'
   }
}

等价于

const s=()=>{
  return {
       a:'hello world'
   }
}

就等于后面用{}括住的代码块，直接就是function()后面跟着这一块，不用用{}再括第二次。

箭头函数这块，我觉得阮一峰大大的教程里的例子就非常能让人理解了，直接看他的说明教程中的例子就行。具体摘抄来看下：
箭头函数使用起来很简洁对不对，当我们用在回调函数里的时候，就更觉得简洁了。
看这个例子：

[1,2,3].map(function(x){
   return x*x;
})

如果是用箭头函数来写：

[1,2,3].map(x=>x*x)

哎呀，好简洁对不对~~~~
这个例子，我看了又可以延伸一个知识点了：map()方法的使用。
map()方法在MDN上的解释：对数组的每个元素调用定义的回调函数，并返回包含结果的数组。
这样写言简意赅，一目了然这个方法的用法。
就是把[1,2,3]这个数组中的每个元素，执行x*x，得到相应的结果，组成一个数组返回，结果就是[1,4,9]

箭头函数中this的指向

重点要说箭头函数的this指向。从此不用再使用var _this=this的用法来重新修改this的指向了。
所以有人会说箭头函数，是一种语法糖，因为使用箭头函数时，使用者就不用去确认不用情形使用下this的指向了。
具体也是看阮一峰教程的例子来理解：
函数体内的this的指向，是定义时所在的对象

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}
var id = 21;
foo.call({ id: 42 });
// id: 42

之前学this篇的时候，我写的博客中专门说了，setTimeout()方法和 setInterval()中this的指向是全局对象window，尽管如果setTimeout()方法是在dom元素的事件下使用的，也不会指向dom元素对象本身。
所以这个例子中，按这个道理，setTimeout()中的this是指向全局对象window的，那this.id按理应该是等于全局的id变量21才对。但是使用箭头函数时，this的指向指向了foo这个函数对象。所以this.id对应的就是通过call()方法传入的id的值42，输出为id:42

看阮一峰教程里写的两个对比例子：

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0

一样道理， setInterval()方法是箭头函数的写法的话，就指向定义所在的Timer函数对象，那么this.s1就取this.s1=0的值。而setInterval()函数是普通写法的话，尽管是包裹在Timer函数下定义的，但this指向运行时所在的作用域（即全局对象）。但是我们看全局下没有timer.s2的定义值，所以就一次都不更新。所以，3100毫秒之后，timer.s1被更新了3次，而timer.s2一次都没更新。

再看这个DOM 事件的回调函数封装在一个对象里面的例子，对回调函数使用箭头函数的写法的好处：
正常使用ES5的写法，我们需要使用var _this=this，才能在document对象的点击事件的函数内调用doSomething这个属性。

var handler = {
  id: '123456',
  init: function() {
     var _this=this
    document.addEventListener('click',
      function(event){
          _this.doSomething(event.type), false);
      }
  },
  doSomething: function(type) {
    console.log('Handling ' + type  + ' for ' + this.id);
  }
};

现在换成箭头函数的写法，我们就可以摒弃_this的借位写法了：本来init()方法中的this.doSomething这一行的this是会指向document对象的，但使用箭头函数后是指向handler对象了。

var handler = {
  id: '123456',

  init: function() {
    document.addEventListener('click',
      event => this.doSomething(event.type), false);
  },

  doSomething: function(type) {
    console.log('Handling ' + type  + ' for ' + this.id);
  }
};

class的使用：取代构造函数实例化得到对象的做法

基本使用

在JavaScript中，我们面向对象的写法，在ES5规范下，都是使用构造函数，然后实例化这个构造函数，然后来得到对象的。现在ES6引入了其他语言中的class概念来实现面向对象，来等价于我们以往习惯的构造函数的写法：
例如：下面这个构造函数：

funtion constr(){
    this.a=1;
    this.b=2;
}
constr.prototype.init=function(){
   console.log(this.b)
};
var sum=new constr();
sum.init;

可以使用class语法，等价转化为：

class constr {
  constructor() {
    this.a=1;
    this.b=2;
  }
  init() {
    console.log(this.b);
  } //注意有个括号
}
let sum  = new constr ();
sum.m()  //2
继承

Class通过extends关键字实现继承，和ES5中的原型链继承不一样，相对简洁很多。
例如：

class Point{
}
class ColorPoint extends Point{
}

子类ColorPoint 继承了父类Point的所有属性和方法，等于就是把父类Point中的所有属性方法都复制到子类ColorPoint 中

重点是要结合super()关键字使用。记住下面的话：子类必须在constructor方法中调用super方法，否则新建实例时会报错。

class Point{
}
class ColorPoint extends Point{ 
    constructor(){
       
    }
}
let cp=new ColorPoint (); //ReferenceError

因为子类没有自己的this对象，而是继承父类的this对象，然后对其加工的。如果不用super()方法，那么子类就得不到this对象。

再说一点，在子类的构造函数中，只有调用super之后才能使用this关键字，否则报错。
在下面这个例子中，子类的constructor方法没有调用super之前，就使用this关键字，结果报错，而放在super方法后的this.color就正确。

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

class ColorPoint extends Point {
  constructor(x, y, color) {
    this.color = color; // ReferenceError
    super(x, y);
    this.color = color; // 正确
  }
}

最后来说下，生成子类实例的写法，也是一样使用new的方式来生成实例,传入数值：

let cp=new ColorPoint (25,8,'green')

然后看例子可知，cp这个实例继承自子类，也继承自父类：

cp instanceof ColorPoint  //true
cp instanceof Point //true
super关键字的使用

super关键字，当做函数使用和当做对象使用，两种情况下的用法完全不同。
这点待我补充。

Module

JavaScript是一直没有模块（module）体系的，在浏览器端没办法实现I/O。而前端工作者们为了适应大型复杂的前端项目所需的模块化需求，逐渐发展出前端模块化的规范：commonJS、AMD和CMD。（这一块的知识，我也专门写了一篇前端模块化规范发展的记录博客）。这些规范，无非都是使用import、require、export这一类的方法，来讲一个大程序拆分成相互依赖的小文件。
而到ES6，就终于实现了模块功能，等于JavaScript语法上就原生支持模块的实现方式了，而不必再依赖框架（例如requireJS框架）来转换过渡了。
ES6的Module有两个关键字import和export。export是将本身的属性方法给暴露出去，给其他模块使用。而一个模块想使用其他模块中的属性方法时，就使用import
具体看栗子：
在lean.js中将属性a的值传递出去：

export let a=1;

然后我们想在init.js模块中使用a的值：

import {a} from 'lean.js';  //或具体为lean.js所在的文件路径
console.log(a) //1

这其中实现的本质是，前端是无法实现I/O的，所以import和export的使用，就是需要借助webpack或gulp这样的配置环境，使用babel.js插件，将其转化为commonJS中的require，在node.js服务端运行的。

Promise

下一篇继续讲这个知识点。

Generator

下一篇继续讲这个知识点。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 195,898评论 5赞 462
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 82,401评论 2赞 373
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 143,058评论 0赞 325
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,539评论 1赞 267
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,382评论 5赞 358
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,319评论 1赞 273
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,706评论 3赞 386
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,370评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,664评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,715评论 2赞 312
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,476评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,326评论 3赞 313
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,730评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,003评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,275评论 1赞 251
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,683评论 2赞 342
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,877评论 2赞 335

推荐阅读更多精彩内容

  • JavaScript(ES6) - 函数的扩展
    函数参数的默认值 基本用法 在ES6之前，不能直接为函数的参数指定默认值，只能采用变通的方法。 上面代码检查函数l...
    呼呼哥阅读 3,341评论 0赞 1
  • ES6的新特性
    一、ES6简介 ​ 历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6（亦称 ...
    一岁一枯荣_阅读 6,037评论 8赞 25
  • ES6学习笔记一 （块级作用域、函数）
    第一章 块级作用域绑定 let 和 const 都是不存在提升，声明的都是块级标识符都禁止重声明 每个const声...
    NowhereToRun阅读 1,570评论 0赞 2
  • ES6入门摘录笔记(二)
    三，字符串扩展 3.1 Unicode表示法 ES6 做出了改进，只要将码点放入大括号，就能正确解读该字符。有了这...
    eastbaby阅读 1,497评论 0赞 8
  • 第3话
    我生命中有两个个很重要的两个人。她们一个是朋友中亲人般的存在，一个是亲人中朋友般的存在。 现在她们在烦恼同一个问题...
    丢矣阅读 152评论 0赞 0