JS持续探索中。。。

       这周每天的难度不亚于第一周,果然只有对比才有伤害,每一次抠脑壳的同时也是自我激励,过程很难,但坚持下来一定很酷!!!回顾ing...

1、数据类型转换:
    1、强制类型转换:
        1、转字符串:2种
            1、xx.toString();//undefined和null不能使用,
            2、String(xx);// 不如+""

        2、转数字:
            1、*parseInt(str/num) - 专门用于字符串转为整数的
               执行原理:从左向右依次读取每个字符,碰到非数字字符就停止,不认识小数点,一来就碰到了不认识的,则为NaN

            2、*parseFloat(str) - 专门用于字符串转为浮点数的
               执行原理:几乎和parseInt一致,但是认识第一个小数点

            3、Number(xx);// 不如*1 /1 -0

        3、转布尔:
            Boolean(xx);//万能的,任何人都可以转为一个布尔值,简化版写法:!!xx - 简化版也不会用
            *哪些会为false?6个:0,"",undefined,null,NaN,false,其余的都为true

    2、隐式转换:多半都在运算符之中

2、***运算符和表达式
    1、*算术运算:+ - * / %
       隐式转换:默认,转为数字,在运算
           特殊:1、+运算,只要碰上一个字符串,则变为拼接
             2、- * / %,纯数字组成的字符串,也可以转为数字,但是非纯数字的字符串转为NaN
                NaN参与任何算术运算结果仍为NaN    

    2、*比较运算:> < >= <= == != === !==
       结果:布尔值
       隐式转换:默认,左右两边都会悄悄的转为数字,再比较
           特殊:
            1、如果左右【两边】参与比较的都是字符串,则是按位PK每个字符的十六进制的unicode号(十进制ascii码)
                    0-9<A-Z<a-z<汉字

            2、NaN参与任何比较运算结果都为false,带了一个问题,没有办法使用普通的比较运算判断一个xx是不是NaN
                解决:!isNaN(xx); true->有效数字  false->NaN

            3、undefined==null,
               问题:==区分不开undefined和null,怎么才能区分开?
               undefined===null

    3、*逻辑运算符:
        隐式转换:悄悄的都变为布尔,然后综合比较得出结论
        &&:全部的条件都为true,结果才为true
            只要有一个为false,结果就为false

        ||:全部的条件都为false,结果才为false
            只要有一个为true,结果就为true

         !:颠倒布尔值

        特殊:用法
           ***短路逻辑:只要前一个条件已经可以得出最后结论,则后续条件不再执行!
            &&短路:如果前一个条件为true,后一个操作才执行
                如果前一个条件为false,后一个操作不执行
                简化了【简单的】分支:if(条件){操作}
                语法:条件&&(操作);
                举例:曾经:if(total>=500){total*=0.8};
                      现在:total>=500&&(total*=0.8);
                特殊:1、【简单的】-> 操作只能有一句话

            ||短路:如果前一个条件为true,不需要执行后一个
                如果前一个条件为false,需要执行后一个

   4、*赋值运算:一句话执行了两个操作,先运算,再赋值
        += -= *= /= %= ++ --
        何时使用:只要取出变量中的值,在做计算,之后还要在保存回去时,就要试用赋值运算
        i=i+1;
        推荐:
          i+=1 或者 i++;

        递增:i++; 每次只能+1
        累加:i+=n; 每次想加几,随便你

       ++ 分为 ++i 和 i++
            1、单独使用时,没有参与别的表达式,放前放后都一样
            2、如果参与了别的表达式:
                变量中的值其实都会+1
                ++i,返回的是递增后的【新值】
                i++,返回的是递增前的【旧值】

   5、***三目运算:简化分支:if(){}else{}    if(){}else if()else{}
        语法:
          1、条件?操作1:默认操作;

          2、条件1?操作1:条件2?操作2:默认操作;

1、*****自定义Function:
   什么是函数:需要先定义好,可以反复使用的一个代码段
   何时使用:1、不希望打开页面立刻执行 2、以后可以反复使用 3、希望绑定在页面元素之上
   如何使用:
    1、创建并且调用:2种
        1、创建
               *1、【声明方式】创建函数
               function 函数名(形参,...){
                函数体;
                return 返回值/结果;
               }

            2、【直接量方式】创建函数 - 无用
               var 函数名=function(形参,...){
                函数体;
                return 返回值/结果;
               }

        2、调用
            var 接住返回的结果=函数名(实参,...);

            //其实return的本意退出函数,但是如果return后跟着一个数据,
            //顺便将数据返回到函数作用域的外部,但return只负责返回,不负责保存
            //就算省略return,默认也会return undefined;
            //具体需不要得到函数的结果,看你自己

    2、***作用域:2种
        1、全局作用域:全局变量 和 全局函数,在页面的任何一个位置都可以使用

        2、函数/局部作用域:局部变量 和 局部函数,在【当前函数调用时内部可用】

            *变量的使用规则:优先使用自己的,自己没有找全局,全局没有报错
            特殊:缺点:1、千万不要再函数中对着未声明的变量直接赋值 - 全局污染
                    2、局部可以用全局的,但是全局不能用局部的 - 解决:看上面return
        

    3、***声明提前:
        在程序正式执行之前
        将var声明的变量(轻)和function声明的函数(重)
        都会悄悄集中定义在当前作用域的顶部
        但是赋值留在原理

    4、***按值传递:两个变量之间进行赋值:
        如果传递的是原始类型的值:
            修改一个变量,另一个变量是不会受到影响的

        如果传递的是引用类型的对象:
            修改一个变量,另一个变量是会受到影响的,因为操作的其实是同一个【地址值】


2、预定义的全局函数:前辈们提前创建好的方法,程序员可以直接使用,在任何位置都可以使用
   1、编码和解码:
          编码:var code=encodeURIComponent("魔兽世界");
            解码:var 原文=decodeURIComponent(code);

   2、isFinite(num):判断num是不是无穷大,true->有效数字  false->无穷大
    哪些会为false:NaN,Infinity,分母为0

   3、厉害的:parseInt/Float、isNaN、eval
    eval(str):计算字符串,简单来说就是脱字符串的衣服

3、*分支结构:if分支 switch分支
   语法:
    switch(变量/表达式){
        case 值1:
        操作1;
        case 值2:
        操作2;
        default:
        默认操作;
    }
    
    特殊:1、case的比较不带隐式转换
          2、问题:默认只要一个case满足后,会将后面所有的操作全部做完
         解决:break;
         建议:每一个case的操作后都跟上一个break
            有的地方也可以不加break:
                1、最后的一个操作default可以省略break;
                2、如果中间多个条件,做的操作是一样的,也不需要
          3、default可以省略,如果条件都不满足的情况,什么事都不会做

    面试题:if  vs  switch
      1、switch...case... 缺点:必须要知道准备的结果才能使用,不能做范围判断
                  好处:执行效率相对较高

      2、if...else 缺点:执行效率相对较低
               优点:可以是范围判断

      建议:代码优化,尽量将所有的 if...else 换成 switch...case、三目

扩展:JS动画:几乎和JS无关,与CSS有关(transition过渡)
    JS操作样式,瞬间生效的,只需要加上过渡就会慢慢生效 - animate.css动画库(库:很多动画)
 

1、***循环结构:
   1、while(循环条件){循环体}
   2、do{循环体}while(循环条件)
    面试题:while 和 do...while的区别
               只看第一次:如果第一次大家都满足,两者没有区别
                如果第一次不满足,while一次都不执行,dowhile至少会执行一次
   3、***for(循环变量;循环条件;变量的变化){
        循环体;
     }

   4、流程控制语句:退出循环:break;//退出整个循环
                 continue;//退出本次循环,根据需求进行分析使用哪一个

2、*****数组的基础:
    1、基础概念:
        什么是数组:在一个内存(变量)中保存了多个数据的一个集合结构
        何时:只要存储的多个相关的数据,都要用数组集中保存;

    2、创建:2种
       1、*直接量:var arr=[值1,...];
       2、构造函数:var arr=new Array(值1,...);
                第二种方式:var arr=new Array(num);//创建一个长度num的空数组

    3、访问:数组名[下标]; -- 当前元素
       添加/修改:数组名[下标]=新值;
       特殊:读取元素,下标越界 -- 返回undefined
         添加元素,下标越界 -- 下标不在连续,导致变成一个稀疏数组

    4、数组的三大不限制
        1、不限制长度
        2、不限制类型
        3、不限制下标越界

    5、数组唯一的属性:数组名.length:获取当此数组的长度
           三个固定套路:
            1、末尾添加:arr[arr.length]=新值;
            2、获取倒数第n个:arr[arr.length-n];
            3、删除倒数n个:arr.length-=n

    6、遍历数组:对数组中每个元素执行相同 或 相似的操作
        for(var i=0;i<arr.length;i++){
            arr[i];//当前次元素
        }

    7、*如何释放一个引用类型:看清楚引用类型的数据有几个变量引用着,都要释放后才会真正释放
        建议:代码都要封装在一个函数中,函数中的变量会自动释放

        索引数组:下标都是由数字组成的数组
    8、*关联(hash)数组:
        什么是:下标是可以自定义的
        为什么:索引数组的下标无具体的意义,不便于查找
        如何使用:
            1、创建:2步
                1、创建空数组:var arr=[];
                2、为数组添加下标并且添加元素:arr["自定义下标"]=新值;

            2、访问元素:arr["自定义下标"]

            3、强调:hash数组length永远失效,永远为0!
               遍历hash数组,不能使用for循环,必须使用for in循环 - 专门用于遍历数组的
                for(var i in arr){
                    i;//
                }
               for in虽然不能定义从哪里开始,到哪里结束,专门用于遍历数组的,既可以遍历索引数组也可以遍历hash数组
               个人推荐:索引数组依然使用for,hash数组在用for in

            4、***hash数组的原理:
                hash算法:将字符串,计算出一个尽量不重复的数字(地址值)
                      字符串内容相同,则计算出来的数字也一定是相同的
                添加元素:将自定义下标交给hash算法,得到一个数字(地址值),直接将你要保存的数据放到这个地址之中
                获取元素:将指定的自定义下标交给hash算法,得到一个和当初保存时一样的数字(地址值),通过地址就找到当前保存的数据

            5、js里面的一切东西都是对象,除了undefined和null,一切对象的底层都是hash数组

3、*****数组的API:前辈们提前定义好的,我们程序员可以直接使用的,这些函数只有数组可用
    1、*arr to string:
        var str=arr.join("自定义连接符");
        
        固定套路:2个
            1、笔试题:将数组里面的内容拼接为一句话/单词;
                无缝拼接:var str=arr.join("");

            2、将数组拼接为DOM页面元素
                //数据
                var arr=["北京","南京","西京","东京","重庆"]
                //转为字符串,并且拼接好标签
                var str="<开始>"+arr.join("</结束><开始>")+"</结束>";
                //渲染到DOM树上
                elem.innerHTML=str;

    2、*数组拼接:添加元素的新方式
        把你传入的实参全部拼接到arr的末尾,
        var newArr=arr.concat(新值1,...)
        特殊:1、不修改原数组,只会返回一个新数组
              2、concat支持传入数组参数,悄悄的将你传入的数组打散为单个元素后在拼接

    3、*截取子数组:
        根据你传入的开始下标截取到结尾下标
        var subArr=arr.slice(starti,endi+1);
        特殊:1、不修改原数组,只会返回一个新子数组
              2、含头不含尾
              3、endi可以省略不写,会从starti位置一直截取到末尾
              4、其实两个实参都可以省略 - 从头截到尾,深拷贝,和以前的按值传递(浅拷贝)不同,一个修改不会影响到另一个
              5、支持负数参数,-1代表倒数第一个

以上的API都不是会修改原数组
------------------------------------------------------------------------------------------------------------------------------
以下的API都是会修改原数组

    4、*删除、插入、替换:arr.length-=n
        删除: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(); - 以后不会使用

扩展:以后面试中回答一个问题按4个方面回答(wwwh:what,when,why,how)

1、*****Array API:
    1、*****排序:2种方式
        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 middle=arr[i];
                        arr[i]=arr[i+1];
                        arr[i+1]=middle;
                    }
                }
            }

        2、正式开发中:排序的API
            arr.sort();
            问题1:默认会将元素们转为字符串,按位PK ascii码,如果希望按数字排序?
            解决:
                arr.sort(function(a,b){//回调函数
//                    console.log(a);//拿到后一个
//                    console.log(b);//拿到前一个
                    return a-b;//如果return 返回是一个正数,说明后一个数>前一个数
                           //如果return 返回是一个负数,说明后一个数<前一个数
                           //如果return 返回是一个0,说明后一个数==前一个数
                           //而我们的sort方法正好可以根据你返回的正数/负数/0来进行排序
                });

            问题2:只能升序排列,如何降序            
                arr.sort(function(a,b){
                    return b-a;
                })

        强调:排序其实非常重要,切记,只要以后页面中有排序功能,他的底层一定是一个数组,因为只有数组具有排序的方法

    2、*栈和队列:添加元素和删除元素的新方法
            开头进:arr.unshift(新值,...);//添加元素的新方式,向前添加,缺陷:导致其余元素的下标发生改变
            开头出:var first=arr.shift();//删除元素的新方式,向前删除,缺陷:导致其余元素的下标发生改变

            结尾进:arr.push(新值,...);//添加元素的新方式,向后添加,完全等效于arr[arr.length]或者arr.concat
            结尾出:var last=arr.pop();//删除元素的新方式,向后删除

        队列:其实就是数组,只不过是一端进,另一端出
        何时:根据先来后到的顺序,现实中多得很
            开头进:arr.unshift(新值,...);
            结尾出:var last=arr.pop();

               *结尾进:arr.push(新值,...);
            开头出:var first=arr.shift();

        ES3的数组API就算学完了,后面ES5还提供了6个API等待我们学习
    
