Javascript 自定义函数、循环结构、API

458 阅读8分钟

1、比较/关系运算符:> < >= <== == != === !==

  • 返回的结果:布尔值:true、false
  • 隐式转换:默认一切都转为数字,在比较大小
  •  特殊1、如果参与比较的都是字符串,则按位PK每个字符的ASCII码
     ASCII码:0-9<A-Z<a-z<汉字
      汉字第一个字:一(ASCII码:19968|Unicode号:4e00)
      汉字最后一个字:龥(ASCII码:40869|Unicode号:9fa5)
    

2、全等===:数值相同并且数据类型也要相同,不在带有隐式转换 用处: 区分undefined和null

  //String()的执行原理:任何东西都可以转为字符串

 function String(x){
  if(x===null){
 console.log("null");
 }else if(x===undefined){
  console.log("undefined")
 else{
 console.log(x.toString());}
 }

!==:不带隐式转换的不等比较

3、逻辑运算符:

  • &&:与 全部条件都为true,结果才为true
  • ||:或 全部条件都为false,结果才为false
  • !: 非 颠倒布尔值 -特殊:短路逻辑:只要前一个条件已经可以得出最终结论,则后续条件不会再执行

&&:如果前一个条件满足,这后一个操作才执行,如果前一个条件不满足,则后一个条件不执行 实现了一个简单的分支:目的:简化if(){}操作只能用一句话

  • 语法:条件&&(操作);

  • 举例:

     if(total>=500){total*=0.8}
     total>=500&&(total*=0.8)
    

||:两个值中二选一 -老IE(6/7/8)兼容

4、赋值运算:+= -= /= %= ++ -- 一句话完成两个操作,先运算在赋值回去 比如:i++ 》 i+= 》 i=i+1; 递增:i++ 每次只能加1 累加:i+=n 每次加n

5、三目运算 简化if...else if...else if...else

  • 语法:条件1?操作1:条件?操作2:条件3?操作3:默认操作;
  • 特殊:1.只能完成简单的分支--操作只能有一句话 2.默认操作不能省略 --会报错

扩展:计算机计算时会带有摄入误差:解决: var str=num.toFixed(保留小数位数); 按小数位四舍五入,但是返回的是一个字符串

1、自定义函数 :

  • 1.如何使用:2步
  •  1.创建/定义/声明&返回结果:21.声明方式:用function 函数名(形参,...){
                               函数体
                               return 返回值;}
       2.直接量方式:
          var 函数名=function(形参,...){
                      函数体
                      return 返回值;}
                      函数名其实也是个变量名
    
  • 2.调用函数&接住结果
       var result=函数名(实参,...);
       解释:return 本意是退出函数,但是如果后面跟着一个数据,则可以将数据返回到全局作用域中,但是仅仅负责返回,不负责保存,所以需要创建一个变量接住函数调用的结果
       return只能写一次,何时使用:1.全局想要使用局部的  
                                 2.调用完函数还希望拿到函数的结果在后续做操作 
                                 3.如果没有return,其实也有默认返回值unde
    
    1. 作用域:2个

      1.全局作用域:全局变量和全局函数,在任何位置都可以访问/使用 2.函数/局部作用域:局部变量和局部函数, 只能在当前【函数调用时内部可用】 有了作用域才有变量的使用规则:优先使用自己的,没有就找全局的 局部变量:1.直接在函数作用域中创建的变量 2.形参

  • 3.声明提前 在程序执行之前,悄悄的将var 声明的变量和function声明的函数,提前到当前作用域的顶部,但是赋值留在原地,变量比函数更轻。程序员看不到,但是会悄悄执行。 只会在笔试题遇到,自己平时不会遇到
  • 4.按值传递:两个变量之间进行赋值 1.如果传递的是原始类型的值,两个变量之间赋值,做操作,互不影响。 ——相当于复制了一个副本给对方 2.如果传递的是引用类型的对象:Array、function 两个变量之间的赋值,做操作,是会相互影响的 ——因为两个用的是同一个地址值

2、预定义的全局函数:提前定义好的,可以直接在任何位置使用的函数

3、分支结构:根据条件的不同,执行不同的操作 if...else结构 switch...case 结构 语法:

switch(变量/表达式){
       case1:
       操作 1;
       break;
       case2:
       操作 2;
       break;
       default:
       默认操作;}
    注意:1.默认只要满足一条路,会把后面所有的操作都做完,解决:break;一般放在操作的后面,最后的default不需要加break2.default可以省略不写 3.如果连续的多个操作是一样的,可以省略中间部分:例如: 
    switch(month){
    case 1:
    case 3:
    case 5:console.log("是奇数");
   }

1.循环结构:反复执行相同或相似的操作

  • 1.while循环: 语法:var 循环变量=几; while(循环条件){ 循环体; 变量变化}

  • 2.do..while循环: 语法:var 循环变量=几; do{ 循环体; 变量变化; }while(循环条件) 面试题:while和do...while的区别: 只看第一次,如果第一次大家都满足条件,两者没有区别。 如果第一次大家都满足条件,while一次都不会执行,而do...while至少会执行一次

  • 3.for循环: for(var 循环变量=几;循环条件;变量变化){ 循环体;}

  • 4.循环终止语句: break ——退出整个循环 continue ——退出本次循环

2.数组的基础:一个变量可以保存多个数据

  • 1、创建:2种

     1.直接量:var arr=[值1,...];
    2.构造函数:var arr=new Array(值1,...)
    面试中:new Array(3);设置一个长度为3的空数组
    
  • 2、访问:

    获取:arr[i]; ——特殊:下标越界:得到undefined 添加/替换:arr[i]=新值; ——特殊:下标越界:得到稀疏数组

  • 3、3大不限制: 不限制长度、类型、下标越界

  • 4、length的三个固定套路:

      获取倒数第n个元素:arr[arr.length-n];
      向末尾添加元素:arr[arr,length]=新值
      缩容:arr.length-=n;
    
  • 5、遍历数组: for(var i=0;i<arr.length;i++){ arr[i]; //当前次元素}

  • 6、特殊点:如何释放一个引用类型: 要看清楚这个引用类型对象有几个变量名引用着,每个变量都要释放才能真的释放干净

  • 7、索引数组:下标都是数字组成的数组 ——默认 关联(hash)数组:下标是可以自定义的数组 自定义下标作用:索引数组的下标无具体意义,不便于我们查找

    创建:2步

    • 1.创建一个空数组:var arr=[];

    • 2.添加自定义下标并且赋值:arr["自定义"]=值 访问:arr["自定义下标"]; 遍历:不能使用for循环,因为length失效了,关联数组永远为0,而且下标也不是个数字 解决:

      for in 循环:
      语法:for(var i in 数组名){
            数组名[i]}
      关联数组和索引数组都可用
      

    js中除了undefined和null不是一个对象,万物皆对象,而且一切对象的底层都是hash数组

3.数组的API: 函数:前辈们预定义好的,但是只有数组可以使用的方法

  • 1.数组转为字符串: var str=arr.join("自定义连接符"); 特殊: 1.如果没有传入实参,则和toString/String,完全一样,默认由,分割 2.固定套路:2个 1.笔试题:提供一个数组,无缝拼接数组里面的内容变为一个字符串

        var arr=["h","e","l","l","o"," ","w","o","r","l","d"];
     	var str=arr.join("")
     	console.log(str);//"hello world";
       
    

    2.开发中:将数组中的数据拼接为页面上的元素:

     	var cities=["北京","南京","西京","东京","重庆"];
    var str="<option>"+cities.join("</option><option>")+"</option>";
     	sel.innerHTML=str;//innerHTML可以识别标签
    
  • 2.拼接数组:添加元素到数组末尾的新方式 var newArr=arr.concat(值1,arr1...); 特殊: 1.此方法不修改原数组,只会返回一个新数组 2.此方法传参支持数组参数,并且会悄悄的打散这个数组,单独传入

  • 3.截取子数组:从starti位置截取到endi+1位置的元素,组成一个新数组 var subArr=arr.slice(starti,endi+1) 特殊: 1.此方法不修改原数组,只会返回一个新数组 2.含头不含尾 3.第二实参也可以省略:从starti截到末尾 第一实参也可以省略:从头截到尾

以上的3个API都不会修改原数组
以下的所有API都会修改原数组
  • 4.删除、插入、替换:

  •  删除:var dels=arr.splice(starti,n); //从starti开始删除n个
     特殊:此方法也有返回值,所有删除的元素组成的一个新数组
     插入:arr.splice(starti,0,值1,...); //从starti开始删除0个,插入了新元素
     特殊:原来starti位置的元素以及后续元素都会被向后移动 
     替换:var dels=arr.splice(starti,n,值1,...);
     特殊:插入的个数和删除的个数可以随意
     
    
  • 5.翻转数组:arr.reverse();

  • 6.排序:两种方式: 1.笔试题:冒泡排序:把数组的每一个数字取出来,前一个和后一个进行比较,如果前一个>后一个,两者交换位置: 公式:

    var arr=[12,45,67,88,2,3,444,666,323,436,769];
    for(var j=0;j<arr.length-1;j++){
      for(var i=0;i<arr.length-(j+1;i++){
        if(arr[i]>arr[i+1]){
              var m=arr[i];
              arr[i]=arr[i+i];
              arr[i+1]=m;}}}
              consoloe.log(arr);
    

    2.数组API提供的排序 arr.sort(); 特殊:1、按照字符串按位PK每个字符的Unicode号排序 2、按照数字排序:

           arr.sort(function(a,b)){//回调函数:不需要调用,自带循环,提供了两个实参:a是后一位数,b是前一位数
             return a-b})
        
    

    强调:js中只有数组可以排序

  • 7.栈和队列:4个API:添加元素和删除元素的新方式

  •        栈:一端封闭,只能从另一端进出的操作
            开头进:arr.unshift(值1,...);
            开头出: var first=arr.shift();// 一次只能删除一个并且会返回删除的元素
            缺点:每一次进出都会修改其他人的下标
            结尾进:arr.push(值1,...);
            结尾出:var last=arr.pop();// 一次只能删除一个并且会返回删除的元素
            优点:不会影响其他元素的下标
         队列:只能从一端进入,另一端出:
            开头进:arr.unshift(值1,...);
            结尾出:var last=arr.shift();// 一次只能删除一个并且会返回删除的元素
            结尾进:arr.push(值1,...);
            开头出:var first=arr.shift();// 一次只能删除一个并且会返回删除的元素
              
    

4.String API:

  • 1、转字符串: \

  • 2、转换大小写:统一的转为大写或者小写,在比较,忽略大小写: 大写:var newStr=str.toUpperCase(); 小写:var newStr=str.toLowerCase();

  • 3、获取字符串中指定位置的字符的ASCII码 var ascii=str.charCode(i); 通过ascii码转回原文 var 原文=String.fromCharCode(ascii);

  • 4、检索字符串:检查索引/下标:从starti位置开始找右侧的第一个关键字的下标 var i=str/arr.inddexOf("关键字",starti); 笔试题:找到所有关键字的位置

      var str="no zuo no die no can no bibi"
      var i=-1
      while((i=str.indexOf("no",i+1))!=-1{
            console.log("找到了"+i);}
    
  • 5、拼接字符串: var newStr=str.concat(str1,str2...) 还不如+运算

  • 6、截取字符串:3个

    • 1.var subStr=str/arr.slice(starti.endi+1);
      2.var subStr=str.substring(starti,endi+1);//不支持负数参数
      3.var subStr=str.substr(starti,n);
      
  • 7、替换字符串: var arr=str.replace("关键字"/正则表达式,"新内容");

  • 8、切割/分割字符串:作用:str<=>arr var arr=str.split("自定义切割符"); 特殊: 1、切割符可以自定义,切割过后返回一个数组,数组中不在包含切割符 2、如果传入的切割符是一个"",每一个字符都会被切开

扩展:创建元素并且渲染页面

  •   1、创建空标签
        var elem=document.createElement("标签名")
      2、设置必要的属性或者事件
        elems.属性名="属性值";
        elems.on事件名=function(){函数体}  ——事件都可以在创建时提前绑定上
      3、创建好的元素渲染到DOM树上
        父元素:appenChild(elem);