2020-08-25

今天是线上企业体验实习的第一天，接触到了昆山杰普的老师们，他们来给我们授课，教我们前端技术。

在学习的第一天，因为我之前在学院的创新创业中心也培训过cocos，了解了很多的js的基础知识，所以听起来不是很费劲。在今天的主要学习任务，就是搞明白这一些讲的js语法知识以及他们的用法，做到精准用且不用错。

下面就分享今天所学的内容吧，可以加深理解：

本次要做的是  全国疫情可视化平台  项目

1.首先是合格软件工程师基本素质：
    1. 熟悉linux操作系统
    2. 能够使用终端的绝对不使用图形化界面，能使用英文界面绝对不汉化

2.两种工程师需要掌握的技能：

1) 前端工程师
    1. 重构技能：html/css/js
    2. 交互技能：ajax
    3. 企业级框架技能：vue/vuerouter/vuex/elementui | react | angular
    4. 移动端技能：webapp、hybirdapp、小程序
    5. 通用技能：linux/svn/git/vscode
  2) Java工程师
    1. 基础技能：coreJava/xml/mysql/jdbc/servlet/jsp
    2. 企业级框架技能：springmvc spring mybatis
    3. 第三方：消息队列，微服务，缓存...
    4. 通用技能：linux/svn/git/vscode

3.js入门基础：

1) js与java的简单对于
    Javascript 
      浏览器端语言，运行在浏览器上
      弱类型语言
        let a;  // 声明了一个变量a
        a = 2;  // a为数字类型
      js为解释型语言
        js -> 运行在浏览器上
    Java
      服务器端语言，运行在jvm上
      强类型语言
        int a ; // a为数字 int 类型
        a = 2;
      编译型语言
        java -> class ->运行在jvm上
  2） js组成
    ECMAScript (js的标准) == 基础Java  
      语法，变量，数据类型 ， 关键字&保留字， 操作符，流程控制语句， 数组，对象，函数，正则表达式
    DOM   (js操作浏览器中的html的sdk)，BOM   (js操作浏览器的sdk)
      window.history，window.location
      超时调用、间歇调用， Ajax

3）变量

      ①声明 ②赋值 ③访问

4）数据类型

      弱类型语言的数据类型取决于赋值
     ① 基本数据类型（5种）
     c语言的基本数据类型有3种：整型 实型 字符型
     Js的基本数据类型有5种：number  string  boolean  null  undefined
     Java的基本数据类型有8种: byte  short  int  long  float  double  char  boolean

     ②引用数据类型 
    在c语言中称为结构体，用于保存一些较为复杂的值
    在js中除了基本数据类型剩下的全部都是引用数据类型

    如何检测数据类型：typeof
     var result = typeof a;    // result为a的数据类型
    基本数据和引用数据类型在内存中的表现形式

5） 操作符
    ①算术运算符
    ② 逻辑运算符
      操作数可以为任意的数据类型，并且返回结果也可以为任意数据类型
       1. &&
        同真则真，有假则假
        如果第一个表达式为真，第二个表达式就可以决定整个表达式结果，返回第二个表达式  
        如果第一个表达式为假，整个表达式结果就已经确定，直接返回第一个表达式，无需判断第二个表达式
        2. | |
        有真则真，同假才假
        如果第一个表达式为真，整个表达式结果就已经确定，直接返回第一个表达式，无需判断第二个表达式
        如果第一个表达式为假，第二个表达式就可以决定整个表达式结果，返回第二个表达式 
        3. !
    ③ 比较运算符
        操作数一般为数字类型但是不确保，返回值为布尔类型
        当比较基本数据类型的时候，比较值，当值类型不同，先转换再比较
        当比较引用数据类型的时候，比较引用地址
        当比较基本数据类型的时候，先比较数据类型，如果数据类型不同直接返回false,否则再进一步比较值
        当比较引用数据类型的时候，比较引用地址 
    ④ 三目运算符
    ⑤ 一元运算符

6） 流程控制语句
    1) 分支语句
      1. if

      2. if-else

      3. if-else-if
       
      4. switch-case
        v 与 c1对比采用的是 ===, 意味着先比较数据类型在比较值
        default中可以不添加break。但是当default位于其他地方的时候一定要添加break;
    2) 循环语句
      三要素：
        初始化条件 结束判定条件 迭代
      1. for循环

      2. while循环

      3. do-while循环
    算法：
      1. 排序算法（冒泡、插入、选择）
      2. 求取一个数的最小公倍数和最大公约数
      3. 分解质因数
      4. 获取1~1000之间的水仙花数

7. 对象
    用于保存复杂的数据，数据特点为键值对
    1） 初始化对象
      1. 字面量
        使用双大括号作为对象的边界，对象有键值对组成，键值对与键值对之间通过逗号","分割，属性名与属性值通过冒号":"分割
        var obj = {name:"terry",age:12,gender:"male",sayName:function(){}};
      2. 构造函数
        var obj = new Object();
        obj.name= "terry";
        obj.age = 12;
        obj.gender = "male"
    2) js对象和Java对象区别
      js对象 更加灵活，动态的添加和删除属性
      js对象 更加像Java中的Map集合

      Student stu = new Student();
      stu.a = //  如果Student类中没有a这个属性，我们是无法在实例中添加这个属性。

    3) 对象属性访问
      1. 点访问符
        obj.name    // 访问obj对象中的name属性
      2. 中括号访问符
        中括号可以解析变量
        let name = "name"
        obj[name]   //  首先先将name解析为"name"，然后从obj中获取name属性

        obj["name"] //  直接从obj中获取name属性
    4) 遍历对象
      for( var k in obj){
        // k表示obj中的属性名，每次循环，for循环都会从obj中获取一个属性名赋值为k
        var v = obj[k];
      }

 8. 数组
    保存多个值的集合称为数组
    1) 实例化
      1. 字面量
        数组使用[]作为边界，数组中的元素通过逗号进行分割，数组的长度通过length来获取
        let arr = ["terry","larry","tom"]
        let arr = [{
          name:"terry",
          age:12
        },{
          name:"tom",
          age:12
        }]
      2. 构造函数
        let arr = new Array();
        arr[0] = "terry"
        arr[1] = "larry"
        arr[2] = "tom"
    2) 访问
      数组的长度是通过length属性来获取 ，数组长度为数组中元素的个数
      通过索引来进行访问，索引的范围是从0~arr.length-1;
    3) 遍历
      for(let k in arr){
        // k为索引
        let item = arr[k];  //访问元素
        console.log(k,item);
      }

  9. 函数
    方法，js中的函数比java方法更强大一些，它实际上是方法和类的统称
    1) 函数定义
      1. 函数声明
        function 函数名(形式参数){

        }
      2. 函数表达式
        var 函数名 = function(形式参数){

        }
    2) 函数调用
      函数名(实参);
    3) 回调函数
      我调用你的函数，你的函数在执行的时候又返回来调用我的函数