ES6(ECMAScript)
ES6(ECMAScript)
ECMAScript 6.0(以下简称 ES6)是在 2015 年 6 月正式发布的标准。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言
let 与 const
ES6 中提供了两个声明变量的关键字:const 和 let
参考链接
let 的使用
ES6 新增了let
命令,用来声明变量。它的用法类似于var
- let 声明的变量只有在当前作用域(块作用域)有效
if (true) { |
- 不允许重复声明
let a = 10 |
- 使用 let 声明的全局变量,不会成为 window 的属性
var c = 1 |
- 存在变量提升
let a = 1 |
总结 1:
- let 声明会提升到块顶部
- 从块顶部到该变量的初始化语句,这块区域叫做 TDZ(临时死区)
- 如果你在 TDZ 内使用该变量,JS 就会报错
总结 2:
- let 的「创建」过程被提升了,但是初始化没有提升
- var 的「创建」和「初始化」都被提升了
- function 的「创建」「初始化」和「赋值」都被提升了
所谓暂时死区,就是不能在初始化之前,使用变量
总结 3:
(a = 1; let a) // (括号去掉) // Uncaught ReferenceError: Cannot access 'a' before initialization |
如果 let x 的初始化过程失败了,那么
- x 变量就将永远处于 created 状态
- 你无法再次对 x 进行初始化(初始化只有一次机会,而那次机会你失败了)
- 由于 x 无法被初始化,所以 x 永远处在暂时死区
const 的使用
const
声明一个常量。常量:代码执行的过程中,不可以修改常量里面的值
- const 声明的量不可以改变
const PI = 3.1415 |
- const 声明的变量必须赋值
const num |
- 如果 const 声明了一个对象,仅仅保证地址不变,可以修改对象的属性
const obj = { name: 'zs' } |
- 其他用法和 let 一样
只能在当前代码块中使用
不能重复声明
不绑定全局作用域
模板字符串(模板字面量)
模板字面量 是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能
// 1. 通过``可以定义一个字符串 |
箭头函数
ES6 标准新增了一种新的函数:Arrow Function(箭头函数)
为什么叫 Arrow Function?因为它的定义用的就是一个箭头
基本使用
let fn = function(x, y) { |
参数详解
- 如果没有参数列表,使用()表示参数列表
let sum = function() { |
- 如果只有一个参数,可以省略()
let sum = function(n1) { |
- 如果有多个参数,需要使用 () 把参数列表括起来
let sum = function(n1, n2) { |
- 给参数指定默认值
let a = (n = 1) => console.log(n) |
- 不存在 prototype 这个属性
let a = () => {} |
没有 arguments
箭头函数没有自己的 arguments 对象,箭头函数可以访问外围函数的 arguments 对象
function a() { |
- Rest 参数和 arguments 对象的区别:
rest 参数只包括那些没有给出名称的参数,arguments 包含所有参数
rest 参数之后不能再有其他参数,否则会报错
函数的 length 属性,不包括 rest 参数
arguments 对象不是真正的数组,而 rest 参数是数组实例,可以直接使用数组的方法
arguments 对象拥有一些自己额外的功能
返回值详解
- 如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来
let sum = function(n1) { |
- 如果函数体只有一行一句,并且需要返回这个值,那么可以省略 {} 和 return
let fn = function(n1, n2) { |
箭头函数的注意点
- 箭头函数内部没有 this,因此箭头函数内部的 this 指向了外部的 this
- 因为箭头函数没有 this,因此箭头函数不能作为构造函数
- 不能用 call()、apply()、bind() 这些方法改变 this 的指向
【定义一个对象,定时器打招呼】
let obj = { |
对象简化语法
// 当属性的 key 和变量的名相同时可以简写 |
属性名表达式
- ES6 允许字面量定义对象时,用表达式作为对象的属性名,即把表达式放在方括号内。
let propKey = 'foo' |
class 关键字
ES5 中通过 构造函数 + 原型 的方式来实现面向对象
// 构造函数 |
ES6 中出现了 class 关键字,用来实现面向对象
class 声明不允许再次声明已经存在的类,否则将会抛出一个类型错误
class 声明不可以提升
class 仅仅是一个语法结构(语法糖),本质还是函数,实现继承本质上还是通过构造函数+原型的方式
class Person {} |
类声明
// 基本使用 |
类表达式
赋予一个命名类表达式的名称是类的主体的本地名称
// 匿名类 |
类表达式也不存在提升
static 关键字用来定义一个类的静态方法。调用静态方法不需要实例化该类,但不能通过一个类实例调用静态方法
class Point { |
继承:要实现至少需要两个 class(子类 和 父类),子类继承自父类,继承后,子类就可以使用父类中的属性或方法
// 继承 |
解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)
// 1. 对象解构 |
扩展运算符
扩展运算符(spread)是三个点(…)。作用:将一个数组转为用逗号分隔的参数序列
var arr = ['a', 'b', 'c'] |
应用
// 数组深拷贝 |
对象展开
let defaults = { food: 'spicy', price: '$$', ambiance: 'noisy' } |
对象展开仅包含对象自身的可枚举属性。 大体上是说当你展开一个对象实例时,你会丢失其方法
class C { |