ES6 基础概念汇总

墨蓝 2023-08-17 16:20 82阅读 0赞

let const命令 声明变量

let 声明的变量 没有变量提升的效果

1 let声明的变量只在代码块内有效

for循环的计数器

2 不存在变量提升 要在声明后使用

let bar = 2

3 暂时性死区 只要进入当前作用域，索要使用的变量就已经存在，但是不可获取，只有等到声明变量的那行代码出现，才可以获取和使用该变量。

4 不允许重复声明

块级作用域

原由：es5只有全局作用域和函数作用域 ，导致 内层变量可能会覆盖外层变量 ； 计数的循环变量泄漏为全局变量

1 let 实际上为js新增了块级作用域

2 块级作用域 可以替代了 立即执行匿名函数IIFE (function()\{\}()); 的写法。

const 声明一个只读的常量，一旦声明 常量的值就不会改变

1 只声明不赋值会报错

2 只在声明所在的块级作用域中有效。

字符串

for（let ch 0f s)\{ .... \} for...of循环 使字符串可以被 for...of 循环遍历

at() 与 charAt()

'abc'.charAt(0) // "a" '?'.charAt(0) // "\uD842"

'abc'.at(0) // "a" '?'.at(0) // "?" JavaScript只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中

.includes() : 返回布尔值，

.startsWith()

.endsWith()

var s = 'Hello world!'; s.startsWith('Hello'，0) // true s.endsWith('!') // true s.includes('o') // true

这三个方法都支持 第二个参数，表示开始搜索的位置

repeat() 返回一个新的字符串，表示将字符串重复n次 参数如果是小数，将会被取整；负数会报错；－0.9至0视为0；NaN是0

'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" 'na'.repeat(0) // ""

.padStart(10,'yyyy-mm-dd')

.padEnd()

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12" '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

模版字符串，用反引号（｀）标识。

// 普通字符串
    `In JavaScript '\n' is a line-feed.` // 多行字符串 `In JavaScript this is not legal.` console.log(`string text line 1 string text line 2`); // 字符串中嵌入变量 var name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?`

标签模版 tagged template

