ES6、Axios、Ajax

本笔记为收听B站Blue老师ES6精讲视频、B站老陈的Axios拦截器的应用与Vue请求代理配置视频、

一、ES6语法特性

变量声明

• ES6中使用let声明变量，const声明常量
• let和const可以防止重复声明变量问题，当重复声明同一个变量时候，后台会报错
• 在块级作用域时候如果直接使用var会出现错误,因为在ES5中var是函数级的定义，对于let和const来说是块级的定义，也就是在某一个代码块中才有意义{}。

//给abc三个按钮添加点击事件，分别显示012
//解决方法一：使用闭包解决var函数级定义的问题
let aBtn = document.getElementsByTagName('input');
(function (i){
   
	aBtn[i].onclick = function(){
   
		alert(i);
	};
})(i);
//解决方法二：使用let块级声明变量
for(let i = 0; i < aBtn.length; i++){
   
	aBtn[i].onclick = function(){
   
		alert(i);
	};
}

解构赋值

• 常用解构赋值的语法格式

//1.对json的结构赋值
json = {
    a: 12 , b: 5 };
let {
   a,b} = json;
//2.对数组的解构赋值
arr = [12,5,8];
let [a,b,c] = arr;
//3.请求数据的解构赋值
//ajax请求数据的时候，数据的结构通常为：{code:xx,data:xx,msg,...}
//可以通过let对数据的各个数据项进行解构赋值
let {
   code,data} = $.ajax('xxx'); //取出数据的code和data

• 解构赋值的要求：两边的结构必须一样，而且解构赋值需同时完成

//错误语法格式
let {
   a,b} = [12,6];
let {
   a,b};
{
   a,b} = {
   a:12, b:5};
//正确语法格式
let {
   a,b} = {
    12 , 6 };
let {
   a,b} = {
   a:12, b:5};

函数

箭头函数和this

• 箭头函数的语法格式

//对数组排序的简写
let arr = [12, 8, 37, 26, 9 ];
arr.sort((n1,n2) => {
   return n1 - n2;});
//ES6的更简便写法，规则如下
//1.如果有且仅有一个参数，()可以不写
function show(n,fn){
   
	alert(fn(n));
}
show(12, n => n+5); //将12+5 可以省略+5的函数编写
//2.如果有且仅有一个语句并且是return，{}也可以不写
arr.sort((n1,n2) => n1 - n2);

• 修正this的问题

参数展开、数组展开、json展开

• 收集剩余参数，…c必须为最后一个

收集剩余参数，...c必须为最后一个
function show(a,b,...c){
   
	console.log(a,b,c); //a=12,b=5,c为剩余数组成的数组
} 
show(12,5,4,8,19,27);

• 数组展开

//展开arr1对abc进行赋值
let arr1 = [12,5,8];
function show(a,b,c){
   
	alert(a+b+c)