Overview of ES6 初窥ES6

Overview of ES6 初窥ES6
type
status
date
slug
summary
tags
category
icon
password
👉
Slides in ES6 overview workshop

Intro

开场

What

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准

Goal

ES6的目标,是使得JavaScript语言可以用来编写大型的复杂的应用程序,成为企业级开发语言。 新的语言特性,代码更优雅,程序更健壮,减少不必要的重复,减少不必要的第三方依赖。

Agenda

  • template strings
  • const
  • let
  • block-level declaration
  • Destructuring Assignment
  • arrow functions
  • default function params
  • class
  • module

Requirements

Talk is cheap, show me the code.

template strings

它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

const

let

声明变量,变量只在let命令所在代码块内有效。
let不允许在相同作用域内,重复声明同一个变量。

block-level declaration

  • let, const 块级作用域
  • var 函数作用域
ES5的JavaScript的不支持块级作用域,变量仅仅被限制到函数作用域内。

Pros

function scope

Destructuring Assignment

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

Array destructuring

模式匹配(嵌套数组)

解构失败

  • 如果对undefined或null进行解构,会报错。
  • 解构赋值允许指定默认值。
  • 解构赋值不仅适用于var命令,也适用于let和const命令。

Object destructuring

如果变量名与属性名不一致,必须写成下面这样。
  • 对象的解构也可以指定默认值。
  • 如果要将一个已经声明的变量用于解构赋值
JavaScript引擎会将{x}理解成一个代码块,从而发生语法错误。
NOTE 数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

Pros

  • 交换变量的值
  • 从函数返回多个值
  • 遍历Map结构 配合变量的解构赋值,获取键名和键值
    • 输入模块的指定方法

      Arrow Function

      • 语法糖:function的简写,或者是使用胖箭头 () => 的Lamda表达式。
      • 不仅仅是语法糖:自动绑定外部作用域的”this”.

      default function params

      在ES6默认值特性出现前,手动处理默认值有几种方式:
      为了处理参数未传递的情况,我们常看到typeof检测:
      有时也可以检查arguments.length
      这些方法都可以很好的工作,但都过于手动且缺少抽象。
      参数默认值使用方便且毫无违和感。

      Classes

      A formal inheritance syntax comes to JavaScript Really just syntactical sugar over JS prototypical inheritance

      Extends

      Module

      export和import

      ES6实现了模块功能,试图解决JavaScript代码的依赖和部署上的问题,取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。

      NOT Included

      • Map, WeakMap, Set, WeakSet
      • Promise
      • Generator
      • Iterator
      • Rest Parameter
      • Spread Operator

      新的内建方法

      • Object.assign
      • [arr].find
      • “str”.repeat
      • “str”.startsWith
      • “str”.endsWith
      • “str”.includes
      • Number.isNaN
      • Number.isFinite
      • Number.isSafeInteger
      • Math.trunc
      • Math.sign

      Using ES6 Today

      Server

      • io 2.2.0
      • node 0.12.4

      Browser

      • Browserify
      • Babel

      Resources

      上一篇
      赶在2015最后一班车
      下一篇
      两分钟了解ReactiveX
      Loading...
      发布于 2015-6-1
      修改于 2024-10-20
      最新发布
      群晖Docker安装部署自托管AppFlowy笔记应用
      2024-12-6
      PostgreSQL配置Fail2Ban防暴力破解
      2024-11-19
      PVE配置Fail2Ban防暴力破解Web登录与SSH连接
      2024-11-19
      单臂路由|N1盒子(OpenWRT)单线多拨实现网速叠加
      2024-11-18
      关于Sass 你需要知道的 Interpolation(插值)
      2024-11-17
      Ubuntu上的Git Server
      2024-11-12