• JavaScript基础知识笔记


    做前端几年了,一直疏于整理归纳,所以这两天把基础看了一遍,加上使用经验,整理了基础知识中关键技术,旨在系统性的学习和备忘。如果发现错误,请留言提示,谢谢!

    重要说明:本文只列举基础知识点,中级和高级内容请参考其他两篇。

    JavaScript进阶内容1:各种对象类型判断

    会当凌绝顶:JavaScript高级内容

     

    1.在 JScript 中 null 和 undefined 的主要区别是 null 的操作象数字 0,而 undefined 的操作象特殊值NaN (不是一个数字)。对 null 值和 undefined 值作比较总是相等的。null和undefined拼接string字符时相当于'null'和'undefined'字符串拼接。
        如:
        null+2=2;
        null*4=0;    
        undefined+2=NaN;
        null==undefined //返回true。
        null+'qqqq'=nullqqqq;
        undefined+'www'=undefinedwww
        说明:null只有参与运算时可以当做0,但是null==0,返回false
        
    2.JScript 变量使用 var 声明,运算时自动转换类型,规则如下:
        数  值 + 字符串    //将数值强制转换为字符串。 
        布尔值 + 字符串    //将布尔值强制转换为字符串。 
        数  值 + 布尔值    //将布尔值强制转换为数值。 
        如:
        200+'Hello'='200Hello'
        true+'Hello'='trueHello'
        true+5=6    //true转化为1
        false*5=0    //false转化为0
        
    3.Jscript 有三种主要数据类型、两种复合数据类型和两种特殊数据类型。
        主要(基本)数据类型是: 
            字符串    //string
            数值     //number 在Jscript中整数和浮点值没有差别(JScript 内部将所有的数值表示为浮点值)。
            布尔     //boolean
        复合(引用)数据类型是: 
            对象 
            数组 
        特殊数据类型是: 
            Null     //typeof null=object,而非类型 null,这点潜在的混淆是为了向下兼容(nul表示“无值”或“无对象”)
            Undefined     // typeof Undefined=Undefined,对象属性不存在, 或者声明了变量但从未赋值。 
        说明:typeof 返回值有六种可能: "number," "string," "boolean," "object," "function," 和 "undefined."
        
    4.任何值为0、null、未定义(undefined)或空字符串(''或"")的表达式被解释为 false。其他任意值的表达式解释为 true。
        如:
        if(x=y+z)    //先把y+z赋值给x,然后判断x得知是否为0
        
    5.判断一个变量是否为undefined 的方式:
        if (typeof(x) == "undefined")
        以下两种是错误的:
        if (x == undefined) 
        if (typeof(x) == undefined)
        
    6.运算符
            instanceof 运算符:            
                返回一个 Boolean 值,指出对象是否是特定类的一个实例。
                result = object instanceof class
            in 运算符:
                测试对象中是否存在该属性。
                result = property in object
            ==,!=:
                NaN 与包括其本身在内的任何值都不相等,即NaN!=NaN,如果判断是否为NaN,请使用Number.isNaN()方法。
                nullnull 和 undefined 相等。 null==undefined
                注意:
                    基本的字符串、数值和布尔值是按值比较的。如果它们的值相同,比较结果为相等。
                    对象(包括Array、Function、String、Number、Boolean、Error、Date以及 RegExp 对象)按引用比较。即使这些类型的两个变量具有相同的值,只有在它们正好为同一对象时比较结果才为 true。
                    如:
                        var string1="Hello";
                        // 具有相同值的两个 String 对象。
                        var StringObject1 = new String(string1);
                        var StringObject2 = new String(string1);
                        StringObject1 == StringObject2 //返回false。
                        StringObject1.ValueOf() == StringObject2 //返回True (ValueOf()返回指定对象的原始值)
    
            ===、!== 恒等(严格相等)运算符:
                数值和类型都要相同
                
    7.语句控制
        第一种是选择结构。
            单一选择结构(if), 
            二路选择结构(if/else), 
            内联三元运算符 ?: 
            多路选择结构(switch)。 //使用break跳出
            
        第二种类型的程序控制结构是循环结构。
            在循环的开头测试表达式(while), 
            在循环的末尾测试表达式(do/while), 
            对对象的每个属性都进行操作(for/in), 
            由计数器控制的循环(for)。 
        如:
        for...in 循环
            (1)遍历对象属性:
            var myObject = new Object();
            myObject.name = "James";
            myObject.age = "22";
            myObject.phone = "555 1234";// 枚举(循环)对象的所有属性
            for (prop in myObject) {
                //遍历myObject所有属性(注意一定要用prop遍历)
            }
            
            (2)遍历键值对象:
            function ForInDemo(){   
            // 创建某些变量。   
            var a, key, s = "";   // 初始化对象。
            a = {"a" : "Athens" , "b" : "Belgrade", "c" : "Cairo"}   // 迭代属性。
            for (key in a)   {      
                s += a[key] + ";";   
            }   
            return(s);
           }
           说明:js其他循环还有:forwhiledo..while,使用break 和 continue 跳出和继续下一个 循环
           
    8.expando属性:对象可扩展属性
        expando不是一个关键字,而是expandable object 的缩写,即可扩展对象,js中所有对象都是扩展的,有下面两种情况:
        第一:如果属性的名称符合js变量命名规范,可以直接用'.':
            var myObj = new Object();// 添加两个 expando 属性,'name' 和 'age'
            myObj.name = "Fred";
            myObj.age = 42;
        第二:如果属性名称不是一个简单的标识符,或者在写脚本的时候不知道,可以在【方括号】中使用任意表达式来索引属性。在 Jscript 中所有 expando 属性的名称在被添加到对象之前被转换为字符串
            var myObj = new Object();
            myObj["not a valid identifier"] = "This is the property value";
            myObj[100] = "100";
        说明:数组也是对象,只不过它有一个其他对象不具有的length属性。数组可以通过expando属性实现多维数组(虽然js中数组不支持多维),如下:
            var myArray = new Array(3);
            myArray[0] = new Array(3);
            myArray[1] = new Array(3);
            myArray[2] = new Array(3);
            myArray[0][0]='00'
            myArray[0][1]='01'
            myArray[2][2]='22'
        另外,数组增加expando属性,length属性不会改变,如:        
            var myArray = new Array(3);
            myArray[0] = "Hello";
            myArray[1] = 42;
            myArray[2] = new Date(2000, 1, 1);
            //myArray.length=3
            
            // 添加某些 expando 属性
            myArray.expando = "JScript!";
            myArray["another Expando"] = "Windows";
            //myArray.length依然为3
            
    9.prototype 属性
        返回某个对象原型的引用,该属性可以为对象原型添加功能,添加成功后,改对象的所有实例都拥有该属性,包括那些已经生成的实例。
        如:
            //person 含有两个参数的构造器
            function person(name, sex){
                this.name = name;
                this.name = sex;
            }
            var nick=new person('nick','boy')
            var iwen=new person('iwen','gril')
            iwen.hairstyle='长头发';//只有iwen才有 hairstyle 属性
            person.prototype.height='170';//nick 和 iwen 实例对象都会增加 height 属性
        说明:prototype属性可以用于js继承的实现。
        
    10.内部对象
        Jscript 提供了 11 个内部(或“内置”)对象。它们是Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、Error、String 对象。
        Array 对象
            var theMonths = new Array(12);
            theMonths[0] = "Jan";
            theMonths[1] = "Feb";
            theMonths[2] = "Mar";
            theMonths[3] = "Apr";
            theMonths[4] = "May";
            theMonths[5] = "Jun";
            theMonths[6] = "Jul";
            theMonths[7] = "Aug";
            theMonths[8] = "Sep";
            theMonths[9] = "Oct";
            theMonths[10] = "Nov";
            theMonths[11] = "Dec";
        等价于
            var theMonths = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
        说明:
            如果theMonths.length=2,则theMonths数组的后10个将被自动删掉,只保留前2个值。
           
    11.变量范围
            一个局部变量的名称可以与某个全局变量的名称相同,但这是完全不同和独立的两个变量。因此,更改一个变量的值不会影响另一个变量的值。在声明局部变量的函数内,只有该局部变量有意义。
           如:
                var alec="全局变量";
                function changeAlec(){
                    var alec="局部变量";
                    alec+=",哈哈";
                    alert("函数内:"+alec)//局部变量,哈哈
                }
                changeAlec();
                alec+=",吼吼";
                alert("函数外:"+alec);//全局变量,吼吼
           
           
    12.按值和按引用的比较
        (1)Numbers 和 Boolean 类型的值 (truefalse) 是按值来复制、传递和比较的。
        (2)对象、数组以及函数是按引用来复制、传递和比较的。
        (3)字符串是按引用复制和传递的,但是是按值来比较的。请注意,假如有两个 String 对象(用 new String("something") 创建的),按引用比较它们,但是,如果其中一个或者两者都是字符串值的话,按值比较它们。
    
        说明:
            (1)要想检查两个数组是否包含了相同的元素,不能直接比较数组对象,需要比较 toString() 方法的结果。
            (2)鉴于 ASCII和 ANSI 字符集的构造方法,按序列顺序大写字母位于小写字母的前面(即 小写字母>大写字母)。例如 "a">"A"、"c">"A"。如果想执行不区分大小写的匹配,可以对两个字符串调用 toUpperCase() 或 toLowerCase()。
        如:
                var arr1 = new Array('a', 'b', 'c');
                var arr2 = new Array('a', 'b', 'c');
                if (arr1 == arr2) {
                    alert('数组相同');//不会执行
                }
                if (arr1.toString() == arr2.toString()) {
                    alert('数组toString()相同')//执行(arr1.toString())
                }
    
                var str1 = "aaa";
                var str2 = "aaa";
                if (str1 == str2) {
                    alert('字符相同')//执行
                }
    
                var strObj1 =new String("aaa");
                var strObj2 = new String("aaa");
                if (strObj1 == strObj2) {
                    alert('字符对象相同')//不会执行
                }
    13.传递参数给函数
        按值传递一个参数给函数就是制作该参数的一个独立复本,即一个只存在于该函数内的复本。
        按引用传递对象和数组时,如果直接在函数中用新值覆盖原先的值,在函数外并不反映新值。只有在对象的属性或者数组的元素改变时,在函数外才可以看出。
        如:
            // 本代码段破坏(覆盖)其参数,所以调用代码中反映不出变化。
            function Clobber(param) {           
                param = new Object();// 破坏参数;在调用代码中看不到。 
                param.message = "This will not work";
            }
            // 本段代码改变参数的属性,在调用代码中可看到属性改变。
            function Update(param) {
                param.message = "I was changed"; // 改变对象的属性;可从调用代码中看到改变。
            }
            // 创建一个对象,并赋给一个属性。
            var obj = new Object();
            obj.message = "This is the original";
            
            Clobber(obj);// 调用 Clobber,并输出 obj.message。注意,它没有发生变化。
            window.alert(obj.message); // 仍然显示 "This is the original"。
            
            Update(obj);// 调用 Update,并输出 obj.message。注意,它已经被改变了。
            window.alert(obj.message); // 显示 "I was changed"。
    14.在浏览器中显示信息
        document 的write()和writeln()方法是向body中添加内容的方法,添加的位置是当前执行document.write的位置(如果在<head>中则添加在body的开始位置)。
        writeln() 方法与 write() 方法几乎一样,差别仅在于是前者将在所提供的任何字符串后添加一个换行符。在 HTML 中,这通常只会在后面产生一个空格;不过如果使用了 <PRE> 和 <XMP> 标识,这个换行符会被解释,且在浏览器中显示。
    
    15.call和apply
        call:调用一个对象的一个方法,以另一个对象替换当前对象。
        apply:应用某一对象的一个方法,用另一个对象替换当前对象。
        如:    
            A.call(B,参数) 意思是 用A代替B,即调用 A(参数) 方法。参数可以是任意值
            apply方法和call用法一样,只是apply参数必须是数组或者arguments 对象。
        这两个对象可用于js的继承实现,如:
             function Animal(name){    
                 this.name = name;    
                 this.showName = function(){    
                     alert(this.name);    
                 }    
             }    
               
             function Cat(name){  
                 Animal.call(this, name); //用Animal对象替换this对象,即cat就继承了Animal的所有属性和方法
             }    
               
             var cat = new Cat("Black Cat");   
             cat.showName();
             
    16.比较重要的方法
        (1)compile()
            把正则表达式编译为内部格式,从而执行得更快。用于在脚本执行过程中编译正则表达式,也可用于改变和重新编译正则表达式。
            如:
                function CompileDemo(){   
                    var rs;   
                    var s = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp"
                   var r = new RegExp("[A-Z]", "g");
                   var a1 = s.match(r);
                   r.compile("[a-z]", "g");//改变并重新编译正则表达式
                   var a2 = s.match(r);
                   return(a1 + "
    " + a2;
                }
        (2)encodeURI()、decodeURI()
            将文本字符串编码为一个有效的统一资源标识符 (URI)。
            decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
            说明:
                使用 decodeURI 方法代替已经过时的 unescape 方法;
                encodeURI 方法不会对下列字符进行编码:":"、"/"、";" 和 "?"。请使用 encodeURIComponent 方法对这些字符进行编码。
            如:
                var test1="http://www.w3school.com.cn/My first/"
                document.write(encodeURI(test1)+ "<br />")
                document.write((2)decodeURI(test1))
                结果:
                http://www.w3school.com.cn/My%20first/
                http://www.w3school.com.cn/My first/
    3)encodeURIComponent()、decodeURIComponent()
            将文本字符串编码为一个统一资源标识符 (URI) 的一个有效组件。
            decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
            如:
                var test1="http://www.w3school.com.cn/My first/"
                document.write(encodeURIComponent(test1)+ "<br />")
                document.write(decodeURIComponent(test1))
                结果:
                http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F
                http://www.w3school.com.cn/My first/
    4)escape()、unescape()
            escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。
            可以使用 unescape() 对 escape() 编码的字符串进行解码.
            说明:
                escape 方法不能够用来对统一资源标示码 (URI) 进行编码。对其编码应使用 encodeURI 和encodeURIComponent 方法。
            如:
                escape("Visit W3School!")//Visit%20W3School%21
                escape("?!=()#%&")//%3F%21%3D%28%29%23%25%26
        (5)eval()
            检查 JScript 代码并执行
                var total = eval("6 * 9 % 7"); // 将变量 total 赋值为 5。
                total = eval("6 * (9 % 7)") // 将变量 total 赋值为 12。
                eval("var mydate = new Date();");//创建了一个包含 Date 对象的新变量 mydate.
        (6)exec()、match()
            exec() 是RegExp类的方法,参数是要匹配的字符串,只返回第一个匹配项。
            match() 是String类的方法,参数是正则表达式模式或正则表达式对象,返回匹配结果的数组。
            如:
                var str= "cat,hat" ;
                var p=/at/; //没有g属性
                alert(p.exec(str))//at
                alert(str.match(p))//"at"
                //以上这种场合下exec等价于match。但是如果正则表达式是全局匹配(g属性)的,那么以上代码结果不一样了:
                var str= "cat,hat" ;
                var p=/at/g; //注意g属性
                alert(p.exec(str))//at
                alert(str.match(p))//at,at
            说明:
                exec()永远只返回第一个匹配,相当于match()中正则表达式不带/g的情况。
                但是,exec如果找到了匹配,而且包含分组的话(正则表达式中含有括号),返回的数组将包含多个元素,第一个元素是找到的匹配,之后的元素依次为该匹配中的第一、第二...个分组(反向引用)如下的代码将弹出"cat2,at": 
                var str= "cat2,hat8" ;
                var p=/c(at)d/;
                alert(p.exec(str));//等于 alert(str.match(p));
        (7)Date对象
            1)获取时间
                function GetNowDate() {
                    var d, s = "今天日期是: ",x = new Array("星期日", "星期一", "星期二","星期三","星期四", "星期五","星期六");
    
                    d = new Date();
                    s += d.getFullYear() + "-"; //getYear()获取当前时间和1900的差值,该方法已过期
                    s += (d.getMonth() + 1) + "-";
                    s += d.getDate() + " ";
    
                    s += d.getHours() + ":";
                    s += d.getMinutes() + ":";
                    s += d.getSeconds() + ":";
                    s += d.getMilliseconds()+" ";
    
                    var day = d.getDay(); //获取星期,返回0 到 6 之间的整数,代表周日到周六
                    s += x[day]+" ";
    
                    var time = d.getTime(); //从1970 年 1 月 1 日开始的毫秒数
                    s += "
    
    距离1970年1月1日已过【" + time + "】毫秒";
    
                    var tz = d.getTimezoneOffset(); //当前计算机上的时间和全球标准时间 (UTC)之间差别的总分钟数(计算方法:UTC-当前机器时间,即当前机器慢为正值,否则为负值)
                    s += "
    
    您的电脑和全球标准时间(UTC)相差了【" + tz + "】分钟";
                    return s;
                }
                alert(GetNowDate());
            2)设置时间
                Date对象中以set开头的方法表示设置时间,如:setFullYear()设置年份,setDate()设置日期……等,这些函数返回的是修改后的毫秒数。
                如果参数为月份的有效日期,则直接把日期改为参数日期,
                如:new Date(new Date("2013-7-12 0:0:0:0").setDate(2)).toLocaleString() //"2013/7/2 上午12:00:00"
                如果 参数 的值大于 Date 对象中所保存的月份的天数或者是负数。那么日期将被设置为由 参数 减去所保存月份中天数而得到的日期,
                如:
                new Date(new Date("2013-7-12 0:0:0:0").setDate(-2)).toLocaleString() //"2013/6/28 上午12:00:00"
                new Date(new Date("2013-7-12 0:0:0:0").setDate(32)).toLocaleString() //"2013/8/1 上午12:00:00"
                
            3)Date.parse()
                参数是一个日期字符串,返回该日期与 1970 年 1 月 1 日午夜之间所间隔的毫秒数。
                如:
                    Date.parse("2015-7-12 0:0:0")//1436630400000
                    Date.parse("November 1, 1997 10:17 AM")//878350620000
                    
        (8)indexOf()、lastIndexOf()
            返回 String 对象内第一次和最后一次出现子字符串的字符位置。
            
        (9)isFinite()
            返回一个 Boolean 值,指明所提供的数字是否是有限的。
            如果 参数 是 NaN 、负无穷或正无穷,那么 该方法将返回 false 。 如果是这三种情况,函数返回 trues 。
            说明:如果参数是字符类型(指无法强制转化为Number类型的),则返回 false .
        (10)isNaN()
            返回一个 Boolean 值,指明提供的值是否是保留值 NaN (不是数字)。 
            如果值是 NaN, 那么 isNaN 函数返回 true ,否则返回 false 。 使用这个函数的典型情况是检查 parseInt 和 parseFloat 方法的返回值。 
            还有一种办法,变量可以与它自身进行比较。 如果比较的结果不等,那么它就是 NaN 。 这是因为 NaN 是唯一与自身不等的值。 
        (11)Array 对象
            增加:
              push(element):将新元素添加到数组末尾,返回值:新数组长度。
                      eg:
                          [1,2,3].push(4) => 4
              unshift(element):将新元素添加到数组开始位置,返回值:新数组长度。
                      eg:
                          [1,2,3,4,5,6].unshift(0,-1) => 8 (新数组:[0, -1, 1, 2, 3, 4, 5, 6])
            删除:
              pop():移除数组中的最后一个元素,返回值:被移除的元素。
                      eg:
                          [1,2,3].pop() => 3
              shift():移除数组中的第一元素,返回值:被移除的元素。
                      eg:
                          [1,2,3].shift() => 1
            修改:
              splice(startIndex,deleteCount,[newElement1,newElement2...]):移除一个或多个元素,如果必要,在所移除元素的位置上插入新元素,返回值:所移除的元素
                      eg:
                          [1,2,3,4,5,6].splice(2,2) => [3, 4] (新数组:[1,2,5,6])
                          [1,2,3,4,5,6].splice(2,2,10,11,12) => [3, 4] (新数组:[1, 2, 10, 11, 12, 5, 6])
            查询:
              slice(startIndex,endIndex):返回数组的一部分,返回值:[startIndex,endIndex) 中的元素(包含开始索引的元素,不包含结束索引的元素)。
                      eg:
                          [1,2,3,4,5,6].slice(2,4) => [3, 4]
                      说明:
                          如果 startIndex 为负,将它作为 length + startIndex处理,此处 length 为数组的长度。[1,2,3,4,5,6].slice(-4,4) => [3, 4]
                          如果 endIndex 为负,就将它作为 length + endIndex 处理,此处 length 为数组的长度。[1,2,3,4,5,6].slice(2,-1) => [3, 4, 5]
                          如果省略 endIndex ,那么 slice 方法将一直复制到 arrayObj 的结尾。[1,2,3,4,5,6].slice(2) => [3, 4, 5, 6]
                          如果 endIndex 出现在 startIndex 之前,不复制任何元素到新数组中。[1,2,3,4,5,6].slice(4,2) => []
            其他操作:
              concat(arr1,arr2...):拼接(或组合)多个数组,返回值:组合后的新数组。
                      eg:
                          [1,2,3].concat([2,3,4]) => [1, 2, 3, 2, 3, 4]
              join(str):用指定的符号str把数组元素连接成一个字符串,返回值:拼接后的字符串。
                      eg:
                          [1,2,3].join('-') => 1-2-3
              reverse():反转数组元素,返回值:数组反转后的新数组。
                      eg:
                          [1,2,3].reverse() => [3,2,1]
              sort([functionName]):对数组进行排序,返回值:新排序后的数组。(参数是用来排序的函数,如果参数被省略,那么元素将按照 ASCII 字符顺序进行升序排列)
                      eg:
                          [6, 5, 4, 3, 2, 1].sort() => [1, 2, 3, 4, 5, 6]
                          [10,5,40,25,1000,1].sort() => [1, 10, 1000, 25, 40, 5] //这种情况需要用到排序函数了
                          [10,5,40,25,1000,1].sort(function(a,b){return a>b}) =>[1, 5, 10, 25, 40, 1000]
  • 相关阅读:
    【转】利用MVC模式开发Java应用程序[组图]
    [转]JAVA三大框架SSH和MVC
    二进制转十进制
    MPlayerX For Mac白屏问题
    输入法切换设置
    【学习笔记】【C语言】选择结构-switch
    【学习笔记】【C语言】选择结构-if
    【学习笔记】【C语言】流程控制
    Mac OS X中开启或关闭显示隐藏文件
    Xcode6 模拟器不显示键盘
  • 原文地址:https://www.cnblogs.com/yinluhui0229/p/jsnote-basic.html
Copyright © 2020-2023  润新知