箭头函数

ES6中新增的定义函数的方式

  1. （）=>{}
  2. const fn=（）=>{}

函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号 如果形参只有一个，可以省略小括号

  1. const sum =(num1,num2)=num1+num2；
  3.  function fn v {
  4.      return v;
  5.  } 
  6.  const fn = v => v;

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

  1. function sum (first, ...args) {          # 形参前面加...表示接受剩下所有实参
  2. }
  3. sum(10, 20, 30)

Array 的扩展方法

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。

  1.  let ary = [1, 2, 3];
  2.  ...ary  // 1, 2, 3
  3.  console.log(...ary);    // 1 2 3      
  4.  console.log(1, 2, 3)
  5. //扩展运算符可以应用于合并数组
  6. // 方法一 
  7.  let ary1 = [1, 2, 3]; let ary2 = [3, 4, 5];
  8.  let ary3 = [...ary1, ...ary2];
  9.  // 方法二 
  10.  ary1.push(...ary2);
  11. //将类数组或可遍历对象转换为真正的数组
  12. let oDivs = document.getElementsByTagName('div'); 
  13. oDivs = [...oDivs];

函数方法

Array.from() 将类数组或可遍历对象转换为真正的数组

  1. let arrayLike = {
  2.     '0': 'a',
  3.     '1': 'b',
  4.     '2': 'c',
  5.     length: 3
  6. }; 
  7. let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
  8. //方法还可以接受第二个参数，作用类似于数组的map方法
  9. //用来对每个元素进行处理，将处理后的值放入返回的数组。
  10.  let newAry = Array.from(aryLike, item => item *2)

find() 用于找出第一个符合条件的数组成员，如果没有找到返回undefined

  1.  let ary = [{
  2.      id: 1,
  3.      name: '张三‘
  4.  }, { 
  5.      id: 2,
  6.      name: '李四‘
  7.  }]; 
  8.  let target = ary.find((item, index) => item.id == 2);

findIndex() 找出第一个符合条件的数组成员的位置，如果没有找到返回-1 includes() 表示某个数组是否包含给定的值，返回布尔值

模板字符串

ES6新增的创建字符串的方式，使用反引号定义。

  1. let name = `zhangsan`;

模板字符串中可以解析变量。

  1.  let name = '张三'; 
  2.  let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan

模板字符串中可以换行 在模板字符串中可以调用函数。 let greet =${sayHello()} 哈哈哈哈;

String 的扩展方法

lstartsWith()：表示参数字符串是否在原字符串的头部，返回布尔值 lendsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值 repeat()> :> 方法表示将原字符串重复> n> 次，返回一个新字符串。

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

Set 数据结构

新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 .size 显示set长度

  1. //Set本身是一个构造函数，用来生成  Set 数据结构。
  2. const s = new Set();
  • add(value)：添加某个值，返回 Set 结构本身
  • delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
  • has(value)：返回一个布尔值，表示该值是否为 Set 的成员
  • clear()：清除所有成员，没有返回值

    遍历

    1. s.forEach(value => console.log(value))

    WeakSet

    WeakSet 结构与 Set 类似，也是不重复的值的集合。
    它与 Set 有两个区别：
  1. WeakSet 的成员只能是对象，而不能是其他类型的值。
  2. WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用

    Symbol类型

    ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。
    Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。
    1. let s = Symbol();
    2. typeof s ； //symbol
    Symbol函数前不能使用new命令，否则会报错。这是因为生成的 Symbol 是一个原始类型的值，不是对象。
    Symbol函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述。Symbol函数的参数只是表示对当前 Symbol 值的描述，因此相同参数的Symbol函数的返回值是不相等的。
    Symbol 值作为对象属性名时，不能用点运算符。在对象的内部，使用 Symbol 值定义属性时，Symbol 值必须放在方括号之中。 ```javascript const mySymbol = Symbol(); const a = {};

a.mySymbol = ‘Hello!’; a[mySymbol] // undefined a[‘mySymbol’] // “Hello!”

let s = Symbol();

let obj = { [s]: function (arg) { … } };

objs;

  1. <a name="F8OGq"></a>
  2. ## Map
  3. Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也可以接受一个数组作为参数，
  4. ```javascript
  5. const m = new Map();
  6. const o = {p: 'Hello World'};
  8. m.set(o, 'content')
  9. m.get(o) // "content"

WeakMap

WeakMap结构与Map结构类似，也是用于生成键值对的集合。
WeakMap与Map的区别有两点。

  1. WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。
  2. WeakMap的键名所指向的对象，不计入垃圾回收机制。
    WeakMap的用途
  3. DOM 节点作为键名

  4. 部署私有属性

    异步处理

    Promise

    Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

    Promise对象有以下两个特点

  5. 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

  6. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。

    优缺点

    优点：有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。
    缺点：Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
    照搬几个例子增进理解：
    创造一个Promise实例

    1. const promise = new Promise(function(resolve, reject) {
    2. // ... some code
    4. if (/* 异步操作成功 */){
    5.  resolve(value);
    6. } else {
    7.  reject(error);
    8. }
    9. });

    Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

    1. promise.then(function(value) {
    2. // success
    3. }, function(error) {
    4. // failure
    5. });

    Promise 新建后就会立即执行。 ```javascript let promise = new Promise(function(resolve, reject) { console.log(‘Promise’); resolve(); });

promise.then(function() { console.log(‘resolved.’); });

console.log(‘Hi!’);

// Promise // Hi! // resolved

  1. <a name="lpatJ"></a>
  2. ### async函数
  3. > async函数就是 Generator 函数的语法糖。
  5. 将 Generator 函数的星号（`*`）替换成`async`，将`yield`替换成`await`，仅此而已。
  6. > - 内置执行器:Generator 函数的执行必须靠执行器，所以才有了`co`模块，而`async`函数自带执行器。也就是说，`async`函数的执行，与普通函数一模一样，只要一行。
  7. > - 更好的语义:`async`和`await`，比起星号和`yield`，语义更清楚了。`async`表示函数里有异步操作，`await`表示紧跟在后面的表达式需要等待结果。
  8. > - 更广的适用性:`co`模块约定，`yield`命令后面只能是 Thunk 函数或 Promise 对象，而`async`函数的`await`命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。
  9. > - `async`函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用`then`方法指定下一步的操作
  11. <a name="hQE3g"></a>
  12. ## Generator函数
  13. > 可以通过 yield 关键字，把函数的执行流挂起，为改变执行流程提供了可能，从而为异步编程提供解决方案。
  15. ```javascript
  16. f.next();
  17. // one
  18. // {value: "1", done: false}
  20. f.next();
  21. // two
  22. // {value: "2", done: false}
  24. f.next();
  25. // three
  26. // {value: "3", done: true}
  28. f.next();
  29. // {value: undefined, done: true}

Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是遍历器对象。
遍历器对象的next方法的运行逻辑如下。

  • 遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。

  • 下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。

  • 如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return-语句后面的表达式的值，作为返回的对象的value属性值。

  • 如果该函数没有return语句，则返回的对象的value属性值为undefined。

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