js第二周

115 阅读8分钟

数据类型转换

强制转换类型
    转字符串:
        1.var str=xx.toString();//null和undefined不能使用.调用函数,使用就会报错;
        2.var str=xx.String();//万能的,完全相当于隐式转换,不需要手动使用,还不如+""
 ***转数字
     1.var num=parseInt();
     从num的左侧开始读取代码,遇到非数字则停止,一来就不认识,就为NAN
     2.var num=parseFloat;
     他比parseInt多认识一个小数点,只认识第一个小数点,第二个就不认识了;
     3.Number();//万能的,一样,还不如隐式转换
 转布尔值
      Boolean(xx);完全等效于隐式转换;
      什么情况为false:0 NAN null undefined flass ""  只有6个,其他都为true
      我们不会主动去转换布尔值,但是在某些地方会自动带有
              if( 条件中)
              循环条件中
              只要是条件,就会转为一个布尔值

运算符合表达式

   1*算数运算:+ - * /%;
       隐式转换,默认转为一个数字,在运算
           特殊:+运算,只要遇到字符串,都为转为字符串,+运算变为拼接;
           - / * %都有隐式转换,但是必须是纯数字的字符串,如果有一个非数字的字符,计算则为NAN, NAN参与任何计算都为NAN;
   2.*比较运算:< <= > >= == === != !== 结果都是布尔值
       1.默认,两边都会转为数字来比较;
       特殊:如果两边都是字符串,则是按位PK每个字符的十六进制unicode号
           数字 ,大写 ,小写 ,汉字 这些unicode号得记住
       2.NAN参与任何计算结果都为false,不大于,不小于,不等于任何值, isNAN();true是数字,false为NAN;
       3.undefined==null,结果为ture,区分不开
       解决为 === 全等,或者!==,不带隐式转换的等式比较;
       if(x===null) 

逻辑运算

1.&&,全部条件必须都为true,则结果为ture,有一个为false,那就为false;
2.||,全部条件为false,结果为false,有一个为true,则结果就为ture
3.!:颠倒布尔值;  !true,结果为flase
 ***短路逻辑:&&如果前一个为ture,则执行操作
     公式:条件&&操作;简化if的
     ||:如果前一个条件为ture,则后一个条件不在执行,如果前一个条件为fasle,则后一个条件才会执行
     固定套路:实现两个值二选一,使用--备选值,做老ie兼容;
         var 变量=值1||值2

位运算

   左移,m<<n,读作m左移了n位,相当于m*2的n次方:底数只能是2
   左移,m>>n,读作m右移了n位,相当于m/2的n次方:底数只能是2

***赋值运算 :+= -= *= /= %=

   递增和递减
       i++ => i+=1 => i=i+1;
       i-- => i-=1 => i=i-1;
       前++和后++单独运算的时候,都一样,但是参与了表达式过后,变量中都会加1
           前加加,会赋值过后的值运算
           后加加,是赋值之前的值运算

三目运算:简化if(){}else{} if(){} else if(){}else

  语法:
      1.条件?操作:默认操作
      2.条件1操作1:条件2:操作2:默认操作;
        三目只能操作一句话,默认操作不能省略

