learn ES6

介绍

  ES6,也叫ECMAScript2015(以下统称ES6),是ECMAScript标准的最新版本。这个标准在2015年6月份被正式批准。ES6是js语言很有意义的一次更新,也是2009年ES5被标准化以来第一次重大的更新。主流javascript引擎中的这些新特性正在开发中。

  ES6特性完整版参见:ES6特性完整版说明

  ES6有以下这些新特性:

箭头函数

  使用=>表示function的简略版。这和C#,Java8,CoffeeScript的语法很像。它可以支持声明体和表达式体,并且表达式体会有一个返回值。不像普通函数,箭头函数和其上下文共享同一个词法作用域的this。

 (译者注:词法作用域即“静态作用域”,)

 1 // Expression bodies 表达式体
 2 var odds = evens.map(v => v + 1);
 3 /*v=>v+1相当于function(v){return v+1;}*/
 4 var nums = evens.map((v, i) => v + i);
 5 var pairs = evens.map(v => ({even: v, odd: v + 1}));
 6
 7 // Statement bodies 声明体
 8 nums.forEach(v => {
 9   if (v % 5 === 0)
10     fives.push(v);
11 });
12 /*相当于nums.forEach(function (v) {
13   if (v % 5 === 0) fives.push(v);
14 });*/
15
16 // Lexical this  词法作用域的this
17 var bob = {
18   _name: "Bob",
19   _friends: [],
20   printFriends() {
21     this._friends.forEach(f =>
22       console.log(this._name + " knows " + f));
23   }
24 }

  ES2015的classes是在基于原型的面向对象模式中的一个简单的语法糖。它有一个简单的声明形式,使得类模式更易于使用,并且这种方式有益于互用性。classes支持基于原型的继承、父类方法的调用、实例化和静态方法、构造函数。

  (译者注:超级像后端语言。)

 1 class SkinnedMesh extends THREE.Mesh {//使用extends来表示继承
 2   constructor(geometry, materials) {
 3     super(geometry, materials);//父类的构造函数
 4
 5     this.idMatrix = SkinnedMesh.defaultMatrix();
 6     this.bones = [];
 7     this.boneMatrices = [];
 8     //...
 9   }
10   update(camera) {
11     //...
12     super.update();
13   }
14   get boneCount() {
15     return this.bones.length;
16   }
17   set matrixType(matrixType) {
18     this.idMatrix = SkinnedMesh[matrixType]();
19   }
20   static defaultMatrix() {//静态方法
21     return new THREE.Matrix4();
22   }
23 }

增强的对象字面量

  对象字面量被扩展成可以在构造阶段设置原型、变量名和变量值相同时可以使用简写形式(如foo:foo 可以写成foo)、定义方法、调用父方法、动态计算变量名。同时,这种方式也和上一小节说的类(class)声明十分吻合,也使得基于对象的设计更加便利。

 1 var obj = {
 2     // __proto__  obj的原型
 3     __proto__: theProtoObj,
 4     // Shorthand for ‘handler: handler’    简写,翻译过来就是handler : handler,
 5     handler,
 6     // Methods
 7     toString() {
 8      // Super calls  调用父类的函数
 9      return "d " + super.toString();
10     },
11     // Computed (dynamic) property names 需要计算的动态属性名称
12     [ ‘prop_‘ + (() => 42)() ]: 42
13 };

字符串模板

  字符串模板提供了一个创建字符串的语法糖。这和perl、python等等语言中的字符串插入功能很类似。有选择性的,它允许在字符串中插入一个标签(tag)使得字符串的构建是可定制化的,这可以避免在字符串里进行注入攻击,或者构造更高级别的结构。

 1 // Basic literal string creation  基本的字符串字面量方式创建
 2 `In JavaScript ‘\n‘ is a line-feed.`
 3
 4 // Multiline strings   多行字符串
 5 `In JavaScript this is
 6  not legal.`
 7
 8 // String interpolation 插入变量
 9 var name = "Bob", time = "today";
10 `Hello ${name}, how are you ${time}?`
11
12 // Construct an HTTP request prefix is used to interpret the replacements and construction
13 // 构建一个通用的http请求前缀,其中字段值可以动态替换
14 POST`http://foo.org/bar?a=${a}&b=${b}
15      Content-Type: application/json
16      X-Credentials: ${credentials}
17      { "foo": ${foo},
18        "bar": ${bar}}`(myOnReadyStateChangeHandler);

