ECMAScript6语法

Posted 2020-08-17

• 为什么要学习ES6
  • ES6也叫ECMAScript2015，2015-6月正式发布，向下兼容ES5.1
  • ES6来编写Node.js程序
  • ES6让javascript语言能够开发复杂应用程序

• 严格模式

  • ES5中出现的模式

  • 严格模式的目的：

  • 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
  • 消除代码运行的一些不安全之处，保证代码运行的安全；
  • 提高编译器效率，增加运行速度；
  • 为未来新版本的Javascript做好铺垫

  • 参考

    严格模式的限制严格模式的限制

  • 开启严格模式

    • 在作用域的最上面 "use strict"
      • js文件的最开头
      • function的开头

• 变量和常量

  • 变量 let

    • 没有变量提升，必须先定义再使用
    • 有块级作用域

    • 解决问题

      window.onload = function () {
                var ul = document.getElementById("list");
      
                var lis = ul.getElementsByTagName("li");
      
                for(let i = 0, length=lis.length; i < length; i++) {
      
      //                (function (i) {
      //                    lis[i].onclick = function () {
      //                        console.log(i);
      //                    }
      //                })(i);
      
                    lis[i].onclick = function () {
                        console.log(i);
                    }
                }
            }
      

  • 常量 const

    • 常量的一旦赋值，不能改变，比如：获取包的时候，用const来定义变量
    • 有块级作用域
    • 没有变量提升，先定义再使用
    • 不可以重复定义

    • 必须有初始值，否则报错

    • 在Node.js中，所有接收require()获得的对象都使用const修饰

• string的扩展方法
  • includes() 返回布尔值，是否包含，第二个参数从第几个位置开始查找
  • startsWith() 返回布尔值，是否以...开头，第二个参数从第几个位置开始查找
  • endsWith() 返回布尔值，是否以...结尾，第二个参数, 前n个字符以...结尾
  • repeat() 重复次数

• 模板

  • 示例1：

    let name = "steve jobs";
    let str = `hello ${name}`;
    

  • 示例2：

    let obj = {name:"jobs", age: 18, salary: 1};
    
    let template = `
      姓名：${obj.name}
    年龄：${obj.age}
    工资：${obj.salary}
    `.trim();
    

  • 示例3：生成页面

• 箭头函数

  • 格式： => (读作：goesto) 左边是参数，右边是方法体
  • 演变：function f(x,y) {} -----> 演变成箭头函数

     (x, y) => {}
     语法格式简单
    

  • 箭头函数的几种形式：

    • 没有参数 () => console.log("hello");
    • 有一个参数 a => ++a;

    • 有多个参数 (a,b) => a + b;

    • 方法体有多条语句 (a,b) => { a=1; b=2; console.log(a+b)};

  • 箭头函数的注意事项
    • 箭头函数不会影响this的指向
    • 箭头函数根本没有自己的this，箭头函数内部的this就是外层代码块的this
    • 箭头函数中没有arguments对象，箭头函数内部的arguments指向外层函数的arguments
    • 不可以当做构造函数

• ES6的学习站点
  • 各个浏览器对ES6的支持 http://kangax.github.io/compat-table/es6/
  • 学习站点 http://es6.ruanyifeng.com/#README