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用于从共享内存位置读取和写入


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

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

友情链接更多精彩内容