JavaScript内容整理（一）

1、什么是JavaScript

JavaScript可以运行在浏览器上，可以实现类似：搜索、登陆、表单验证、收藏、点赞......
    键盘+鼠标的事件
表单验证
    使用js规定用户必须需要输入的值的格式，为了减少服务器的压力【当格式错误时，不会发送网络请求】

2、JavaScript特点

（1）JavaScript可以运行在浏览器上，也可以运行在服务器上
    浏览器上：搜索、登陆...
    服务器上：操作数据库、操作文件、操作流、操作网络...
        前提是使用node.js
            swagger-ui.html
            webpack 打包工具
（2）弱类型
    变量的数据类型会随时发生变化
        var a = 1;
        var a = true;
        console.log(a); //true
（3）不需要编译，可以直接运行
（4）js文件会从上往下解析，并且出现语法错误时，浏览器会抛出错误

3、JavaScript组成

ECMAScript5(es5)是JavaScript的语法标准---> es6新增了一些特性
    变量
    注释
    数据类型
    操作符
    数组
    函数
    对象
    高级面向对象【原型、原型链、继承】
    ...
DOM 文档对象模型
    使用js操作dom，也就是div这些元素
        获取元素 document.getElementById();
        绑定事件 dom.onclick = function(){}
        监听    window.addEventListener('srcoll',function(){})
BOM 浏览器对象模型
    使用js操作浏览器
        定时器 setInterval() setTimeout()
        对话框 alert()
        储存   cookie、session、localStroage

4、vi编辑器

命令行模式【也就是刚进去文件时的界面，底行没有任何文字】
    dd 删除当前行
    yy 复制
    p 粘贴
    u 撤回

    i 在当前编辑
    o 在下一行编辑
编辑模式【最下方有个单词 INSERT 】
    编写代码

    按下 ESC
底行模式【可以输入：】
    wq 保存并退出
    q 退出
    wq！ 保存并强制退出
    q！强制退出

5、js核心语法

（1）变量声明
    通过关键字var
      var userName = 2；
      console.log(userName);
    变量命名的规则：
        1、变量不可以是关键字、保留字【关键字：具有一些特殊作用，保留字：以后可能会有特殊作用】
        2、变量可以使用驼峰命名法【只是一个规范，如果不使用也不会报错】
            var a；
            var userName；
            var liveAddressProvice
        3、变量以数组、字母、下划线、$组成
            不要以数字、下划线开头
（2）初始化
    var a; //声明
    a = 3; //初始化
    将等号右边的值赋值给等号左边的变量

（3）使用
    console.log(a);
    a++;
    ++a;
（4）数据类型
    基本数据类型
        1.数字【number】 
            整数
            小数
            非数字 NaN -> not a number
                var num = NaN;
                console.log(num); // NaN
                console.log(typeof(num)); // number

                var number1 = 10;
                var number2 = 0x11;
                var number3 = 1.2;
                console.log(number1,number2); // 10 17 
                console.log('---');
                console.log(typeof(number1));  // number
                console.log(typeof(number2));  // number

                console.log(number3); // 1.2
                console.log(parseInt(number3)); // 1
                console.log(parseFloat(number3));  // 1.2

                typeof()
                用于检测基本数据类型
                parseInt()
                去除小数点右侧的数字
                parseFloat()
                保留小数点右侧的数字
                isNaN()
                检测变量是否是非数字
                    如果是数字类型 false
                    如果不是数字  true
                var a = 1;
                console.log(isNaN(a)); // false
            
        2.字符串 string
            使用引号包裹的字符
            一般情况下，单引号和双引号没有区别
            特殊情况：单引号和双引号同时使用
            外层使用单引号，内层只能使用双引号
            外层使用双引号，内层只能使用单引号
            
            var str1 = 'hello world';
            var str2 = "hello js";
            var str3 = "hello 'js'";

            console.log(str1,str2,str3); // hello world  hello js hello 'js'
            console.log(typeof(str1)); // string
            console.log(typeof(str2)); // string

            查询字符串  
            'name=tom&age=13&gender=male'
            json字符串
            '{"name":"tom","age":"13","gender":"male"}'
        3.布尔 boolean
            是true和false
            一般用于判断条件

            var a = true;
            console.log(a); // true
            console.log(typeof(a)); // boolean
        4.null 空对象
            var a = null;
            var b = undefined;
            console.log(typeof(a)); // obeject
            console.log(typeof(b)); // undefined
        5.undefined 未定义
            1. 变量在声明之前被使用
            2. 显示的将变量声明为undefined【意义不大】

            变量会被js的解析器自动提升
            var a = null;
            console.log(a,b); // null undefined
            var b = 12;
            console.log(a,b); // null 12
            若变量未声明就使用，则报错
            var a = null;
            console.log(a,b); // 报错 b is not defined
            console.log(a,b); 

    引用数据类型
        数组 array
            使用[]包裹元素
            var arr = [1,2,3];
        对象 obeject
            使用{}包裹键值对
            var obj = {name:'tom'}
        函数 function
            表示具有一些特殊功能的代码
            var fun = function(){}

        栈、堆【内存】
            基本数据类型会被存储在栈区
            引用数据类型会被存储在堆区，栈区中保存的是当前引用数据类型的指针

