ES6常用新特性

   ES6无疑给前端带来了福音，它包含了很多很棒的新特性，可以更加方便的实现很多复杂的操作，提升开发效率。它包括了箭头函数、块级作用域、模板字符串、展开运算符、类、模块化、解构等。

ES6是什么？

 - 新的Javascript语法标准 (2015年6月正式发布）
 
 - 使用babel语法转换器，支持低端浏览器
 
 - 流行的库都基于ES6构建，React默认使用ES6新语法开发

ES6有什么？

 - 块级作用域、字符串、函数
 - 对象扩展、结构
 - 类、模块化

1. 作用域：let和const：

函数作用域和全局作用域(ES5中的作用域）

• 定义变量使用let替代vra
• const定义不可以修改的变量（常量）
• 作用域和{}

2. 模板字符串：

name = 'nianchen';
course = 'React开发';
console.log('hello', + name + '课程是' + course);
console.log(`hello,${name},课程是${course}`);

// 多行字符串
console.log(`

    进行多行间距空行

`)

3. 函数扩展：

• 箭头函数: (简写代码，保持this作用域)

箭头函数最直观的三个特点就是：

1. 不需要function关键字来创建函数；
2. 省略return关键字
3. 继承当前上下文的this关键字。
   如下是一个ES5的方法：

var calculate = function(x, y, z) {
  if (typeof x != 'number') { x = 0 }
  if (typeof y != 'number') { y = 6 }

  var dwt = x % y
  var result

  if (dwt == z) { result = true }
  if (dwt != z) { result = false }
  
  return result
}

使用ES6进行重构

var calculate = function(x, y, z) {
    typeof x != 'number' ? x = 0 : x = x;
    typeof y != 'number' ? y = 6 : y = y;

    return x % y === z ? true : false;
}
// 进阶使用方法：
var calculate = function(x, y, z) {
    x = typeof x != 'number' ? 0 : x ;
    y = typeof y != 'number' ? 6 : y;

    return x % y === z;
}

function hello(name) {
    console.log(`hello ${name}`);
}
hello('nianchen')
const hello1 = (name) => {
    console.log(`hello, ${name}`);
}
hello1('nianchen');

setTimeout(()=> {
    console.log('niachen');
}, 1000);

// 如果函数体只有一条return语句：
const double = x => x*2;
console.log(double(5));     // 10;
相当于下面的语句：
const double = (x) => {
    return x*2;
}
console.log(double(5));

• 参数默认值；

const hello = (name ='nianchen') => {
    console.log(name);
}
hello('mo');  // mo
hello();  // nianchen

• 展开运算符

const hello = (name1, name2) => {
    console.log(`hello, ${name1} 和 ${name2}`);
}
function oldHello(name1, name2) {
    console.log(name1, name2);
}
let arr = ['nianchen', 'mo'];
oldHello.apply(null, arr);
hello(...arr);

4. 对象（Object）扩展：

• Object.keys、values、entries

const obj = {name: 'nianchen', course: 'react'};
console.log(Object.keys(obj)); // ["name", "course"]
console.log(Object.values(obj)); //  ["nianchen", "react"]
console.log(Object.entries(obj)); 
// [ ['name', 'nianchen'], ['course', 'react'] ]

• 对象方法简写，计算属性

const name = 'xiamo';
const obj = {
    name,
    [name]: 'nianchen',
    hello: function () {
    },
    hello1 () {}
}
obj[name] = 'hello mo';
console.log(obj);
// {name: 'xiamo', xiamo: ninachen, hello: f, hello1:f }

• 展开运算符（不是ES6标准，但是babel也支持）

const obj1 = {name: 'nianchen', age: 18};
const obj2 = {course: 'react'};
console.log(...obj1,...obj2,date: '2018');
// {name: 'nianchen', age: 18, course: 'react', date: '2018'}

5. 解构赋值

函数也可以多返回值了

• 数组解构

const arr = ['nianchen', 'xiamo'];
let [arr1, arr2] = arr;
console.log(arr1, '|', arr2);
// nianchen | xiamo
- 对象解构
const obj ={name: 'nianchen', course: 'react'};
let {name, course} = obj;
console.log(name, '|', course);
// nianchen | react

6. 类

• 是prototype的语法糖
• Extends继承
• Constructot构造函数

class MyApp {
    constructor() {
        this.name = 'nianchen';
    }
    sayHello () {
        console.log(`hello, ${name}`);
    }
}
const app = new MyApp();
app.sayHello();

7. 新的数据结构

• Set，元素不可重合
• Map
• Symbol

8. 模块化

• Import, import{}
• Export, Export default
• Node现在还不支持，还需要require来加载文件
• Promise
• 迭代器和生成器
• 代理Proxy

9. Promise

   在JavaScript中，所有代码都是单线程执行的。在ES5中使用的是回调函数，可是过多回调函数会致使逻辑过于复杂，所以应景的出了ES6中的Promise，它最大的好处就是在异步执行流程中，把执行的代码和结果代码分离开如下图所示：
<img src="/img/Js/promise_1.png" style="width: 380px; height: 200px">
如果有多个异步任务，需要先做任务1，如果成功做任务2，任何失败则不再继续执行：
job1.then(job2).then(job3).catch(handleError);
其中job1、job2和job3都是Promise对象。

• 1. promise是一个构造函数，它的参数是（resolve和reject），resolve和reject分别是两个函数，这两个函数的作用是将promise的（pending 等待）转换为resolved（已解决），或者从pending转为rejected（已失败）。
• 2. 它有then和catch方法，我们可以认为的在promise上添加一些满足我们自己需求的方法，方便每一个对象使用。
     **

Promise的方式虽然解决了callback，但是这种方式充满了Promise的then()方法，如果较为复杂的流程，then中会有大量代码。
ES7中也推出了async和await：（Asyn函数有以下四点)
- 内置执行器。Generator 函数的执行必须依靠执行器，而 Aysnc 函数自带执行器，调用方式跟普通函数的调用一样
- 更好的语义。async 和 await 相较于 * 和 yield 更加语义化
- 更广的适用性。co 模块约定，yield 命令后面只能是 Thunk 函数或 Promise对象。而 async 函数的 await 命令后面则可以是 Promise 或者 原始类型的值（Number，string，boolean，但这时等同于同步操作）
- 返回值是 Promise。async 函数返回值是 Promise 对象，比 Generator 函数返回的 Iterator 对象方便，可以直接使用 then() 方法进行调用

10. 常见的数组处理方法：

// 遍历数组
[1, 2, 3].forEach(function(value, index) {
    console.log(value);
});

//映射数组
arr = [2,5,8].map(v => v*3);
console.log(arr); // [6, 15, 24];

// 所有元素是否通过测试
[2,3,4,5,6].every(v => v > 3);
// false

//是否有元素通过测试
[1,2,3,4,5,6].some(v => v > 3);
// true

// 过滤数组
[1, 2, 3, 4, 5].filter(v => v > 3);
// 4, 5

// 查找符合条件的元素
const arr = [{name: 'nianchen', age: 1}, {name: 'xiamo', age: 23}];
function getUser(element) {
    return element.name == 'nianchen'
}
arr.find(getUser);

arr.find(v => v.name === 'nianchen');
// {name: "nianchen", age: 1}

// 查找索引
['nianchen','xiamo','chen'].indexOf('chen');
// 2

// 连接数组
arr1 = [1,2,3];
arr2 = [6,7,8];
[...arr1,...arr2];
//  [1, 2, 3, 6, 7, 8]
 
 // 数组去重
 arr = ['nianchen', 'xiamo', 'chen','chen'];
 console.log(...new Set(arr);

//  Array.from方法用于将两类对象转为真正的数组
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
Array.from('hello')    // ['h', 'e', 'l', 'l', 'o']

// Array.of方法用于将一组值，转换为数组。
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
// Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

// Array.of方法可以用下面的代码模拟实现。
function ArrayOf(){
  return [].slice.call(arguments);
}

//  includes()：表示某个数组是否包含给定的值（和es5的Array.prototype.includes类似）
[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true
// 第二个参数表示搜索的起始位置，默认为0，若为负数则表示从倒数位置开始，若大于数组长度，则会被重置为0
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

// flat：将嵌套数组变为一维数组，flat()的参数为一个整数，表示想要展开的层数，如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。
[1, 2, [3, [4, 5]]].flat()    // [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)    // [1, 2, 3, 4, 5]
[1, [2, [3]]].flat(Infinity)    // [1, 2, 3]
[1, 2, , 4, 5].flat()  //会自动跳过空位 [1, 2, 4, 5]

11. 常见的对象处理方法：

// 获取对象的key
Objcet.keys({name: 'nianchen', course: 'react'});
// ["name", "course"];

// 获取对象里数据的数量
Object.keys({name: 'nianchen', course: 'react'}).length
// 2

// 遍历数组
Object.entries({name: 'nianchen', course: 'react'});
//  [["name", "nianchen"],["course", "react"]];

// extends功能
const obj = {name: 'nianchen', course: 'react'};
const newObj = {...obj, job: 'IT', age: 18};
console.log(newObj);
// {name: "nianchen", course: "react", job: "IT", age: 18}

// 获取列表的头和尾
const [head, ...tail] = [1, 2, 3];
const [last, ...initial] = [1,2,3].reverse();