前端基础部分

技术栈介绍：
1.VSCode:开发用的前端工具
2.ES6:


ECMAScript的重要性：

ES6新特性：
1).let 声明变量
let与var 之间的比较



2).const声明常量(只读变量)

3).解构表达式
3.1）.数组解构

3.2）. 对象解构


这样写代表把person 的name属性解构出来给abc,所以输出的时候就用abc作为变量

3.4). 字符串扩展
1.几个新的API

2.字符串模板
" ` ": 这个符号就是键盘数字列1左边的符号


可以和对象解构一起使用

还能在${}中使用表达式和调用函数

函数优化:
1)函数参数默认值:

解读"b = b || 1"
b||1，如果b是null或undefined或0或false或空串、那么结果就是1，否则就是b

2)不定参数

3）箭头函数

实例：函数优化+解构对象


对象优化：
1）几个新的API:

将一个对象的内容复制到另一个对象中去的API

2)声明对象简写

3）对象函数属性的简写

4）对象扩展运算符
4.1.
4.2.合并对象

注意：合并的对象之间的属性名不能一样，因为后面的对象属性会把前面的对象属性覆盖掉

5)为数组新增的map和reduce 方法
5.1)map(): 接收一个函数,将源数组中的所有元素用这个函数处理后放入新数组返回

   /*
        1.previousVlaue (上一次调用回调返回的值,或者是提供的初始值(initialVlaue))
        2.currentValue(数组中当前被处理的元素)
        3.index (当前元素在数组中的索引)
        4.array (调用 reduce 的数组)
    */
    
    let result = arr.reduce((a,b)=>{
        console.log("上一次处理后: "+a);
        console.log("当前正在处理: "+b);
        return a + b;
    });
    console.log(result);

6. Promise:用于优化异步操作
   有三个JSON 数据:
   用户数据:
   用户的课程数据:
   
   用户课程的成绩数据:
   
   需要执行的操作:
   
   在以前使用JQuery 来进行Ajax 的话
   

Promise 可以对异步操作进行封装:
将除了这次异步请求还要再进行下一次请求的Ajax 封装成一个Promise 对象, 请求成功则执行resolve(),请求失败则执行reject()
这次的请求流程是: 请求用户信息 -> 再请求用户的课程信息

在上面的请求中只完成了对用户信息的请求, then()中是基于上一次请求的数据再进行对用户课程信息的请求，因为请求完用户课程信息，还需要继续请求用户的课程的成绩信息，所以在第一次then()中需要将Ajax 再次封装成Promise 对象，然后return 出去，通过下一次的then() 来完成对用户的课程的成绩信息的请求。

再将上述操作进行通用简化:


注意:$.ajax中的: data:data, 和success :function(data){…} 不是一个东西；
还有就是get(url, data) 有两个参数,但在调用的时候只传一个参数,不会出问题吗?
答：不会。
原因：ECMAScript函数的参数与大多数其他语言中的函数的参数有所不同。ECMAScript函数不介意传递进来多少个参数，也不在乎穿进来参数是什么数据类型。也就是是说，即便你定义的函数值接受两个参数，在调用这个函数时也未必一定要是两个参数。可以传递一个、三个甚至不传递参数，而解析器永远不会有什么怨言。之所以会这样，原因是ECMAScript中的参数在内部是用一个数组来运行的。函数接受到的永远是这个数组，而不关心数组中包含哪些参数(如果有参数的话)。如果这个数组中不包含任何元素，无所谓；如果包含多个元素，也没问题。实际上，在函数体内可以通过arguments对象来访问这个参数数组，从而获取传递给含糊的每一个参数。

7）模块化

代码演示：

更简便的导出代码方法:

如果想导入的时候变量可以自己取名：

3.Node.js:利用里面的npm 来管理前端项目

4.Vue: 类似于SpringMVC的框架

利用npm 来安装vue:
在控制终端:

npm init -y

此时会生成一个package.json的文件

npm install vue

此时会生成一个node_modules

HelloWorld:

实例图：

能够在网页控制台直接改变view,model - view: model 改变，view 也跟着变. 以前在jquery 是无法实现这个效果。
双向绑定:model 变了，view 也会变；view 变了,model 也会变。

input 框中数字改变，view 就会改变。

将view中的数据改变，model 也会改变

事件处理:

button 绑定了一个事件，点击按钮就会触发num++，而input 又与num进行了绑定，所以当num++时，输入框中的数字也会变化。

关于vue 的基本使用方法：

绑定方法:

为了后来开发方便，安装vue 插件：
该插件用于vue 的语法提示

给浏览器安装一个插件：
添加链接描述

5：Babel:

6.Webpack:打包前端项目的时候能用到

前后端技术栈比较: