http://es6.ruanyifeng.com/ ECMAScript 6
https://frankfang.github.io/es-6-tutorials/ ES 6 新特性列表 2017-12-29
http://www.runoob.com/w3cnote/es6-concise-tutorial.html ESMAScript 6简明教程 2018-1-8
https://juejin.im/post/5991549af265da3e345f6e6d ES6 变量声明与赋值:值传递、浅拷贝与深拷贝详解
https://segmentfault.com/a/1190000013099221 ES6 换种思路处理数据 2018-2-2
https://www.jianshu.com/p/edaf43e9384f export default 和 export 区别 2019-7-26
以下是ES6排名前十的最佳特性列表(排名不分先后):
- Default Parameters(默认参数) in ES6
- Template Literals (模板文本)in ES6
- Multi-line Strings (多行字符串)in ES6
- Destructuring Assignment (解构赋值)in ES6
- Enhanced Object Literals (增强的对象文本)in ES6
- Arrow Functions (箭头函数)in ES6
- Promises in ES6
- Block-Scoped Constructs Let and Const(块作用域构造Let and Const)
- Classes(类) in ES6
- Modules(模块) in ES6
笔记正文
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
let命令
它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。(for循环的计数器,就很合适使用let命令。)
在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”
不允许重复声明 : let不允许在相同作用域内,重复声明同一个变量。
let实际上为 JavaScript 新增了块级作用域。
ES6 允许块级作用域的任意嵌套。
内层作用域可以定义外层作用域的同名变量。
ES6 引入了块级作用域,明确允许在块级作用域之中声明函数。ES6 规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。
考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句。
// 函数声明语句 { let a = 'secret'; function f() { return a; } } // 函数表达式 { let a = 'secret'; let f = function () { return a; }; }
const 命令
const声明一个只读的常量。一旦声明,常量的值就不能改变。
const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。
const的作用域与let命令相同:只在声明所在的块级作用域内有效。
ES5和ES6
ES5 只有两种声明变量的方法:var命令和function命令。
ES6 一共有6种声明变量的方法:var命令和function命令、let和const命令、import命令和class命令
顶层对象window的属性与全局变量挂钩,被认为是JavaScript语言最大的设计败笔之一。
ES6为了改变这一点,一方面为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性;另一方面规定,let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。也就是说,从ES6开始,全局变量将逐步与顶层对象的属性脱钩。
var a = 1; // 如果在Node的REPL环境,可以写成global.a // 或者采用通用方法,写成this.a window.a // 1 let b = 1; window.b // undefined
变量的解构赋值
数组的解构赋值:
以前,为变量赋值,只能直接指定值。
let a = 1; let b = 2; let c = 3;
ES6 允许写成下面这样。
let [a, b, c] = [1, 2, 3];
上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。
解构赋值允许指定默认值
let [foo = true] = []; foo // true let [x, y = 'b'] = ['a']; // x='a', y='b' let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
对象的解构赋值:
解构不仅可以用于数组,还可以用于对象。
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
let { bar, foo } = { bar: "bbb" , foo: "aaa"}; foo // "aaa" bar // "bbb"
字符串的解构赋值:
字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello'; a // "h" b // "e" c // "l" d // "l" e // "o"
数值和布尔值的解构赋值(略)
函数参数的解构赋值(略)
字符串的扩展
1、字符的 Unicode 表示法: 用大括号
JavaScript 允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点。
但是,这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表示。
let s1='\u20BB7'; //₻7 let s2='\u{20BB7}'; //𠮷
2、codePointAt()
3、String.fromCodePoint()
4、字符串的遍历器接口。
for (let codePoint of 'foo') { console.log(codePoint) }
除了遍历字符串,这个遍历器最大的优点是可以识别大于0xFFFF的码点,传统的for循环无法识别这样的码点。
5、at()
'abc'.at(0) // "a" '𠮷'.at(0) // "𠮷"
ES5 对字符串对象提供charAt方法,返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF的字符。
目前,有一个提案,提出字符串实例的at方法,可以识别 Unicode 编号大于0xFFFF的字符,返回正确的字符。
6、normalize()
7、includes(), startsWith(), endsWith()
includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
8、repeat() 返回一个新字符串,表示将原字符串重复n次。
'hello'.repeat(3) // "hellohellohello"
9、padStart(),padEnd() 字符串补全长度。
如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。
padStart和padEnd一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。
'x'.padStart(10, 'abc') // 'abcabcabcx' 'x'.padStart(5, 'm') // 'mmmmx' 'x'.padEnd(10, 'abc') // 'xabcabcabc' 'x'.padEnd(5, 'm') // 'xmmmm'
10、模板字符串
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var basket={ count:123, onSale:'ddd' }; $('#result').append(` There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale! `); }); </script> <div id="result" style="border:1px solid red;"></div>
如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。
模板字符串中嵌入变量,需要将变量名写在${}之中。
11、标签模板
12、String.raw()
...