JavaScript 6看上去很美

JavaScript 6看上去很美

导读:本文是从ECMAScript 6 looks
promising

这篇文章翻译而来。译文来自外刊IT评论《JavaScript6看上去很美》。

大家好,我是IT修真院武汉分院第五期的学员王峰,一枚正直纯洁善良的程序员

文章内容如下:

今天给大家分享一下,修真院官网js任务3,深度思考中的知识点——es6有哪些新特性

JavaScript 6让我很兴奋,这是我看了David Herman在YUIConf
2011大会上的演讲后的反应。我非常希望这些语言特征能尽快的在V8引擎上实现,这样我就可以在node.js里使用它们了。这些新增加的语言特征对于
一个使用JavaScript的程序员来说,解决了很多以前使用起来很不方便的东西。尽管这个标准中2013年才能制定完成(大会上David这样说
的),谷歌浏览器和火狐浏览器很有可能会提前实现这些特征。

1.背景介绍

有些人可能没有听说过es6,其实es6和我们之前所学的es5(也就是我们学的js)有点像。首先我来介绍一下ECMAScript和JavaScipt的区别.

1996年11月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript
提交给国际标准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMA
发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为
ECMAScript,这个版本就是1.0版。

该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫
JavaScript,有两个原因。一是商标,Java 是 Sun
公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript
这个名字,且 JavaScript 本身也已经被 Netscape
公司注册为商标。二是想体现这门语言的制定者是 ECMA,不是
Netscape,这样有利于保证这门语言的开放性和中立性。

因此,ECMAScript 和 JavaScript
的关系是,前者是后者的规格,后者是前者的一种实现(另外ECMAScript
方言还有 Jscript 和 ActionScript)。日常场合,这两个词是可以互换的。

从我个人来说,下面的这些特征我很感兴趣:

2.知识剖析

由于时间的关系,es其它方面的东西就不讲了,下面重点来讲一下关于es6的部分新特性。

let关键字

2.1.let命令

ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。例如:

澳门新葡亰 1

var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。

为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

澳门新葡亰 2

let不允许在相同作用域内,重复声明同一个变量。

澳门新葡亰 3

let关键字能产生一个代码块内的变量范围。因为var有一个函数式的范围概念,这有时候容易产生出不注意的错误。以后,我们完全使用let来代替var,从而避免这样的错误。

2.2const命令

const声明一个只读的常量。一旦声明,常量的值就不能改变。

澳门新葡亰 4

缺省参数

2.3.变量的解构赋值

function foo(bar="baz") {  
   console.log(bar);  
 
} 

2.3.1数组的解构赋值

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

以前,为变量赋值,只能直接指定值。

澳门新葡亰 5

ES6允许写成下面这样。

澳门新葡亰 6

上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。

本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

澳门新葡亰 7

另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。

澳门新葡亰 8

有了缺省参数,省去了很多折腾的代码。

2.3.2对象的解析构值

解构不仅可以用于数组,还可以用于对象

澳门新葡亰 9

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

澳门新葡亰 10

上面代码的第一个例子,等号左边的两个变量的次序,与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。第二个例子的变量没有对应的同名属性,导致取不到值,最后等于undefined。

如果变量名与属性名不一致,必须写成下面这样。

澳门新葡亰 11

这实际上说明,对象的解构赋值是下面形式的简写(参见《对象的扩展》一章)。

澳门新葡亰 12

也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

澳门新葡亰 13

上面代码中,foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foo。

非严格的解构方式

2.3.3字符串的解析构值

字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

澳门新葡亰 14

很像Python语言,解构时不需要严格匹配。

澳门新葡亰,2.3.4数值和布尔值的解析构值

解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。

澳门新葡亰 15

let [x,y] = [3,4,5]; // x=3, y = 4 
 

2.3.5函数的解析构值

函数的参数也可以使用解构赋值。

澳门新葡亰 16

多行模式的字符串表达

2.3.字符串的扩展

你可以简单的使用`(反点号)操作符来声明一个多行字符串。

2.3.1字符的Unicode表示法

JavaScript 允许采用uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode
码点。

澳门新葡亰 17

ES6 对这一点做出了改进,只要将码点放入大括号,就能正确解读该字符。

澳门新葡亰 18

codePointAt()

ES6提供了codePointAt方法,能够正确处理4个字节储存的字符,返回一个字符的码点。

澳门新葡亰 19

var htmlString = `Say hello to  
multi-line  
strings!`  
 

2.4.数值的扩展

网站地图xml地图