js基礎(chǔ)語法-02(2019/5/27)

JS基礎(chǔ)語法

一、類型轉(zhuǎn)換
很多時候,我們在進(jìn)行數(shù)據(jù)運算或輸出等操作時需要將數(shù)據(jù)在不同類型之間進(jìn)行轉(zhuǎn)換,

JS 數(shù)據(jù)類型轉(zhuǎn)方法主要有三種: 利用 js 變量弱類型自動轉(zhuǎn)換、
轉(zhuǎn)換函數(shù)、強(qiáng)制類型轉(zhuǎn)換。

1.自動類型轉(zhuǎn)換

2、函數(shù)轉(zhuǎn)換

parseInt()

1、parseInt()在轉(zhuǎn)換之前,首先會分析該字符串,判斷位置為 0
處的字符,判斷它是否是個有效數(shù)字,如果不是,則直接返回
NaN,不再繼續(xù),如果是則繼續(xù),直到找到非字符

2、parseInt()方法還有基模式,可以把二進(jìn)制、八進(jìn)制、十六進(jìn)制或其他任何進(jìn)制的字符串轉(zhuǎn)換成整數(shù)?;怯?br> parseInt()方法的第二個參數(shù)指定的

3、如果十進(jìn)制數(shù)包含前導(dǎo) 0,那么最好采用基數(shù)
10,這樣才不會意外地得到八進(jìn)制的值

parseFloat()

parseFloat()方法與
parseInt()方法的處理方式相似,但是parseFloat()可以識別第一個小數(shù)點

3、顯示轉(zhuǎn)換

toString()函數(shù)將內(nèi)容轉(zhuǎn)換為字符串形式,其中 Number 提供的

toString()函數(shù)可以將數(shù)字以指定的進(jìn)制轉(zhuǎn)換為字符串,默認(rèn)為十進(jìn)制。

Number 還提供了
toFixed()函數(shù)將根據(jù)小數(shù)點后指定位數(shù)將數(shù)字轉(zhuǎn)為字符串,四舍五入

4、強(qiáng)制轉(zhuǎn)換

JS 為 Number、Boolean、String
對象提供了構(gòu)造方法,用于強(qiáng)制轉(zhuǎn)換其他類型的數(shù)據(jù)。

此時操作的是整個數(shù)據(jù),而不是部分。

<script type="text/javascript">
        // parseInt()   
        console.log(parseInt("123ab1c")); // 123
        console.log(parseInt("123.4.5ab1c")); // 123
        console.log(parseInt("0xA")); //returns 10
        console.log(parseInt("22.5")); //returns 22
        console.log(parseInt("blue111")); //returns NaN
        
        console.log(parseInt("AF", 16)); //returns 175
        console.log(parseInt("10", 2)); //returns 2
        console.log(parseInt("10", 8)); //returns 8
        console.log(parseInt("10", 10)); //returns 10
        
        console.log(parseInt("010")); //returns 8
        console.log(parseInt("010", 8)); //returns 8
        console.log(parseInt("010", 10)); //returns 10
        
        console.log("==========================");
        // parseFloat()
        console.log(parseFloat("123ab1c")); // 123
        console.log(parseFloat("123.4ab1c")); // 123
        console.log(parseFloat("0xA")); //returns 10
        console.log(parseFloat("22.5")); //returns 22
        console.log(parseFloat("blue111")); //returns NaN
        
        console.log("====================顯式轉(zhuǎn)換==========");
        var data = 10;
        console.log(data.toString())
        console.log(data.toString(2))
        data = 1.4;
        console.log(data.toFixed(0));
        data = 1.49;
        console.log(data.toFixed(1));
        data = true;
        console.log(data.toString());
        
        console.log("===================強(qiáng)制轉(zhuǎn)換==========");
        console.log(Number("1"));
        console.log(Number("1.4"));
        console.log(Number("123aabc"));
        console.log(Number("abc"));
        console.log(Number(true));
        console.log(Number(false));
        console.log(Number(19));
        console.log(Number(new Object()));
        console.log(Number(new Array()));
        
    </script>
    

二、數(shù)組

