es6、7、8、9主要新特效到底有哪些?

前言

这里不做新特性的解释,我们只是搬运,你需要学习的新特性。部分复杂的,我们会出文章进行阐述。

es6

必学篇:

1、Default Parameters(默认参数):可以在函数内参数默认值,如

var f = function(width = 1, height = 2) {
  ...
}

2、Template Literals (模板文本):通过``和${}实现

var name = '小雨';
var getName = `Your name is ${name} . `;
console.log(getName) // Your name is 小雨 .

3、Multi-line Strings (多行字符串):同上方法。

4、Destructuring Assignment (解构赋值)

const {a, b} = {a:1,b:2} 
const [c, d] = [3, 4] 
console.log(a, b, c, d) // 1, 2, 3, 4

5、Enhanced Object Literals (增强的对象文本)

6、Arrow Functions (箭头函数)

  • =>不改变this指向,父函数this指向哪就是哪。
  • =>指向单行代码可以当return使用。
$('.btn').click((event) => {
  this.fn();
});

7、Promises :需要专门研究一下,对比gennerator函数和async函数。

8、块作用域构造(Let and Const):const命名后不可变,let命名后数据可以变,但是没有变量提升。

const a = 1;
let b = 2;

9、Class(类):就是面向对象编程(OOP),用过react的都知道。
10、Modules(模块):export声明,import引入。

深入篇

1、全新的Math, Number, String, Array 和 Object 方法

大家去搜一下:比如,es6 string新增方法。

2、二进制和八进制数据类型:分别用前缀 0b(0B)和 0o(0O)表示

0b111110111 === 503 
0o767 === 503 

3、默认参数不定参数扩展运算符:

  • 默认参数(就是必须篇第一个)
  • rest参数:三点运算符...,用于获取剩余的对象或者数组多余参数。
  • 扩展运算符:三点运算符...,用于获取对象或者数组参数,相当于apply(null,data)

4、Symbols符号:对象属性名都是字符串容易造成属性名冲突。为了避免这种情况的发生,ES6引入了一种新的原始数据类型Symbol,表示独一无二的值。

  • 总结:个人觉得最大的用处就是symbol.iterator(遍历器),它的存在,让我们for-of成为强大的遍历方式。

5、tail调用

6、Generator (生成器):需要专门研究一下,对比promise函数和async函数。我写了Generators文章,强推。

7、新的数据构造对象map和set:还有weakmapweakset,之后会有专门文章阐述。简单来说,之前有arrayobject,es6加了这两种数据结构,通过symbol.iterator(遍历器)去管理,可以理解为for-of去实现循环。


es7

1、数组includes()方法:用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回true,否则返回false。可以在很多情况下取代indexOf;

2、求幂运算:a ** b指数运算符,它与 Math.pow(a, b)相同。


es8

1、async await:更清新的promise语法。需要专门研究一下,对比promise函数和generator函数。我写了async await文章。

2、Object的新方法:

  • Object.keys:将键值对的key值变成一个数组,例如Object.keys({a:1})
  • Object.values:将键值对的value值变成一个数组,例如Object.keys({a:1})
  • Object.entries:将键值对,key,value同时变数组,例如Object.keys({a:1})
  • Object.getOwnPropertyDescriptors:返回一个对象的所有自身属性的描述符(.value,.writable,.get,.set,.configurable,enumerable),例如Object.getOwnPropertyDescriptors({a:1})

3、字符串填充:****padStart()padEnd(),填充字符串达到当前长度。

var a  = 'x'.padStart(5, 'ab') 
console.log(a) // ababx

var b  = 'x'.padEnd(5, 'ab') 
console.log(b) // xabab

4、函数参数列表和调用中的尾逗号(Trailing commas)

5、ShareArrayBuffer和Atomics用于从共享内存位置读取和写入


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

推荐阅读更多精彩内容

  • [TOC] 参考阮一峰的ECMAScript 6 入门参考深入浅出ES6 let和const let和const都...
    郭子web阅读 1,767评论 0 1
  • 本文为阮一峰大神的《ECMAScript 6 入门》的个人版提纯! babel babel负责将JS高级语法转义,...
    Devildi已被占用阅读 1,964评论 0 4
  • 三,字符串扩展 3.1 Unicode表示法 ES6 做出了改进,只要将码点放入大括号,就能正确解读该字符。有了这...
    eastbaby阅读 1,505评论 0 8
  • 一、ES6简介 ​ 历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6(亦称 ...
    一岁一枯荣_阅读 6,043评论 8 25
  • 1.属性的简洁表示法 允许直接写入变量和函数 上面代码表明,ES6 允许在对象之中,直接写变量。这时,属性名为变量...
    雨飞飞雨阅读 1,126评论 0 3