‘标签’指的就是函数，紧跟在后面的模版字符串就是它的参数。tag\`123\` 等同于 tag(123)；

String.raw() 方法，用来充当模版字符串的处理函数，返回一个连斜杠都转译的字符串。

二、RegExp构造函数

ES5 var regex = new RegExp('xyz','i');或 var regex = new RegExp(/xyz/i) 等价于 var regex = /xyz/i;

ES6 var regex = new RegExp(/xyz/ig,'i'); 原有正则的修饰符ig 会被第二个参数i覆盖。

2.字符串的正则方法

match() replace() search() split()

3.u修饰符 y修饰符：粘连

4 正则的sticky属性：与y修饰符相匹配，表示是否设置了y修饰符。

var r = /hello\\d/y; r.sticky //返回true

5 正则的flags属性：返回正则表达式的修饰符。

/abc/ig.flags //gi 返回正则表达式的修饰符

/abc/ig.source //abc ES5中返回正则表达式的正文

三、数值的扩展

二进制 用前缀0b表示；

八进制 用前缀0o表示；

转换为十进制：Number('0b111')

2. Number.isFinite(24) 检查一个数值是否为有限的finite。

Number.isNaN(15) 检查一个值 是否为NaN.

3 Number.parseInt(12.34)

Number.parseFloat(123.34)

4 Number.isInteger() 判断一个值是否为整数

Number.EPSILON 是一个极小的常量，

Number.isSafeInteger() 判断一个整数是否在安全范围内。

5 Math对象的扩展 这些方法只能在Math对象上调用。

Math.trunc() 用于去除一个数的小数部分，返回整数部分。 Math.trunc(4.1) //4 Math.trunc('foo';NaN) // 对于无法截取整数的值返回NaN

Math.sign() 判断一个数到底是正数、负数、还是0 Math.sign(－5) //-1 参数为正 返回＋1 ；为负，返回－1；为0，返回0；其他，返回NaN;

Math.cbrt() 用于计算一个数的立方根

6 指数运算符 \*\*

2\*\*2 //4 ; 2\*\*3 //8;

赋值运算符 \*\*=;

let a=2;a \*\*= 2; //a= a \* a;

四、数组的扩展

Array.from() 将两类对象转换为真正的数组：类似数组的对象 (就是必须有length属性的对象）（这里使用扩展运算符则不行），和可遍历的对象。第一个参数是对象，还可接受第二个参数 函数，作用类似于map()；\[\].slice.call(obj); Array.from(\[1,2,3\],(n) => n || 0)

Array.of() 用于将一组值转换为数组。Array.of(3) //\[3\] Array.of(3).length //1 。可以代替Array()、New Array()

copyWithin() 复制成员到其指定位置，覆盖并返回当前数组。［1，2，3，4，5\].copyWithin(0,3，n) //\[4,5,3,4,5\] 表示从 3号位开始复制到n（或结尾）的数值 放至0位开始上。

4. 数组实例的find() 和 findIndex()

find() 方法，用于找出第一个符合条件的数组成员，参数为回调函数，找到第一个值为true的成员，并返回该成员，若没有则返回undefined \[1,3,-5,10\].find((n) => n < 0) //-5

findIndex() 用法与find相似，返回第一个符合条件的数组成员的位置，若都不符合则返回－1.

5.fill() 方法使用给定值，填充一个数组。

\['a','b','c'\].fill(7) // \[7,7,7\] new Array(3).fill(7) //\[7,7,7\] 用于空数组的初始化

\['a','b','c'\].fill(7,1,2) //\['a','7','c'\] fill方法从1号位开始，向原数组填充7，到2号位之前结束。

6.三个新的方法－－entries(),keys()和values() ---用于遍历数组。可以用for....of循环进行遍历。不同点是：keys()是对健名的遍历、values() 是对健值得遍历、entries() 是对 键值对 的遍历

for (let index of \['a','b'\].keys())\{console.log(index);\} //0 1

7. includes() 表示某个数组是否包含给定的值 返回true或false，第二个参数表示搜索的起始位置，默认为0； `[1, 2, 3].includes(3, 3); // false`

8 数组的空位，es6明确将数组的空位转化为undefined

五 函数的扩展

1 es6允许为函数的参数设置默认值，直接写在参数定义的后面 `function Point(x = 0, y = 0)｛｝`

2 函数的length属性 ；返回没有制定默认值的参数个数

(function (a) {}).length // 1
    (function (a = 5) {}).length // 0
    (function (a, b, c = 5) {}).length // 2

3 rest参数 形式为(...变量名)，用于获取函数的多余参数，rest参数搭配的变量是一个数组，改变量将多余的参数放入数组中。

rest参数中的变量代表一个数组，所以数组特有的方法都可以用于这个变量。

function push(array, ...items) {
      items.forEach(function(item) {
        array.push(item);
        console.log(item);
      });
    }
    
    var a = [];
    push(a, 1, 2, 3)

4 扩展运算符 spread 是三个点(...)。好比rest参数的逆运算，将一个数组专为用逗号分隔的参数序列。

console.log(...\[1,2,3\]) // 1 2 3

扩展运算符取代apply方法的一个实际的例子

// ES5的写法
    Math.max.apply(null, [14, 3, 77])
    
    // ES6的写法
    Math.max(...[14, 3, 77])
    
    // 等同于
    Math.max(14, 3, 77);

[...'hello'] // [ "h", "e", "l", "l", "o" ] 将字符串转化为真正的数组

5 严格模式 'use strict'; 标准规定 只要参数使用了默认值、解构赋值、扩展运算符，就不能显示指定严格模式，但可以设置全局性严格模式。

6 函数的name属性：返回该函数的函数名。 function foo()\{\} foo.name //'foo'

bind返回的函数，name属性值会加上‘bound’前缀。 foo.bind(\{\}).name //'bound foo'