解构(解析结构)

  解构支持使用模式匹配来匹配数组和对象。结构是弱化失败的,类似于在一个标准的对象中查找foo[“bar”]属性,如果没有找到只是返回undefined。

  (译者注:fail-soft-字面意思是弱化失败,再这里是指如果解析结构解析不出来不会抛异常,只是返回一个undefined或默认值)

 1 // list matching 匹配数组
 2 var [a, , b] = [1,2,3];
 3
 4 // object matching 匹配对象
 5 var { op: a, lhs: { op: b }, rhs: c }
 6        = getASTNode()
 7
 8 // object matching shorthand  匹配对象的一部分
 9 // binds `op`, `lhs` and `rhs` in scope 例如getASTNode()的返回值为{op,op2,lhs,rhs},这个表达式将会自动匹配op,lhs,rhs
10 /*稍微有点难懂,下面的语句翻译过来就是
11 var _getASTNode = getASTNode();
12
13 var op = _getASTNode.op;
14 var lhs = _getASTNode.lhs;
15 var rhs = _getASTNode.rhs;
16 */
17 var {op, lhs, rhs} = getASTNode()
18
19 // Can be used in parameter position 可以作为参数使用
20 function g({name: x}) {
21   console.log(x);
22 }
23 g({name: 5})
24
25 // Fail-soft destructuring 弱化解析失败,返回undefined
26 var [a] = [];
27 a === undefined;
28
29 // Fail-soft destructuring with defaults  有默认值时弱化解析失败,返回undefiend
30 var [a = 1] = [];
31 a === 1;

默认值+不定参数+参数展开

  默认值:支持由被调用函数设置的参数默认值。

  参数展开:在函数调用时实参使用...运算符,可以将作为参数的数组拆解为连续的多个参数。 在函数定义时虚参使用...运算符,则可以将函数尾部的多个参数绑定到一个数组中。

  不定参数:不定参数取代了传统的参数,并可更直接地应用于通常的用例中。

1 //默认值
2 function f(x, y=12) {
3   // y is 12 if not passed (or passed as undefined) 如果y没有实参,则赋值为默认值12
4   return x + y;
5 }
6 f(3) == 15
1 //不定个数的参数
2 function f(x, ...y) {
3   // y is an Array    有...,表示y是一个数组
4   return x * y.length;
5 }
6 f(3, "hello", true) == 6
1 //参数展开
2 function f(x, y, z) {
3   return x + y + z;
4 }
5 // Pass each elem of array as argument ...表示在数组中的每一个元素分别按顺序对应一个入参
6 f(...[1,2,3]) == 6

let和const关键字

  两个关键字都具有块级作用域,只在块级作用域中生效。let是一种新的var。(译者注:let可以看成var,它定义的变量被限制在特定范围中才能使用,离开这个范围就自动销毁)。const只能一次性声明(译者注:不能修改其值)。两者静态限制防止了在赋值前使用变量。

 1 function f() {
 2   {
 3     let x;
 4     {
 5       // okay, block scoped name  不报错
 6       const x = "sneaky";
 7       // error, const 报错,常量不允许修改值
 8       x = "foo";
 9     }
10     // error, already declared in block 报错,在该块级作用域中已经声明了
11     let x = "inner";
12   }
13 }

Iterator+For..Of 迭代器

  可以像CLR IEnumerable或JAVA Utterable一样自定义迭代器。将for..in 变为自定义且基于迭代器的for..of。不需要通过数组实现,可以像LINQ一样使用懒惰模式。

 1 let fibonacci = {
 2   [Symbol.iterator]() {
 3     let pre = 0, cur = 1;
 4     return {
 5       next() {
 6         [pre, cur] = [cur, pre + cur];
 7         return { done: false, value: cur }
 8       }
 9     }
10   }
11 }
12
13 for (var n of fibonacci) {
14   // truncate the sequence at 1000 实现从1到1000的斐波那契数列计算
15   if (n > 1000)
16     break;
17   console.log(n);
18 }

迭代器是基于这些鸭子类型的接口(使用TypeScript类型语法,仅仅用于阐述问题)

 1 interface IteratorResult {
 2   done: boolean;
 3   value: any;
 4 }
 5 interface Iterator {
 6   next(): IteratorResult;
 7 }
 8 interface Iterable {
 9   [Symbol.iterator](): Iterator
10 }