1.數(shù)組(array)是按次序排列的一組數(shù)據(jù),每個值的位置都有編號(從 0
開始),整個數(shù)組
用方括號表示。 Js 中定義數(shù)組的三種方式如下(也可先聲明再賦值) :


var arr=[值 1,值 2,值 3]; //隱式創(chuàng)建
var arr=new Array(值 1,值 2,值 3); //直接實例化
var array=new Array(size); //創(chuàng)建數(shù)組并指定長度


2.數(shù)組的特點:

1)、數(shù)組的長度是可變的

2)、數(shù)組的類型可以不一樣

3)、不存在下標(biāo)越界

3、數(shù)組的遍歷

數(shù)組的遍歷即依次訪問數(shù)組的每一個元素 ,JS 提供三種遍歷數(shù)組的方式:

1)、普通 for 循環(huán)遍歷

for(var i = 0; i < 數(shù)組名.length; i++) {

}

注:可以拿到undefinded的值,無法獲取數(shù)組中屬性對應(yīng)的值

2)、for ... in

for(var i in 數(shù)組) {

// i是下標(biāo)或?qū)傩悦?/p>

}

注:無法拿到undefinded的值,可以獲取數(shù)組中屬性對應(yīng)的值

3)、foreach

數(shù)組.foreach(function(element,index){

// element:元素;index:下標(biāo)

});

注:無法獲取屬性對應(yīng)的值與undefinded的值

* for -- 不遍歷屬性

* foreach -- 不遍歷屬性和索引中的 undefined

* for in -- 不遍歷索引中的 undefined

  console.log("=======數(shù)組的遍歷=========");
        // 1、普通 for 循環(huán)遍歷
        for (var i = 0; i < arr1.length; i++) {
            console.log(i + "----------" + arr1[i]);
        }
        console.log("===============");
        // for... in
        for (var i in arr1) {
            console.log(i + '----------' + arr1[i]);
        }
        console.log("===============");
        // foreach
        arr1.forEach(function(elem,index){
            console.log(index+ '----' + elem);
        });

4、數(shù)組提供的方法

push 添加元素到最后

unshift 添加元素到最前

pop 刪除最后一項

shift 刪除第一項

reverse 數(shù)組翻轉(zhuǎn)

join 數(shù)組轉(zhuǎn)成字符串

indexOf 數(shù)組元素索引

slice 截取(切片)數(shù)組,原數(shù)組不發(fā)生變化

splice 剪接數(shù)組,原數(shù)組變化,可以實現(xiàn)前后刪除效果

concat 數(shù)組合并

array.splice(index,howmany,item1,.....,itemX)


參數(shù) 描述


index 必需。規(guī)定從何處添加/刪除元素。
該參數(shù)是開始插入和(或)刪除的數(shù)組元素的下標(biāo),必須是數(shù)字。

howmany 必需。規(guī)定應(yīng)該刪除多少元素。必須是數(shù)字,但可以是 "0"。
如果未規(guī)定此參數(shù),則刪除從 index 開始到原數(shù)組結(jié)尾的所有元素。

item1, ..., itemX 可選。要添加到數(shù)組的新元素

Type 描述

Array 如果從 arrayObject 中刪除了元素,則返回的是含有被刪除的元素的數(shù)組。

            
console.log("========數(shù)組提供的方法=======");
        console.log(arr2);
        arr2.push("dd"); // 數(shù)組的最后添加元素
        arr2[arr2.length] = "ee";
        console.log(arr2);
        arr2.unshift("hello");
        console.log(arr2);// 數(shù)組的最前面添加元素
        
        // 分割數(shù)組
        var str = arr2.join("-");
        console.log(str);
        // 將字符串轉(zhuǎn)換成數(shù)組
        var strarr = str.split("-");
        console.log(strarr);

三、 函數(shù)
函數(shù), 即方法。
就是一段預(yù)先設(shè)置的功能代碼塊,可以反復(fù)調(diào)用,根據(jù)輸入?yún)?shù)的不同,
返回不同的值。 函數(shù)也是對象。

1、函數(shù)的定義

定義方式有3種:

1)、函數(shù)聲明語句

function 函數(shù)名([形參]) {

}

調(diào)用:函數(shù)名([實參]);

