day 45 JavaScript

day 45 JavaScript

01.JavaScript

1. 是前端的一门编程语言（也是有逻辑的）与java没有关系
2. JavaScript是Netscape（网景）公司开发
3. Node.js 支持前段js代码 跑在后端服务器上
4. ECMAScript 与 javascript 指相同的
5. 当前使用较多的版本ECMAScript 5.1 / 6

02.js语法

1. 注释

   /单行注释/
   /*
   多行注释
   多行注释
   */
   

2. 引入方式

   1.在标签内直接书写
   <script>
   	js代码
   </script>	
   2.通过标签src书写 引入外部js文件
   <script src="js.js"></script>
   

3. Js里面的变量

   1. 在Js中声明变量需要使用关键字

      var 声明的是全局有效
      let 可以只在局部有效（ES6新语法）
      
      var name = 'jason'
      let name = 'oscar'
      

   2. js中变量的命名规范

      1. 数字 字母 下划线 $

      2. 不能使用关键字作为变量名

      3. 推荐使用驼峰体命名

         python推荐使用下划线（c++）
         user_name
         js推荐使用驼峰体（前端）
         UserName
         

   3. js代码默认以分号作为结束符

      confirm('are you sure?')
      不写分号通常情况下没有问题
      

   4. 常量const

      const pi = 3.1415; pi的值不能改变，试图更改会报错
      

      python中没有真正的常量，全大写的变量名只是约定俗成的不改变

   console.log() 作用与 python中的print作用相同
   

03.js中的数据类型

1. 数值类型 Number（包含python中的 int float）

   var x; //此时x是undefined
   var x=1;//此时是数字
   var x=12.34;//此时类型也是数字
   NaN 表示非数字类型，用于判断变量是否为数字
   

2. 字符串类型 string

   var a = 'hello';
   var b = 'world';
   var c = a + b;
   console.log(c) // 'helloword'
   
   

   字符串的常用内置方法

   var name = '   Jason   '
   
   

   1. length 返回长度

      console.log(name.length) == print(len(name))
      
      

   2. trim() 移出空白

      name.trim() == name.strip()
      区别 trim() 无法传参 只能去空格
      trimLeft() 去左侧字符
      trimRight() 去右侧字符
      
      

   3. charAt(n) 返回第n个字符

      name.charAt(0) 
      
      

   4. concat(value,......) 拼接

      name.concat('字符串') 会将括号内的字符串和name拼接到一起产生一个新的变量
      
      

   5. indexOf 获取元素索引位置

      name.indexOf('a') == name.index('a')
      
      

   6. substring(from,to) 根据索引获取子序列

      name.substring(1,5) == name[1:5]
      substring() 括号内不能输入负值，会返回''
      substirng()的特点：
      如果 start > stop ，start和stop将被交换
      如果参数是负数或者不是数字，将会被0替换
      
      

   7. slice(start,end) 切片

      name.slice(0.-2) == name[0:-2]
      name.slice(2) == name[2:] 2前面的都不要
      如果 start > stop 不会交换两者
      如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
      如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
      
      

   8. toLowerCase 变为全小写

      name.toLowerCase() == name.lower()
      
      

   9. toUpperCase 变为全大写

      name.toUpperCase() == name.upper()
      
      

   10. split(delimiter,limit) 分割

   11. ES6中引入了模板字符串。

       var name = 'jason' , age = 18;
       var res = 'my name is ${name} my age is ${age}' //找不到会报错
       ==
       res = f'my name is {name} my age is {age}'
       
       

3. 布尔值 boolean

   1. 在js中布尔值全部是小写
   2. true
   3. false ''(空字符串)、0、null、undefined、NaN

   null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
   undefined 表示当声明了一个变量但未初始化时，改变量的默认值是undefined ，还有就是当函数无法明确的返回值时，返回的也是undefined
   
   

4. 对象 object

   JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript允许自定义对象。
   javascript 提供多个内建对象 如 string、date、Array 等等
   对象只是带有属性和方法的特殊数据类型
   
   

