杰普实训（前端）第一天知识点总结

今日小结

实训第一天，企业老师开门见山，先给我们讲了现在一个完整的软件包含三大部分：前端——用于交互，服务器端——处理逻辑， 硬件——运用于物联网等方向。然后罗列了前后端工程师需要掌握的技术，用一个简单的引入高德地图组件的案列过渡到js基础语法的学习。从java和js的比较，5大基本数据类型，到对象、数组、函数。用半天时间把js的基础语法都梳理了一遍。虽然我之前学过js和vue，还是从中获得一些更加细致的理解，印象最深的是parseInt：遇到第一个非数字就停止解析。每位同学基础不同，老师为了照顾基础较为薄弱的同学，在开课第一天讲的非常基础但是条理清晰。我比较期待明天的vue框架的讲解能让我学会一些高阶的技能。

一个完整软件的组成

前端工程师和后端工程师

前端工程师

1. 重构技能：html/css/js
2. 交互技能：ajax
3. 企业级框架技能：vue/vuerouter/vuex/elementui | react | angular
4. 移动端技能：webapp、hybirdapp、小程序
5. 通用技能：linux/svn/git/vscode

Java工程师

1. 基础技能：coreJava/xml/mysql/jdbc/servlet/jsp
2. 企业级框架技能：springmvc spring mybatis
3. 第三方：消息队列，微服务，缓存…
4. 通用技能：linux/svn/git/vscode

js 基础

js与java的简单对于

Javascript
浏览器端语言，运行在浏览器上
弱类型语言

	let a;  // 声明了一个变量a
    a = 2;  // a为数字类型

js为解释型语言
js -> 运行在浏览器上

Java
服务器端语言，运行在jvm上
强类型语言

    int a ; // a为数字 int 类型
    a = 2;

编译型语言
java -> class ->运行在jvm上

js组成

ECMAScript (js的标准) == 基础Java
语法
变量
数据类型
关键字&保留字
操作符
流程控制语句
数组
对象
函数
正则表达式
DOM (js操作浏览器中的html的sdk)
BOM (js操作浏览器的sdk)
window.history
window.location
超时调用、间歇调用
Ajax

变量

1. 声明

    const a = 1;  // 常量
    let b ;       // 变量
   

2. 赋值

    b = "hello world";
   

3. 访问

    console.log(b);     // System.out.println()   打印到控制台
   

数据类型

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

    let b;  // b的值为undefinedi

null

    let a = null;   
    // a的数据类型为null,typeof a 返回值也为object

number

    let a = 3;
    let b = 3.5;
    let c = 011;
    let d = 0x11;
    let e = 1 + undefined;  // NaN not a number

string

    let a = 'hello world'
    let b = "hello world"
    let c = `hello world`

boolean

    let a = true;
    let b = false;

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

     object  
       let a = {name:"terry",age:12};
     array
       let arr = ["terry","larry","tom"]
     function
       let foo = function(a,b){
         let total = a + b;
         return total;
       }
     ...
   

   如何检测数据类型：

     typeof
     var result = typeof a;    // result为a的数据类型
   

   基本数据和引用数据类型在内存中的表现形式

操作符

1. 算术运算符
   +、+=
   1 + 2 //3
   true + false //1 了解即可

    let a = 3;
    a += 2;       // a = a+2;
   

   -、-=
   3 - 1 //2
   、=
   2 * 3 // 6
   /、/=
   5/2 //2.5
   %、%=
   5%2 //1

2. 逻辑运算符
   操作数可以为任意的数据类型，并且返回结果也可以为任意数据类型
   &&
   同真则真，有假则假

    true && true    // true
    true && false   // false
    "hello" && "world"    // "world"
   

   如果第一个表达式为真，第二个表达式就可以决定整个表达式结果，返回第二个表达式

   	 "" && 25.8            //""
   

   如果第一个表达式为假，整个表达式结果就已经确定，直接返回第一个表达式，无需判断第二个表达式
   ||
   有真则真，同假才假
   true || false // true
   “hello” || “world” // “hello”
   如果第一个表达式为真，整个表达式结果就已经确定，直接返回第一个表达式，无需判断第二个表达式
   如果第一个表达式为假，第二个表达式就可以决定整个表达式结果，返回第二个表达式
   !

     !true     //false
   