2)、函數(shù)定義表達(dá)式

var 變量名/函數(shù)名 = function([形參]){

}

調(diào)用:變量名([實參])/函數(shù)名([實參]);

3)、Function構(gòu)造函數(shù)

var 函數(shù)名 = new Function('參數(shù)1','參數(shù)2','函數(shù)的主體內(nèi)容');

調(diào)用:函數(shù)名([實參]);

注:構(gòu)造韓束的最后一個參數(shù)是函數(shù)體。

注意:

1)、js 中的函數(shù)沒有重載,同名的函數(shù),會被后面的函數(shù)覆蓋。

2)、js 中允許有不定數(shù)目的參數(shù),后面介紹 arguments 對象

函數(shù)名的提升(了解)

JavaScript 引擎將函數(shù)名視同變量名,所以采用 function
命令聲明函數(shù)時,整個函數(shù)會像變量聲明一樣,被提升到代碼頭部。所以,下面的代碼不會報錯

但是,如果采用賦值語句定義函數(shù),JavaScript 就會報錯。

<script type="text/javascript">
        /* 函數(shù)的定義 */
        // 1、函數(shù)聲明語句
        function fn1(a,b) {
            console.log(a+b);
        }
        fn1(1,1);
        
        // 2、函數(shù)定義表達(dá)式
        var fn2 = function(x){
            console.log(x); 
        }
        console.log(fn2);
        fn2(10);
        
        // 3、Function構(gòu)造函數(shù)
        var fn3 = new Function('x','y','console.log(x+y);')
        fn3(1,2);
        
        
        fn4();
        /*函數(shù)名的提升*/
        function fn4() {
            console.log("函數(shù)名的提升。。。。");
        }
        
        fn5();
        var fn5 = function(){
            console.log("函數(shù)名的提升...");
        }
    </script>

2. 函數(shù)的參數(shù)、調(diào)用和 return 語句
2.1參數(shù)
函數(shù)運行的時候,有時需要提供外部數(shù)據(jù),不同的外部數(shù)據(jù)會得到不同的結(jié)果,這種外部
數(shù)據(jù)就叫參數(shù),定義時的參數(shù)稱為形參,調(diào)用時的參數(shù)稱為實參
?實參可以省略,那么對應(yīng)形參為 undefined
?若函數(shù)形參同名(一般不會這么干):在使用時以最后一個值為準(zhǔn)。
?可以給參數(shù)默認(rèn)值: 當(dāng)參數(shù)為特殊值時,可以賦予默認(rèn)值。
?參數(shù)為值傳遞, 傳遞副本 ; 引用傳遞時傳遞地址,操作的是同一個對象。

2.2函數(shù)的調(diào)用

1、常用調(diào)用方式:函數(shù)名([實參]);

存在返回值可以變量接收,若接收無返回值函數(shù)則為 undefined

2、函數(shù)調(diào)用模式

3、方法調(diào)用模式

4、call()和apply()


javascript 中函數(shù)也是對象,函數(shù)對象也可以包含方法。 call()apply()方法可以用來間
接地調(diào)用函數(shù)。任何函數(shù)可以作為任何對象的方法來調(diào)用,哪怕這個函數(shù)不是那個對象的方
法。兩個方法都可以指定調(diào)用的實參。 call()方法使用它自有的實參列表作為函數(shù)的實參,
apply()方法則要求以數(shù)組的形式傳入?yún)?shù)


注:誰調(diào)用函數(shù),this就指向誰

匿名函數(shù)立即調(diào)用

(1)匿名函數(shù):function ([參數(shù)]){}

(2)調(diào)用:(function ([形參]) {})([實參]);

在函數(shù)只被使用一次的情況下可以使用這種方式,簡便省事

2.3 return 語句

函數(shù)的執(zhí)行可能會有返回值,需要使用 return 語句將結(jié)果返回。return
語句不是必需的,

如果沒有的話,該函數(shù)就不返回任何值,或者說返回 undefined。

作用:在沒有返回值的方法中,用來結(jié)束方法。

有返回值的方法中,一個是用來結(jié)束方法,一個是將值帶給調(diào)用者。