Generators 生成器

  Generators 通过使用function和yield简化了迭代器编写。函数声明时如果是function 形式的会返回一个Generator实例。Generator是迭代器iterators的子类,还包括了额外的next和throw方法。这允许了值可以回流到生成器中,所以yield是返回一个值或者抛异常的一个表达式。

 1 var fibonacci = {
 2   [Symbol.iterator]: function*() {
 3     var pre = 0, cur = 1;
 4     for (;;) {
 5       var temp = pre;
 6       pre = cur;
 7       cur += temp;
 8       yield cur;
 9     }
10   }
11 }
12
13 for (var n of fibonacci) {
14   // truncate the sequence at 1000
15   if (n > 1000)
16     break;
17   console.log(n);
18 }

生成器接口如下(此处使用TypeScript 的类型语法,仅用于阐述问题):

1 interface Generator extends Iterator {
2     next(value?: any): IteratorResult;
3     throw(exception: any);
4 }

Unicode

  新增加的特性不影响老功能的使用,字符串将有新的文本格式,也增加了正则 u 模式来处理码位。同时,新的api可以在21码位级别上处理字符串。在javascript中,这些新增点可以支持构建全球化应用。

 1 // same as ES5.1
 2 // 与 ES5.1 相同
 3 "吉".length == 2
 4
 5 // new RegExp behaviour, opt-in ‘u’
 6 // 使用可选的‘u’修饰符表示正则
 7 "吉".match(/./u)[0].length == 2
 8
 9 // new form
10 // 左边是新写法,右边是旧写法。新的形式可以通过添加一组大括号`{}`来表示超过四字节的码点
11 "\u{20BB7}"=="吉"=="\uD842\uDFB7"
12
13 // new String ops
14 "吉".codePointAt(0) == 0x20BB7
15
16 // for-of iterates code points
17 // 以码位为单位进行迭代
18 for(var c of "吉") {
19   console.log(c);
20 }

模块 modules

  在语言层面上支持使用模块来定义组件。将流行的javascript模块加载器(AMD,CommonJS)的模式编成规范。运行时的行为由宿主定义的默认加载器决定。隐式异步模型- (当前模块)没有代码会执行,直到被请求的模块可用且处理过。

1 // lib/math.js
2 export function sum(x, y) {  //export 表示可以被加载
3   return x + y;
4 }
5 export var pi = 3.141593; 
1 // app.js
2 import * as math from "lib/math"; //import 表示被导入
3 alert("2π = " + math.sum(math.pi, math.pi));
1 // otherApp.js
2 import {sum, pi} from "lib/math";
3 console.log("2π = " + sum(pi, pi));

额外的新增的特征包括export default和export * ;

1 // lib/mathplusplus.js
2 export * from "lib/math";
3 export var e = 2.71828182846;
4 export default function(x) {//注意default关键字表示默认
5     return Math.log(x);
6 }
1 // app.js
2 import exp, {pi, e} from "lib/mathplusplus";
3 console.log("e^π = " + exp(pi));

Map + Set + WeakMap + WeakSet

  这四个对于常见的算法来说是很有用的数据结构。weakMaps这一数据结构提供的索引表,拥有不会发生内存泄露的对象键名。(注:指的是当对象作为键名时,对象可能会被回收,回收后自动移除所在键值对)。

 1 // Sets
 2 var s = new Set();
 3 s.add("hello").add("goodbye").add("hello");
 4 s.size === 2;
 5 s.has("hello") === true;
 6
 7 // Maps
 8 var m = new Map();
 9 m.set("hello", 42);
10 m.set(s, 34);
11 m.get(s) == 34;
12
13 // Weak Maps
14 var wm = new WeakMap();
15 wm.set(s, { extra: 42 });
16 wm.size === undefined
17
18 // Weak Sets
19 var ws = new WeakSet();
20 ws.add({ data: 42 });
21 // Because the added object has no other references, it will not be held in the set
22 //因为这个新的对象没有其他引用,所以不会真的添加到set