6、操作符

（1）算术运算符
    +    +=
    -    -=
    *
    /
    %

    var a = 1;
    var b = 2;
    b += a;   //  b=b+a
    console.log(a,b); // 1  3
（2）一元运算符
    ++  自增
        ++a 表示先自增a，再使用自增后a的值
        a++ 表示先使用a的值，再将a自增
            var a = 1;
            var b = 3;                                                                                                                                                                                                                                                                                                                              
            var c = ++a;                                                                                                           
            var d = b++;                                                                                                           
            console.log(a,b,c,d);  【2 4 2 3】 

    --  自减
        --a 表示先自减a，再使用自减后a的值
        a-- 表示先使用a的值，再将a自减

    + 将其他的数据类型转换成数字类型
        var a = 'hello world';
        var b = +a;
        console.log(a,typeof(a));                                                                                              
        console.log(b,typeof(b));

    -
        1、如果减运用在数值上时，表示为负数
        2、如果减运用在非数值上时，与加的描述一致
            var a = 1；
            var b = -a；
            console.log(a,b);  【1 -1】 

（3）比较运算符
    >
    <
    >=
    <=
        var age =18;
        console.log(16 < age && age < 20);                                 
    == 会自动的进行数据类型的转换，再去比较值是否相等
    === 不会自动进行数据类型的转换，直接比较数据类型是否相同
        数据类型相同时，再去比较值是否相等
        数据类型不同时，直接返回false

    注意：= 赋值操作，== 和===表示比较操作

（4）逻辑运算符
    &&  与 同真则真，有假则假
    ||  或 有真则真，同假则假         
    ！  非 取反
        var name = 'tom';
        var age = 18;
        var res1 = name == 'tom' && age > 18;
        var res2 = name == 'tom' || age > 18;
        console.log(res1，res2); 【false true】
        console.log(!res1，!res2); 【true false】

（5）三目运算符【？ 左边是判断条件，？ 右边是返回结果】
    a == b ? exp1 : exp2
    先判断a是否等于b
        如果相等，则返回exp1
        如果不相等，则返回exp2

        var name = 'tom';
        var age = 18;
        var res = name == 'tom' && age >=18 ? '条件符合' : '条件不符合';
        console.log(res); 【条件符合】
    案例：点击某个元素，就给当前元素添加背景色

（6）拼接运算符
    +
    var a = 'hello';
    var b = 'world';

7、基本数据类型的转换

（1）将其他数据类型转换成数字类型 other----number
        + -
        Number()
        parseInt()
    1、字符串转数字
        var str1 = '';
        var str2 = '20';
        var str3 = 'hello';
        var res1 = Number(str1);
        var res2 = Number(str2);
        var res3 = Number(str3);
        console.log(res1,res2,res3);【0 20 NaN】

        var str1 = '';
        var str2 = '20';
        var str3 = 'hello';
        var res1 = parseInt(str1);
        var res2 = parseInt(str2);
        var res3 = parseInt(str3);
        console.log(res1,res2,res3);【】

        var str1 = '';
        var str2 = '20';
        var str3 = 'hello';
        var res1 = parseFloat(str1);
        var res2 = parseFloat(str2);
        var res3 = parseFloat(str3);
        console.log(res1,res2,res3);【NaN 20 NaN】

    2、布尔转数字
        var bln1 = true;
        var bln2 = false;
        var res1 = Number(bln1);
        var res2 = Number(bln2);
        console.log(res1,res2);【1 0】
        
    3、null undefined转数字
        var bln1 = null;
        var bln2 = undefined;
        var res1 = Number(bln1);
        var res2 = Number(bln2);
        console.log(res1,res2);【0 NaN】