<script type="text/javascript">
        /* 參數(shù) */
        // 1、實參可以省略,那么對應(yīng)形參為 undefined
        function fn1(a,b) {
            console.log(a);
        }
        fn1();
        fn1(1);
        fn1(1,2);
        
        // 2、若函數(shù)形參同名(一般不會這么干):在使用時以最后一個值為準(zhǔn)。
        function fn2(x,x){
            console.log(x);
        }
        fn2(10,20);
        
        // 3、可以給參數(shù)默認(rèn)值:當(dāng)參數(shù)為特殊值時,可以賦予默認(rèn)值。
        function fn3(str) {
            str = str || "Hello";
            console.log(str);
        }
        fn3();
        fn3("你好");
        
        function fn4(str) {
            (str !== undefined && str !== null) ? str = str : str = "值不存在";
            console.log(str);
        }
        fn4();
        fn4("你好呀");
        
        // 4、參數(shù)為值傳遞,傳遞副本 ;引用傳遞時傳遞地址,操作的是同一個對象
        // 值傳遞
        var num = 10;
        function fn5(n) {
            n = 20;
        }
        fn5(num);
        console.log(num);
        
        // 引用傳遞
        var arr = [1,2,3];
        var obj = {
            uname:"zhangsan"
        };
        function fn6(a,b) {
            a[0] = 100;
            b.uname = "lisi";
        }
        fn6(arr,obj);
        console.log(arr);
        console.log(obj);
        
        function fn7(a,b) {
            a = [4,5,6];
            b = {
                uname:"wangwu"
            };
        }
        fn7(arr);
        console.log(arr);
        console.log(obj);
        
        console.log("===============函數(shù)的調(diào)用==============");
        // 直接調(diào)用
        function fn8() {
            console.log(this);  // Window對象
        }
        fn8();
        
        // 函數(shù)調(diào)用模式
        var fn9 = function() {
            console.log(this); // Window對象
            return 1;
        }
        var f = fn9();
        console.log(f);
        
        // 方法調(diào)用模式
        var obj = {
            uname:"zhangsan",
            uage:18,
            cats:["喵喵","貓貓"],
            sayHello:function() {
                console.log(this); // obj對象
                console.log("你好呀~");
            }
        };
        console.log(obj.sayHello);
        obj.sayHello();
        
        // 間接調(diào)用
        var obj2 = {};
        function fn10(x,y) {
            console.log(x+y);
            console.log(this); 
        }
        fn10(1,2); //  Window對象
        
        fn10.call(); //  Window對象
        fn10.call(obj2); // obj2
        fn10.call(obj2,10,20); // obj2
        
        fn10.apply(obj2,[100,200]); // obj2
        
        console.log("===============匿名函數(shù)立即調(diào)用==============");
        
        (function(a,b) {
            console.log(a-b);
        })(10,2);
        
    </script>

2.3. arguments 對象和函數(shù)的方法及屬性

arguments 對象中存放了調(diào)用該函數(shù)時傳遞的實際參數(shù)。由于 JavaScript
允許函數(shù)有不定數(shù)目的參數(shù),所以我們需要一種機(jī)制,可以在函數(shù)體內(nèi)部讀取所有參數(shù),這就是
arguments
對象的由來 。函數(shù)中可以使用 arguments 對象來獲取實參。

  • 函數(shù)名.name 得到函數(shù)名稱

  • 函數(shù)名.length 得到函數(shù)的形參數(shù)量

  • 函數(shù)名.toString() 得到函數(shù)的源碼


<script type="text/javascript">
        
        function fn1 (a,b,c) {
            // arguments對象可以得到函數(shù)的實參數(shù)量
            console.log(arguments.length);
            console.log("函數(shù)....");
            console.log(arguments);
        }
        
        fn1(1,2);
        
        console.log(fn1.name);
        console.log(fn1.length);
        console.log(fn1.toString());
        
    </script>

2.4函數(shù)的作用域

函數(shù)作用域:全局(global variable)和局部(local variable)

1)全局變量與局部變量同名問題

2)在函數(shù)中定義變量時,若沒有加 var 關(guān)鍵字,使用之后自動變?yōu)槿肿兞?/p>