Proxies 代理

  代理创建的对象可以获得宿主对象的全部行为(属性和方法)。可以用于拦截,虚拟对象,日志/分析等。

 1 // Proxying a normal object 代理一个普通对象
 2 var target = {};//被代理的类
 3 var handler = {//第二个参数表示拦截后的操作
 4   get: function (receiver, name) {//这里是拦截获取属性的操作:p.world 相当于第二个参数name为world
 5     return `Hello, ${name}!`;
 6   }
 7 };
 8
 9 var p = new Proxy(target, handler);
10 p.world === ‘Hello, world!‘;
 1 // Proxying a function object 代理一个函数对象
 2 var target = function () { return ‘I am the target‘; };
 3 var handler = {
 4   apply: function (receiver, ...args) {
 5     return ‘I am the proxy‘;
 6   }
 7 };
 8
 9 var p = new Proxy(target, handler);
10 p() === ‘I am the proxy‘;

这里是所有运行时级别的元数据操作陷阱:

 1 var handler =
 2 {
 3   get:...,
 4   set:...,
 5   has:...,
 6   deleteProperty:...,
 7   apply:...,
 8   construct:...,
 9   getOwnPropertyDescriptor:...,
10   defineProperty:...,
11   getPrototypeOf:...,
12   setPrototypeOf:...,
13   enumerate:...,
14   ownKeys:...,
15   preventExtensions:...,
16   isExtensible:...
17 }

Symbols 符号

  symbol有权限控制对象状态。symbol允许通过String(与ES5相同)或symbol作为键来访问对象的属性。symbol是一个新的原始类型。可选的name参数用于调试-但是它不是符号身份的一部分。符号是唯一的(就像gensym),但是只要他们通过像Object.getOwnPropertySymbles这样的反射特性暴露出来,就不是私有的。

 1 var MyClass = (function() {
 2
 3   // module scoped symbol
 4   var key = Symbol("key");
 5
 6   function MyClass(privateData) {
 7     this[key] = privateData;
 8   }
 9
10   MyClass.prototype = {
11     doStuff: function() {
12       ... this[key] ...
13     }
14   };
15
16   return MyClass;
17 })();
18
19 var c = new MyClass("hello")
20 c["key"] === undefined//已经跳出了作用域,所以是undefined

内建对象可拥有子类

在ES6中,像Array,Date和Dom元素这样的内建对象都可以被子类化。

1 // User code of Array subclass
2 class MyArray extends Array {
3     constructor(...args) { super(...args); }
4 }
5
6 var arr = new MyArray();
7 arr[1] = 12;
8 arr.length == 2

Math + Number + String + Object APIs

  加了一些新的api,包括math的核心库,数组转换帮助函数,和用来复制对象的Object.assign。 

 1 Number.EPSILON
 2 Number.isInteger(Infinity) // false 是否是整形
 3 Number.isNaN("NaN") // false 是否是非法数字
 4
 5 Math.acosh(3) // 1.762747174039086 余弦
 6 Math.hypot(3, 4) // 5  直角三角形的斜边
 7 Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2   带符号的惩罚
 8
 9 "abcde".includes("cd") // true
