- 整理于互联网,整理最常用的部分,完善中….
- 参考资料: http://es6.ruanyifeng.com
第一部分:扩展
1.1、let和const
const
声明一个只读的常量。一旦声明,常量的值就不能改变let
不允许在相同作用域内,重复声明同一个变量for
循环的计数器,就很合适使用let
命令- 不存在变量提升
- 会创建块级作用域
1.2、变量的解构赋值
数组解构赋值应用场景
- 变量交换
[a,b] = [b,a] |
- 选择性接收某些变量
function fn() { |
- 不确定返回数组长度,只关心第一个
[a,...b] = [1,2,3,4,5] |
对象解构赋值场景
- 服务端返回的
json
解构应用
let metaData = { |
1.3、字符串扩展
- 模板字符串是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串.
// 普通字符串 |
1.4、数值扩展
Number.isFinite(), Number.isNaN()
Number.isFinite()
用来检查一个数值是否为有限的
Number.isFinite(15); // true |
Number.isNaN()
用来检查一个值是否为NaN
Number.isNaN(NaN) // true |
Number.parseInt(), Number.parseFloat()
ES6
将全局方法parseInt()
和parseFloat()
,移植到Number
对象上面,行为完全保持不变
1.5、数组扩展
扩展运算符
- 扩展运算符是三个点(
...
)。它好比rest
参数的逆运算,将一个数组转为用逗号分隔的参数序列
console.log(...[1, 2, 3]) |
- 扩展运算符取代
apply
方法的一个实际的例子
// ES5 的写法 |
Array.from()
Array.from
方法用于将两类对象转为真正的数组:类似数组的对象(array-like object
)和可遍历(iterable
)的对象(包括ES6新增的数据结构Set
和Map
)
let arrayLike = { |
- 实际应用中,常见的类似数组的对象是
DOM
操作返回的NodeList
集合,以及函数内部的arguments
对象。Array.from
都可以将它们转为真正的数组。
querySelectorAll
方法返回的是一个类似数组的对象,可以将这个对象转为真正的数组,再使用forEach
方法
// NodeList对象 |
Array.of()
Array.of
方法用于将一组值,转换为数组Array.of
基本上可以用来替代Array()
或new Array()
Array.of(3, 11, 8) // [3,11,8] |
数组实例的 find() 和 findIndex()
数组实例的
find
方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true
的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined
[1, 4, -5, 10].find((n) => n < 0) |
数组实例的
findIndex
方法的用法与find
方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
[1, 5, 10, 15].findIndex(function(value, index, arr) { |
数组实例的fill()
fill
方法使用给定值,填充一个数组fill
方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去fill
方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置
['a', 'b', 'c'].fill(7) |
数组实例的 entries(),keys() 和 values()
ES6
提供三个新的方法——entries()
,keys()
和values()
——用于遍历数组keys()
是对键名的遍历、values()
是对键值的遍历,entries()
是对键值对的遍历
for (let index of ['a', 'b'].keys()) { |
数组实例的 includes()
Array.prototype.includes
方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes
方法类似
[1, 2, 3].includes(2) // true |
1.6、对象扩展
属性的简洁表示法
function f(x, y) { |
- 除了属性简写,方法也可以简写
const o = { |
module.exports = { getItem, setItem, clear }; |
属性名表达式
JavaScript
定义对象的属性,有两种方法
// 方法一 |
ES6
允许字面量定义对象时,用方法二(表达式)作为对象的属性名,即把表达式放在方括号内
let propKey = 'foo'; |
- 表达式还可以用于定义方法名
let obj = { |
Object.is()
Object.is
它用来比较两个值是否严格相等,与严格比较运算符(===
)的行为基本一致
Object.is('foo', 'foo') |
- 不同之处只有两个:一是
+0
不等于-0
,二是NaN
等于自身
+0 === -0 //true |
Object.assign()
Object.assign
方法用于对象的合并,将源对象的所有可枚举属性,复制到目标对象
const target = { a: 1 }; |
属性的遍历
ES6
一共有5
种方法可以遍历对象的属性
for...in
for...in
循环遍历对象自身的和继承的可枚举属性(不含Symbol
属性)
Object.keys(obj)
Object.keys
返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol
属性)的键名
Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames
返回一个数组,包含对象自身的所有属性(不含Symbol
属性,但是包括不可枚举属性)的键名
Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols
返回一个数组,包含对象自身的所有Symbol
属性的键名
Reflect.ownKeys(obj)
Reflect.ownKeys
返回一个数组,包含对象自身的所有键名,不管键名是Symbol
或字符串,也不管是否可枚举
1.7、函数扩展
函数参数的默认值
ES6
允许为函数的参数设置默认值,即直接写在参数定义的后面
function log(x, y = 'World') { |
与解构赋值默认值结合使用
- 参数默认值可以与解构赋值的默认值,结合起来使用
function foo({x, y = 5}) { |
rest 参数
ES6
引入rest
参数(形式为...
变量名),用于获取函数的多余参数,这样就不需要使用arguments
对象了。rest
参数搭配的变量是一个数组,该变量将多余的参数放入数组中
function add(...values) { |
箭头函数
var f = v => v |
var f = () => 5; |
绑定 this
- 箭头函数可以绑定this对象,大大减少了显式绑定this对象的写法(
call
、apply
、bind
)
第二部分:新增
2.1、Symbol
ES6
引入了一种新的原始数据类型Symbol
,表示独一无二的值- 凡是属性名属于
Symbol
类型,就都是独一无二的,可以保证不会与其他属性名产生冲突
2.2、Proxy
对要保护的对象套一层,不被外界所访问。
Proxy
可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写
let obj={ |
2.3、Reflect
Reflect
对象与Proxy
对象一样,也是ES6
为了操作对象而提供的新API
let obj={ |
2.4、Set和Map
Set
Set
和Map
类似,也是一组key
的集合,但不存储value
。由于key
不能重复,所以,在Set
中,没有重复的key
- 要创建一个
Set
,需要提供一个Array
作为输入,或者直接创建一个空Set
var s1 = new Set(); // 空Set |
- 重复元素在
Set
中自动被过滤
var s = new Set([1, 2, 3, 3, '3']); |
- 通过
add(key)
方法可以添加元素到Set
中,可以重复添加,但不会有效果
>>> s.add(4) |
- 通过
delete(key)
方法可以删除元素
var s = new Set([1, 2, 3]); |
Map
Map
是一组键值对的结构,具有极快的查找速度- 用
Map
实现,只需要一个“名字”-“成绩”的对照表,直接根据名字查找成绩,无论这个表有多大,查找速度都不会变慢。用JavaScript
写一个Map
如下:
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]); |
- 初始化
Map
需要一个二维数组,或者直接初始化一个空Map
。Map
具有以下方法
var m = new Map(); // 空Map |
- 由于一个
key
只能对应一个value
,所以,多次对一个key
放入value
,后面的值会把前面的值冲掉
var m = new Map(); |
2.5、Promise
Promise
是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大
Promise
对象代表一个异步操作,有三种状态pending
(进行中)fulfilled
(已成功)rejected
(已失败)
基本用法
var promise = new Promise(function(resolve, reject) { |
Promise
实例生成以后,可以用then
方法分别指定resolved
状态和rejected
状态的回调函数
promise.then(function(value) { |
2.6、Generator
generator
(生成器)是ES6
标准引入的新的数据类型。一个generator
看上去像一个函数,但可以返回多次
2.7、Class
{ |
2.8、Module
let A=123; |
Be the first person to leave a comment!