*****自定义函数:方法,一段提前被定义好的,可以反复使用的代码段

 1.如何使用
    1:创建/定义/声明函数&返回结果:两种
        1.*声明方式:用function关键字进行声明,并不是人人都有声明方式,只有个别人才有,而且声明方式一定是最简单的,
            只有三个具有声明方式:常量,变量,函数,其余的最简单的方式也是直接量
         function 函数名(){
         函数体
         return 返回值
         }
     2.直接量方式:
     var 函数名=function(形参...){
         函数体
         return 返回值:
         }
            函数名就是一个变量名;
  2.***作用域:21.全局作用域;全局创建的变量和函数,在任何位置都能访问;
      2.函数/局部作用域:局部变量和局部函数,只能在当前函数调用时内部可用
      有了作用域才有变量的使用规则:
             优先使用自己的,没有找全局,全局没有,报错
      ***千万不要对为声明的变量直接赋值,会导致全局污染
      ***那些属于局部变量:
          1.直接在函数作用域中创建的变量
          2.形参
      问题:全局无法使用局部的,需要用return来返回局部里面的数据
      调用方法时,自动会返回一个值,只是是undefined
   3.***声明提前
       在程序执行之前
       悄悄将var 声明的变量和function声明的函数
       集中提前到当前作用域的顶部
       但是赋值会留在原地,
       变量比函数更轻
       
       只会在笔试题中遇到
           1自己写代码的时候尽量要创建后使用
           2创建名字,尽量不要出现重复的
    4.***按值传递:两个变量之间进行赋值
        传递原始类型的值,两个变量之间赋值,做操作,互不影响
        传递引用类型的值:两个变量之间赋值,做操作,会相互影响

预定义的全局函数:前辈们提前定义好,我们恶意直接在任何位置使用的函数

   1.编码和解码
       var code=encodeURIComponent("str")
       var 原文=decodeURIComponent(code);
    2.isFinite:判断是不是在有效范围之内
        三种情况会出现false :分母为0,NAN,infinity
    3.重要的:parseInt/Float().eval()isNAN()

##.***分支结构根据条件的不同,执行不同的操作

   if(){}else {}结构
   switch结构
    switch{
    case 1:操作1;
    case2 :操作2;
    defaut:默认操作;
    
    }
    只要满足一条路,会把后面的代码全部执行玩,使用break:一般放在操作的后面,最后不用家break;如果多个操作是一样的,操作可以省略不写;
     不带有隐式转换
     default可以省略不写
     优点,效率相对较高,但不不能做范围判断

#### 1.while循环
        语法:var 循环变量=几;
                while(循环条件)={
                        循环体;
                        变量变化;
                }
复制代码

2.do...while循环

         语法:var 循环变量=几;
                 do{
                     循环体;
                     变量变化;
                 }while(循环条件)
          whiledo...while的区别
              ①:只看第一次,如果大家都满足条件,没有区别
              ②:如果第一次都不满足条件,while一次都不执行,而do...while至少会执行一次
复制代码

3.for循环

       for(var 循环变量=几;循环条件;变量变化){
               循环体;
       }
复制代码

4.循环终止语句

       break-退出整个循环
       continue-退出本次循环
复制代码

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

1.创建

            ①:直接量方式:var arr=[值1,...]
            ②:构造函数:var arr=newArray(值1,..)
复制代码

2.访问

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

3.三大不限制

            1:不限制长度
            2:不限制元素类型
            3:不限制下标越界
复制代码

4.length的三个固定套路

            1:获取倒数第n个元素:arr[arr.length-n];
            2:向末尾添加元素:arr[arr.length]=新值;
            3:缩容:arr.length-=n;
复制代码

5.遍历数组

            for(var i0;i<arr.length;i++){
                    arr[i];
            }
复制代码

新知识点

关联(hash)数组:下标是可以自定义的数组

创建
     一  创建
         1.创建一个空数组: var arr=[];
         2.添加自定义下标并且赋值:arr["自定义"]=值;
      二  访问
          arr["自定义下标"];
复制代码
遍历
        for in循环
            语法:for (var i in数组名){
                    数组名[i];
            }
复制代码
hash数组的原理
        hash算法:将字符串交给hash算法,会得到一个尽量不重复的数字,但是字符串内容相同的,那么得到的数字一定也是相同的
        添加元素:将自定义的下标交给hash算法,得到一个数字(地址值),把要保存的数据放到那个地址之中
        获取元素:将指定的下标交给hash算法,得到一个和添加时完全相同的数字(地址值),得到这个地址值之中保存这的数据了
复制代码

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

