都这么久了,你还没有用上ECMAScript 6?

2020-07-18 21:35:00 APP开发网 3968

ES8已经发售了很久,但是很多前端开发者都还没有用上ES6。这边文章主要用于介绍怎么快速入门ES6,并且将SE6的语法用于实际运用中。本文中用 ES 表示 ECMAScript

如果你用过ReactVueNodejs等,那你对于ES6的语法也会有一些了解。

ES8中的新特性,浏览器厂商和语法转换器还需要一段来实现,我们先来谈谈怎么在实际项目中运用ES6

什么是ES6?它和ES5有什么区别?

JavaScript一种动态类型、弱类型、基于原型的客户端脚本语言,用来给HTML网页增加动态功能。ECMAScript(核心),作为核心,它规定了语言的组成部分:语法、类型、语句、关键字、保留字、操作符、对象。我们常说的JavaScript是指ES3ES5ES6ECMAScript 6 的缩写。

 

对于经常写原生JavaScript的前端开发者来说,对ES5中的语法肯定比较熟悉,ES5作为ECMAScript第五个版本(第四版因为过于复杂废弃了),浏览器支持情况可看第一副图,增加特性如下。

1. strict模式

严格模式,限制一些用法,'use strict';

2. Array增加方法

增加了everysome forEachfilter indexOflastIndexOfisArraymapreducereduceRight方法

PS: 还有其他方法 Function.prototype.bindString.prototype.trimDate.now

3. Object方法

Object.getPrototypeOf

Object.create

Object.getOwnPropertyNames

Object.defineProperty

Object.getOwnPropertyDescriptor

Object.defineProperties

Object.keys

Object.preventExtensions / Object.isExtensible

Object.seal / Object.isSealed

Object.freeze / Object.isFrozen

PS:只讲有什么,不讲是什么。

ES6给前端开发者带来了很多的新的特性,可以更简单的实现更复杂的操作,很大的提高开发效率,提高代码的整洁性。

ES6中的新特性有很多,列一些比较常用的特性:

Block-Scoped Constructs Let and Const(块作用域构造Let and Const

Default Parameters(默认参数)

Template Literals (模板字符串)

Multi-line Strings (多行字符串)

Arrow Functions (箭头函数)

Enhanced Object Literals (增强的对象文本)

Promises

Classes(类)

Modules(模块)

Destructuring Assignment (结构赋值)

下面介绍下这些常用的ES6特性。

Block-Scoped Constructs Let and Const(块作用域构造Let and Const

ES6ES5相比,多了两个声明变量的关键字:letconst。而letconst要和块级作用域结合才能发挥其优势。

什么是块级作用域?

任何一对话括号({和})中的语句集都属于一个块是一个独立的作用域,在这之中定义的所有变量在代码块外都是不可见的,我们称之为块级作用域。在这个作用域内用let声明的变量a,只能在这个作用域内被访问到,在这对大括号外面是访问不到a的。

当然,在块级作用域中还可以声明函数,该函数也是只能作用域内部才能被访问到。函数作用域定义在函数中的参数和变量在函数外部是不可见的。所以,在ifelsefor甚至是一对单独的{},都是一个块级作用域。

ES6之前的版本中,是没有块级作用域的概念的,只有全局作用域和函数作用域两种,并且,用var声明的变量和用function声明的函数会被提前到作用域的顶部,这也就是我们常说的声明提前。

let声明的变量是存在于距离声明语句最近的一个作用域(全局作用域、函数作用域或块级作用域)内的,在声明的时候,可选择将其初始化成一个值。

语法如下:

let var1 [= value1] [, var2 [= value2 ] ] [, ..., varN [= valueN]] ;

这一点与var的声明不同,用var声明的变量是属于最靠近它的一个全局作用域或函数作用域中,且声明会被提前。在块级作用域中,var的声明与在全局作用域和函数作用域中是一样的。

 

块级作用域和let声明变量,解决了使用var的一些不足,相当于用let声明的变量不会被提前到作用域顶部。有一点需要注意,let也是声明提前,但是let声明变量的语句必须在使用该变量语句之前,在声明之前引用会报错该变量未被声明,且let不允许重复声明相同名称的变量,否则会报错。我们看下例子:

 

{

  var hello = 'Hello'

  let world = 'World'

}

console.log(hello);

console.log(world);

Chrome浏览器的控制台(最新版本的Chrome已支持一部分ES6语法)执行一下,会发现有报错。constconst声明与let基本相同,它也是存在于块级作用域内。

有一点区别就是const声明的是常量,换句话来说就是不可被重新赋值改变原值。需要注意,const在声明常量的时候,必须同时给常量初始化赋值。如果只声明,不初始化值的话,会报错。见下面代码。

const MAX;

// Uncaught SyntaxError: Missing initializer in const declaration

声明变量的方法

ES5中,可以通过varfunction这两种方法来声明变量。

 

而在ES6中,除了增加了letconst两种声明方式,还有接下来要介绍的importclass的声明方式。

Default Parameters(默认参数)

默认参数是ES6中对函数拓展的一个特性,可以直接为函数的参数设置默认值,当某一参数设置了默认值时,如果调用函数的时候没有传该参数,则该参数的值为默认值,如果传了该参数,则该参数的值为传递的参数值。

ES6之前,我们可以通过手动的方式,为函数的参数设置默认值,代码如下:

function sign (x) {

  if (typeof x === 'undefined') {

    x = 'default'

  }

  console.log(x)

}

sign('new sign')    // new sign

sign()              // default

将上述代码换成ES6模式,可以这样写:

 

function sign (x = 'default') {

  console.log(x)    

}

sign('new sign')    // new sign

sign()              // default

Template Literals (模板字符串)

 

ES6提供了模板字符串的特性,模板字符串是使用反引号(`)和${}实现字符串的拼接,字符串中可以嵌入变量。

ES6之前,我们一般这样输出模板:

var name = 'Henry'

var welcome = 'Hello, ' + name + '!'

console.log(welcome);   // Hello, Henry!

ES6中,模板字符串可以这样拼接字符串:

let name = 'Henry'

let welcome = `Hello, ${ name }!`;

console.log(welcome);   // Hello, Henry

模板字符串的计算规则是在两个反引号之间将字符串拼接到一起,如果反引号之间含有${},则会计算这对大括号内的值,大括号里面可以是任意的JavaScript表达式,可以进行运算和引用对象属性。

let a = 3;

let number = `$ {a + 2 }`;

console.log(`${ number }`);    // 5

 

let b = { c: 2, d: 4 };

console.log(`${ b.c * b.d }`) ;     // 8

Multi-line Strings (多行字符串)

 

多行字符串是模板字符串的拓展,它跟模板字符串是同样的解析方式,不同的是,它可以拼接多行的字符串,且拼接的字符串中会保留所有的空格和缩进。

如果需要用字符串来拼接DOM树结构时,可以这样写:

let titleValue = 'This is a title'

let htmlStr = `

 


${ titleValue }

This is a paragraph.

 

`;

上述代码中,能看到JavaScript代码和伪html代码的结合,完全可以将模板字符串的多行字符串封装成一个页面模板工具,绝对是轻量高效的。

这种书写方式是与ReactJSX狠起来很相似。

Arrow Functions (箭头函数)

ES6中,可以使用箭头(=>)来声明一个函数,称作箭头函数。

ES5中声明一个函数,可以这样写:

var func = function (a) {

  return a + 2;

}

将这个函数换成 箭头函数:

let func = a => a + 2;

如果函数有多个参数,需要用括号包含所有参数,只有一个参数的时候,可以省略括号,如果没有设置参数,也必须有括号。示例如下:

 

let func1 = (arg1, arg2, arg3) => {

  return arg1 + arg2 + arg3;

}

 

let func2 = arg => {

  console.log(arg)

}

let func3 = () => {

  console.log(`This is an arrow function.`)

}

需要注意的是,箭头函数没有自己的this,如果在箭头函数内部使用this,那样这个this是箭头函数外部的this,也是因为箭头函数没有this,所以,箭头函数不能用作构造函数。如果用箭头函数来写回调函数时,就不用再将外部this保存起来了。

// ES5

function foo() {

  var _this = this;

    

  setTimeout(function() {

    console.log('id:', _this.id);        

  }, 200)

}

// ES6

function foo() {

  setTimeout(() => {

    console.log(`id:${ this.id }`)        

  }, 200)

}

Enhanced Object Literals (增强的对象文本)

 

ES6,对象字面值扩展支持在创建时设置原型,简写foofoo分配,定义方法,加工父函数(super calls),计算属性名(动态)。总之,这些也带来了对象字面值和类声明紧密联系起来,让基于对象的设计得益于一些同样的便利。

 

var obj = {

  // __proto__ 原型

  __proto__: theProtoObj,

  // Shorthand for ‘handler: handler’  简写

  handler,

  // Methods

  toString() {

    // Super calls     继承

    return "d " + super.toString();

  },

  // Computed (dynamic) property names 计算属性名

  ['prop_' + (() => 42)()]: 'name'

};

Promises

Promise是异步编程的一种解决方案,它作为一个对象,并且只要开始就会一直进行下去,直到最后。就和他的意思一样是一个诺言,作为诺言就会完成,不论最后是成功还是失败。并且他的结果是由异步操作的结果决定的,所以结果一旦形成就不会改变,不管是在什么情况下,都会得到同一个结果。

不过,在新建Promise之后,需要注意的是:Promise被新建后,便无法被取消,会执行下去,直到出现结果;如果不设置回调,Promise内部抛出的异常,不会反应到外部。

 

 


电话咨询
邮件咨询
在线地图
QQ客服