ES6学习总结

  1、ES6的产生

  JavaScript 是一个持续演进的编程语言,并由浏览器厂商、开发者和社区成员组成的委员会制定标准。委员会引入了JavaScript历史上的最大更新 ES6 (ES2016),而 ES7 是年度更新的第一版(ES2017)。

  2、ES6ES7优点

    • 简化常见编程模式

    • 使代码更容易编写以及定制底层的 JavaScript 行为。

  3、新特性

    • Class 可以让开发者更容易地编写面向对象程序,并安全地扩展extend JavaScript内建对象。
    • 箭头函数Arrow functions、默认参数default parameters和数组的遍历方法array convenience methods使得常用功能更容易编写,而不需要在项目之间复制黏贴代码。
    • JavaScript 的异步处理流和嵌套回调让人难以理解,所以 ES6 中引入了promises 、迭代器和生成器iterators, and generators以简化异步代码,让控制流更直观而不易出错。

  4、ES6基础---let命令

    • 用于声明(局部)变量,类似于var(全局),但是声明的变量只在let命令所在的代码块有效。
    • 创建块级作用域(下面详细介绍)

      1 if(true){
      2     let a=10;
      3     var b=1;
      4 }
      5 console.log(a);     //Uncaught ReferenceError: a is not defined
      6 console.log(b);        //1
    • 没有变量提升
      1 console.log(typeof str);     //undefined
      2 var str = 10;
      3
      4 console.log(typeof abc);     //Uncaught ReferenceError: abc is not defined
      5 let abc = 10;
    • 不允许重复声明
      1 let a=10;
      2 let a=20;
      3 console.log(a);        //Uncaught SyntaxError: Identifier ‘b‘ has already been declared
      4
      5 var a=10;
      6 var a=20;
      7 console.log(a);        //20
    • 暂时性死区

      在块级作用域中使用let声明变量时,块级作用域会形成一个封闭的环境,不能访问外部声明的变量

      1 var c = 19;
      2 if(true) {
      3       console.log(c);
      4       let c;     //Uncaught ReferenceError: c is not defined
      5 }

  5、为什么需要块级作用域?

  ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。

    • 第一种场景----内层变量可能会覆盖外层变量。

      1 var tmp = ‘hi‘;
      2 function f() {
      3      console.log(tmp);        //这里想使用外层的tmp=‘hi‘
      4      if (false) {            //if代码块之内使用内层的tmp=‘hello‘
      5         var tmp = ‘hello‘;
      6      }
      7 }
      8 f();     //但是输出结果是undefined,因为这里存在变量提升,导致内部tmp覆盖了外层的tmp
    • 第二种场景----用来计数的循环变量泄露为全局变量。

      1 var s = ‘hello‘;
      2 for (let i = 0; i < s.length; i++) {
      3       console.log(s[i]);
      4 }
      5 console.log(i);     // 5
      6 //上面代码中,变量i只用来控制循环,但是循环结束后,它并没有消失,泄露成了全局变量

  6、ES6基础---const命令

  const声明一个只读的常量

    • 一旦声明,常量的值就不能改变

      1 const PI = 3.1415;        // 3.1415
      2 PI = 3;                    // TypeError: Assignment to constant variable.
    • 只声明,不赋值,也会报错
      1 const a;        // SyntaxError: Missing initializer in const declaration
    • let相同,只在声明的块级作用域中有效

      1 if (true) {
      2      const a = 5;
      3 }
      4 console.log(a);        // Uncaught ReferenceError: a is not defined
    • 不允许重复声明

      1 var message = "Hello!";
      2 let age = 25;
      3
      4 // 以下两行都会报错
      5 const message = "Goodbye!";
      6 const age = 30;
    • 也没有变量提升,存在暂时性死区

      1 if (true) {
      2      console.log(a);     //Uncaught ReferenceError: a is not defined
      3      const a = 5;
      4 }

  7、ES6 声明变量的六种方法

    • ES5 只有两种声明变量的方法:var命令和function命令。
    • ES6除了添加letconst命令,另外两种声明变量的方法:import命令和class命令。所以,ES6 一共有6种声明变量的方法。

  8、箭头函数

    • ES6 允许使用“箭头”(=>)定义函数。

      1 var f = v => v;
    • 上面箭头函数等同于

      1 var f = function(v) {  return v;};
    • 引入箭头函数的两个作用

      • 更简短的函数书写,简化回调函数

        1 // 正常函数写法
        2 [1,2,3].map(function (x) {
        3   return x * x;
        4 });
        5 // 箭头函数写法
        6 [1,2,3].map(x => x * x);
      • 对this的词法解析,自己内部没有this
    • 使用时需注意

      • 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
      • 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
      • 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
      • 不可以使用yield命令,因此箭头函数不能用作 Generator 函数

        1 //this对象的指向是可变的,但是在箭头函数中,它是固定的。
        2 function foo() {
        3   setTimeout(() => {
        4     console.log(‘id:‘, this.id);
        5   }, 100);
        6 }
        7 var id = 21;
        8 foo.call({ id: 42 });       // id: 42
        9 //箭头函数可以让setTimeout里面的this,绑定定义时所在的作用域,而不是指向运行时所在的作用域
    • 小测试:请问下面的代码中有几个this?

       1 function foo() {
       2   return () => {
       3     return () => {
       4       return () => {
       5         console.log(‘id:‘, this.id);
       6       };
       7     };
       8   };
       9 }
      10
      11 var f = foo.call({id: 1});
      12
      13 var t1 = f.call({id: 2})()();     // id: 1
      14 var t2 = f().call({id: 3})();     // id: 1
      15 var t3 = f()().call({id: 4});     // id: 1

  上面代码之中,只有一个this,就是函数foothis,所以t1t2t3都输出同样的结果。因为所有的内层函数都是箭头函数,都没有自己的this,它们的this其实都是最外层foo函数的this

  除了this,以下三个变量在箭头函数之中也是不存在的,指向外层函数的对应变量:argumentssupernew.target

  9、promise对象

    • 异步编程的一种解决方案

      • 避免了层层嵌套的回调函数,使用链式调用方式来组织代码,更加直观
      • 提供统一的接口,使得控制异步操作更加容易。
    • 三种状态
      • Pending进行中
      • Resolved已完成(又称Fulfilled)
      • Rejected已失败
    • 基本用法

       1 //创造一个promise实例
       2 var promise = new Promise(function(resolve, reject) {
       3   // ... some code
       4
       5   if (/* 异步操作成功 */){
       6     resolve(value);
       7   } else {
       8     reject(error);
       9   }
      10 });
      11 //实例生成后,可以用then方法分别指定Resolved状态和Reject状态的回调函数。
      12 promise.then(function(value) {
      13   // success
      14 }, function(error) {
      15   // failure
      16 });
    • promise.all()
      • 用于将多个 Promise 实例,包装成一个新的 Promise 实例。

        var p = Promise.all([p1, p2, p3]);
      • p的状态由p1p2p3决定,分成两种情况。

        (1)只有p1p2p3的状态都变成fulfilledp的状态才会变成fulfilled,此时p1p2p3的返回值组成一个数组,传递给p的回调函数。

        (2)只要p1p2p3之中有一个被`rejected`,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。

         1 // 生成一个Promise对象的数组
         2 var promises = [2, 3, 5, 7, 11, 13].map(function (id) {
         3   return getJSON(‘/post/‘ + id + ".json");
         4 });
         5 ?
         6 Promise.all(promises).then(function (posts) {
         7   // ...
         8 }).catch(function(reason){
         9   // ...
        10 });
        //上面代码中,promises是包含6个 Promise 实例的数组,只有这6个实例的状态都变成fulfilled,或者其中有一个变为rejected,才会调用Promise.all方法后面的回调函数
  先到这里吧!有什么不对的地方望大家多多指点!
