首页 > 代码库 > ECMAScript6语法

ECMAScript6语法

  • 为什么要学习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

ECMAScript6语法