1.数组转为字符串

    语法
        var str=arr.join("自定义连接符");
    特殊:
        1.如果没有传入实参,则和string/tostring完全一样,默认由,分割
        2.固定套路:两个
                ①:笔试题:提供一个数组,无缝拼接数组里面的内容变为一个字符串
                    var arr=["h","e","l","l","o"," ","w","o","r","l","d"];
		var str=arr.join("")
		console.log(str);//"hello world";
                ②:开发:将数组中的数据拼接为页面上的元素,初级版数据渲染
                    var cities=["北京","南京","西京","东京","重庆"];
		var str="<option>"+cities.join("</option><option>")+"</option>";
                 sel.innerHTML=str;//innerHTML可以识别标签
复制代码

二级联动

    1、必须使用二维数组,而且二维数组的数据顺序一定要和一级的对应上
2select专属事件:select.onchange:状态改变事件:选中项发生改变才会触发
3select具有一个属性:this.selectedIndex;获取选中项的下标 - 只有select不需要自定义下标
4、其实绑定事件的部分就是函数名,也可以拿来调用
复制代码

拼接数组:添加元素到末尾的新方式

        var newarr=arr.concat(值1,arr1...);
        特殊:
            1.此方法不会修改原数组,只会返回一个新数组
            2.此方法传参支持数组参数,并且会悄悄地打散这个数组,单独传入
复制代码

截取子数组:从starti位置截取到endi+1位置的元素,组成一个新数组

        var subarr=arr.slice(starti,endi+1)
        特殊:
            1.此方法不修改原数组,只会返回一个新数组
            2.含头不含尾
            3.第二实参可以省略:从starti截取到末尾
                第一实参省略:从头截取到末尾
            4.支持副参数
复制代码

删除,插入,替换

        删除:var dels=arr.splice(starti,n);  从starti卡死删除n个
                特殊:此方法也有返回值,所有删除的元素组成一个新数组
        插入:arr.splice(starti,0,值1,...);
                特殊:原来starti位置的元素以及后续元素都会被向后移动
        替换:var dels=arr.aplice(starti,n,值1,..);
                特殊:插入的个数和删除的个数可以随意
复制代码

翻转数组:arr.aeverse();

Array API

