ES6要点

注:此为ES要点和使用心得概括,适合学习过的人查缺补漏
初学者看这里传送门

let与const

1,拥有块级作用域
2,let变量,const常量(指针不变)(其中const声明时必须同步初始化,即赋值)
3,不存在变量提升(var存在变量提升,提前使用,值为undefined,ES6以上会报错)
4,有暂时性死区(没有变量提升的后果)
5,不允许重复声明

var tmp = 123;
if (true) {
tmp = 'abc'
let tmp;
// 报错,暂时性死区
// 如果没有let tmp,就不会报错
}

// 注意
typeof x;
let x;   // 会报错,typeof不再安全

解构赋值

主要说下用途:
1,变量交换
2,处理函数返回多个值的情况
3,函数参数
4,提取json数据(前后端交互)
5,函数参数设置默认值
6,遍历map结构
7,模块化引入时尤其常用

{
    let json = {
        title:'111',
        test:[{
            res:'test'
        }]
    }
    let {title:a, test[{res: b}]} = json
    // 此处a, b 是要赋值的变量
    // 结果是a为'111', b为'test'
}

字符串扩展

1,Unicode表示法,\u20bb7 => \u{20bb7}
2,以下差别都是对于处理Unicode字符
codePointAt() 与 charCodeAt()
fromCharCode() 与 fromCodePoint

// 以上的主要用途
{
let str = '\u{20bb7}abc';
  for (let i=0; i<str.length; i++) {
  console.log(str[i])   // 打印五个
  }
  for (let code of str) {
  console.log(code)   // 打印四个
  }
}

3,API与模板字符串

string.includes();
string.startsWith('xx');
string.endsWith('xx');
string.repeat(n);
string.padStart(n, 'xx'); // 常用于日期的补白,比如制作 2019/03/05,后面的03和05即可使用
string.padEnd(n, 'xx');

4,标签模板
用途,过滤HTML字符串,抵御XSS攻击;多语言转换等
5,string.raw
使\n不生效


数值扩展

1,二进制,八进制分别以0b和0o开头即可
2,API
以下输入必须为数字类型,否则返回false

Number.isFinite(15);  // 是否再JS number范围内,输入NaN,为false
Number.isNaN()
Number.isInteger()  // 判断是不是整数,25.0是整数报true
Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER
Number.isSafeInteger(n)
Math.trunc(4.2)   //取整
Math.sign(n)  // 判断正负,返回值为1,0,-1,字符串会先转换为数字 '50',否组返回NaN
Math.cbrt(n) // 立方根  8 => 2
// 等等其他API。。。。

数组扩展

1,API

Array.of(3, 4, 5, 7, 9)  // 生成数组
Array.from()  // 把集合转译为数组,具有遍历功能
let a = Array.from([1, 3, 5], function(item) {return item*2})  // =>结果[2, 6, 10]
Array.fill(‘xxx', start, end)  // 充满数组,覆盖原值

//遍历
for ( let index of array.keys() ) {}
for ( let value array.values() ) {}
for ( let [index, value] array.entries() ) {}

Array.copyWithin(startPaste, starCopy, endCopy)

// 查找
Array.find( function() {return xxx})  // 只返回第一个的value
Array.findIndex( function() {return xxx})  // 只返回第一个的index

Array.includes(n)  //可以辨识NaN

函数

1,参数默认值
参数的作用域只在函数内部
默认值取值为变量,此变量先在函数内部查找(包括查找其他参数),如没有,则全局查找

let x='hhaha'
function test (x, y=x) { console.log() }
test() // 结果为undefind undefind
function test2 (C, y=x) { console.log() }
test2() // 结果为undefind 'hhaha'

2,rest参数
rest是arguments转换为数组的形式
3,扩展运算符
把数组扩展为离散的值
4,箭头函数
5,尾调用
函数的最后一句命令是一个函数,即尾调用,例如:return function();
优点,提升性能


对象

1,属性简洁表示,相同就写一个,函数则hello () {}
2,属性名可以是变量或者表达式,用 [ ] 包裹
3,API

Object.is('xxx', 'xxx')  /判断相等,同===
Object.is([], [])  //false , [] === [] false数组不等于数组,引用对象

Object.assign({}, {})  //浅拷贝,只是拷贝引用地址,不会拷贝原型属性

Object.entries, Object.keys, Object.values
// let of 遍历entries,value,key

4,同数组,解构赋值可以使用扩展运算符


Symbol

概念,提供一个独一无二的值,永远不会相等
for in,,let of取不到symbol属性

Object.getOwnPropertySymbols(obj)  // 结果为数组,是所有的key为symbol的属性

Reflect.ownKeys(obj)  // 返回值是数组,包含所有的属性(普通和symbol)

let a1 = Symbol()
let a2 = Symbol()
a1 === a2   // false
let a3 = Symbol.for('a3')  // 有key值a3可以恢复值
let a4 = Symbol.for('a3')
a3 === a4  // true

数据结构Set,Map

数组的遍历方法皆可用

Set,元素必须是唯一的,添加重复元素会被去重
WeakSet()只接受对象;是弱引用,不会检测垃圾回收机制;,没有size属性,不能使用clear,不能遍历
作用:去重

//api
add()  delete()  clear()  has()

let list = new Set()
list.add(5)
list.size   // =>   1
let arr = [1, 2, 3, 1, 2, '3']
let list22 = new Set(arr)
list22.size  // => 4    去重,数据类型不转换

Map,
WeakMap 接受key必须是对象,没有size属性,不能使用clear,不能遍历,弱引用(同上wekset)

// api
let map = new Map()
map.set(key, value)   map.delete(key)   map.clear()  map.has()
map.get(key)
map.size

let map = new Map([ ['a', 123], ['b', 456] ])

对比Array,Object,set,map使用情况

操作 Array map set Object
array.push map.set set.add Obj[x] = x
array.find map.has set.has x in Obj
array.forEach或array[n].xx = xx map.set set.forEach(或者修改引用对象) Obj[x] = x
array.splice配合findIndex map.delete set.forEach( set.delete) delete Obj[x]

综上,优先考虑map,考虑唯一性,使用set


Proxy和Reflect(代理与反射)

用处:数据校验,与业务解耦
两者API全部相同,后者不需要new
例如:Reflect.set(Obj, key, value)

QQ截图20190324182551.png

还可以拦截 in Obj,利用has() {}
还可以拦截 delete,利用deleteProperty() {}
还有很多其他拦截……


QQ截图20190324182924.png

使用前要new
1,就是个对象,多了个constructor, extends和super(),然后实现了面向对象编程
2,额外还有get, set方法操作类的属性,set xxx () {}
3,静态方法 static xx () {}
4,静态属性 class xx; xx.a = 'b'(就是对象添加属性)


Promise

懂得异步编程就比较简单
基础用法+promise.all() promise.race()
链式:promise.then( () => { return promise2 } ).then.........


Iterator和Generator

1,Iterator遍历器接口接口,配置与next()调用
2,Generator函数,特殊函数,异步解决方案
调用next(), 执行yield
3,两者关系,Generator可以生成Iterator接口给对象,然后利用let of遍历
4,Generator函数制作状态机,长轮询
5,async, await是Generator函数语法糖

Decorator

修饰器是一个函数,扩展类的行为
多引用第三方库
用途:埋点与日志


修饰器.png

模块化

分别导出与全部导出
分别引入与全部引入

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,172评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,346评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,788评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,299评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,409评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,467评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,476评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,262评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,699评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,994评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,167评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,827评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,499评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,149评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,387评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,028评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,055评论 2 352

推荐阅读更多精彩内容