es6常用的

常用：

let关键字：

1. 作用:
* 与var类似, 用于声明一个变量
2. 特点:
* 在块作用域内有效
* 不能重复声明
* 不会预处理, 不存在提升
3. 应用:
* 循环遍历加监听
* 使用let取代var是趋势

 //console.log(age);// age is not defined
     let age = 12;
     //let age = 13;不能重复声明
     console.log(age);
     let btns = document.getElementsByTagName('button');
     for(let i = 0;i<btns.length;i++){
             btns[i].onclick = function () {
                 alert(i);
             }
     }

const关键字：

1. 作用:
* 定义一个常量
2. 特点:
* 不能修改
* 其它特点同let
3. 应用:
* 保存不用改变的数据

   const sex = '男';
     console.log(sex);
     //sex = '女';//不能修改
     console.log(sex);

变量的解构赋值：

1. 理解:
* 从对象或数组中提取数据, 并赋值给变量(多个)
2. 对象的解构赋值
let {n, a} = {n:'tom', a:12}
3. 数组的解构赋值
let [a,b] = [1, 'atguigu'];
4. 用途
* 给多个形参赋值

     let obj = {name : 'kobe', age : 39};
 //    let name = obj.name;
 //    let age = obj.age;
 //    console.log(name, age);
     //对象的解构赋值
     let {age} = obj;
     console.log(age);
 //    let {name, age} = {name : 'kobe', age : 39};
 //    console.log(name, age);

     //3. 数组的解构赋值  不经常用
     let arr = ['abc', 23, true];
     let [a, b, c, d] = arr;
     console.log(a, b, c, d);
     //console.log(e);
     function person(p) {//不用解构赋值
         console.log(p.name, p.age);
     }
     person(obj);

     function person1({name, age}) {
      console.log(name, age);
     }
     person1(obj);

模板字符串：

1. 模板字符串 : 简化字符串的拼接
* 模板字符串必须用 `` 包含
* 变化的部分使用${xxx}定义

     let obj = {
         name : 'anverson',
         age : 41
     };
     console.log('我叫:' + obj.name + ', 我的年龄是：' + obj.age);

     console.log(`我叫:${obj.name}, 我的年龄是：${obj.age}`);

简化的对象写法：

简化的对象写法
* 省略同名的属性值
* 省略方法的function
* 例如:
let x = 1;
let y = 2;
let point = {
x,
y,
setX (x) {this.x = x}
};

    let x = 3;
     let y = 5;
     //普通额写法
 //    let obj = {
 //        x : x,
 //        y : y,
 //        getPoint : function () {
 //            return this.x + this.y
 //        }
 //    };
     //简化的写法
     let obj = {
         x, //同名的属性可以省略不写
         y,
         getPoint(){
             return this.x
         }
     };
     console.log(obj, obj.getPoint());

箭头函数：

* 作用: 定义匿名函数
* 基本语法:
* 没有参数: () => console.log('xxxx')
* 一个参数: i => i+2
* 大于一个参数: (i,j) => i+j
* 函数体不用大括号: 默认返回结果
* 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回
* 使用场景: 多用来定义回调函数

* 箭头函数的特点：
1、简洁
2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
3、扩展理解： 箭头函数的this看外层的是否有函数，
如果有，外层函数的this就是内部箭头函数的this，
如果没有，则this是window。

 let fun = function () {
        console.log('fun()');
    };
    fun();
    //没有形参，并且函数体只有一条语句
    let fun1 = () => console.log('fun1()');
     fun1();
    console.log(fun1());
     //一个形参，并且函数体只有一条语句
     let fun2 = x => x;
     console.log(fun2(5));
     //形参是一个以上
     let fun3 = (x, y) => x + y;
     console.log(fun3(25, 39));//

     //函数体有多条语句
     let fun4 = (x, y) => {
         console.log(x, y);
         return x + y;
     };
     console.log(fun4(34, 48));//

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

    let btn = document.getElementById('btn');
    //没有箭头函数
    btn.onclick = function () {
        console.log(this);//btn
    };
    //箭头函数
    let btn2 = document.getElementById('btn2');

     let obj = {
         name : 'kobe',
         age : 39,
         getName : () => {
             btn2.onclick = () => {
                 console.log(this);//obj
             };
         }
     };
     obj.getName();

  function Person() {
      this.obj = {
          showThis : () => {
              console.log(this);
          }
      }
  }
     let fun5 = new Person();
     fun5.obj.showThis();

