ES6基本语法，Axios异步网络请求介绍

一.ECMAScript和JavaScript的关系

ECMA介绍

1. ECMA：全称European Computer Manufacturers Association。简称ECMA或ES（ES6）
2. ECMAScript ≈ JS
3. 用ES6的意义：
   • 对语法的改进，功能的增加
   • 使用Vue、React、小程序、Nodejs等都在用
   • ES6以上版本再等等

1.1 let 和 const 命令

1. var与let命令、const命令区别

   • var 可以重复声明, let 不能。
   • var 没有块级作用域。块级作用域: {} 、 if() {}、 for() {}
   • var只有在function(){} 中有作用域。
   • var会发所有声明提升，但let不会

2. let与const的区别

• let用于声明变量。
• const用于声明常量，一旦声明无法更改，而且声明时必须给值。但对象中的成员可以改变。

1.2 箭头函数 =>

1. 实例

   代码1：
   function add(a,b){
   return a+b;}
   console.log(add(3,4));

   结果：7

   代码2：
   const add = (a,b) => a+b;

   结果：7
   代码2 = 代码1。

2. 使用细节

   • 如果没有参数，或有多个参数用小括号（）
   • 只有一个参数可以不用小括号（）
   • 如果只有一条语句可以不使用大括号{}和return语句。
   • 箭头函数=>没有自己this，用的this是继承过来的，默认指向在定义时的对象。

1.3 数组中常用方法

1. filter过滤器
2. map 映射
3. reduce 汇总
   . 例子：有一个商品列表：
   1. 将大于10元的商品打折， 取出大于10元的商品
   2. 将10元以上的商品打5折
   3. 打完折的商品总价是多少

      方法1写法：
      let goods = [30, 80, 50, 5, 3, 1, 60, 9];
      //取出大于10元的商品
      let goods1 = [];
      for(let n of goods) {
            if(n>=10)
                goods1.push(n);
      }
      console.log(goods1);
      let goods2 = [];
      for(let n of goods1) {
          goods2.push(n*0.5);
      }
    console.log(goods2);
      let sum = 0;
      for(let n of goods2) {
          sum += n;
      }
    console.log(sum);
    方法2写法：
    let goods = [30, 80, 50, 5, 3, 1, 60, 9];
     let goods1 = goods.filter(function(n) {
            return n >= 10;
    })
    console.log(goods1);
     let goods2 = goods1.map(function(n) {
         return n*0.5;
     })
    console.log(goods2);
     let sum = goods2.reduce(function(s, n){
         return s+n;
     }, 0);
    console.log(sum);
    方法3写法：
    /*
       第一次，s 参数是 0 , n 是数组中的第一个元素 15
       第二次，s 参数是 是第一次回调函数返回值 , n 是数组中的第二个元素 40
       第三次，s 参数是 是第二次回调函数返回值 , n 是数组中的第三个元素 25
       第四次，s 参数是 是上一次回调函数返回值 , n 是数组中的第二个元素 30
     */
    let goods = [30, 80, 50, 5, 3, 1, 60, 9];
    let sum = goods.filter(n => n >= 10).map(n => n*0.5).reduce((s, n)=>s+n);
    console.log(sum);

1.4 模板字符串

1.模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

 let title = "学习猿地";
 let slogen = "成就自己的只需要一套精品";
 let jsx = `
  <h1>${title}</h1>
  <b>lmonkey</b>
  <div><i>${slogen}</i></div>`;
  console.log(jsx);

1.5 解构赋值和扩展运算

1. 解构赋值
   • 左右两边结构必须一样；右边用数组[]，左边也是数组[];右边是对象{}，左边也是对象{}，并且对象中的名称要对应。
   • 右边必须有值
   • 声明和赋值不能分开

     let [a,b,c] = ['one','two','three'];
     const {age,sex,say,name} ={name:'aaa',age:30,sex:'nan',say(){return 'aaa'}};

2. 扩展运算符
   • …三点运算符
   • 展开数组
   • 默认参数
   • 也可展开赋值给函数所有参数

     let a = [1,2,3];
     let b = [...a,4,5,6,...a];

     function demo(...args){
     return args;
     }
     demo(5,4,3,2,1);

     }

1.6 ES6的类

1. ES 6 的 Class（类）概念，与php一样。

   • constructor 是构造方法
   • this关键字代表实例对象
   • 通过extends关键字实现继承
   • super关键字，表示父类的构造函数，用来新建父类的this对象

2. JSON对象的新应用

• JSON.stringify() 串行化
• JSON.parse() 反串行化
• 简写
  • (属性和值)名字一样可以简写
  • 方法一样可以简写（:function省）

1.7 模块化编程

1. export命令：用于规定模块的对外接口,用{}。

   一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。可缺省导出default，一个文件中只能有一个。

2. import命令：用于输入其他模块提供的功能，用{}。

   import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。

3. 如果不使用webpack，需要在html文件中使用type=”module”变成模块，使之独立。

二、Axios异步网络请求

完全可以替代ajax,可理解为ajax的封装，Axios是一个基于promise的HTTP库。

1. 安装axios:http://bootcdn.cn下载axios,并导入js文件。
   在入口文件中用import导入。

2. 代码

   axios('url').then(res=>{console.log(res);
   }).catch(err=>{
       console.log(err);
   });

3. 入门应用

   • Get方法（默认）

     axios({
        url:'http://localhost/axios/api.php',
        method:'get',
        params:{
            name:'username',
        }
     }).then(res=>{
        console.log(res);
     });

   • POST方法

   axios({
    method:'post',
   url:'http://localhost/axios/api.php',
    headers: {'content- type': 'application/x-www- form-urlencoded' },
   data:{                  
     name:'username',
     age:'30',
     sex:'aaa'
     }
    }).then(res=>{
        console.log(res);
    });

4. Axios的请求
   • axios.request(config)
   • axios.get(url[, config])
   • axios.delete(url[, config])
   • axios.head(url[, config])
   • axios.post(url[, data[, config]])
   • axios.put(url[, data[, config]])
   • axios.patch(url[, data[, config]])

5.Axios全局配置
建议配置时必须加,在Axios请求时可以简单化。

    axios.defaults.baseURL="http://127.0.0.1";
    axios.defaults.timeout=5000;
    axios.defaults.headers.post['content-type']='application/x-www-form-urlencoded';