文章

ES 6 即时笔记
2018/07/09

总览 ES6 有哪些新特性

outline

let 和 const 变量声明

var

  • 函数作用域 (function scope)
  • 可重复声明、更改赋值
  • 有变量提升 (hoisting)
  • 自动绑定全局作用域

let

  • {花括号}块级作用域 (block scope)
  • 同一作用域下可更改值但不可以重复声明 -w702
  • 无变量提升 (no hoisting)
  • 不绑定全局作用域

const

  • {花括号} 块级作用域 (block scope)
  • 声明时必须赋值 -w702
  • 无法更改,但可以增加或更改 array.itemobject.property -w702
  • 无变量提升 (no hoisting)
  • 不绑定全局作用域

值得注意

  • 在同一作用域内,若在 letconst 声明之前调用该变量,会报错 -w703

原因:

临时死区 (Temporal Dead Zone),简写为 TDZ。 letconst 声明的变量不会被提升到作用域顶部,如果在声明之前访问这些变量,会导致报错。 这是因为 JavaScript 引擎在扫描代码发现变量声明时,要么将它们提升到作用域顶部(遇到 var 声明),要么将声明放在 TDZ 中(遇到 letconst 声明)。访问 TDZ 中的变量会触发运行时错误。只有执行过变量声明语句后,变量才会从 TDZ 中移出,然后方可访问。

模板字符串 (Template Strings)

支持换行、空格、缩进

支持嵌入变量

let i = `现在是北京时间 ${time} 点`

支持嵌套

let arr = [{value: 1}, {value: 2}];
let message = `
 ${arr.map((item) => {
    return `
        ${item.value}
    `
 }).join('')}
`;
console.log(message);

箭头函数 (Arrow Function)

总览

// 写法一
let fn = (para1, para2) => para1 * para2;
// 写法二
let fn = (para1, para2) => {
    return para1 * para2;
};
// 简略写法
// 当只有一个参数时可以不用加括号
// 不加花括号自动返回值
let fn = para1 => para1

没有 this

  • 箭头函数本身没有 this,所以无法用 call(), bind(), apply()等方法改变其 this 的指向,如果箭头函数被非箭头函数包含,this 绑定的就是最近一层非箭头函数的 this-w500

没有 arguments 对象

  • 没有自己的 arguments 对象 -w500
  • 但可以访问外围函数的 arguments 对象 -w500

不能用 new 调用

  • JavaScript 函数有两个内部方法:CallConstruct
  • 当通过 new 调用函数时,执行 Construct 方法,创建一个实例对象,然后再执行函数体,将 this 绑定到实例上。
  • 当直接调用的时候,执行 Call 方法,直接执行函数体。
  • 箭头函数并没有 Construct 方法,不能被用作构造函数,如果通过 new 的方式调用,会报错。

没有原型

  • 声明箭头函数只能用
let a = () => {}
  • 不能调用 new 来构造,也不能被用作构造器,所以也没有构造原型的需求。

没有 super, new.target()

箭头函数总结

箭头函数不适合用作对象里的方法函数,因为它的 this 并不止像调用该方法的上下文,而指向外围函数的 this

新的 String 方法

.includes()

"这个字符串包含了'JS'".includes('JS') // true

用来检测 String 是否包含某字符串,再也不要用 .indexOf() 啦~

.repeat()

'abc'.repeat(3) //abcabcabc

解构赋值(Destructuring)

一次性将数组或对象里的内容映射赋值到对应的变量中

// 数组解构
let arr = [1,2,3,4,5,6];
let [q,w,e,r,t,y] = arr;
console.log(q, t); // 1  5
// 对象解构
let obj = {first: 1, second: 2};
let {first: first_new, second: second_new} = obj; 
console.log(first_new, second_new); //1  2
let {first, second} = obj; // 相当于 let {first: first, second: second} = obj
console.log(first, second); //1  2

ES6 模块化

多种 export 方式

//单独输出
export let a = 1;
export function fn () {};
//批量输出
let fn2 = () => {};
let fn3 = () => {};
export {fn2, fn3};
let b = {
    a: fn2,
    b: fn3
};
export default b;
export {b as default};

多种 import 方式

//输入整个文件(注意:输入某个完整 JS 文件的话将会最先执行该文件里的代码)
import 'util'
//选择性的根据名字输入
import {a, b, c} from 'util'
//还可以临时更改名字
import {a as first, b as second, c as third} from 'util'
//将所有可以输入的内容归纳进一个对象,防止命名冲突
import * as util from 'util';
//输入默认的可输入对象
import util from 'util';
import {default as util} from 'util';

函数参数

新的 parameters 默认赋值方式

//设置参数 a 的默认值为 'default'
function fn (a='default') {
    // 这里的 a 默认值为 default
}

... (rest 符号)

//用 ... 来表示所有参数
function (...countlessOfParameters) {
    console.log(countlessOfParameters) // Array
    console.log(countlessOfParameters.length)
}

parameters 也支持 destructuring

// 这里的参数必须为 Object 否则报错
function fn ({a='a_default', b='b_default'}) {}
let para = {first: 1, second: 2}
fn(para)

参考文章

下面这篇文章将会有更全面的 ES6 new features