3点运算符：

1. rest(可变)参数
* 用来取代arguments 但比arguments灵活,只能是最后部分形参参数
function add(...values) {
let sum = 0;
for(value of values) {
sum += value;
}
return sum;
}
2. 扩展运算符
let arr1 = [1,3,5];
let arr2 = [2,...arr1,6];
arr2.push(...arr1);

    function fun(...values) {
         console.log(arguments);
 //        arguments.forEach(function (item, index) {
 //            console.log(item, index);
 //        });
         console.log(values);
         values.forEach(function (item, index) {
             console.log(item, index);
         })
     }
     fun(1,2,3);

     let arr = [2,3,4,5,6];
     let arr1 = ['abc',...arr, 'fg'];
     console.log(arr1);

形参默认值：

* 形参的默认值----当不传入参数的时候默认使用形参里的默认值
function Point(x = 1,y = 2) {
this.x = x;
this.y = y;
}

   //定义一个点的坐标
     function Point(x=12, y=12) {
         this.x = x;
         this.y = y;
     }
     let point = new Point(25, 36);
     console.log(point);
     let p = new Point();
     console.log(p);
     let point1 = new Point(12, 35);
     console.log(point1);

Promise对象：

1. 理解:
* Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
* 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')
* ES6的Promise是一个构造函数, 用来生成promise实例
2. 使用promise基本步骤(2步):
* 创建promise对象
let promise = new Promise((resolve, reject) => {
//初始化promise状态为 pending
//执行异步操作
if(异步操作成功) {
resolve(value);//修改promise的状态为fullfilled
} else {
reject(errMsg);//修改promise的状态为rejected
}
})
* 调用promise的then()
promise.then(function(
result => console.log(result),
errorMsg => alert(errorMsg)
))
3. promise对象的3个状态
* pending: 初始化状态
* fullfilled: 成功状态
* rejected: 失败状态
4. 应用:
* 使用promise实现超时处理

* 使用promise封装处理ajax请求
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
}
request.responseType = 'json';
request.open("GET", url);
request.send();

 //创建一个promise实例对象
     let promise = new Promise((resolve, reject) => {
         //初始化promise的状态为pending---->初始化状态
         console.log('1111');//同步执行
         //启动异步任务
         setTimeout(function () {
             console.log('3333');
             //resolve('atguigu.com');//修改promise的状态pending---->fullfilled（成功状态）
             reject('xxxx');//修改promise的状态pending----->rejected(失败状态)
         },1000)
     });
     promise.then((data) => {
         console.log('成功了。。。' + data);
     }, (error) => {
         console.log('失败了' + error);
     });
     console.log('2222');

     //定义一个请求news的方法
     function getNews(url) {
         //创建一个promise对象
         let promise = new Promise((resolve, reject) => {
             //初始化promise状态为pending
             //启动异步任务
             let request = new XMLHttpRequest();
             request.onreadystatechange = function () {
                 if(request.readyState === 4){
                     if(request.status === 200){
                         let news = request.response;
                         resolve(news);
                     }else{
                         reject('请求失败了。。。');
                     }
                 }
             };
             request.responseType = 'json';//设置返回的数据类型
             request.open("GET", url);//规定请求的方法，创建链接
             request.send();//发送
         })
         return promise;
     }

     getNews('http://localhost:3000/news?id=2')
             .then((news) => {
                 console.log(news);
                 document.write(JSON.stringify(news));
                 console.log('http://localhost:3000' + news.commentsUrl);
                 return getNews('http://localhost:3000' + news.commentsUrl);
             }, (error) => {
                 alert(error);
             })
             .then((comments) => {
                 console.log(comments);
                 document.write('<br><br><br><br><br>' + JSON.stringify(comments));
             }, (error) => {
                 alert(error);
             })

Symbol：