2、二维数组:数组的元素,又引用着另一个数组
    何时:在一个数组内,希望再次细分每个分类
    创建:
    var arr=[
        ["张三丰",128,5500],
        ["张翠山",38,4500],
        ["张无忌",18,12000]
    ];

    访问:arr[行下标][列下表];
    特殊:列下标越界,返回undefined
          行下标越界,报错,因为undefined不能使用[]
    
    遍历二维数组:必然两层循环:外层循环控制行,内层循环控制列
            for(var r=0;r<arr.length;r++){
                for(var c=0;c<arr[r].length;c++){
                    console.log(arr[r][c])
                }
            }

3、*****String的概念:
    什么是字符串:多个字符组成的【只读】字符【数组】(只读:明天我们要学习的所有的字符串的API都不会修改原字符串,只会返回的新的结果)


1、*****String API:只有字符串可以使用的函数,无需创建,程序员直接使用
    1、转义字符:\
         作用:1、将字符串中和程序冲突的字符转为原文
                "\""    '\''
               2、包含特殊功能的符号
                换行:\n
                制表符:\t  ->  大空格tab
              *3、输出unicode编码的字符
                \uXXXX:第一个汉字:\u4e00        ascii:19968
                        最后一个汉字:\u9fa5        ascii:40869

    2、*大小写转换:将字符串中的每个英文字母统一的转为大写 或 小写。
          何时:只要程序不区分大小写,就要【先统一】转为大写 或 小写,再比较(验证码)
          如何:
            大写:var upper=str.toUpperCase();
            小写:var lower=str.toLowerCase();

    3、获取字符串中指定位置的字符:var newStr=str.charAt(i);    ===    str[i]

    4、获取字符串中指定位置的字符的ASCII码:
        var ascii=str.charCodeAt(i);
       根据ascii码转回原文:
        var 原文=String.fromCharCode(ascii);

    5、***检索字符串:检查索引:获取关键字的下标
        var i=str/arr.indexOf("关键字",starti);
        从starti位置开始,查找右侧【第一个关键字】的位置
        starti可以省略,默认从0位置开始查找
        返回值:找到,返回的是第一个关键字的第一个字符的下标
            *没找到,返回-1,不关心下标为多少,只关心为不为-1
        作用:判断有没有
        强调:数组也能用此方法,后期才添加上的
        鄙视题:默认只能获取到第一个关键字的下标,如何才能获取所有关键字的下标?
            var str="no zuo no die no can no bibi";
            var index=-1;
            while((index=str.indexOf("no",index+1))!=-1){
                console.log(index);
            }

    6、*截取字符串:
        var subStr=*str/arr.slice(starti,endi+1);//和数组用法一样,支持负数参数,-n代表倒数第n个
               str.substring(starti,endi+1);//用法几乎和slice相同,不支持负数参数
               *str.substr(starti,n);//支持负数参数,n代表截取的个数,不必考虑含头不含尾

    7、拼接字符串:var newStr=str.concat(str1,...);//还不如+运算

    8、*替换字符串:本身这个方法非常强大,但是由于我们现在暂时还不会正则表达式,只能替换固定的关键字(下周一)
        var newStr=str.replace("关键字"/正则,"新内容");

    9、*****切割/分割字符串:
        作用:将字符串转为数组
        var arr=str.split("自定义切割符");
        特殊:1、切割后,切割符就不存在
              2、切割符"",切散每一个字符

扩展:1、JS创建空元素:
        var elem=document.createElement("标签名");
    
      2、为此空标签添加必要的属性或事件
        elem.innerHTML="内容"
        elem.属性名="属性值"
        elem.on事件名=function(){}

      3、渲染到DOM树上:
        父元素.appendChild(新元素)
        

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值