文章目录
1. ECMAScript 简介
(1). ECMAScript 和 JavaScript 的关系
ECMAScript 是 JavaScript 的规范,JavaScript 是 ECMAScript 的一种实现。
(2). ES6 与 ECMAScript 2015 的关系
ES6 是一个泛指,含义是 ES5.1 版本以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017等等。而 ES2015 则是正式名称,特指2015年发布的正式版本的语言标准。
(3)Babel转码器
安装 babel
npm install --save-dev @babel/core
// -S \ -D 区分产品安装依赖还是开发安装依赖
TIPS
-S, --save: Package will appear in your dependencies.
-D | -P, --save-dev: Package will appear in your devDependencies.
-O, --save-optional: Package will appear in your optionalDependencies.
配置文件 .babelrc(用于设置转码规则和插件)
基本格式如下:
{
"presets": [],
"plugins": []
}
presets 字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。
// 最新转码规则
npm install --save-dev @babel/preset-env
// react 转码规则
npm install --save-dev @babel/preset-react
然后将这些规则加入 .babelrc
{
"presets": [
"@babel/env",
"@babel/preset-react"
],
"plugins": []
}
命令行转码
Babel 提供命令行转码工具 @babel/cli,用于命令行转码。
安装@babel/cli
npm install --save-dev @babel/cli
基本用法:
# 转码结果输出到标准输出
$ npx babel example.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ npx babel example.js --out-file compiled.js
# 或者
$ npx babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ npx babel src --out-dir lib
# 或者
$ npx babel src -d lib
# -s 参数生成source map文件
$ npx babel src -d lib -s
2. let 和 const 命令
(1)let 和 const 的共同点:
1)不会存在变量提升
2)会造成暂时性死区
3)不允许重复声明
(2)let 的其它特点
let 为 JavaScript 新增了块级作用域
(3)const 的其它特点
const 声明的是一个只读的变量(const 一旦声明变量,就必须立即初始化)。
const 实质上保证的是:变量所指向的那个内存地址的数据不得更改。(对于简单数据类型而言,const 声明的变量就是一个常量;当时对于复合数据类型而言,只是说指向对象的内存地址不变,却不能保证具体的数据不发生改变)
(4)ES6 声明变量的六种方法
var
function
let
const
class
import
后四种是 ES6 中新增的。
3. 变量的解构赋值
基本用法: 按照一定的模式,从数组和对象中提取值,对变量进行赋值。
(1)数组的解构赋值
let [a, b, c] = [1, 2, 3]; // a = 1, b = 2, c = 3
let [foo, [bar], baz] = [1, [2], 3];
// bar = 2, baz = 3
let [ , , third] = [1, 2, 3];
// third = 3;
let [x, , y] = [1, 2, 3];
// y = 3
let [head, ...tail] = [1, 2, 3, 4];
// tail = [2, 3, 4]
let [x, y, ...z] = ['a'];
// x = 'a', y = undefined, z = []
// 如果解构不成功,那么变量的值就等于 undefined
对数组可进行对象解构赋值
let arr = [1, 2, 3];
let { 0: first, [arr.length - 1]: last } = arr;
// first = 1, last = 3
(2)对象的解构赋值
对象的解构赋值的规则与数组的类似,其中比较重要的一个不同点就是:数组的解构赋值与数组数据的次序关系密切;而对象的解构赋值则不是这样的,变量的取值与对象的属性名关系密切。如果变量名与对象某个属性名相同,则被赋值对应的属性值。
let { log, sin, cos } = Math;
// 对象的解构赋值,可以很方便地将对象的方法赋值给某个变量。
如果变量名与属性名不一致,则要采取如下的语法:
let { foo: baz } = { bar: 1, foo: 2 };
// baz = 2
// foo: error: foo is not defined
(3)字符串的解构赋值
const [ a, b, c, d, e ] = 'hello';
// a = 'h', e = 'o'
let { length: len } = 'hello';
// len = 5
(4)数值和布尔值的解构赋值
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。
let { toString: s } = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
(5) 函数参数的解构赋值
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
(6)解构赋值中的默认值
无论是数组还是对象的解构赋值,只有当变量取值严格等于 undefined 时,默认值才会被赋给变量
let [x = 1] = [];
// x = 1
let [x = 1] = [undefined];
// x = 1
let [x = 1] = [null];
// x = null
let [x = 1, y = x] = []; // x=1; y=1
let [x = 1, y = x] = [2]; // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = []; // ReferenceError: y is not defined
var {x = 3} = {};
// x = 3
var {x, y = 5} = {x: 1};
// x = 1
// y = 5
var {x: y = 3} = {};
// y = 3
var {x: y = 3} = {x: 5};
// y = 5
var { message: msg = 'Something went wrong' } = {};
// msg = "Something went wrong"
默认值生效的条件是,对象的属性值严格等于undefined。
var {x = 3} = {x: undefined};
// x = 3
var {x = 3} = {x: null};
// x = null
(7)用途
1)交换变量的值
2)从函数返回多个值,可以很方便解构赋值给变量
3)提取 JSON 数据
4)函数参数的默认值
5)输入模块的指定方法
(8)其它说明
1)如果解构失败,则变量的值为 undefined
2)解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错。