ECMAScript6 (ES6、ES2015)新特性详解

ES6 新特性

  • ES6 新特性
  • 一ES6简介
  • 二块级作用域绑定
    • 1 let声明
    • 2 const声明Constant Declarations
    • 3 循环中的块级绑定
    • 4 循环中的函数
  • 三函数的新增特性
    • 1 带默认参数的函数
    • 2 默认参数对 arguments 对象的影响
    • 3 默认参数表达式 Default Parameter Expressions
    • 4 未命名参数问题
    • 5 函数中的扩展运算符
  • 四全新的函数箭头函数
    • 1 箭头函数语法
    • 2 使用箭头函数实现函数自执行
    • 3 箭头函数中无this绑定No this Binding
    • 4 无arguments绑定
  • 五对象功能的扩展
    • 1 对象类别
    • 2 对象字面量的语法扩展
      • 21 简写的属性初始化
      • 22 简写的方法声明
      • 23 在字面量中动态计算属性名
    • 3 新增的方法
      • 31 Objectis
      • 32 Objectassign
  • 六字符串功能的增强
    • 1 查找子字符串
    • 2 repeat方法
    • 3 字符串模板字面量
      • 31 基本语法
      • 32 多行字符串
      • 33 字符串置换
      • 34 模板标签
        • 341 什么是模板标签
        • 342 定义模板标签
  • 七解构
    • 1 解构的实用性
    • 2 对象解构
      • 21 对象解构的基本形式
      • 22 解构赋值表达式
      • 23 对象解构时的默认值
      • 24 赋值给不同的变量名
    • 3 数组解构
      • 31 数组解构基本语法
      • 32 解构表达式
  • 八新的基本类型Symbol
    • 1 创建Symbol
    • 2 识别Symbol
    • 3 Symbol作为属性名
    • 4 Symbol属性名的遍历
    • 5 Symbolfor字符串和SymbolkeyForsymbol类型的值
  • 九Set数据结构
    • 1 创建Set和并添加元素
    • 2 Set中不能添加重复元素
    • 3 使用数组初始化Set
    • 4 判断一个值是否在Set中
    • 5 移除Set中的元素
    • 6 遍历Set
    • 7 将Set转换为数组
  • 十Map数据结构
    • 1 创建Map对象和Map的基本的存取操作
    • 2 Map与Set类似的3个方法
    • 3 初始化Map
    • 4 Map的forEach方法
  • 十一迭代器和forof循环
    • 1 循环问题
    • 2 什么是迭代器
    • 3 生成器函数
    • 4 生成器函数表达式
    • 5 可迭代类型和for-of迭代循环
    • 6 访问可迭代类型的默认迭代器
    • 7 自定义可迭代类型
  • 十二类
    • 1 ES5之前的模拟的类
    • 2 ES6中基本的类声明
    • 2 匿名类表达式
    • 3 具名类表达式
    • 4 作为一等公民的类型
    • 5 动态计算类成员的命名
    • 6 静态成员
    • 7 ES6中的继承
      • 71 继承的基本写法
      • 72 在子类中屏蔽父类的方法
      • 73 静态方法也可以继承

一、ES6简介

​ 历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6(亦称 ECMAScript Harmony,简称 ES6)终于在 2015 年 6 月正式发布。自从上一个标准版本 ES5 在 2009 年发布以后,ES6 就一直以新语法新特性的优越性吸引著众多 JavaScript 开发者,驱使他们积极尝鲜。

​ 由于ES6是在2015年发布的,所以也叫ES2015。

​ 以后ESCMAScript标准一年一更新,统一使用年份命名:ES2016、ES2017、….

下面开始介绍ES6常用的一些新特性:

二、块级作用域绑定

在ES5之前,不存在块级作用域,在编程的时候很多时候会带来很多的不便,ES6新增了块级作用域,补足了这方面的缺陷。

块级声明指的是该声明的变量无法被代码块外部访问。块作用域,又被称为词法作用域(lexical scopes),可以在如下的条件下创建:

  • 函数内部
  • 在代码块(即 { })内部

块级作用域是很多类C语言的工作机制,ECMAScript 6 引入块级声明的目的是增强 JavaScript 的灵活性,同时又能与其它编程语言保持一致。

2.1 let声明

使用let声明变量的语法和使用var声明的语法是一样的。但是let声明的变量的作用域会限制在当前的代码块中。这是let与var的最大区别

4.2 使用箭头函数实现函数自执行

<script type="text/javascript">
    var person = (name => {
            return {
                name: name,
                age: 30
            }
        }
    )("zs");
    console.log(person);
script>

4.3 箭头函数中无this绑定(No this Binding)

在ES5之前this的绑定是个比较麻烦的问题,稍不注意就达不到自己想要的效果。因为this的绑定和定义位置无关,只和调用方式有关。

在箭头函数中则没有这样的问题,在箭头函数中,this和定义时的作用域相关,不用考虑调用方式

箭头函数没有 this 绑定,意味着 this 只能通过查找作用域链来确定。如果箭头函数被另一个不包含箭头函数的函数囊括,那么 this 的值和该函数中的 this 相等,否则 this 的值为 window。

<script type="text/javascript">
    var PageHandler = {
        id: "123456",
        init: function () {
            document.addEventListener("click",
                event => this.doSomething(event.type), false); // 在此处this的和init函数内的this相同。
        },

        doSomething: function (type) {
            console.log("Handling " + type + " for " + this.id);
        }
    };
    PageHandler.init();
script>

看下面的一段代码:

这种继承方法,和我们前面提到的构造函数+原型的继承方式本质是一样的。但是写起来更简单,可读性也更好。

关于super的使用,有几点需要注意:

  1. 你只能在派生类中使用 super(),否则(没有使用 extends 的类或函数中使用)一个错误会被抛出。
  2. 你必须在构造函数的起始位置调用 super(),因为它会初始化 this。任何在 super() 之前访问 this 的行为都会造成错误。也即是说super()必须放在构造函数的首行。
  3. 在类构造函数中,唯一能避免调用 super() 的办法是返回一个对象。

12.7.2 在子类中屏蔽父类的方法

如果在子类中声明与父类中的同名的方法,则会覆盖父类的方法。(这种情况在其他语言中称之为 方法的覆写、重写 )


                    
                    

你可能感兴趣的:(JavaScript)