Javascript

1. JavaScript 引入方式

1. 內(nèi)部腳本
   直接寫在<script></script>標(biāo)簽內(nèi)部
2. 外部腳本
   通過script的src屬性引入
3. 行內(nèi)腳本
   通過元素的屬性添加到元素上

2. JavaScript 加載方式

2.1 默認(rèn)同步

• 瀏覽器解析html文檔，一旦遇到script標(biāo)簽會中斷頁面解析，下載js代碼并執(zhí)行
• 當(dāng)執(zhí)行完js代碼后再繼續(xù)解析之后的html代碼

2.2 異步加載

• defer
  • js的下載與html的解析同步執(zhí)行，不會中斷解析，直到dom創(chuàng)建完成才執(zhí)行

  • <script defer src="test.js"></script>

  • 涉及dom操作，或?qū)s的執(zhí)行順序有要求
• async
  • 只關(guān)注js的下載不會中斷html的解析，只是實(shí)現(xiàn)js下載與html解析同步
  • 對腳本順序無要求，只要求快速下載js

總之，放在</body>標(biāo)簽前就可以

3. JavaScript調(diào)試

• console.log()
  輸出信息
• console.table()
  表格形式輸出復(fù)合類型數(shù)據(jù)
• console.dir()
  輸出對象的屬性和方法

占位符
console.log(“用戶名：%s, 密碼：%s”,user.name,user.password)

        let obj = {
            id: 0001,
            age: 22,
            name: "hehe"
        }
        console.log("Using console.log()");
        console.log(obj);
        console.log("---------------------");
        console.log("Using console.table()");
        console.table(obj);
        console.log("---------------------");
        console.log("Using console.dir()");
        console.dir(obj);

4. JavaScript 變量，常量

4.1 變量

• 聲明 (一個變量不能被重復(fù)聲明)
  • let a;
• 第一次賦值：初始化
  • let b = 1;
• 第一次賦值后再賦值：更新

4.2 常量

• 聲明
  • const GENDER =”male”;
• 聲明時必須賦值，之后不能更改

4.3 標(biāo)識符

• 字母，數(shù)字，下劃線，$
• 大小寫敏感
• 不能使用保留字/關(guān)鍵字
• 駝峰式命名 userName
• 類/構(gòu)造函數(shù) UserName
• user_name
• oBtn

4.4 變量類型

• 原始類型
  • 數(shù)值，字符串，布爾，undefined，null
• 引用類型
  • object, array, function(object)

4.5 類型轉(zhuǎn)換

• 通常相同類型數(shù)據(jù)計(jì)算結(jié)果才有意義
• ==
  • 非嚴(yán)格判斷，只比較值，兩邊比較的類型不同時自動類型轉(zhuǎn)換
• ===
  • 值相等且類型相同才返回true

5. JavaScript 函數(shù)

5.1 函數(shù)聲明

       let name = "HaHa";
        function getName(name) {
            return "My name is " + name;
        }
        console.log(getName(name));

輸出：

5.1.1 函數(shù)可以重名

        let name = "HaHa";
        function getName(name) {
            return "My name is " + name;
        }
        function getName(name) {
            return "我的名字是 " + name;
        }
        console.log(getName(name));

輸出：

5.1.2 函數(shù)聲明提升

命名的函數(shù)聲明會被自動提示，即先調(diào)用后聲明也可以

        let name = "HaHa";
        console.log(getName(name));
        // function declaration
        function getName(name) {
            return "My name is " + name;
        }

輸出：

5.1.3 阻止函數(shù)聲明提升

使用匿名函數(shù)

    let sum = function (a, b) {
            return a + b;
        }
        console.log(sum(1, 2));
        //3

5.2 函數(shù)的參數(shù)與返回值

• 調(diào)用時傳入的參數(shù)數(shù)量必須與函數(shù)聲明時所需的參數(shù)數(shù)量一致
• 如果少于函數(shù)所需的參數(shù)，可以在函數(shù)聲明時設(shè)置默認(rèn)值

        let sum = function (a, b = 2) {
            return a + b;
        }
        console.log(sum(1));
        //3

5.2.1 歸并參數(shù)

rest語法，將所有參數(shù)放到數(shù)組中

        let summary = function (...arr) {
            let e = 0;
            for (let index = 0; index < arr.length; index++) {
                e += arr[index];
            }
            return e;
        }
        console.log(summary(1, 9, 2, 8, 3, 7, 4, 6, 5));
        //45

5.2.2 函數(shù)返回多個值

使用數(shù)組或?qū)ο蟮男问椒祷?/p>

        function getUser() {
            return [20, "Tom", "tom123"];
        }
        console.table(getUser());
        function getAddress() {
            return { room: 0101, street: "Goodwood Road", post: 5000 };
        }
        console.table(getAddress());

5.2.3 高階函數(shù)

將函數(shù)作為參數(shù)，或使用函數(shù)作為返回值的函數(shù)

        function foo(p) {
            //console.log(p)
            return function () {
                return "a";
            };
        }
        let f = foo(function () { });
        console.log(f());
        //a

• 回調(diào)函數(shù)

函數(shù)作為參數(shù)

        document.addEventListener("click", function () {
            alert("hehe");
        });

• 偏函數(shù)

        //聲明
        sum = function (a) {
            return function (b) {
                return function (c) {
                    return function (d) {
                        return a + b + c + d;
                    }
                }
            }
        };
        //調(diào)用
        let result = sum(1)(2)(3)(4);
        console.log(result);
        //10

• 純函數(shù)
  函數(shù)的返回結(jié)果只與函數(shù)本身的參數(shù)有關(guān)

       function getPrice(p, n) {
            return p * n;
        }
        getPrice(10, 5);

• 箭頭函數(shù)

  let sum = function (a, b) {
            return a + b;
        }
        console.log(sum(1, 2));
        //箭頭函數(shù)簡化匿名函數(shù)
        sum = (a, b) => {
            return a + b;
        }
        console.log(sum(2, 3));
        //如果箭頭函數(shù)的代碼體只有一行語句
        sum = (a, b) => a + b;
        console.log(sum(3, 4));

*如果函數(shù)中使用到this關(guān)鍵字，就不要使用箭頭函數(shù)，不能當(dāng)構(gòu)造函數(shù)使用

• 立即執(zhí)行函數(shù) IIFE

聲明和調(diào)用放在一起

        (function(p, n) {
            console.log(p * n)
        })(5, 10);
        //50
        let sum = function (a, b) {
            return a + b;
        }(1, 2);
        console.log(sum);
        //3

*在過去，立即執(zhí)行函數(shù)可以用來防止函數(shù)內(nèi)的局部var變量作用域提升到全局

批改老師：天蓬老師

批改狀態(tài)：合格

老師批語：