3. 比较运算符
   操作数一般为数字类型但是不确保，返回值为布尔类型

     let age = 15;
     age > 16    // false
   

当比较基本数据类型的时候，比较值，当值类型不同，先转换再比较
当比较引用数据类型的时候，比较引用地址

let a = 3;
let b = "3";


let a = {}
let b = {}

当比较基本数据类型的时候，先比较数据类型，如果数据类型不同直接返回false,否则再进一步比较值
当比较引用数据类型的时候，比较引用地址

let a = 3;
let b = "3";


let a = {}
let b = {}
a == b  // false  

4. 三目运算符

    let age = 13;
    let result = age > 16?"成年人":"未成年人";    // "未成年人"
   

5. 一元运算符
   +
   let a = 3;
   +a; // 3

    let a = 3;
    -a;   // -3
   

   类型转换
   var a = true;
   +true //1 将true转换为数字类型
   -(-true) //1
   ++
   自增
   let a = 3;
   a++; // 4

    let a = 3;
    a++ + ++a;  //8   a = 5
   

####类型转换

1. boolean
   Boolean(a)
   !!a
   true false
   字符串 非空 空
   数字 非0 0、NaN
   null null
   undefined undefined

2. string
   String(a)
   a+"" 任何其他数据类型与字符串相加结果都为字符串

3. number
   Number(a);
   +a
   -(-a)

    parseInt(a)   parseInt表示从字符串中解析出int类型
    parseInt("23.5abc")   //23
    parseFloat(a) parseFloat表示从字符串中解析Float类型
    parseFloat("23.5abc") //23.5
    parseFloat("abc23.5") //NaN
   

流程控制语句

1. 分支语句

    if
    let a = 19;
    if(a>16){
      console.log("成年人");  // 只有当if中的表达式为true的时候才会执行
    }
    console.log("end");       // 始终执行
   
    if-else
    let age = 15;
    if(age>16){
      console.log("成年人");
    } else {
      console.log("未成年人");
    }
   
     if-else-if
    let day =2;
    if(day === 1){
      console.log("周一");
    } else if(day === 2){
      console.log("周二");
    } else if(day === 3){
      console.log("周三");
    }...
     switch-case
    let v = 1;
    switch(v){
      case c1:
        exp1;
        break;
      case c2:
        exp2;
        break;
      ...
      default:
        exp;
        break;
    }
   

v 与 c1对比采用的是 ===, 意味着先比较数据类型在比较值
default中可以不添加break。但是当default位于其他地方的时候一定要添加break;

2. 循环语句
   三要素：
   初始化条件 结束判定条件 迭代

   1~100之间的累加操作

   1. for循环
      for(初始化条件;结束判定条件;迭代){
      循环体
      }
      例如：

    let result = 0;
    for(var i=1;i<=100;i++){
      result += i;  // result = reuslt + i;
    }
   

   2. while循环
      初始化条件
      while(结束判定条件){
      循环体
      迭代
      }
      例如：

    let result = 0;
    let i = 1;
    while(i<=100){
      result += i;
      i++
    }
   

   3. do-while循环
      初始化条件
      do{
      循环体
      迭代
      }while(结束判定条件);

    例如：
    
    let result = 0;
    let i = 1;
    do{
      result += i;
      i++;
    } while(i<=100);
   

   算法：

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

对象

用于保存复杂的数据，数据特点为键值对

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

数组

保存多个值的集合称为数组

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

####函数
方法，js中的函数比java方法更强大一些，它实际上是方法和类的统称
1) 函数定义

1. 函数声明

    function 函数名(形式参数){
   
    }
    例如：
    function foo(a,b){
      let result = a+b;
      return result;
    }
   

2. 函数表达式

    var 函数名 = function(形式参数){
   
    }
   
    例如：
    var foo = function(a,b){
      let result = a+b;
      return result;
    }
   

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

   let arr = [“terry”,“larry”,“tom”]
   // 遍历
   // 1. 原生遍历 for、while、do-while、for-in； 自己嗑瓜子（遍历），自己吃瓜子（访问）
   // 2. api； 别人嗑瓜子，自己吃瓜子

   // 我们调用forEach帮我们遍历arr，每次遍历获取到数据之后都需要将遍历到的元素返给我们（通过回调函数）
   arr.forEach();