3)變量作用域提升

<script type="text/javascript">
        var num = 1;
        
        function fn() {
            var num = 10; // 這是個局部變量,與全部變量毫無關(guān)系
            console.log(num); // 就近原則
            var b = 2; // 局部變量
            c = 3; // 不用var修飾符聲明的變量時全局變量
        }
        
        fn();
        
        console.log(num);
        //console.log(b);
        console.log(c);
        
        
        function foo(x) {
             if (x > 100) {
                var tmp = x - 100;
             }
             console.log(tmp);
        }
        
        function foo(x) {
            var tmp;
             if (x > 100) {
                tmp = x - 100;
             }
             console.log(tmp);
        }
        foo(1);
    </script>


2.5 閉包

出于種種原因,我們有時候需要得到函數(shù)內(nèi)的局部變量。但是,正常情況下,這是辦不到
的,只有通過變通方法才能實現(xiàn)。那就是在函數(shù)的內(nèi)部,再定義一個函數(shù)。
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。由于在 Javascript
語言中,只有函數(shù)內(nèi)部的\子函數(shù)才能讀取局部變量,因此可以把閉包簡單理解成"定義在一個函數(shù)內(nèi)部的函數(shù)"。所以,
在本質(zhì)上,閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。
閉包可以用在許多地方。它的最大用處有兩個,一個是前面提到的可以讀取函數(shù)內(nèi)部的變
量,另一個就是讓這些變量的值始終保持在內(nèi)存中。
以及還可以避免變量名沖突的問題。

閉包的形成:

1、外部函數(shù)內(nèi)部嵌套內(nèi)部函數(shù)

2、內(nèi)部函數(shù)中使用外部函數(shù)的環(huán)境

3、外部函數(shù)返回內(nèi)部函數(shù)

閉包的作用:

1、獲取函數(shù)內(nèi)部的變量

2、保存變量的值在內(nèi)存中

3、避免變量名重復(fù)

<script type="text/javascript">
        
        // 1、外部函數(shù)內(nèi)部嵌套內(nèi)部函數(shù) 
        function fn1() {
            var a = "Hello!";
            function fn2() {
                // 2、內(nèi)部函數(shù)中使用外部函數(shù)的環(huán)境
                console.log(a);
            }
            // 3、外部函數(shù)返回內(nèi)部函數(shù)
            return fn2;
        }
        
        var f = fn1();
        console.log(f);
        f();
        
        
        function test() {
            var num = 1;
            num++;
            console.log(num);
        }
        
        test();
        test();
        test();
        
        console.log("====================");
        
        
        // 1、外部函數(shù)內(nèi)部嵌套內(nèi)部函數(shù) 
        function outFn() {
            var num = 1;
            function inFn(){
                // 2、內(nèi)部函數(shù)中使用外部函數(shù)的環(huán)境
                num++;
                console.log(num);
            }
            // 3、外部函數(shù)返回內(nèi)部函數(shù)
            return inFn;
        }
        var inF = outFn();
        inF();
        inF();
        inF();
        inF();
        
        var inF1 = outFn();
        inF();
        
        console.log("===========澆水實例=========");
        document.write("==========澆水實例=========<br>");
        
        // 定義外部函數(shù),設(shè)置形參(水壺的容量)
        function waterFlower(total) {
            // 定義內(nèi)部函數(shù),執(zhí)行澆水過程 (每次澆水,水容量減50ml)
            function water(flower) {
                // 當(dāng)水容量大于50ml則澆水
                if (total >= 50) {
                    // 每次澆水減50
                    total = total - 50;
                    
                } else {
                    // 如果沒水,則自動加水
                    document.write("<h4>正在重新裝水....</h4>");
                    total = 200;
                    // 澆水
                    total = total - 50;
                    // 
                }
                document.write("給"+flower+"澆水50ml,剩余" + total + "ml的水!<br>");
            }
            
            // 返回內(nèi)部函數(shù)
            return water;
        }
        
        // 裝水
        var t = waterFlower(200);
        // 澆水
        t("桃花"); 
        t("蘭花");
        t("玫瑰花");
        t("菊花");
        t("桂花");
        
        
        
        
    </script>


