学习笔记：ES6

 

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"

数值和布尔值的解构赋值（略）

函数参数的解构赋值（略）

 

---

 

字符串的扩展

一、字符的 Unicode 表示法： 用大括号

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

可是，这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示。

let s1='\u20BB7';    //₻7
let s2='\u{20BB7}';    //𠮷

二、codePointAt()

三、String.fromCodePoint()

四、字符串的遍历器接口。

for (let codePoint of 'foo') {
    console.log(codePoint)
}

除了遍历字符串，这个遍历器最大的优势是能够识别大于0xFFFF的码点，传统的for循环没法识别这样的码点。

五、at()

'abc'.at(0) // "a"
'𠮷'.at(0) // "𠮷"

ES5 对字符串对象提供charAt方法，返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF的字符。
目前，有一个提案，提出字符串实例的at方法，能够识别 Unicode 编号大于0xFFFF的字符，返回正确的字符。

六、normalize()

七、includes(), startsWith(), endsWith()

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

八、repeat()　　返回一个新字符串，表示将原字符串重复n次。

'hello'.repeat(3) // "hellohellohello"

九、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'

十、模板字符串

模板字符串（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>

若是在模板字符串中须要使用反引号，则前面要用反斜杠转义。

模板字符串中嵌入变量，须要将变量名写在${}之中。

十一、标签模板

十二、String.raw() 

---

 

 

...