前言：ES5中对象的属性名都是字符串，容易造成重名，污染环境
Symbol：
概念：ES6中的添加了一种原始数据类型symbol(已有的原始数据类型：String, Number, boolean, null, undefined, 对象)
特点：
1、Symbol属性对应的值是唯一的，解决命名冲突问题
2、Symbol值不能与其他数据进行计算，包括同字符串拼串
3、for in, for of遍历时不会遍历symbol属性。
使用：
1、调用Symbol函数得到symbol值
let symbol = Symbol();
let obj = {};
obj[symbol] = 'hello';
2、传参标识
let symbol = Symbol('one');
let symbol2 = Symbol('two');
console.log(symbol);// Symbol('one')
console.log(symbol2);// Symbol('two')
3、内置Symbol值
* 除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法。
- Symbol.iterator
* 对象的Symbol.iterator属性，指向该对象的默认遍历器方法(后边讲)

    window.onload = function () {
       let symbol = Symbol();
       console.log(typeof symbol);
       console.log(symbol);

       // 用作对象的属性(唯一)
       let obj = {username: 'kobe', age: 39};
       obj[symbol] = 'hello';
       obj[symbol] = 'symbol';
       console.log(obj);
       for(let i in obj){
         console.log(i);
       }
     }

Iterator遍历器：

概念： iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制
作用：
1、为各种数据结构，提供一个统一的、简便的访问接口；
2、使得数据结构的成员能够按某种次序排列
3、ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。
工作原理：
- 创建一个指针对象，指向数据结构的起始位置。
- 第一次调用next方法，指针自动指向数据结构的第一个成员
- 接下来不断调用next方法，指针会一直往后移动，直到指向最后一个成员
- 每调用next方法返回的是一个包含value和done的对象，{value: 当前成员的值,done: 布尔值}
* value表示当前成员的值，done对应的布尔值表示当前的数据的结构是否遍历结束。
* 当遍历结束的时候返回的value值是undefined，done值为false
原生具备iterator接口的数据(可用for of遍历)
1、Array
2、arguments
3、set容器
4、map容器
5、String

     window.onload = function () {
         // 自定义iterator生成指针对象
         function mockIterator(arr) {
           let nextIndex = 0;
           return {
             next: function () {
               return nextIndex<arr.length?{value: arr[nextIndex++], done: false}:{value: undefined, done: true}
             }
           }
         }

         let arr = [1,2,3,4,5];
         let iteratorObj = mockIterator(arr);
         console.log(iteratorObj.next());
         console.log(iteratorObj.next());
         console.log(iteratorObj.next());

         // 使用解构赋值以及...三点运算符时会调用iterator接口
         let arr1 = [1,2,3,4,5];
         let [value1, ...arr2] = arr1;
         // yield*语句
         function* generatorObj() {
           yield '1'; // 可遍历数据，会自动调用iterator函数
           yield '3';
         }
         let Go = generatorObj();
         console.log(Go.next());
         console.log(Go.next());
         console.log(Go.next());

         // 原生测试  数组
         let arr3 = [1, 2, 'kobe', true];
         for(let i of arr3){
           console.log(i);
         }
         // 字符串  string
         let str = 'abcdefg';
         for(let item of str){
           console.log(item);
         }

       }

Generator函数