7 箭头函数 (=>) var f = v =>v; 等价于 var f = function(v)\{return v;\};

var f = () =>5; 函数不需要参数 用（）表示；若多个参数(num1,num2)

如果箭头函数的代码块部分多于一条语句，就要用｛｝抱起来，并且使用return语句返回。

var sum = \{num1,num2\} => \{return num1 +num2;\}

在箭头函数里，this对象的指向是可变的，但在箭头函数中 this对象却是固定的。

8 函数绑定运算符 (::),双冒号左边是一个对象，右边是一个函数，自动将左边的对象，作为上下文环境this对象，绑定到右边的函数上。 由于双冒号运算符返回的还是原对象，因此可以采用链式写法。

9 尾调用：指某个函数的最后一步是调用另一个函数。function f(x)\{return g(x);\}

........等后面脑子清醒了再

六、对象的扩展

1属性简写：es6允许只写属性名，不写属性值，这时 属性值就等于属性名所代表的变量。 var foo = 'bar';var baz = \{foo\}; //baz \{foo:'bar'\};

2方法简写：method()\{return 'hello';\} 等同于 method:function()\{return 'hello';\}

3属性名简写：es6允许字面量定义对象时，用表达式作为对象的属性名，即把表达式放在［］方括号内。

let propKey = 'foo';
    
    let obj = {
        [propKey]:true,
        ['a' + 'bc']:123
    };

4 方法的name属性：函数的name属性，返回函数名。对象方法也是函数，因此也有name属性。

5 Object.is():比较两个值是否严格相等，与严格比较运算符（＝＝＝）的行为基本一致。Object.is('foo','foo') //true

6 Object.assign():用于对象的合并，会有覆盖同名属性的问题 var target = \{a:1\}; var source1 = \{b:2\}; var source2 = \{c:3\}; Object.assign(target,source1,source2);//\{a:1,b:2,c:3\} target \{a:1,b:2,c:3\} ;Object.assign(\{\},target,source1,source2)//\{a:1,b:2,c:3\} target = \{a:1\}

7 Object.getOwnPropertyDescriptor(obj,'foo');var obj = \{foo:123\} 属性的可枚举性 ：对象的每个属性都有一个描述对象descriptor，用来控制该属性的描述行为。

8 属性的遍历 5种

for...in

Object.key(obj)

Object.getOwnPropertyName(obj)

Object.getOwnPropertySymbols(obj)

Reflect.ownKeys(obj)

9 \_\_proto\_\_属性，用来读取或设置当前对象的prototype对象。

但建议使用Object.setPrototypeOf() （写操作）设置原型对象,Object.getPrototypeOf() （读操作）、Object.create() （生成操作）

10 解构赋值：用于从一个对象取值，相当于将所有可遍历的 但尚未被读取的属性，分配到指定的对象上。所有的键和他们的值，都会拷贝到新对象上

let \{x,y,....z\} = \{x:1,y:2,a:3,b:4\}; // x 1 y 2 z \{a:3,b:4\}

11 扩展运算符 （...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

七、Symbol 引入的一种新的数据类型Symbol，表示 独一无二的值，可以保证不会与其他属性名产生冲突。是相继Undefined\\Null\\Bollen\\String\\Number\\Object 之后的第七种数据类型。

let s = Symbol(My symbol); typeof s //'symbol'

Symbol值可以显示转为字符串 String(sym) or sym.toString() //'Symbol(My symbol)'

Object.getOwnPropertySymbols(obj对象) 方法返回一个数组，成员是当前对象的所有属性名的Symbol值。而Object.keys(obj) 和 Object.getOwnPropertyName(obj) 都无法获取到size=Symbol('size')，从而制造了一种非私有的内部方法的效果。

Symbol.for() 方法 可以使用同一个Symbol值，接受一个字符串作为参数，然后搜索有没有以该参数作为名称的symbol值。Symbol.for('bar') === Symbol.for('bar') //true

Symbol.keyFor()方法返回一个已登记的Symbol类型值的key。用Symbol.for()是已登记的，可在全局环境中搜索，而Symbol()是没有登记机制的

