知识点
- Ecmascript 6
Ecmascript 6
- ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。
- Ecmascript 是 JavaScript 语言的标注规范
- JavaScript 是 Ecmascript 规范的具体实现
- 具体实现取决于各大浏览器厂商的支持进度
- Ecmascript 6 也被称作 Ecmascript 2015
- 各大浏览器厂商对于最新的 Ecmascript 6 标准支持可以参照:
- 对于不支持 ES6 的环境,可以使用一些编译转码工具做转换处理再使用
- 例如 babel
let 和 const
let:
- let 类似于 var,用来声明变量
- 通过 let 声明的变量不同于 var,只在 let 命令所在的代码块内有效(块级作用域)
- let 声明的变量不存在变量提升
- let不允许在相同作用域内,重复声明同一个变量
const:
- const声明一个只读的常量。一旦声明,常量的值就不能改变
- const 声明必须初始化
- const的作用域与let命令相同:只在声明所在的块级作用域内有效
- const命令声明的常量也是不提升,必须先声明后使用
- const声明的常量,也与let一样不可重复声明
解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
数组解构:
对象解构:
函数参数解构:
字符串解构:
字符串
实用方法:
模板字符串:
- 模板字符串(template string)是增强版的字符串,用反引号(`)标识
- 它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量
- 如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中
- 模板字符串中嵌入变量,需要将变量名写在
${}
之中
- 大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性
- 大括号内部还可以调用函数
数组
方法:
实例方法:
ES6提供三个新的方法——entries(),keys()和values()——用于遍历数组.
可以用 for...of
循环进行遍历,唯一的区别是 keys()
是对键名的遍历、
values()
是对键值的遍历,entries()
是对键值对的遍历。
函数的扩展
函数参数的默认值:
- 通常情况下,定义了默认值的参数,应该是函数的尾参数
- 因为这样比较容易看出来,到底省略了哪些参数
- 如果非尾部的参数设置默认值,实际上这个参数是没法省略的。
- 指定了默认值以后,函数的length属性,将返回没有指定默认值的参数个数
- 也就是说,指定了默认值后,length属性将失真
rest 参数:
扩展运算符:
箭头函数:
- 箭头函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象
- 箭头函数不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误
- 箭头函数内部不可以使用arguments对象,该对象在函数体内不存在
- 如果要用,可以用Rest参数代替
对象
属性的简洁表示法:
babel
详细配置使用方式请见:http://es6.ruanyifeng.com/#docs/intro#Babel转码器
在线教育项目
npm scripts
请参考:阮一峰 - npm scripts 使用指南
目标
- 能掌握 let 和 const 的用法并解释它们的作用
- 能掌握解构赋值的基本使用(数组、对象、函数参数)
- 能掌握模板字符串的基本使用
- 能掌握数组中扩展的新方法(Array.from()、Array.of()、find、findIndex、includes)
- 能掌握ES6中函数的一些特性使用方法(参数默认值、rest参数、扩展运算符、箭头函数)
- 能掌握ES6中模块化的基本用法(import、export、export default)
- 能掌握 babel 的基本使用(配置完成对在线教育项目中由开发环境代码到生产环境代码的转换)