时间: 2024-10-05 05:07:17

ES6学习总结的相关文章

ES6学习目录

前面的话 ES6是JavaScript语言的下一代标准,已经在 2015 年 6 月正式发布.它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言 为什么要学习ES6呢?很多流行的JavaScript开源框架都使用ES6编写,如Vue.js.video.js.d3.js等等.不学习ES6,这些流行的框架将不容易上手:ES6可以大大提高开发效率,同时让语法更加规范化,一定程度上增强了代码安全:更重要的是,ES6是语言级别的升级,而并不是一个库或框架.既然迟

ES6学习笔记(一)

1.ES6学习之let.const (1).var.let.const 变(常)量声明 ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景. 在ES6中let就诞生了,实际上它为javascript新增了块级作用域. let只在变量声明时 ,所在的代码块中有效. 由于这一特性,let很适合在for循环中使用. 如下图是一个demo: let声明变量的特点: a:不存在变量提升: console.log(m);//Uncaught ReferenceError: m is

ES6学习一

一项新技术的出现肯定是为了解决一些问题,那么ES6的出现主要是解决了哪些问题?它的出现给我们带来了什么便利?当它没有出现的时候,某些问题怎么处理?ES6的方法和以前的方法比较又有什么不同呢?根据提出的这些问题,我开始了ES6学习之旅. ES6是在ES5的基础上对语法进行了修正以及添加了一些新的功能, 具体修正了哪些语法与添加了哪些新的功能,那就开始学习吧.      let                    ES6新增加了let命令,用于变量声明,与var的用法类似,不同的是所声明的变量只在

