js核心第二周

61 阅读11分钟

数据类型的转换:

    强制转换:
        
        1、转字符串:
           (1) x.tostring();//x不能是undefined和null2string(x);//此方法可以将任何类型转换为字符串类型,完全相当于隐式转换。(个人觉得还不如“+”运算)。
        
        2、转数字:
            (1)parseInt/Float(str);//字符串转数字
            原理:从左向右依次读取每个字符,碰到非字数字字符就会停止,如果第一个就不是数字字符,则为NaN,Float只认识第一个小数点
            (2Number(x);//此方法是万能的,任何数据类型都能转换为数字,完全相当于隐式转换。
        3、转布尔:
            Boolean(x);//任何数据类型都能转换为布尔,完全相当于隐式转换。
            
            
    隐式转换:
        隐式转换一般出现在运算符之中
        

运算符和表达式:

    1、算术运算:+ - * 、%
           特殊:(1)%:取余,俗称模,用于判断奇偶性
                 (2)隐式转换:默认转换数字,在运算
                 (3)+运算,碰上一个字符串就变为拼接
                 (4)- * / %,字符串也可以转为数字,前提是由纯数字组成。
   2、比较运算符: > < >= <= == != === !==
           结果都为布尔值
        隐式转换:默认转为数字,在比较大小
            特殊:(1)如果参与运算的左右两边都是字符串,则安慰pk没得字符的石榴进制Unicode好(十进制ascii码)
        ASCII码的获取:
        str.charCodeAt(0);
        数字:48-57
        大写字母:65-90
        小写字母:97-122
        汉字:199684e00)-40869(9fa5)
                   (2)NaN参与任何比较运算结果都为false,解决方法:!isNan(x);
  3、逻辑运算:
          &&:全部为true,才为true,一个flase,则为flase
          ||:全部为flase才为flase,一个为true则为true
          !:颠倒布尔值
       特殊:
           短路逻辑:如果前一个条件已经能够得出最终结论了,则不看后续
               &&短路:如果前一个条件满足,则后一个操作执行,如果前一个条件不满足,则后一个操作不执行
               目的:简化(简单的分支)if分支
               简化:条件&&(操作);
               
               ||短路:如果前一个为true,后一个不看---数显浏览器兼容性,二选一操作
               
  4、位运算:
          左移:m<<n,读作m向左移了n位,翻译m*2的n次方
          右移:m>>n,读作m向右移了n位,翻译m/2的n次方
          缺点:底数只能是2
          
  5、赋值运算:+= -= *= /= %=
              一个操作完成两件事,先计算再赋值回去
              i++;//递增,每次固定只会+1
              i+=1;//累加,每次+几由程序员决定
        笔试题:++i和i++的区别?
                    单独使用是两者没有区别。如果参与表达式,变量中的值都会+1;++i,返回的是加了之后的新值;i++返回的是加了之前的旧值。
                    
  6、三目运算:简化if...else    if....else if...else
          语法:
              条件?操作:默认操作;
              条件1?操作1?条件2?操作2:默认操作
          特殊:默认操作不能省略,只能简化简单的分支
                   
                   
                   

自定义Function函数:

 函数:也称之为方法,是需要提前预定义好的,以后可以反复使用的代码段
 
 1、创建函数的方式:
         (1)声明方式:function 函数名(形参列表){
                              函数体;
                              return返回值;
                         }
      声明方式:不是所有的都有声明方式,但有声明方式的一定要优先使用声明方式;只有变量、常量、函数具有声明方式
          (2)直接量方式:var 函数名=function(形参列表){
          函数体;
          return返回值;
      }
      return的本意,退出函数的意思,只不过如果return后面跟着一个数据,会顺便将其返回到全局作用域之中,但是只负责返回不负责保存
      调用函数:var result=函数名(实参列表)
      

作用域:

    1、全局作用域:成员:全局变量和全局函数,在任何位置都可以访问、使用。
    2、函数/局部作用域:成员:局部变量和局部函数,只能在函数调用时内部可用。
    带来了变量的使用规则:优先使用局部的,局部没有找到找全局
    特殊:
    (1)不要对着为声明的变量直接赋值,会造成全局污染
    (2)局部的东西只能在函数调用时局部使用
    (3)会默认生成return4return一般只出现在函数的Uzi后,而且只会出现一次
    

