ES 2015/6 新增内容还是比较多的,这里仅大纲性的列举一下(不一定全面)这些特性。其实,每个点挖进去都会有很多学问在里头,本文旨在汇总,所以不对这些特性进行深层次的讨论及研究。随后若有时间,再单独写几篇博客对常用的点进行深挖,与大家进行深度交流。

箭头函数

箭头函数,通过 => 语法实现的函数简写形式,C#/JAVA8/CoffeeScript 中都有类似语法。与函数不同,箭头函数与其执行下文环境共享同一个 this。如果一个箭头函数出现在一个函数对象内部,它会与这个函数共享 arguments 变量。

// Expression bodies
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i); // Statement bodies
nums.forEach(v => {
if (v % 5 === 0)
fives.push(v);
}); // Lexical this
var bob = {
_name: "Bob",
_friends: ['jim'],
printFriends() {
this._friends.forEach(f =>
console.log(this._name + " knows " + f)); // Bob knows jim
}
}; // Lexical arguments
function square() {
let example = () => {
let numbers = [];
for (let number of arguments) {
numbers.push(number * number);
} return numbers;
}; return example();
} square(2, 4, 7.5, 8, 11.5, 21); // returns: [4, 16, 56.25, 64, 132.25, 441]

类 Class

Javascript 并不是引入了一个新的面向对象的对象继承模型,而是基于原型继承的语法糖。其提供了一个更简单和清晰的语法来创建对象并处理继承。

class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}

类没有声明提升,必须确保在调用前已经进行了声明。

构造函数 constructor 是一个特殊的方法,其用于创建和初始化类的实例。

静态方法 static 关键字用于声明静态方法

创建子类 extends 关键字用于创建子类,这里要注意:extends 不能用于扩展常规对象(不可构造/非构造的),如果要继承常规对象,可使用 Object.setPrototypeOf()

调用超类 super 关键字可以用来调用父类中的方法

Mix-ins 混合

增强的对象字面量

通过字面量形式可以实现,定义prototype、键值对简写、定义方法等、动态属性名称。

var obj = {
// Sets the prototype. "__proto__" or '__proto__' would also work.
__proto__: theProtoObj,
// Computed property name does not set prototype or trigger early error for
// duplicate __proto__ properties.
['__proto__']: somethingElse,
// Shorthand for ‘handler: handler’
handler,
// Methods
toString() {
// Super calls
return "d " + super.toString();
},
// Computed (dynamic) property names
[ "prop_" + (() => 42)() ]: 42
};

模板字符串

模板字符串 提供构造字符串的语法糖,在 Prel/python 等语言中也都有类似特性。