2.6 JS 內(nèi)置對象


Arguments 只在函數(shù)內(nèi)部定義,保存了函數(shù)的實參
Array 數(shù)組對象
Data 日期對象,用來創(chuàng)建和獲取日期
Math 數(shù)學(xué)對象
String 字符串對象,提供對字符串的一系列操作


String:


? charAt(idx):返回指定位置處的字符
? indexOf(Chr):返回指定子字符串的位置,從左到右。找不到返回-1
? substr(m,n):返回給定字符串中從 m 位置開始,取 n 個字符,如果參數(shù) n 省略,
則意味著取到字符串末尾。
? substring(m,n):返回給定字符串中從 m 位置開始,到 n 位置結(jié)束,如果參數(shù) n 省
略,則意味著取到字符串末尾。
? toLowerCase():將字符串中的字符全部轉(zhuǎn)化成小寫。
? toUpperCase():將字符串中的字符全部轉(zhuǎn)化成大寫。
? length: 屬性,不是方法,返回字符串的長度。


Math:


? Math.random()
? Math.ceil() :天花板 大于最大整數(shù)
? Math.floor() :地板 小于最小整數(shù) String


Date:


//獲取
? getFullYear()年, getMonth()月, getDate()日,
? getHours()時,getMinutes()分,getSeconds()秒
//設(shè)置
? setYear(), setMonth(), ...
? toLoacaleString()


說明

1.getMonth():得到的值: 0~11(1 月~12 月)

2.setMonth():設(shè)置值時 0~11

3.toLocaleString():可根據(jù)本地時間把 Date 對象轉(zhuǎn)換為字符串,并返回結(jié)果。

<script type="text/javascript">
        // 得到系統(tǒng)當(dāng)前時間
        var mydate = new Date();
        console.log(mydate);
        
        // toLocaleString():可根據(jù)本地時間把 Date 對象轉(zhuǎn)換為字符串,并返回結(jié)果。
        console.log(mydate.toDateString());
        console.log(mydate.toLocaleString());
        
        var mon = mydate.getMonth()+1;
        if (mon < 10) {
            mon = "0" + mon;
        }
        
        var newDate = mydate.getFullYear() + "-" + mon + "-" + mydate.getDate();
        newDate += " " + mydate.getHours() + ":" + mydate.getMinutes() + ":" + mydate.getSeconds();
        console.log(newDate);
        
</script>


2.7 JS 對象

對象(object)是 JavaScript 的核心概念,也是最重要的數(shù)據(jù)類型。
JavaScript 的所有數(shù)
據(jù)都可以被視為對象。 JavaScript 提供多個內(nèi)建對象,比如 String、 Date、
Array 等等。對象是帶有屬性和方法的特殊數(shù)據(jù)類型。
簡單說,所謂對象,就是一種無序的數(shù)據(jù)集合,由若干個"鍵值對"(key-value)構(gòu)成。通
過 JavaScript 我們可以創(chuàng)建自己的對象。 JavaScript
對象滿足的這種"鍵值對"的格式我們成為JSON 格式,
以后會見得非常多,即偉大的 JSON 對象。

1、定義對象

JS 創(chuàng)建自定義對象,主要通過三種方式:

1)、字面量形式創(chuàng)建對象

var 變量名 = {}; // 空對象

var 變量名 = {鍵:值,....};

2)、通過 new Object 對象創(chuàng)建

var 變量名 = new Object();

3)、通過 Object 對象的 create 方法創(chuàng)建對象

var 變量名 = Object.create(null或?qū)ο?;

// 1、字面量形式創(chuàng)建對象
        var obj = {}; // 空對象
        var obj2 = {
            uname:"zhangsan",
            uage:18
        };
        obj2.usex=true;
        
        console.log(obj);
        console.log(obj2);
        
        // 2、通過 new Object 對象創(chuàng)建 
        var obj3 = new Object();
        obj3.name = "Tom";
        console.log(obj3);
        
        // 3、通過 Object 對象的 create 方法創(chuàng)建對象
        var obj4 = Object.create(null);
        console.log(obj4.uname);
        
        var obj5 = Object.create(obj2);
        console.log(obj5.uname);


