读阮一峰《ECMAScript 6 入门》小结,http://es6.ruanyifeng.com/
1. ES6简介
Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码
在线转换:https://babeljs.io/repl/
2. let和const命令
let
在块级作用域内有效,var
有变量提升(变量可以在声明之前使用,值为undefined
),声明的变量有内存泄露
const
定义常量,不能改变
如果区块中存在
let
和const
命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错都属于变量的“死区”。
3. 变量的解构赋值
- 数组的解构
let [a, b, c] = [1, 2, 3]; // a=1;b=2;c=3 let [a, ...b] = [1, 2, 3, 4]; // a=1;b=[2, 3, 4]; let [x, y = 'b'] = ['a', undefined]; // x='a', y='b' let [x = 1] = [null]; // x=null
- 对象的解构
let { foo, bar } = { foo: "aaa", bar: "bbb" }; 等价于 let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" }; // foo="aaa" ; bar="bbb" let { foo: baz } = { foo: 'aaa', bar: 'bbb' };// baz="aaa"
- 字符串的解构赋值
const [a, b, c, d, e] = 'hello'; //'h','e','l','l','e' let {length : len} = 'hello'; // len=5
- 数值和布尔值的解构赋值
函数参数的解构赋值
function add([x, y]){ return x + y; } add([1, 2]); // 3
用途:
- 交换变量的值
[x, y] = [y, x]
- 从函数返回多个值
函数参数的定义
// 参数是一组有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]); // 参数是一组无次序的值 function f({x, y, z}) { ... } f({z: 3, y: 2, x: 1});
提取 JSON 数据
let jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData; console.log(id, status, number); // 42, "OK", [867, 5309]
- 函数参数的默认值
- 遍历 Map 结构
- 输入模块的指定方法
4. 字符串的扩展
- 可以被
for...of
循环遍历 includes()
:返回布尔值,表示是否找到了参数字符串。
startsWith()
:返回布尔值,表示参数字符串是否在原字符串的头部。
endsWith()
:返回布尔值,表示参数字符串是否在原字符串的尾部
这三个方法都支持第二个参数,表示开始搜索的位置。repeat()
: 返回一个新字符串,表示将原字符串重复n次padStart()
用于头部补全,padEnd()
用于尾部补全。'3'.padStart(2, '0') //03
- 模板字符串
$('#result').append(` There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale! `);
模板字符串中嵌入变量,需要将变量名写在${}
之中。
5. 正则的扩展
RegExp
构造函数第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符。而且,返回的正则表达式会忽略原有的正则表达式的修饰符,只使用新指定的修饰符。u
修饰符,含义为“Unicode 模式”y
修饰符,叫做“粘连”(sticky)修饰符。后一次匹配都从上一次匹配成功的下一个位置开始const REGEX = /a/gy; 'aaxa'.replace(REGEX, '-') // '--xa'
s
修饰符:dotAll 模式
使得.
可以匹配任意单个字符。/foo.bar/s.test('foo\nbar') // true
- 后行断言
”先行断言“指的是,x只有在y前面才匹配,必须写成/x(?=y)/
。
”先行否定断言“指的是,x只有不在y前面才匹配,必须写成/x(?!y)/
。
“后行断言”正好与“先行断言”相反,x只有在y后面才匹配,必须写成/(?<=y)x/
”后行否定断言“则与”先行否定断言“相反,x只有不在y后面才匹配,必须写成/(?<!y)x/
。 - 具名组匹配
const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/; const matchObj = RE_DATE.exec('1999-12-31'); const year = matchObj.groups.year; // 1999 const month = matchObj.groups.month; // 12 const day = matchObj.groups.day; // 31
6. 数值的扩展
Number.isFinite()
Number.isNaN()
Number.parseInt()
Number.parseFloat()
Number.isInteger()
//判断是否是整数
Math.trunc()
//方法用于去除一个数的小数部分,返回整数部分
Math.sign()
//用来判断一个数到底是正数、负数、还是零(+1,-1,0,-0,NaN)
指数运算符:**
2 ** 3 // 8
2 ** 3 ** 2 // 相当于 2 ** (3 ** 2)
7. 函数的扩展
- ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。
- 参数默认值不是传值的,而是每次都重新计算默认值表达式的值。也就是说,参数默认值是惰性求值的。
let x = 99; function foo(p = x + 1) { console.log(p); } foo() // 100 x = 100; foo() // 101
- 函数的
length
属性,将返回没有指定默认值的参数个数
(function (a, b, c = 5) {}).length
// 2 - rest 参数
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10
- 箭头函数
如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
箭头函数有几个使用注意点:
(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
(4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
8. 数组的扩展
9. 对象的扩展
10. Symbol
- 一种新的原始数据类型
Symbol
,表示独一无二的值。 - 用于对象的属性名,就能保证不会出现同名的属性
在对象的内部,使用 Symbol 值定义属性时,Symbol 值必须放在方括号之中。 - 消除魔术字符串
- Symbol 作为属性名,该属性不会出现在
for...in
、for...of
循环中,也不会被Object.keys()
、Object.getOwnPropertyNames()
、JSON.stringify()
返回。但是,它也不是私有属性,有一个Object.getOwnPropertySymbols
方法,可以获取指定对象的所有 Symbol 属性名。
11. Set 和 Map 数据结构
- Set 它类似于数组,但是成员的值都是唯一的,没有重复的值。
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]