es6学习笔记初步总结

es6学习笔记初步总结 1. let.const 和 block 作用域 在ES6以前,var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部).这就是函数变量提升例如: let 关键词声明的变量不具备变量提升(hoisting)特性 let 和 const 声明只在最靠近的一个块中(花括号内)有效 当使用常量 const 声明时,请使用大写变量,如:CAPITAL_CASING const 在声明时必须被赋值 否则报语法错误SyntaxError

ES6学习及总结(二):对象的解构

ES6学习及总结(二):对象的解构 一:数组的解构 1:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring).本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值. let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo", "bar", "

ES6学习记录(一)

ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布.标准的制定者有计划,以后每年发布一次标准,使用年份作为版本.因为ES6的第一个版本是在2015年发布的,所以又称ECMAScript 2015(简称ES2015).编程语言JavaScript是ECMAScript的实现和扩展,由ECMA(一个类似W3C的标准组织)参与进行标准化.ECMAScript定义了: 语言语法 – 语法解析规则.关键字.语句.声明.运算符等. 类型 – 布

ES6学习笔记之Promise

入职百度EFE团队实习已经三周了,实习中接触到了生产环境的技术和开发流程,大开眼界,和自己在学校接小作坊式项目是很不一样的体验.其中一个很大的感触是,ES6早已不是“选修”的尝鲜技术,而是已经全面普及应用.非学不可的“必修”技术,看来该版本新加入的特性的确解决了前端项目开发中的痛点,有利于提升开发效率. 说到ES6,像let,const,箭头函数这些特性简单易懂,很快就实现了无痛上手:然而Promise不是那么直观,项目文档里大量的“返回一个Promise对象”让初接触这一概念的我一度懵比,于是

ES6学习笔记(二)——字符串扩展

相信很多人也和我一样,不喜欢这样循规蹈矩的逐条去学习语法,很枯燥乏味.主要是这样学完一遍之后,没过一段时间就忘到九霄云外了.不如实际用到的时候研究它记得牢靠,所以我就整理成笔记,加深记忆的同时便于复习查看. 在这样不断的学习过程中,也提高了自己的总结能力:) 1.字符串的遍历器接口 ES5,数组和对象可以进行遍历,使用for() 和 for...in,还有jq中的each()方法进行遍历. ES6为我们提供了字符串遍历器  for...of 循环遍历 优点:可以识别大于0xFFFF的码点,传统的

ES6学习笔记(1)——模块化

最近学习ReactJS经常遇见ES6语法,为了尽快弄懂ReactJS,因此想方设法绕过ES6,但是随着学习的深入,需要查阅的资料越来越多,发现大部分与之相关的框架和学习资料都是采用ES6写的,终究发现这是一个绕不过去的坎啊.ES6是JavaScript新一代的标准规范,其主要变化为:变量的解构赋值.箭头函数.Generator函数.Promise对象.类与继承.模块化这几个大方面,我学习时为了能看懂ES6写的代码,就先从这几个大的方面开始下手了,细节部分随着应用的需要再去查阅资料,学习参考资料为

ES6学习笔记之变量声明let,const

最近用淘宝的weex做了个项目,最近稍微闲下来了.正好很久没有接触RN了,所以趁这个机会系统的学习一下ES6的相关知识. 孔子说:没有对比就没有伤害.所以我们要拿ES6和ES5好好对比的学习.这样才能明白es6是多少的好,积极的拥抱她! 1.let 用let声明的变量,只会在let命令所在的代码块内有效. let的块状作用域 我们来看一个简单的例子: 'use strict'; { let name = 'cloud'; var age = 21; } name;//ReferenceError