排序:两种方式

        1.冒泡排序:把数组中的每一个数字取出来,前一个和后一个进行比较,如果前一个>后一个,两者就要交换位置
            公式
              var arr=[13,25,4,3675,12,23,3,215,2,1,42,4,65,473,2431,123];
		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+1];
					arr[i+1]=m;
				}
			}
		}	
		console.log(arr);
           2.正式开发:数组API提供的排序
               arr.sort();
               特殊:
                   1.默认按照字符串按位pk每个字符的unicode号
                   2.按照数字排序:arr.sort(function(a,b){
                                       return a-b;
                                 }
                     return a-b: 如果a>b,返回的是一个正数
                                 如果a<b,返回的是一个负数
                                 如果a=b,返回的是一个0.
                                 sort根据你反复的结果,来判断两者要不要交换位置
           3.降序排列:arr.sort(function(a,b){
                             return b-a;
                     }
复制代码

栈和队列:添加元素和删除元素的新方式

栈:一端封闭,只能从另一端进出额操作

            1.开头进:arr.unshift(值1,...);
                开头出:var first=arr.shift();//一次只能删掉一个,并且会返回删除的元素
              缺点"每一次进出都会修改其他人的下标
            2.结尾进:arr.push(值1,...);
                结尾出:var last=arr.pop();//一次只能删掉一个,并且会返回删除的元素
                优点:不会影响到其他元素的下标
复制代码

队列:只能从一端进入.另一端出

            1.开头进:arr.unshift(值1,...);
                结尾出:var last=arr.pop():  一次只能删除一个,并且会返回删除的元素
            2.结尾进:arr.push(值1,...);
                开头出:var first=arr.shift();  一次只能删除一个,并且会返回删除的元素
复制代码

拓展

1.定时器

        开启定时器:
            timer=setInterval(function(){
		操作
	},间隔毫秒数)

        关闭定时器:
	clearInterval(timer);
复制代码

2.鼠标移入:onmouseover

3.鼠标移出:onmouseout

二维数组:数组中的值再次引用了一个数组

       1.创建
           var arr=[
               [数组1],
               [数组2],
               [数组3],
           ];
       2.访问:arr[r][c];
           特殊:面试中:
                   列下标越界:返回undefined
                   行下标越界:报错:undefined不能使用[]
       3.遍历二维数组:须要两个循环嵌套:外层循环控制行,内层循环控制列
               for(var r=0;r<arr.length;r++){
		for(var c=0;c<arr[r].length;c++){
                        console.log(arr[r][c]);
		}
                }
复制代码

string的概念

        string:字符串:多个字符组成的只读字符数组
复制代码

为什么字符串也可以叫数组

        1.和数组的共同点
            ①:支持下标-获取某个字符
            ②:支持length-字符的长度
            ③:遍历
            ④:数组不修改原数组的API,字符串也可以使用concat,slice
        2.不同点:数组修改原数组的API,字符串都不可以使用,但字符串有很多属于自己的API
复制代码

只读:字符串中的所有的API都不会修改原字符串,只会返回新字符串

引用类型的对象:11个

            String(字符串),Number(数字),Boolean(布尔)--具有包装类型:将原始类型的值变为一个引用类型的对象
            Array(数组),Function(函数),Math(数学),Date(日期),RegExp(正则),Error(错误),Object(面向对象)
            Global(全局对象)
复制代码

String API

1.转字符串:\

            作用:
             1.字符串中如果出现了和字符串冲突的符号,可以用\将其转义为原文
             2.特殊功能:
                 换行:\n
                 制表符:\t
             3.可以书写unicode号,表示一个字
                     \uxxxx
复制代码

2.转换大小写:统一的转换为大写或小写,在比较,忽略大小写

            大写:var newstr=str.toUpperCase();
            小写:var newStr=str.toLowerCase();
复制代码

3.获取字符串中指定位置的字符的ASCII码

            var ascii=str.charCodeAt(i);
        转为原文:
            var 原文=String.fromCharCode(ascii);
复制代码

检索字符串:检查索引下标:从starti位置开始找右侧的第一个关键字的下标

         作用:判断有没有
             var i=str/arr.indexOf("关键字",starti);
         特殊:
             1.starti可以省略,如果省略则从0开始
             2.返回值:找到了,返回第一个字符的下标
                     没找到,返回-1
             3.数组也可以使用此方法
             4.笔试题:找到所有关键字的位置
                 var str="no zuo no die no can no bibi";
                 var i=-1;
		while((i=str.indexOf("no",i+1))!=-1){
		console.log("找到了:"+i);
                  }
复制代码

拼接字符串:var newStr=str.oncat(str1.str2...)

截取字符串

        1.var subStr=str/arr.slice(starti,endi+1);
        2.var subStr=str.substring(starti,endi+1);  不支持负数参数
        3.var subSTr=str.subStr(starti,n);  截取的个数,不考虑含头不含尾
复制代码

替换字符串

        var newStr=str.replace("关键字"/正则表达式."新内容");
复制代码

切割/分割字符串

            作用:str<=>arr
            var arr=str.split("自定义切割福");
            特殊:
                1.切割符可以自定义,切割后返回一个数组,数组中不包含切割符
                2.如果传入的切割符是一个"",每一个字符都会被切开
复制代码

拓展:创建元素并渲染页面

        1.创建空标签
                var elem=document.creaElement("标签名");
        2.设置必要的属性或事件
                elem.属性名="属性值";
                elem.on事件名=function(){
                        函数体;
                }
        3.创建好的元素渲染到DOM树上
                父元素.appendChild(elem);