var s1 = Symbol.for("foo");
    Symbol.keyFor(s1) // "foo"
    
    var s2 = Symbol("foo");
    Symbol.keyFor(s2) // undefined

八 Proxy构造函数 用来生成Proxy实例。var Proxy = new Proxy (target,handler);

九 Set和Map数据结构

Set本身是一个构造函数，用来生成Set数据结构，其类似于数组，但其成员的值都是唯一的，没有重复性的值。

1.可通过add方法向Set结构加入成员，

var s = new Set();
    
    [2, 3, 5, 4, 5, 2, 2].map(x => s.add(x));    //通过add方法向Set结构加入成员，
    
    for (let i of s) {
      console.log(i);
    }
    // 2 3 5 4
    
    //Set函数可以接受一个数组作为参数，用来初始化。
    var set = new Set([1, 2, 3, 4, 4]);
    [...set]
    // [1, 2, 3, 4]

2. 可以去除数组的重复成员的方法。如上\[...new Set(array)\]

3. Set实例的属性：var r= new Set(\[1,2,3,4\]); r.constructor //\[Function: Set\]

r.size //4 返回set实例的成员总数。

4 Set实例的方法分为两类：

操作方法：r.add(value):添加某个值 返回set结构本身

r.delete(value):删除某个值 返回布尔值

has(value): 返回布尔值

clear(): 清除所有成员

Array.from(set)方法可以将Set结构转为数组。\[...set\] 也可以转为数组

> items
    Set { 1, 2, 3, 4, 5 }
    > [...items]
    [ 1, 2, 3, 4, 5 ]

var array = Array.from(items);  
array  
\[ 1, 2, 3, 4, 5 \]

遍历操作：Set结构的实例有四个遍历方法，用于遍历成员。用for...of 循环遍历 Set。

keys(): 返回键名的遍历器

values():返回键值的遍历器

entries(): 返回键值对的遍历器

forEach():使用回调函数遍历每个成员

let set = new Set(['red', 'green', 'blue']);
    
    for (let x of set.values()) {        //Set结构的实例默认刻遍历，生成函数就是它的values方法。可以直接写成 for (let x of set){}
      console.log(x);
    }
    // red
    // green
    // blue
    
    set.forEach((value,key)=>console.log(value*2))

WeakSet也是类似于set的构造函数，用new创建 但只接受类似数组的对象作为参数。var ws = new WeakSet(\[\[1,2\],\[3,4\]\]);

WeakSet结构只有三个方法：WeakSet.add(value) WeakSet.delete(value) WeakSet.has(value)；没有size属性，不能遍历。

5 Map数据结构 使用new创建 类似于对象，但其健不限于‘字符串’。Object结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应。

var m = new Map();
    var o = {p: 'Hello World'};
    
    m.set(o, 'content')
    m.get(o) // "content"
    
    m.has(o) // true
    m.delete(o) // true
    m.has(o) // false
    
    
    ／／Map构造函数可接受数组作为参数

var m = new Map([ [true, 'foo'], ['true', 'bar'] ]); m.get(true) // 'foo' m.get('true') // 'bar'

Map实例结构的属性：

size属性：.`size`属性返回Map结构的成员总数。

set(key,value) :`set`方法设置`key`所对应的键值，然后返回整个Map结构。如果`key`已经有值，则键值会被更新，否则就新生成该键。 set方法返回的是map本身，可以采用链式写法。

get(key): `get`方法读取`key`对应的键值，如果找不到`key`，返回`undefined`。

has(key):`has`方法返回一个布尔值，表示某个键是否在Map数据结构中。

delete(key)

clear()

Map实例结构的遍历方法 keys();values();entries();forEach();

十、Iterator 和 for...of 循环

Iterator （遍历器）为四种数据结构提供提供统一的简便的接口，来完成遍历操作。即for...of循环；

ES6规定：默认的Iterator接口部署在数据结构的Symbol.iterator属性，可以说，一个数据结构只要具有