10 "abc".repeat(3) // "abcabcabc"
11
12 Array.from(document.querySelectorAll(‘*‘)) // Returns a real Array
13 Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
14 [0, 0, 0].fill(7, 1) // [0,7,7]
15 [1, 2, 3].find(x => x == 3) // 3
16 [1, 2, 3].findIndex(x => x == 2) // 1
17 [1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2]
18 ["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
19 ["a", "b", "c"].keys() // iterator 0, 1, 2
20 ["a", "b", "c"].values() // iterator "a", "b", "c"
21
22 Object.assign(Point, { origin: new Point(0,0) }) //拷贝对象

Binary and Octal Literals

  增加了两个新的数字进制标识符,第二个字母为b来表示二进制,第二个字母为o来表示八进制。

1 0b111110111 === 503 // true 二进制
2 0o767 === 503 // true 八进制

Promises

  Promises是处理异步操作的一种模式。 Promises是第一个能代表未来能用到的值的类。Promises已经被使用在很多JavaScript第三库中。

 1 function timeout(duration = 0) {
 2     return new Promise((resolve, reject) => {
 3         setTimeout(resolve, duration);
 4     })
 5 }
 6
 7 var p = timeout(1000).then(() => {
 8     return timeout(2000);
 9 }).then(() => {
10     throw new Error("hmm");
11 }).catch(err => {
12     return Promise.all([timeout(100), timeout(200)]);
13 })

Reflect API

  完整的反射API暴露了对象在运行时的元操作。这类似于一个反向代理,并允许调用与代理陷阱中相同的元操作。实现代理非常有用。

 1 var O = {a: 1};
 2 Object.defineProperty(O, ‘b‘, {value: 2});
 3 O[Symbol(‘c‘)] = 3;
 4
 5 Reflect.ownKeys(O); // [‘a‘, ‘b‘, Symbol(c)]
 6
 7 function C(a, b){
 8   this.c = a + b;
 9 }
10 var instance = Reflect.construct(C, [20, 22]);
11 instance.c; // 42

Tail Calls

  保证尾部调用时栈区不会没有限制的增长,这使得递归函数及时在没有限制的输入时也能保证安全性。

1 function factorial(n, acc = 1) {
2     ‘use strict‘;
3     if (n <= 1) return acc;
4     return factorial(n - 1, n * acc);
5 }
6 // Stack overflow in most implementations today, 栈溢出在现在经常存在
7 // but safe on arbitrary inputs in ES6  但是在ES6中却很安全
8 factorial(100000)

原文地址:https://www.cnblogs.com/wanjin/p/10258942.html

时间: 2024-10-04 17:33:44

learn ES6的相关文章

2016年1月-前端开发月刊

可以从这关注实时动态,也可以fork之后push:https://github.com/jsfront/month 可以从这查看以往:http://www.kancloud.cn/jsfront/month/82796 1. Javascript 2. 移动Javascript开发 3. Html5 4. CSS 5. Angular 6. React, Webpack 7. Vue 8. jQuery 9. 看书学习 10. Git,Github 11. 创业 | 职业 | 管理 | 产品 1

20+ Docs and Guides for Front-end Developers (No. 5)

It’s that time again to choose the tool or technology that we want to brush up on. If you feel like you’ve been working hard at building but maybe not learning as much as you’d like, I’ve got your back covered. Please enjoy the fifth installment of o

6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)

6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.) 余博伦· 2 个月前 原文链接:A Study Plan To Cure JavaScript Fatigue 作者:Sacha Greif 和大家一样,最近我也看了Jose Aguinaga写的How it feels to learn JavaScript in 2016. 显然这篇文章击中了人们的痛处.它在Hacker News上排了不止一次第一.同样也是/r/javascript上最火的一篇,在Med

es6知识总结

学习地址:http://web.jobbole.com/86441/ http://www.cnblogs.com/Wayou/p/es6_new_features.html视频地址:http://study.163.com/course/courseLearn.htm?courseId=1003938030#/learn/video?lessonId=1048001010&courseId=1003938030 http://study.163.com/course/courseMain.ht

The Languages and Frameworks You Should Learn in 2017

Martin Angelov December 8th, 2016 The software development industry continues its relentless march forward. In 2016 we saw new releases of popular languages, frameworks and tools that give us more power and change the way we work. It is difficult to

[翻译]Review——Learn these core JavaScript concepts in just a few minutes

Learn these core JavaScript concepts in just a few minutes(只需几分钟即可学习这些核心JavaScript概念) 原文地址:https://medium.freecodecamp.org/learn-these-core-javascript-concepts-in-just-a-few-minutes-f7a16f42c1b0 我们将关注的JS概念: Scope IIFE MVC Async/await Closure Callback

[ES6系列-04]再也不乱“哇”了:用 let 与 const 替代 var

[原创]码路工人 Coder-Power 大家好,这里是码路工人有力量,我是码路工人,你们是力量. github-pages 博客园cnblogs 今天的内容是,关于 JavaScript 中定义变量的变化(其实不确切,函数,常量表示被冷落). 首先,回顾下 var 定义存在的问题 1. 哇..var 好乱.. 1.1 可以重复定义 /* eg.0 * multi-definition of var-variable */ //----------------------------------

es6学习 -- 解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c = 3; ES6 允许写成下面这样. let [a, b, c] = [1, 2, 3]; 上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值. 本质上,这种写法属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值.下面是一些使用嵌套数组进行解构的例子. 我认为

ES6之主要知识点(六)数组

引自http://es6.ruanyifeng.com/#docs/array 1.扩展运算符(...) 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. 该运算符主要用于函数调用. function push(array, ...items) { array.push(...items); } function add(x, y) { return x + y; } var numbers = [4, 38]; add(...n