5. 数组 （python中的list）

   数组对象的作用是，使单独的变量名来储存一系列的值。

   var a = [123,"abc"];
   console.log(a[1]);  // 输出结果为"abc"
   l = [1, 2, 3, 4, 5, 6, 7, 8, 9]
   
   

   1. length 获取数组的长度

      l.length == len(l)
      
      

   2. push(ele) 尾部追加元素

      l.push(10) == l.append(10)
      
      

   3. pop() 获取尾部元素

      l.pop() == l[-1] //不同点为pop会将元素从数组中删除
      
      

   4. unshift(ele) 头部插入元素

      l.unshift(666) == l.insert(0,666)
      
      

   5. shift() 头部移除元素

      l.shift() == l[0] //不同点为shift会将元素从数组中删除
      
      

   6. slice(start,end) 切片

      l.slice(2,6) == l[2:6]
      
      

   7. reverse() 反转

      l.reverse() == l = l[::-1] //reverse() 会将反转的结果保存
      
      

   8. join(seq) 将数组拼接成字符串

      l.join('$') == '$'.join(l)
      
      

   9. concat(value,....) 连接数组

      l2 = [11, 22, 33, 44, 55, 66]
      l.concal(l2) == l.extend(l2)
      
      

   10. sort() 排序

       l.sort() == l.sort() //两者完全相同，会将排序后的结果保存
       
       

   11. forEach() 将数组的每个元素传递给回调函数

       l.forEach(function(obj){console.log(obj)}) 
       会将l里的每一个元素提取出来放到函数中
       l.forEach(function(obj,index){console.log(obj,index)}) 
       如果传入两个参数的话，第二个值为元素对应索引
       
       

       forEach(function(currentValue, index, arr), thisValue)
       
       

       参数	描述
       function(currentValue, index, arr)	必需。 数组中每个元素需要调用的函数。 函数参数:参数描述currentValue必需。当前元素index可选。当前元素的索引值。arr可选。当前元素所属的数组对象。
       thisValue	可选。传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值

   12. splice() 删除元素，并向数组添加新元素

       l.splice(1,2,888,[123,131],999) 
       //第一个参数为起始索引，第二个为要删除的个数，后面的参数为插入到改位置的元素
       
       

       splice(index,howmany,item1,.....,itemX)
       
       

       参数	描述
       index	必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
       howmany	必需。规定应该删除多少元素。必须是数字，但可以是 "0"。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
       item1, ..., itemX	可选。要添加到数组的新元素

   13. map() 返回一个数组元素调用函数处理后的值的新数组

       map(function(currentValue,index,arr), thisValue)
       currentValue	必须。当前元素的值
       index					可选。当期元素的索引值
       arr						可选。当期元素属于的数组对象
       
       

       参数	描述
       function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数 函数参数: 参数描述currentValue必须。当前元素的值index可选。当期元素的索引值arr可选。当期元素属于的数组对象
       thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined"

6. 运算符

   1. 算数运算符

      + *- * / % ++ --
      var x=10;
      x++; // 此时打印结果为10，会先将x赋值给x，+1的值没有被赋给x
      x; // 此时这两行的效果与 python 中的 x+=1 相同
      ++x; == x+=1
      
      

   2. 比较运算符

      > >= < <= != == === !==
      // 需要注意的是 == 和 != 会将比较的双方转化成相同的数据类型再比较
      === !== // 这两者何python中的 == != 效果相同
      
      

   3. 逻辑运算符

      js中		==		python中
      &&						and
      ||						or
      !							not
      
      

   4. 赋值运算符

      = += -= *= /= 
      与python中的效果相同
      
      

04.流程控制

1. if-else

   var x=10;
   if (x>5){
     console.log('yes')
   }else{
     console.log('no')
   }
   // js中没有elif ，else if 来达到elif相同的效果
   var a = 10;
   if (a > 5){
     console.log("a > 5");
   }else if (a < 5) {
     console.log("a < 5");
   }else {
     console.log("a = 5");
   }
   
   

2. switch

   var day = new Date().getDay();
   switch (day){
       case 0;
       console.log('Sunday')
       break;
       case 1;
       console.log('Monday')
       break;
   }
   // case 后面如果没有加break 程序会将符合条件的case后面的所有case默认成立执行下去
   
   

3. for

   for (var i=0;i<10;i++) {
     console.log(i);
   }
   // 小括号内放第一个元素为定义变量，第二个为终止条件，第三个为变化条件
   // 大括号内放python中for循环缩进内的代码块
   
   

4. while

   var i = 0;
   while (i < 10) {
     console.log(i);
     i++;
   }
   
   

5. 三元运算

   var a = 1;
   var b = 2;
   var c = a > b ? a : b
   // 这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;
   
   // 三元运算可以嵌套使用；
   var a=10,b=20;
   var x=a>b ?a:(b=="20")?a:b;
   // x = 10
   
   // python中的三元表达式
   a = 10
   b = 20
   a if a>b else b
   
   

04.函数

1. 无参函数

   function f1(){
     console.log("Hello Word");
   }
   
   

2. 带参函数

   function f2(a,b){
     console.log(arguments);
     console.log(arguments.length);
     console.log(a,b);
   }
   
   

3. 带返回值的函数

   function f3(a,b){
     retun a+b ;
   }
   
   

4. 匿名函数

   var sum = function(a,b){
     return a+b;
   }
   sum(1,2)
   
   

