ES6 基础概念汇总

最新推荐文章于 2022-12-12 16:25:19 发布

diedui6626

最新推荐文章于 2022-12-12 16:25:19 发布

阅读量149

点赞数

文章标签：数据结构与算法 json javascript ViewUI

原文链接：http://www.cnblogs.com/yxiaoqian/p/5852940.html

版权

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参数搭配的变量是一个数组，改变量将多余的参数放入数组中。

function add(...values) {
  let sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;
}
add(2, 5, 3) // 10

//arguments变量的写法
function sortNumbers(){
　　return Array.prototype.slice.call(arguments).sort();
}
//rest 参数的写法
const sortNumbers = (...numbers) => numbers.sort();

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实例

var promise = new Promise(function(resolve, reject) {   ／／promise接受一个函数作为参数，函数的两个参数是resolve和reject函数
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);       ／／resolve函数的作用是在异步操作成功时调用 将状态从pending变为resolve
  } else {
    reject(error);         ／／reject失败时调用，pending变味reject 将结果传递出去
  }
});

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';

<script type="module" src="foo.js"></script>

模块功能主要由两个命令构成：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

diedui6626

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 基础概念汇总

let const命令声明变量let 声明的变量没有变量提升的效果1 let声明的变量只在代码块内有效 for循环的计数器2 不存在变量提升要在声明后使用 let bar = 23 暂时性死区只要进入当前作用域，索要使用的变量就已经存在，但是不可获取，只有等到声明变量的那行代码出现，才可以获取和使用该变量。4 不允许重复声明...
复制链接

扫一扫