Symbol.iterator属性，就可以认为是‘可遍历的’。这也是一个方法，执行Symbol.iterator（）这个方法，就可以返回一个遍历器对象。该对象便拥有next()方法，返回当前成员的信息对象value和 done两个属性。

let arr = ['a', 'b', 'c'];
    let iter = arr[Symbol.iterator]();
    
    iter.next() // { value: 'a', done: false }
    iter.next() // { value: 'b', done: false }
    iter.next() // { value: 'c', done: false }
    iter.next() // { value: undefined, done: true }

在es6中，有三类数据结构原生具备iterator接口：数组、类似数组的对象、set和map结构。

4 字符串的Iterator接口：字符串是一个类似数组的对象，也原生具有Iterator接口。

var someString = "hi";
    typeof someString[Symbol.iterator]
    // "function"
    
    var iterator = someString[Symbol.iterator]();
    
    iterator.next()  // { value: "h", done: false }
    iterator.next()  // { value: "i", done: false }
    iterator.next()  // { value: undefined, done: true }

5 遍历器的return(),throw()方法。

6 js的for...in，只能获得对象的键名，不能直接获取键值。es6的for...of允许遍历获得键值，但遍历只返回具有数字索引的属性。

十、Generator函数:一种异步编程解决方案；是一个状态机，封装了多个内部状态；执行此函数会返回一个遍历器对象，依次遍历Generator函数中的每一个状态。

写法：function关键字与函数名之间有一个＊号；函数体内部使用yield（产出的意思）语句，定义不同的内部状态

function* helloWorldGenerator() {
      yield 'hello';
      yield 'world';
      return 'ending';
    }
    
    var hw = helloWorldGenerator();   ／／返回的是一个指向内部状态的指针对象Iterator Object
    
    ／／用next方法调用 返回value和done

hw.next() // { value: 'hello', done: false } hw.next() // { value: 'world', done: false } hw.next() // { value: 'ending', done: true } hw.next() // { value: undefined, done: true }

yield语句后面的表达式，只有当调用next方法、内部指针指向该语句时才会执行，

十一、Promise对象：异步编程的一种解决方案，是一个对象，从他可以获取异步操作的消息；像是一个容器，里面保存着某个未来才会结束的事件的结果。

1.对象的状态不受外界影响。三种状态：pending进行中 Resolved已完成 Rejected已失败，由异步操作的结果决定哪一状态。

2 es6中,Promise对象是一个构造函数，用来生成Promise实例

3 Promise.then()方法：promise实例生成以后，可以用then方法分别指定Resolved 和 Reject状态的回调函数。

promise.then(function(value) {
      // success
    }, function(error) {
      // failure
    });

4 getJson是用于发出一个针对JSON数据的HTTP请求，并且返回一个Promise对象，便有.then()方法。

getJSON("/post/1.json").then(
      post => getJSON(post.commentURL)
    ).then(
      comments => console.log("Resolved: ", comments),
      err => console.log("Rejected: ", err)
    );

5 Promise.catch()方法：用于指定发生错误时的回调函数。

getJSON("/posts.json").then(function(posts) {
      // ...
    }).catch(function(error) {                 ／／catch方法返回的是一个Promise对象，因此还有.then()方法
      // 处理 getJSON 和 前一个回调函数then运行时发生的错误
      console.log('发生错误！', error);
    });

6 Promise.all() 方法用于将多个Promise实例，包装成一个新的Promise实例。接受的参数是一个数组，且数组成员都是promise对象。只有promise数组的所有成员状态都变成fulfilled，或者其中一个变成rejected，才会被调用Promise.all()方法后面的回调函数。

7 Promise.race(\[Promise对象,Promise对象\]) ，其中任一一个执行完出了结果，就返回出这个肯定或否定结果，终止掉其他没执行完的promise。

8 Promise.resolve() 将现有对象转为Promise对象。 resolve的Promise是在本轮实践循环的末尾执行，总是晚于本轮循环的同步任务。

