一.ECMAScript和JavaScript的关系

ECMA介绍

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

1.1 let 和 const 命令

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

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

1.2 箭头函数 =>

实例

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

结果：7

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

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

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

1.3 数组中常用方法

filter过滤器
map 映射
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 解构赋值和扩展运算

解构赋值
- 左右两边结构必须一样；右边用数组[]，左边也是数组[];右边是对象{}，左边也是对象{}，并且对象中的名称要对应。
- 右边必须有值
- 声明和赋值不能分开
```
let [a,b,c] = ['one','two','three'];
const {age,sex,say,name} ={name:'aaa',age:30,sex:'nan',say(){return 'aaa'}};
```

扩展运算符

…三点运算符
展开数组
默认参数

也可展开赋值给函数所有参数

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的类

ES 6 的 Class（类）概念，与php一样。
- constructor 是构造方法
- this关键字代表实例对象
- 通过extends关键字实现继承
- super关键字，表示父类的构造函数，用来新建父类的this对象
JSON对象的新应用

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

1.7 模块化编程

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

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。可缺省导出default，一个文件中只能有一个。
import命令：用于输入其他模块提供的功能，用{}。

import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。
如果不使用webpack，需要在html文件中使用type=”module”变成模块，使之独立。

二、Axios异步网络请求

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

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

代码

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

入门应用

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);
 });

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

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