03.JavaScript学习笔记

JavaScript

基本语法入门

1. 定义变量
   Java中定义变量：　　变量类型  变量名 = 变量值；
   JavaScript定义的时候不需要指定类型，都是var
   var num = 1;
   var name = "fanhongda";
   
   
2. 条件控制( 和Java一样)
   

       var score = 71;
       if (score>60 && score<70){
           alert("60~70")
       }else if (score>70 && score<80){
           alert("70~80")
       }else{
           alert("other")
       }

    

3. 其他需要注意的
   JavaScript严格区分大小写
   JavaScript报错在浏览器中调试 F12
   Elements：html和css
   Consol：控制台      可以直接在里面写JavaScript       console.log(score) //直接在浏览器控制台打印变量，相当于Java的System.out.println();
   Sources:当前的源码目录。    可以 在此处打断点，也可以在代码中写dedugger     step over 一下走到完，step into 一步一步走。
   Network：网络请求
   Application:存一些简单的数据web里面的数据，local Storage（vue里面需要用）
   拷贝网站用：Elements（元素），调试用Console（控制台），打断点用Source（源码）。抓包用Network（网络）,查看网站Cookie用Application（应用）。
   
   

数据类型

1. number （JavaScript不区分小数和整数）
   

   123 //整数
   123.1 //浮点数123.1
   1.23e3 //科学计数法
   -99   //负数
   NaN   //not a number
   Infinity   //表示无限大

    

2. 字符串
   'abc'   "abc"
   
   
3. 布尔值
   true , false
   
   
4. 逻辑运算
   &&  与  两个都为真，结果为真
   ||     或  一个为真，结果为真 
   ！    非  真即假，假即真
   
   
5. 比较运算符
   =  赋值
   == 等于（类型不一样，值一样，也会判断为true）
   ===绝对等于（类型一样，值一样，结果为true）
   
   这是JavaScript的一个缺陷，坚持不要使用==比较
   
   须知：NaN===NaN   结果false NaN无法进行比较 与所有的数值都不相等 包括自己
   要用 isNaN（NaN）  结果为true
   
   
6. 浮点数问题
   console.log((1/3)===(1-2/3))
   
   尽量避免使用浮点数进行运算，存在精度问题
   使用绝对值进行运算
   Math.abs(1/3-(1-2/3))<0.00001
    
   
   
7. null（空） 和 undefined（未定义）
   
   
8. 数组
   Java中数组中的对象类型必须相同,JavaScript中不需要这样
   
   

   var arr = [1,2,3,4,5,'hello',null,true]
   
   //也可以用这种方式，为了保证数据的可读性，尽量使用[ ]这种
   new Array（1，12，3，4，5，'hello'）;

   

    

    取数组下标如果越界了就会undefined

   对象
   对象是用大括号括起来 数组是用中括号
   Java中对象的写法：
   Person person = new Person（1，2，3，4，5）；
   

     var person = {
       name:"fanhongda",
       age : 24,
       tages  : ['JavaScript','java','web','....']
     } 

    每个属性使用逗号隔开，最后一个属性的后面不需要加逗号
   取对象的值
    

9. 变量不要以数字开头和乱七八糟的特殊符号就可以，也可以用中文，Java里面也是这样
   
   
   
   因为JavaScript太随意了，会很麻烦，随意推荐使用严格检查
   
   

严格检查

1. 不使用严格检查的问题
   

   i = 1 ;
     //这样的代码默认是全局变量
     //使用var才是局部变量
     //这样会使其他页面也可能会引用此变量

   ES6中新增了let定义变量
   let 用来声明局部变量
   ES6 局部变量建议都是用let定义

2. 'use strict'; 
   严格检查模式，预防JavaScript的随意性
   必须写在第一行
   

   <script>
     'use strict';
     //c = 2; 这样就不行了
     let i = 1;
     var a = 2;
   </script>

    

数据类型

1. 转义字符
   

   <script>
     'use strict';
     //正常字符串我们使用单引号或双引号包裹
     //注意转义字符
     console.log('a');
     console.log("a");
     console.log('\'');  // 单引号
     console.log('hah\nhahah');  // \n换行
     console.log('\u4e2d');   // \u##### Unicode字符
     console.log("\x41")     //ASCII 字符
   </script>

    

2. 多行字符串编写
   

    // 飘 `` tab 上面 esc下面
     // 可以写多行
     var msg1 =
             `hello
             world
             你好呀
             `
   

   输出结果
   
   

3. 模板字符串

     let name = 'fanhongda';
     let age = 3;
     let msg = `你好呀，${name}`;//可以直接拼接 类似于EL表达式

    

4. 字符串长度
   

    

    

5. 字符串的可变性，不可变

   

    

    

6.  

   大小写转换 

    

    

    

    大小写转换是方法不是属性，需要带（）。
   
   

7. 获取指定的下标 indexOf（）
   

    

    

8. 截取substring
   

    

    如果只有一个数字 就直接截取后面
   

    

    

    

数组类型详解

　　　　Array可以包含任意的数据类型
　　　　

 

 

 

1. 长度
   

    

    注意：假如给arr.length 赋值，数组大小就会发生变化,如果赋值过小，元素就会丢失

    

    

    

    

2. indexOf,通过元素活得下标索引
   

    

    字符串 "1" 数字 1 是不同的

3. slice（） 截取Array 的一部分，返回一个‘新’的数组（原来的数组还是原来的数组），类似String中的substring
   

    

4. push ，pop
   
   push（） 加入到尾部（需要写参数）
   pop （）         从尾部弹出 （参数为空）
   是会改变原来的数组的
   
   
5. 刚才的是从尾部 插入弹出的方法
   从头部插入弹出的方法 unshift（），shift（）
    
6. 排序 sort（）

   

    

    

7. 元素反转 reverse()

    

    

    

8. concat()
   

    

    并没有改变原数组，而是产生一个新的数组

9. 连接符 join 
   打印拼接数组使用特定的字符串连接
   
10. 多维数组
    

     数组：存储数据（如何存，如何取方法都可以实现！）
    
    

对象类型详解

1. 对象
   若干键值对