5. 立即执行函数

   (function(a,b){return a+b})(1,2)
   
   

6. ES6中支持使用箭头=>来定义匿名函数

   var f = v => v;
   // 等同于
   var f = function(v){
     return v;
   }
   var f = () => 15;
   // 等同于
   var f = function(){
     return 15;
   }
   var f = (a,b) => a+b;
   // 等同于
   var f = function(a,b){
     return a+b;
   }
   // js 中的return只能返回一个值，如果需要返回多个值要手动将其包成一个数组或对象
   
   

7. 函数中的arguments参数

   function add(a,b){
     console.log(a+b);
     console.log(arguments);
   }
   arguments 相当于将传如的参数包成一个数组接收
   
   

8. 局部变量和全局变量

   1. 局部变量

      在js函数内部声明的变量（使用var）是局部变量，只能在函数内部访问到（改变量的作用域是函数内部）。只要函数运行完毕就会将其删除

   2. 全局变量

      在函数外部声明的变量。页面上所有的脚本和函数都能访问它。

   3. 变量生存周期

      javascript变量的生存周期从被声明开始

      局部变量在函数运行结束后被删除

      全局变量在页面关闭后被删除+

   4. 闭包函数

      var city = "beijing";
      function f(){
        var city = "shanghai";
        function inner(){
          console.log(city);
        }
        return inner;
      }
      var ret = f();
      ret();
      // 结果为 shanghai
      
      

05.词法分析

06.内置对象和方法

1. JavaScript中一切皆对象，字符串、数字、数组、日期等。对象就是拥有属性和方法的数据
   

2. 自定义对象

   JavaScript中的对象（Object）本质上是键值对的集合（Hash结构）。只能使用字符串为键。

   var a = {"name":"jason","age":18};
   console.log(a.name);
   console.log(a.age);
   // for 循环对象中的值
   for (var i in a){
     console.log(i,a[i])
   }
   // 创建一个对象
   var person = new Object();
   person.name = 'jason'; // 为对象添加属性
   person.age = 18;
   
   

3. 创建Date对象

   // 方法1；不指定参数
   var d1 = new Date();
   console.log(d1.toLocaleString());
   // 2019/11/17 下午12:56:25
   
   //方法2：参数为日期字符串
   var d2 = new Date("2004/3/20 11:12");
   console.log(d2.toLocaleString());
   // 2004/3/20 上午11:12:00
   var d3 = new Date("04/03/20 11:12");
   console.log(d3.toLocaleString());
   // 2004/3/20 上午11:12:00
   
   //方法3：参数为毫秒数
   var d3 = new Date(5000);
   console.log(d3.toLocaleString());
   // 1970/1/1 上午8:00:05
   console.log(d3.toUTCString());
   // Thu, 01 Jan 1970 00:00:05 GMT
   
   //方法4：参数为年月日小时分钟秒毫秒
   var d4 = new Date(2004,2,20,11,12,0,300);
   console.log(d4.toLocaleString());  //毫秒并不直接显示
   // 2004/3/20 上午11:12:00
   
   

   // Date 对象的方法
   var d = new Date(); 
   //getDate()                 获取日
   //getDay ()                 获取星期
   //getMonth ()               获取月（0-11）
   //getFullYear ()            获取完整年份
   //getYear ()                获取年
   //getHours ()               获取小时
   //getMinutes ()             获取分钟
   //getSeconds ()             获取秒
   //getMilliseconds ()        获取毫秒
   //getTime ()                返回累计毫秒数(从1970/1/1午夜)
   
   

4. Json 对象

   var str1 = '{"name":"jason","age":18}'
   var obj = {"name":"jason","age":18}
   // json 将字符串转换成对象
   var obj = JSON.parse(str1);
   // json 将对象转化成JSON字符串
   var obj = JSON.stringify(obj);
   
   

5. RegExp 对象

   //定义正则表达式的两种方式
   var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
   var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
   
   // 正则校验数据
   reg1.test('jason666')
   reg2.test('jason666')
   
   /*第一个注意事项，正则表达式中不能有空格*/ 
   
   // 全局匹配
   var s1 = 'egondsb dsb dsb';
   s1.match(/s/g) // 统计字符串中出现的个数
   var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
   reg2.test('egondsb');
   reg2.test('egondsb');
   reg2.lastIndex;
   /*第二个注意事项，全局匹配时有一个lastIndex属性*/
   // lastIndex 是当前光标所在位置，匹配成功后，光标会停在结束的位置，再次匹配时会继续从该位置开始匹配
   
   // 校验时不传参数
   var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
   reg2.test(); // 不传参默认传undefined
   reg2.test(undefined); 
   
   var reg3 = /undefined/;
   reg3.test();