（2）将其他数据类型转换成字符串类型 other----string
    String(a)
    a.toString()
        var a = 1;
        var b = true;
        var c = null;
        var d =  undefined;
        var res1 = String(a);
        var res2 = String(b);
        var res3 = String(c);
        var res4 = String(d);
        console.log(res1,res2,res3,res4);  【1 true null undefined】

    null,undefined不能使用toString方法
        var a = 1;
        var b = true;
        var c = null;
        var d =  undefined;
        var res1 = a.toString(a);
        var res2 = b.toString(b);
        //var res3 = c.toString(c);
        //var res4 = d.toString(d);
        console.log(res1,res2);  【1 true】
（3）将其他数据类型转换成布尔类型 other----boolean
    Boolean(a)
    !!
    1、数字转换成布尔
        数字0转换为布尔时，为false
        非零数字转换为布尔时，为true
            var num1 = 0;
            var num2 = 2;
            var num3 = -2;
            var res1 = Boolean(num1);
            var res2 = Boolean(num2);
            var res3 = Boolean(num3);
            console.log(res1,res2,res3);【false true true】

            
            var num = 0;
            var res = !!num;
            console.log(res);【false】

    2、字符串转布尔
        空字符串转为布尔，值为false
        非空字符串转为布尔，值为true
            var str1 = 0;
            var str2 = 'hello';
            var res1 = !!str1;
            var res2 = !!str2;
            console.log(res1,res2);【false true】

    3、null undefined转布尔
        null undefined转布尔时，都是false
            var str1 = null;
            var str2 = undefined;
            var res1 = !!str1;
            var res2 = !!str2;
            console.log(res1,res2);【false false】

8、流程控制语句

1) 分支语句【根据给定的条件执行不同的代码】
if(condition) {}
  condition 表示判断结果，如果该结果的值为true的时候，会执行{}中的代码

  var age = 18;
  if(age > 18){
    console.log('已成年');
  }
  console.log('---'); // ---
if(condition) {} else {}
  condition 表示判断结果
    如果该结果的值为true的时候，会执行if后面{}中的代码
    如果该结果的值为false的时候，会执行else后面{}中的代码

  var age = 18;
  if(age > 18){
    console.log('已成年');
  } else {
    console.log('---');
  }
  
if(condition1) {} else if(condition2) {} else if(condition3) {} ... else {}
  var day = 3;
  if(day == 1){
    console.log('星期一');
  } else if(day == 2){
    console.log('星期二');
  } else if(day == 3){
    console.log('星期三');
  } 
  // 星期三
  

switch-case
  switch(condition) {
    case1:
      ...
      break;
    case2:
      ...
      break;
    default:
      ...
  }

var day = '1';
switch(day){
  case 1:
    console.log('星期一');
    break;
  case 2:
    console.log('星期二');
    break;
  default:
    console.log('请输入正确的日期');
}
注意：
  1. switch-case的判断遵循===的规则，不会自动进行数据类型的转换
  2. 每一个case中写上break时，当前的分支语句只会执行一个case中的代码
  3. switch和case之间不可以写其他代码
  4. default也就是所有条件不满足时输出的代码，可以不用加break


2) 循环语句 【算法：冒泡排序、快速排序...】 
    循环三要素：初始化条件、结束条件、迭代
    for循环
      for(初始化条件;结束条件;迭代) {
        // 循环体
      }
      1～100累计和 5050

      var res = 0;
      for(var i=1;i<=100;i++){
        res += i; // 等价于 res = res + i
      }
      console.log(res);

      res = 0
      i = 1 满足小于等于100
      res = res + i = 0 + 1 = 1
      i++ 2

      i = 2 满足小于等于100
      res = res + i = 1 + 2 = 3
      i++ 3
      ...

      i = 100 满足小于等于100
      res = res + i = 4950 + 100 = 5050
      i++ 101

      i = 101 不满足小于等于100
      跳出循环体

    前置while循环
      初始化条件
      while(结束条件) {
        // 循环体
        迭代
      }
      
        var i = 1;
        var res = 0;
        while(i<=100){
          res += i;
          i++;
        }
        console.log(res);
    后置while循环
      初始化条件
      do {
        // 循环体
        迭代
      } while(结束条件)