var jsPromise = Promise.resolve($.ajax('/whatever.json'));
    
    Promise.resolve('foo')
    // 等价于
    new Promise(resolve => resolve('foo'))

9 Promise.reject()

`Promise.reject(reason)`方法也会返回一个新的Promise实例，该实例的状态为`rejected`。它的参数用法与`Promise.resolve`方法完全一致。

10 .done() 方法 处于回调连的尾端，保证跑出任何可能出现的错

11 .finally() 用于指定不管promise对象最后状态如何，都会执行的操作。接受一个普通的回调函数作为参数，该参数不管怎样都必须执行。

十二、Class类

es6引用class这个概念，作为对象的模版。通过class这个关键字 定义类，更像面向对象编程的语法。

//定义类
    class Point {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
    
      toString() {
        return '(' + this.x + ', ' + this.y + ')';
      }
    }

// 等同于
    
    Point.prototype = { toString(){ }, toValue(){ } };
    
    var b = new Point();    //使用时，直接对类使用 new 命令，跟构造函数的用法一致
    b.toString()

point.hasOwnProperty('x') // true point.hasOwnProperty('y') // true point.hasOwnProperty('toString') // false point.__proto__.hasOwnProperty('toString') // true

2 constructor方法是类的默认方法，默认返回的是实例对象this，

3 hasOwnProperty()方法是判断 实例对象自身属性中是否有这个属性。

4 类的构造函数必须用 new 构造。

5 class类 不存在变量提升

十三、Module模块化 设计思想是使得编译时就能确定模块的依赖关系，及输入输出的变量。

// ES6模块
    import { stat, exists, readFile } from 'fs';

模块功能主要由两个命令构成：export 和 import 。

export 命令用于规定模块的对外接口，

import 命令用于输入其他模块提供的功能。 具有变量提升的效果

// profile.js
    var firstName = 'Michael';
    var lastName = 'Jackson';
    var year = 1958;
    
    export {firstName, lastName, year};   导出
    
    
    // main.js
    
    import {firstName, lastName, year} from './profile';   引入
    
    function setName(element) {
      element.textContent = firstName + ' ' + lastName;
    }
    
    ／／用＊指定一个对象，所有输出值都加载在这个对象上面

import * as circle from './circle';

export default命令：为模块指定默认输出。

// export-default.js
    export default function () {
      console.log('foo');
    }
    
    
    // import-default.js         
    import customName from './export-default';      ／／import命令可以为该匿名函数指定任意名字
    customName(); // 'foo'

www.w3cfuns.com ES6的十大特性

1.Default Parameters in ES6 (默认参数)

var link = function (height, color, url) {
        var height = height || 50;               //当默认值为0的时，解析为false
        var color = color || 'red';
        var url = url || 'http://azat.co';
        ...
    }

var link = function(height = 50, color = 'red', url = 'http://azat.co') {      //ES6
      ...
    }

2.Template Literals in ES6 (模版文本)

var name = 'Your name is ' + first + ' ' + last + '.';
    var url = 'http://localhost:3000/api/messages/' + id;

var name = `Your name is ${first} ${last}. `;             //ES6 中使用${name}放到｀｀反引号内；
    var url = `http://localhost:3000/api/messages/${id}`;

3. Multi-line String in ES6 (多行字符串)

var roadPoem = `Then took the other, as just as fair,    仅仅放到｀｀反引号内就可以解决；
        And having perhaps the better claim
        Because it was grassy and wanted wear,
        Though as for that the passing there
        Had worn them really about the same,`;
    var fourAgreements = `You have the right to be you.
        You can only be you when you do your best.`;

4. Destructuring Assignment in ES6 (解构赋值)

var data = $('body').data(), // data has properties house and mouse
       house = data.house,        //其中house和mouse 是key，同时house和mouse也定义成变量
       mouse = data.mouse;

var jsonMiddleware = require('body-parser').jsonMiddleware ;   //node.js 中使用ES5
    var body = req.body, // body has username and password
       username = body.username,
       password = body.password;