// Basic literal string creation
`This is a pretty little template string.` // Multiline strings
`In ES5 this is
not legal.` // Interpolate variable bindings
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?` // Unescaped template strings
String.raw`In ES5 "\n" is a line-feed.` // Construct an HTTP request prefix is used to interpret the replacements and construction
GET`http://foo.org/bar?a=${a}&b=${b}
Content-Type: application/json
X-Credentials: ${credentials}
{ "foo": ${foo},
"bar": ${bar}}`(myOnReadyStateChangeHandler);

解构赋值

Destructuring 法是一个Javascript表达式,这使得可以将值从数组或属性从对象提取到不同的变量中。

// list matching
var [a, ,b] = [1,2,3];
a === 1;
b === 3; // object matching (用新变量名赋值)
var { op: a, lhs: { op: b }, rhs: c }
= getASTNode() // object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode() // Can be used in parameter position
function g({name: x}) {
console.log(x);
}
g({name: 5}) // Fail-soft destructuring
var [a] = [];
a === undefined; // Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1; // 变量可以先赋予默认值。当要提取的对象没有对应的属性,变量就被赋予默认值。
var {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5 // Destructuring + defaults arguments
function r({x, y, w = 10, h = 10}) {
return x + y + w + h;
}
r({x:1, y:2}) === 23 // 对象属性计算名和解构
let key = "z";
let { [key]: foo } = { z: "bar" }; console.log(foo); // "bar"

Default + Rest + Spread

为函数参数提供默认值 & ... 定数量参数

function f(x, y=12) {
// y is 12 if not passed (or passed as undefined)
return x + y;
}
f(3) == 15 function f(x, ...y) {
// y is an Array
return x * y.length;
}
f(3, "hello", true) == 6 function f(x, y, z) {
return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6

Let + Const

let 用于声明块级作用域变量。 const 用于声明常量。

function f() {
{
let x;
{
// this is ok since it's a block scoped name
const x = "sneaky";
// error, was just defined with `const` above
x = "foo";
}
// this is ok since it was declared with `let`
x = "bar";
// error, already declared above in this block
let x = "inner";
}
}

迭代器

通过 symbol.iterator 可创建自定义迭代器。

let fibonacci = {
[Symbol.iterator]() {
let pre = 0, cur = 1;
return {
next() {
[pre, cur] = [cur, pre + cur];
return { done: false, value: cur }
}
}
}
} for (var n of fibonacci) {
// truncate the sequence at 1000
if (n > 1000)
break;
console.log(n);
}

生成器 Generators

普通函数使用function声明,而生成器函数使用function*声明。

在生成器函数内部,有一种类似return的语法:关键字yield。二者的区别是,普通函数只可以return一次,而生成器函数可以yield多次(当然也可以只yield一次)。在生成器的执行过程中,遇到yield表达式立即暂停,后续可恢复执行状态。

function* quips(name) {
yield "你好 " + name + "!";
yield "希望你能喜欢这篇介绍ES6的译文";
if (name.startsWith("X")) {
yield "你的名字 " + name + " 首字母是X,这很酷!";
}
yield "我们下次再见!";
}

Unicode

// same as ES5.1
"

ES 2015/6 新特性汇总的更多相关文章

  1. 【转】Spark-Sql版本升级对应的新特性汇总

    Spark-Sql版本升级对应的新特性汇总 SparkSQL的前身是Shark.由于Shark自身的不完善,2014年6月1日Reynold Xin宣布:停止对Shark的开发.SparkSQL抛弃原 ...

  2. iOS8 针对开发者所拥有的新特性汇总如下

    iOS8 针对开发者所拥有的新特性汇总如下 1.支持第三方键盘 2.自带网页翻译功能(即在线翻译) 3.指纹识别功能开放:第三方软件可以调用 4.Safari浏览器可直接添加新的插件. 5.可以把一个 ...

  3. 21、前端知识点--html5和css3新特性汇总

    跳转到该链接 新特性汇总版: https://www.cnblogs.com/donve/p/10697745.html HTML5和CSS3的新特性(浓缩好记版) https://blog.csdn ...

  4. 【ES】338- ECMAScirpt 2019 新特性汇总

    点击上方"前端自习课"关注,学习起来~ 最近在做的一个活动,大家都可以参与: 送 1600 元超大现金红包啦,走过路过不要错过哦 ~ 最近 ECMAScript2019,最新提案完 ...

  5. Swift3新特性汇总

    之前 Apple 在 WWDC 上已将 Swift 3 整合进了 Xcode 8 beta 中,而本月苹果发布了 Swift 3 的正式版.这也是自 2015 年底Apple开源Swift之后,首个发 ...

  6. iOS6、7、8、9新特性汇总和适配说明

    iOS6新特性 一.关于内存警告 ios6中废除了viewDidUnload,viewWillUnload这两个系统回调,收到内存警告时在didReceiveMemoryWarning中进行相关的处理 ...

  7. 2015 Objective-C 新特性

    Overview 自 WWDC 2015 推出和开源 Swift 2.0 后,大家对 Swift 的热情又一次高涨起来,在羡慕创业公司的朋友们大谈 Swift 新特性的同时,也有很多像我一样工作上依然 ...

  8. 【CuteJavaScript】ES2019 新特性汇总

    最近 ECMAScript2019,最新提案完成:tc39 Finished Proposals,我这里也是按照官方介绍的顺序进行整理,如有疑问,可以查看官方介绍啦~ 另外之前也整理了 <ES6 ...

  9. H5新特性汇总

    H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...

随机推荐

  1. fileInput实战总结

    fileinput组件实战总结 fileinput是一个增强的基于Bootstrap3.x和HTML5的文件上传工具,具备多种格式文件的预览功能, 另外,它包含了基于AJAX的上传,拖拽和撤销文件,可 ...

  2. 微信公众号开发笔记2(nodejs)

    本篇主要记录调用微信各种api和功能实现 一.始于access_token 无论调用微信的什么api,都需要一个查询参数,就是我们每隔1小时或者2小时获取的access_token,笔记1中已经保证了 ...

  3. Java中的增强 for 循环 foreach

    foreach 是 Java 中的一种语法糖,几乎每一种语言都有一些这样的语法糖来方便程序员进行开发,编译期间以特定的字节码或特定的方式来对这些语法进行处理.能够提高性能,并减少代码出错的几率.在 J ...

  4. Docker - 虚拟网桥

    容器的网络模式 None --- 容器不能访问外部网络,内部存在回路地址. Container --- 将容器的网络栈合并到一起,可与其他容器共享网络. Host --- 与主机共享网络. Bridg ...

  5. 记事本app TOP5(个人观点)

    1.为知笔记 为知笔记定位于高效率工作笔记,主打工作笔记的移动应用,是目前国内唯一一款"工作笔记"的云笔记类产品.除了常用的笔记功能保存的网页.灵感笔记.重要文档.照片.便签等,为 ...

  6. [刷题]算法竞赛入门经典(第2版) 5-16/UVa212 - Use of Hospital Facilities

    题意:模拟患者做手术. 其条件为:医院有Nop个手术室.准备手术室要Mop分钟,另有Nre个恢复用的床.准备每张床要Mre分钟,早上Ts点整医院开张,从手术室手术完毕转移到回复床要Mtr分钟.现在医院 ...

  7. angular控制器之间的传值

    每个controller都会有自己的scope,所有的scope都是属于 $rootScope的子或者子的子... 那么问题就好解决了,通过 $rootScope.$broadcast 广播的事件每个 ...

  8. CSS之BFC及其应用

    BFC是Block Formatting Context的缩写,直译过来就是"块级格式化上下文".先不管它到底是什么,看一个例子: .parent{ border: 1px sol ...

  9. .Net Core 连输入中文都变坑了...

    前不久Core诞生时候,那个时候我也在项目上没时间去尝那青涩的味道.今天刚刚装上2017就等不及的试了一下. 先创建了一个控制台的应用程序,然后在Main()方法中写了几句话,就等不及的Ctrl+F5 ...

  10. Spring Boot 学习(1)

    文 by / 林本托 Tip 做一个终身学习的人. Spring Boot 初体验 Spring Boot 包含了很多 start(Spring boot 中 的叫法,就是一个模块,后文统一称模块,便 ...