声明提前:

    在程序执行之前,会将var声明的变量和function声明的函数,集中提前到作用域顶部,但是赋值留在原地,变量比函数轻
    

按值传递:

    如果传递的是原始类型的值
                修改一个变量,另一个变量是不会受到影响的,其实就是复制了一个(副本)给对方
   如果传递的是引用类型的对象:Array\Function
                修改一个变量,另一个变量是会受到影响的,因为两者使用的是同一个地址值--浅拷贝
                

预定义全局函数:前辈们提前创建好的,我们可以直接使用的,在哪里都可以使用

    1、编码和解码:
            问题:URL中不允许出现多字节字符,如果出现会乱码
                    utf-8编码格式下,一个汉字占三个字节
            解决:发送前前端将用户输入的多字节字符编码为单字节字符(符号、字母),发送后,后端将单字节字符解码为多字节原文
            编码:var code=encodeURLCoponent("原文");
            解码:var 原文=decodeURLCoponent(code);
            
    2、isFinite(num);判断num是不是无穷大。true -> 有效数字,flase - > 无穷大
    哪些会为flase:NaN,分母为0,Infinity
    

分支结构:根据条件,选择一部分代码执行

    switch分支 if分支
    语法:
            switch(变量/表达式){
                    case1:
                    操作1;
                    break;
                    case2:
                    操作2;
                    break;
                    default:
                    默认操作
                 }
    特殊:(1case的比较不带隐式转换
         (2)问题:默认只要有一个case满足后,会将后面所有的操作全部做完
         解决:break;
  面试题:ifswitch的区别?
          (1switch..case...,缺点:必须要知道最后的结果是什么可以使用,在case中不能做范围判断只能在等值判断
                      优点:执行效率相对较高
           (2if:缺点:执行相对较低
                   优点:可以随意的做范围判断
         建议:代码优化时,要尽量的将所有的if...else...换成switch...case...
         

循环结构:

    1var 变量=几;while(循环条件){循环变量;变量的变化}
    2var 变量=几;
    do{
        循环体;
        变量的变化
    }while(循环条件)
 面试题:while和都...while的区别?
     只看第一次,如果条件都满足,则没有区别
     如果条件不满足,则while一次都不会执行,do...while至少会执行一次
    3for(var 变量=几; 循环条件; 变量的变化){
                循环体;
         }
         
    4、退出循环:
            break--退出整个循环
            continue--退出本次循环
   
   5、死循环:
       while1){}
       for(;;){}
       

函数的基础:

    1、概念:什么是数组:一个内存中保存多个数据的一个集合结构
            何时:只要存储的多个相关的数据,都要用数组集中保存
            为什么:一个好的数据结构,可以极大的提升程序员的开发效率
    
    2、创建:
            直接量:var arr=[值1,....];
            构造函数:var arr=newn Array(值,....)
            
   3、访问:数组名[i]-当前元素
       添加/修改:数组名[i]=新值
       特殊:读取元素,下标越界 - 返回undefined
       添加元素,下标越界 - 下标不再连续,导致变成一个稀疏数组
   4、数组的三大不限制:不限制长度、不限制类型、不限制下标越界
   5、数组的唯一的属性:长度:arr.length
   6、遍历数组:
           for(var i=0;i<arr.lenfth;i++){
                     arr[i];//当前元素
                 }
   7、如何释放引用类型:看清楚这个引用类型有几个变量引用着,都要全部释放后才能真正的释放干净
   建议:我们的代码尽量都要封装在一个函数之中,函数之中的内存会自动释放
   索引数组 - 下标都是由数字组成的数组
   
   8、关联(hash)数组 - 下标都是可以自定义的数组
           为什么:索引数组的下标,无具体的意义,不便于理解和查找
           如何使用:
                  1、创建:
                      1、先创建一个空数组:var arr=[];
                      2、为空数组添加自定义下标以及内容:arr["自定义"]="新值";
                  2、访问:arr["自定义下标"]3、强调:hash数组的length永远失效了,永远为0!
                  遍历数组不能再使用for循环,必须使用for in循环 - 纯自动化循环,专门为遍历数组准备的
                  for(var i in arr){
                          i;//自动得到下标
                          数组名[i];//得到当前次元素
                          
                  4、hash数组的原理:
                              hash算法:将字符串,计算出一个尽量不重复的数字(地址值)
                                  字符串的内容相同,则计算出来的数字也是相同的
                              添加元素:将自定义下标交给了hash算法,得到一个数字(地址值)
                              获取元素:将制定的自定义下标交给hash算法,得到一个和当初添加上完全相同的数字(地址值),通过地址就可以找到你当初保存的数字键
                 
                 5、js里万物皆对象(出来null和undefined),(一切对象的底层都是hash数组)
                      

数组的API:

数组其实就属于11个引用类型对象之一,对象就会有属性和方法,数组有很多的API(数组的专属方法)

        1、数组转为字符串:
                var str=arr.join("自定义连接符");
                有两个固定套路:
                        1、笔试题:将数组里面的内容拼接为一句话、单词,无缝拼接
                        arr.join("");
                        2、将数组里面的数据拼接为DOM页面元素
                        var arr=["数据",....];
                        var str="<p>"+arr.join("</p><p>"+"</p>");
                        bd.innerHTML=str
                        
      2、拼接数组:
              var newArr=arr.concat(新值1,...);
              特殊:1、不修改原数组,只会返回一个拼接后的新数组
                   2、支持传入一个数组进行拼接,将数组打乱放入
                   
     3、截取子数组:
     //根据你传入的开始下标一直截取到结束下标
     var subArr=arr.slice(starti,endi+1);
     特殊:1、不修改原数组,只会返回一个截取后的新数组
          2、含头不含尾
          3、end可以省略不写,会从头截到尾,会从starti一直截取到末尾
          4、两个实参都可以省略,从头截到尾,复制了一份(深拷贝-两者互不影响)
          5、支持负数,-1代表倒数第一个
          

可修改数组内容的API:

    4、删插替:
            删除:var dels=arr.splice(starti,n)//n代表删除的个数
            特殊:其实splice也有返回值,返回的是你删除的元素组成的一个新数组
            插入:arr.splice(starti,0,新值1,....);
            特殊:1、原starti位置的元素以及后续元素都会被向后移
                 2、不要插入一个数组
            替换:var dels=arr.splice(starti,n,新值1,....);
            特殊:插入的个数和删除的个数不必相等
            
    5、反转数组:arr.reverse();
    

数组的排序:

    1、笔试题:手写冒泡排序:
            公式:
            for(var j=1;j<arr.length;j++){
                for(var i=0;i<arr.length-j;i++){
                        if(arr[i]>arr[i+1]){
                        var m=arr[i];
                        arr[i]=arr[i+1];
                        arr[i+1]=m;
                     }
                 }
             }
             
   2、正式开发中:数组提供的排序API:
           arr.sort();
           问题:默认会将元素转换为字符串,按位pk每个字符的Unicode(ASCII),如果希望按数字排序?
           解决:
           arr.sort(function(a,b){
               return a-b;
           })
           问题2:希望是降序排列
           arr.sort(function(a,b){
               return b-a;
           })
                    

栈和队列:

    栈:其实就是数组,只不过要求是一段封闭,只能从另一端进出的数组
    如何使用:开头进:arr.unshift(新值1,...);
            缺陷:导致其余元素的下标发生变化
            开头出:var first=arr,shift();//一次只能删除一个,可以接住你删除的元素
            缺陷:导致其余元素的下标发生变化
            
            结尾进:arr,push(新值1,....);
            结尾出:var last=arr.pop();//一次只能删除一个,可以接住你删除的元素
            
            
   队列:其实就是数组,只不过要求是一端进,另一端出
       开头进:arr,ubshift(新值1,...);
       结尾出:var last=arr.pop();
       
       结尾进:arr.pish(新值1,...);
       开头出:var first=arr.shift();
       

二维数组:

    数组的的元素,又引用着另一个数组
    何时:在数组内,希望再次细分每个分类
    创建:
        var arr=[
            [,,],
            [,,],
        ];
     访问:arr[行下标][列下标];
     特殊:列下标越界等到undefined,行下标越界会报错,因为只有数组才可以用下标。行下标已经得到Undefined,没有资格在使用下标
  
  遍历二维数组:必然需要两层循环,外层循环控制行,内层循环控制列
  公式:
      for(var r=0;r<arr'length;r++){
          for(var c=0;c<arr[r].length;c++){
              操作;
          }
      }
 

string的概念:

什么是字符串:多个字符组成的只读字符数组

  和数组有相同的点:1、字符串中个数(长度):str.length
                  2、获取字符串中的某个字符:str[i];
                  3、遍历字符串
                  4、所有数组不修改原数组的API,字符串都可以使用(concat\slice)
                  
 和数组也有很多不同的地方:
             所有的数组直接修改原数组的API,字符串都不可以使用,比如排序只有数组可以以使用
             

引用/对象类型:11个

    String Number Boolean - >为什么这个即是原始类型又是引用类型?
    原因是他们三个具有包装类型
    Array Function Date Math RegExp Error Object 
    Global(全局对象) - 》 特殊:在浏览器中没有globalwindow给代替了,只不过window可以省略不写,只有在js中global才被替换为了window
    
    面试题:什么是包装类型?
            包装类型:专门将原始类型的值封装为一个引用类型的对象
            为什么:原始类型的值原本是没有任何属性和方法的,意味着原始类型本身就是不支持.做操作的,但是前辈们发现字符串经常被程序员所使用/操作,为了方便,为这个原始类型提供了拔桩类型,从值 - >对象(提供了很多属性和方法)
    何时使用:只要你试图用原始类型的变量去调用属性或方法时,自动包装
    何时释放:方法调用完毕后,包装类型就hiUI自动释放,又变回一个原始类型的值
    

StringAPI:

只有字符串可以使用的方法,无需创建直接使用

转义字符:

        作用:1、将字符串和程序冲突的字符转为原文
                    “\”
             2、包含特殊功能的字符转为原文
                    “\n” ->js字符串换行
                    “\t” ->js字符串中的制表符,相当于tab键,大空格
            3、输出Unicode编码的字符
                    \uXXXX: -》第一个汉字:4e00     ascII:19968
                    最后一个汉字:9fa5     ascII:40869
                

大小写转换:将字符串中的每个英文字符统一的转为大写或小写

  何时:只要程序不区分大小写,就要先统一的转为大写或小写。比如验证码
  如何:
      大写:var upper=str.toUpperCase();
      小写:var ;ower=str.toLowerCase();
 获取字符串中指定位置的字符:
             str.charAt(i);
             
 获取字符串中指定位置的字符的ASCII码:
         var ascii=str.charCodeAt(i);
       通过ascii转换回原文:
           var 原文=String.fromCharCode(ascii);
           
 检索字符串:检查索引:获取关键字的下标
     var i=str/arr.indexOf("关键字",starti);
         starti可以省略,如果省略了,从下标0开始向右查找
         返回值:找到了,返回的是第一个字符的下标
                 没有找到,返回-1,不关心下标为多少,值关心下标为不为-1
         作用:判断有没有
         强调:数组也可以使用
         笔试题:此方法默认只能找到第一个关键字的下标,找到所有关键字的下标,如何完成?
         var str="ojojiupihphpih";
         var index=-1;
         while((index=str,indexOf("o",index+1))!=){
                 
         }
截取字符串:
     var newStr=str/arr.alice(starti,endi+1);//用法和数组一样
     str.substring(starti,endi+1);//用法和slice一致,不支持负数,只能字符串使用
     str.substr(stsrti,n);//n代表截取的个数,不需要考虑含头不含尾,支持负数
     
拼接字符串:
        var newStr=str,concat(新字符串,...);
替换字符串:
        var newStr=str.replace("关键字"/正则表达式,“”“新内容”);
        
切割/分割字符串:
        作用:str <=> arr
        var arr=str.split("自定义切割符");
        特殊:1、切割后,切割符就不存在了,转为一个数组
             2、切割符“”,且散每一个字符
             
             

扩展:

   1、js创建空标签:
       var elem=docment.createElement("标签名");
    
   2、为其设置必要的属性和事件
       elem.属性名="属性值";
       elem.on事件名=function(){操作}
       
   3、上树
       父元素.appendChild(elem);