// 2、通過 new Object 對象創(chuàng)建

console.log('============序列化和反序列化============');
        var str = '{"uname":"zhangsan", "uage":18 }';
        // 反序列化:將字符串轉(zhuǎn)換成對象
        var object1 = JSON.parse(str);
        console.log(object1);
        console.log(object1.uname);
        
        // 序列化,將對象轉(zhuǎn)換成字符串
        var json1 = JSON.stringify(object1)
        console.log(json1);
        console.log(json1.uname);

2、對象的序列化和反序列化

序列化即將 JS 對象序列化為字符串,反序列化即將字符串反序列化為 JS 對象。

JS 中通過調(diào)用 JSON
方法,可以將對象序列化成字符串,也可以將字符串反序列化成對象 。

- 序列化對象,將對象轉(zhuǎn)為字符串

JSON.stringify(object)

- 反序列化,將一個 Json 字符串轉(zhuǎn)換為對象。

JSON.parse(jsonStr)

console.log('============序列化和反序列化============');
        var str = '{"uname":"zhangsan", "uage":18 }';
        // 反序列化:將字符串轉(zhuǎn)換成對象
        var object1 = JSON.parse(str);
        console.log(object1);
        console.log(object1.uname);
        
        // 序列化,將對象轉(zhuǎn)換成字符串
        var json1 = JSON.stringify(object1)
        console.log(json1);
        console.log(json1.uname);
        

3、eval()

1、可借助 eval()動態(tài)函數(shù),將參數(shù)字符串解析成 js
代碼來執(zhí)行,只接受原始字符串作為參數(shù)

eval("console.log('你好')");//控制臺輸出你好

2、可將 json 串轉(zhuǎn)為 json 對象

1)第一種解析方式:得到的 json 對象名就是 jsonObj

eval("var jsonObj = " + jsonStr);

2)第二種解析方式:對象中有多個屬性

var jsonObj = eval("(" + jsonStr + ")");

由于 json 是以{ }的方式來開始以及結(jié)束的,在 eval
中會被當(dāng)成一個語句塊來處理,故必
須強(qiáng)制將它轉(zhuǎn)換成一種表達(dá)式。加上圓括號是使 eval
函數(shù)在處理時強(qiáng)制將括號內(nèi)的表達(dá)式轉(zhuǎn)化為對象而不作為語句來執(zhí)行。

3)第二種解析方式:對象中只有一個屬性

eval(jsonStr);

 console.log("=============eval()============");
        console.log('你好');
        eval("console.log('你好')");//控制臺輸出你好
        
        // 1)第一種解析方式:得到的 json 對象名就是 jsonObj
        var ab = '{"uname":"zhangsan", "uage":18 }';
        eval("var jsonObj = " + ab);
        console.log(jsonObj);
        
        // 2)第二種解析方式:對象中有多個屬性
        var jsonObj2 = eval("(" +ab + ")");
        console.log(jsonObj2);
        
        
        var arrStr = "[1,'1a','fg']";
        // 第一種解析方式eval("var arrObj = " + arrStr);
        eval("var arr=" + arrStr);
        console.log(arr);
        // 第二種解析方式:eval(arrStr);
        
        console.log(arrStr);
        console.log(eval(arrStr));

2.8 this

**
**this 是 JavaScript 語言的一個關(guān)鍵字。

它代表函數(shù)運行時,自動生成的一個內(nèi)部對象,只能在函數(shù)內(nèi)部使用。
隨著函數(shù)使用場合的不同, this 的值會發(fā)生變化。但是有一個總的原則,那就是
this 指的
是,調(diào)用函數(shù)的那個對象。

在函數(shù)中使用 this

**
**在函數(shù)中使用 this 屬于全局性調(diào)用,代表全局對象,通過 window
對象來訪問。


function test () {
this.x = 1;
console.log(this.x);
}
test();
console.log(x);//相當(dāng)于定義在全局對象上的屬性



var x = 10;
console.log(x) // 10
function test (){
console.log(this.x) //10
this.x = 1;
console.log(this.x) //1
console.log(this)
}
test()
console.log(x) //1
console.log(this)


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容