美文网首页
ES6学习记录

ES6学习记录

作者: 寿_司 | 来源:发表于2016-03-13 21:29 被阅读0次

参考资料
阮一峰《ES6标准入门教程》

  • 通过node命令行可以查看node已经实现的ES6的新特性
  • 好多新特性在浏览器等仍然无法实现,但是可以通过工具,加载库文件等将ES6编译成ES5,从而使之可以执行。
  • 声明变量的let命令:
    • 变量的作用域在代码块中,很好的解决了var变量没有代码块作用域的问题典型例子:var必须依靠闭包才能够输出循环中1~10的数字
    • 不能重复赋值
    • let声明出来的变量没有变量提升的特性,所以必须在声明之后才能够使用
    • 存在暂时性死区,let声明的变量被绑定在一个封闭的代码块中,并且外部以前声明过的语句对他产生不了任何影响,在代码块中let声明之前,使用typeof temp;这样是会报错的,很好的提高了程序员的编码习惯,一定是先声明后使用

块级作用域:好处是:解决了循环中声明变量泄露污染全局的问题,解决了函数中内部变量可能会覆盖函数外部变量的问题。坏处是:代码块中的函数无法被外界所引用,需要改变编码时候的思维。

  • const命令:
    • const声明常量,声明时必须赋初值
    • 不能重复赋值。
    • const声明的常量没有变量提升的特性,同样只在代码块中起作用
    • const声明的常量如果是一个引用类型的话,保存的是地址,那个地址中保存的数据并没有被固定,想要固定一个对象的值的话可以使用Object.freeze()方法来实现。

跨模块属性:具体方法类似于python导入方法通用,import
全局对象的属性:let,const,class定义的属性不直接属于全局对象window或者global。(ES6中新增好多中定义属性的关键字)

  • 数组的解析赋值:一一对应的赋值,对var,let、
    ,const均适用,形式要对应好,允许嵌套赋值,允许有默认值,允许有惰性函数值,允许有声明过的变量值传入,解析不成功就会出现undefined。
  • 对象的解析赋值:
    • 对象没有次序,注意的是属性名字的照应
    • 被赋值的是变量,不是模式
    • 对象名和变量名不一样时需要特殊的定义模式
    • 注意定义时候代码块的影响。
    • var`` const`` let 均可使用,()也可以成为一种定义形式
  • 字符串解析赋值:注意类数组对象的length属性
  • 数值布尔值的解析赋值:右边会转化成对象之后再去赋值(undefined和null无法转化成对象)
  • 函数参数的解析赋值:传入参数的形式类似于传入了一个数组,传入的时候就是变量被赋值了。感觉并没有什么卵用啊!!!WTF
  • 解析赋值中圆括号的问题:变量声明语句中,模式不能使用圆括号;函数参数不能使用圆括号;赋值语句中模式的整体或者一部分不能使用圆括号。只有在赋值语句中非模式的部分才可以使用圆括号。

Iterator和for...of循环

Iterator为数据结构提供统一的访问机制,任何数据结构只要部署了iterator接口,便可以完成遍历操作。
iterator有三种作用:一为数据结构提供统一的操作,二可以是数据成员按照某种次序排列,三是提供了for...of操作,iterator接口主要供for...of消费。

generator函数

  • generator作用:是一种状态遍历器,控制了函数内部状态的变化.
  • generator特征:两种定义方式,特有的yield语句和实例化对象next方法
var abc = function* (){  ...  }   
function* abc(){   ...   }
  • yield语句作用:每一条yield语句定义了一个状态.yield不能用在普通函数中,会报错.
  • yield执行顺序:
    • 每一次next方法的调用:
    • 从进入函数开始执行到~第一条yield后面跟着的那条语句执行完毕为止.
    • 多重嵌套的时候,将众多函数想象成执行流.若出现yield* ,则返回最内层generator函数yield语句执行结果.
  • next方法:generator实例化产生新对象,具有next方法.每执行一次next方法,就返回{value,done}的一对状态值.
  • value表示返回的yield语句后面表达式的那个值.
  • done表示遍历是否完成.
function* helloWorldGenerator() {  
      yield 'hello';  
      yield 'world';  
      return 'ending';
}
var hw = helloWorldGenerator();
hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }
  • yield 后面跟表达式
    • 不能跟循环结构,无法正确编译.
    • 不能跟着函数,如果想要后面连接函数,那么就分离函数,yield后面接上函数的执行语句.
function* three(obj) { //普通函数  
    yield obj.a;
}
function* two(obj) { //generator函数 
     obj.a ++; 
     yield* three(obj);
}
function* one() {   
      var obj = {        
            a:0   
      };   
      while (obj.a <= 100){          
           yield* two(obj);   
      }
}
var gen = one();
gen.next();
> Object {value: 1, done: false}
gen.next()
> Object {value: 2, done: false}
gen.next()
> Object {value: 3, done: false}
  • generator函数实例化对象的next方法.
    • next()方法可以带一个参数,可选,该参数会被当做上一条yield后面语句的返回值.
function* abc() {  ... }
var gen = abc();
gen.next();
  • generator异步操作的应用
    • 利用generator函数暂停执行的作用,可以将异步操作的语句写到yield后面,通过执行next方法进行回调.
  • yield语句和yield* 语句的区别
    • yield 语句后面跟普通函数
    • yield* 后面跟generator函数(遍历器函数)
  • for...of循环,不需要next方法,可以全部遍历generator函数的执行结果.

相关文章

  • 10. 回调和promise

    异步加载 JSES5 ES6 promise 学习视频记录

  • ES6学习记录

    根据哔哩哔哩av20327829自学,老师说的话真是相当通俗 介绍 ECMA是一个标准,JS是实现 兼容性 ES6...

  • ES6学习记录

    参考资料 阮一峰《ES6标准入门教程》 通过node命令行可以查看node已经实现的ES6的新特性 好多新特性在...

  • ECMA Script 6开发环境搭建

    声明:跟着技术胖学习ES6,此处是在记录笔记。原文链接:http://jspang.com/2017/06/03/...

  • ES6新特性简单学习记录

    学习文章转自:ES6简单特性学习记录 变量定义新方式:let/const let特性 : 块级作用域(一对{}包括...

  • ECMAScript 6学习记录<一>基本语法

    上篇文章记录了在开启ES6之旅前需要使用的babel转码器的使用方法,本篇文章正式开始ES6的语法学习。 1、 G...

  • ES6 map && set

    之前我们记录过一些常用的ES6属性,常用ES6总结,今天再来学习两个虽然不是太常见但是用起来非常好用的两个属性。 ...

  • es6学习

    学习es6

  • ES6入门(ECMAScript 6 )

    学习es6的笔记,记录下自己的成长,如有不合理之处,请多多指教,学习途径。 let 和 var 的区别let变量只...

  • 【一起来烧脑】入门ES6体系

    为什么要学习ES6掌握ES3、ES5、ES6的联系和区别 快速入门ES6 学会快速构建ES6的编译环境 学习ES6...

网友评论

      本文标题:ES6学习记录

      本文链接:https://www.haomeiwen.com/subject/suqflttx.html