var { house, mouse} = $('body').data(); // we'll get house and mouse variables
    var {jsonMiddleware} = require('body-parser');   //ES6中的赋值
    var {username, password} = req.body;

var [col1, col2]  = $('.column'),              // ES6 适用于数组
       [line1, line2, line3, , line5] = file.split('n');

5. Enhanced Object Literals in ES6 (增强的对象文本)

6. Arrow Functions in ES6 (箭头函数)

以前使用闭包，this总是预期之外地产生变化，而箭头函数的迷人之处在于，现在你的this可以按照预期使用，身处箭头函数里面，this还是原来的this。

就不必用that＝this或 \_this = this或.bind(this).

var _this = this;
    $('.btn').click(function(event){
      _this.sendData();
    })

$('.btn').click((event) => {     //ES6箭头函数
        this.sendData(); 
    })

//ES5 创建一个消息数组
    var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];
    var messages = ids.map(function (value) {
      return "ID is " + value; // explicit return
    });
    
    
    //ES6  使用了字符串模版 ； 
    var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];
    var messages = ids.map(value => `ID is ${value}`); // implicit return    ／／在箭头函数中，对于单个参数，括号（）是可选的，但当超过一个参数的时候就必须要

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];
    var messages = ids.map((value, index, list) => `ID of ${index} element is ${value} `); // implicit return   ／／参数需要被包含在括号里，且它是隐式的返回

7. Promises in ES6 ()

ES6规定了标准的promise

setTimeout(function(){
       console.log('yay!');
    },1000);
    
    
    var wait1000 = new Promise(function(resolve,reject){
          setTimeout (resolve,1000);
    }).then(function(){
          console.log('yay!');
    });
    
    
    var wait1000 =  new Promise((resolve, reject)=> {
      setTimeout(resolve, 1000);
    }).then(()=> {
      console.log('Yay!');
    });
    
    
    var wait1000 =  ()=> new Promise((resolve, reject)=> {setTimeout(resolve, 1000)});
    wait1000()
        .then(function() {
            console.log('Yay!')
            return wait1000()
        })
        .then(function() {
            console.log('Wheeyee!')
        });

8. Block-Scoped Constructs Let and Const (块作用域构造 Let Const)

Let是一种新的变量声明方式，它允许你把变量作用域控制在块级里面；

而var 是限制函数作用域；

const 就是一个不变量，也是块级作用域，一旦声明，则这个值就是常量，不会再改变。

9. Classes in ES6 (类)

ES6没有用函数，而是使用原型实现类。

class baseModel {                  // 用class 定义一个类
      constructor(options, data) {     // class constructor，node.js 5.6暂时不支持options = {}, data = []这样传参    
                                       // 方法名也不需要加 function关键字，冒号：也不需要了，不需要分配属性this
        this.name = 'Base';
        this.url = 'http://azat.co/api';
        this.data = data;
        this.options = options;
       }
     
        getName() {                   // class method
            console.log(`Class name: ${
        this.name}`);
        }
    };
    
    class AccountModel extends baseModel{
         
           constructor(options,data){
         
    　　　　　　super({private:true},['32113123123','524214691']);    //调用父级构造函数，使用super()用参数传递；
    　　　　　　　　this.name = 'Account Model';
    　　　　　　　　this.url += '/accounts/';
    　　　　　　}
    };

10. Modules in ES6 (模块)

之前的js不支持本地的模块，用AMD ReaquireJS CommonJS 解决方法。现在ES6可以引用模块import 和export操作了。

//module.js 
    module.exports = {
      port: 3000,
      getAccounts: function() {
        ...
      }
    }
    
    //ES5 main.js
    var service = require('module.js');
    console.log(service.port);
    
    //ES6  module.js
    export var port = 3000;
    export function getAccounts(url){...}
    
    //ES6 main.js
    import {port,getAccounts} from 'module';
    console.log(port);
    //ES6 或者把整个module导入,并命名为service
    import * as service from 'module';
    console.log(service.port);

转载于:https://www.cnblogs.com/yxiaoqian/p/5852940.html