概念：
1、ES6提供的解决异步编程的方案之一
2、Generator函数是一个状态机，内部封装了不同状态的数据，
3、用来生成遍历器对象
4、可暂停函数(惰性求值), yield可暂停，next方法可启动。每次返回的是yield后的表达式结果
特点：
1、function 与函数名之间有一个星号
2、内部用yield表达式来定义不同的状态
例如：
function* generatorExample(){
let result = yield 'hello'; // 状态值为hello
yield 'generator'; // 状态值为generator
}
3、generator函数返回的是指针对象(接11章节里iterator)，而不会执行函数内部逻辑
4、调用next方法函数内部逻辑开始执行，遇到yield表达式停止，返回{value: yield后的表达式结果/undefined, done: false/true}
5、再次调用next方法会从上一次停止时的yield处开始，直到最后
6、yield语句返回结果通常为undefined， 当调用next方法时传参内容会作为启动时yield语句的返回值。

   // 小试牛刀
     function* generatorTest() {
       console.log('函数开始执行');
       yield 'hello';
       console.log('函数暂停后再次启动');
       yield 'generator';
     }
     // 生成遍历器对象
     let Gt = generatorTest();
     // 执行函数，遇到yield后即暂停
     console.log(Gt); // 遍历器对象
     let result = Gt.next(); // 函数执行,遇到yield暂停
     console.log(result); // {value: "hello", done: false}
     result = Gt.next(); // 函数再次启动
     console.log(result); // {value: 'generator', done: false}
     result = Gt.next();
     console.log(result); // {value: undefined, done: true}表示函数内部状态已经遍历完毕

     // 对象的Symbol.iterator属性;
     let myIterable = {};
     myIterable[Symbol.iterator] = function* () {
       yield 1;
       yield 2;
       yield 4;
     };
     for(let i of myIterable){
       console.log(i);
     }
     let obj = [...myIterable];
     console.log(obj);

     console.log('-------------------------------');
     // 案例练习
     /*
     * 需求：
     * 1、发送ajax请求获取新闻内容
     * 2、新闻内容获取成功后再次发送请求，获取对应的新闻评论内容
     * 3、新闻内容获取失败则不需要再次发送请求。
     *
     * */
     function* sendXml() {
       // url为next传参进来的数据
      let url = yield getNews('http://localhost:3000/news?newsId=2');
       yield getNews(url);
     }
     function getNews(url) {
       $.get(url, function (data) {
         console.log(data);
         let commentsUrl = data.commentsUrl;
         let url = 'http://localhost:3000' + commentsUrl;
         // 当获取新闻内容成功，发送请求获取对应的评论内容
         // 调用next传参会作为上次暂停是yield的返回值
         sx.next(url);
       })
     }

     let sx = sendXml();
     // 发送请求获取新闻内容
     sx.next();

async函数：

async函数(源自ES2017)
概念： 真正意义上去解决异步回调的问题，同步流程表达异步操作
本质： Generator的语法糖
语法：
async function foo(){
await 异步操作;
await 异步操作；
}
特点：
1、不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行
2、返回的总是Promise对象，可以用then方法进行下一步操作
3、async取代Generator函数的星号*，await取代Generator的yield
4、语意上更为明确，使用简单，经临床验证，暂时没有任何副作用

  async function timeout(ms) {
       return new Promise(resolve => {
         setTimeout(resolve, ms);
       })
     }

     async function asyncPrint(value, ms) {
       console.log('函数执行', new Date().toTimeString());
       await timeout(ms);
       console.log('延时时间', new Date().toTimeString());
       console.log(value);
     }

     console.log(asyncPrint('hello async', 2000));

     // await
     async function awaitTest() {
       let result = await Promise.resolve('执行成功');
       console.log(result);
       let result2 = await Promise.reject('执行失败');
       console.log(result2);
       let result3 = await Promise.resolve('还想执行一次');// 执行不了
       console.log(result3);
     }
     awaitTest();

     // 案例演示
     async function sendXml(url) {
       return new Promise((resolve, reject) => {
         $.ajax({
           url,
           type: 'GET',
           success: data =>  resolve(data),
           error: error => reject(error)
         })
       })
     }

     async function getNews(url) {
       let result = await sendXml(url);
       let result2 = await sendXml(url);
       console.log(result, result2);
     }
     getNews('http://localhost:3000/news?id=2')

class：

1. 通过class定义类/实现类的继承
2. 在类中通过constructor定义构造方法
3. 通过new来创建类的实例
4. 通过extends来实现类的继承
5. 通过super调用父类的构造方法
6. 重写从父类中继承的一般方法

     class Person {
         //调用类的构造方法
         constructor(name, age){
             this.name = name;
             this.age = age;

         }
         //定义一般的方法
         showName(){
             console.log(this.name, this.age);
         }
     }
     let person = new Person('kobe', 39);
     console.log(person, person.showName());

     //定义一个子类
     class StrPerson extends Person{
         constructor(name, age, salary){
             super(name, age);//调用父类的构造方法
             this.salary = salary;
         }
         showName(){//在子类自身定义方法
             console.log(this.name, this.age, this.salary);
         }
     }
     let str = new StrPerson('weide', 38, 1000000000);
     console.log(str);
     str.showName();