js變數與函式常識學習

霸霸晧發表於2024-06-07
JS變數函式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: red;
            background-color:aqua;

        }
    </style>
</head>
<body>
    <!-- type,class普通屬性，onclick時間屬性 -->
        <button type="button" class="default" onclick=""alert this.tagName>提交</button>
        <button type="button" class="default" onclick="change(this)">提交</button>
        <script>
            function change(ele) {
                ele.textContent ="已提交";
                ele.classList.toggle("active");
            }
        </script>
</body>
</html>

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script>
// 3.變數
let email = "admin @pho.con";
// console.log (email);
// (宣告初始化二合一，第一次賦值叫初始化等價於以下兩行),只宣告不賦值預設值就是undefined.不能重複賦值會報錯
//    let email;
// email = 34444@qqcom;
//    console.log (email);
// 雖然不能重複賦值但可以更新，第二次賦值叫更新，修改
email = "34444@qq.com";
console.log (email);
// 刪除
email = null;
console.log (email);
// 常量不能被更新必須初始化,宣告時有一定要賦值否則會報錯，也不可更新但刪除可以
const NATLON = "Chine";
// const NATLON;沒有賦值
// NATLOM = "USO";
console.log (NATLON)

// 3.識別符號
// 只允許字母，數字，下劃線，禁止以數字開頭。特殊符號也不可以。
let abc123;
let _12abc;
let $123;
// let name@;
// let name#;
// 大小寫敏感
let MyName ="小明";
let myName = "小紅";
console.log (MyName , myName);
// 關鍵字，保留字不能用,如下會報錯
// let let = 100;
// console.log (let);


// 4.命名方案
// 駝峰式：每個單詞的額首字母大寫，也是官方推薦使用
let userName = "zhu";
function getUserEmail() {}
// 蛇形：
let user_email = "zhu@qq.com";
function get_User_email() {}
</script>
    
</body>
</html>

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.函式
        console.log(typeof 100);
        function hello(a,b,c) {}
        console.log(typeof hello);
        console.log(hello instanceof Function);
        console.log(hello);
        console.dir(hello);
        hello.email = "123456@qq.com";

        // 3.陣列
        const colors = ["red", "green", "blue"];
        console.log(colors);
        console.table(colors);
        colors.forEach(item => console.log(item));

        // 2.物件
        // 物件字面量：json的語法基礎
        const person = {
            name:"zhu lao shi",
            gender:"male",
            job:"lecture",
            getName:function() {
                return this.name;
            }
        }
        console.log (person);
        console.dir(person);
        console.table(person);

    </script>
    
</body>
</html>

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function getName (name) {
            return"welcome to" +name;
      }
        console.log (getName("朱老師"));
        
        function getName (name,city) {
            return "歡迎來自" + city + "的" + name ;
        }
        console.log (getName("朱老師","合肥"));
        
        // 在sum()函式宣告之前呼叫
        console.log(sum(100,200));

        // 函式宣告會自動提升到當前程式的頂部
        function sum (a,b) {
            return a+b;
        }
        // 函式呼叫不像變數，不必遵循"先宣告後使用"的規範
        console.log(sum(100,200));

        // 使用var宣告變數才會提升，使用let，不會
        // 為了規範，大多數時候，推薦使用"匿名函式"來實現"先宣告再使用的規範"
        // console.log(sum1(100,400);)這樣會報錯必須先宣告再使用
        let sum1 = function (a,b) {
            return a+b;
        };
        // 宣告瞭一個變數sum1,它的值是一個函式
        console.log(sum1(100,400));

    </script>
    
</body>
</html>

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <script>
    // 函式都是單值返回
    let sum = function (a,b){
        return a + b;
    };
    console.log(sum());

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

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

    
    sum = function (a, b, c, d, e,) {
        return a + b + c + d + e;
    };
    console.log(sum(1, 2, 3, 4, 5));

    // 如果10，20，300，個數相加？
    sum = function (...arr) {
      console.log(arr);
      return arr.reduce ((p, c) => p + c);
    }
    // console.let = (sum(1, 2, 3, 4, 5));
    let a1 = [1, 2, 3, 4, 5];
    console.log(sum(...a1));
// ...:用在函式宣告引數中，就是引數打包功能，rest
// ...:用在函式呼叫引數中，就是擴充套件，spread
    
// 如果返回多個值，返回陣列和物件就可以
function getproduct() {
       return [123, "手機",678,"Huawei"];
     }
    
    let mobile =getPrm
    
  </script>
    
</body>
</html>

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭頭函式</title>
</head>
<body>
    <script>
        // 匿名函式
        // 只有匿名函式才可以使用箭頭函式進行簡化
        
        let sum = function (a,b) {
            return a + b;
        };

        // =>胖箭頭
        sum = (a,b) => {
            return a + b;
        };
        console.log(sum(10,20));
 
        // 如果引數大於一個，那麼引數的圓括號不能省
        let getName = function (name) {
            return "Hello" + name;
        };
        //  一個引數可以不加括號
       getName = name => {
        return "hello" + name;
       }
       console.log(getName("豬豬俠"));
        // 如果函式體只有一條return語句或只有一條語句，則大括號也可以不用
        sum = (a,b) => 
            a + b;
        
        console.log(sum(50,20))

        getName = name=> "hello" + name;
        console.log(getName("小呆呆"));
        // 如果沒有引數，引數的圓括號就不能省
        let show = () => console.log("西瓜");
        show();
        // 箭頭函式沒有自己的this,不能用來當建構函式
    </script>
</body>
</html>

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立即執行函式</title>
</head>
<body>
    <script>
        // 宣告
       function sum(a,b) {
            return a + b;
        }; 
        // 呼叫
        console.log(sum(10,20));
        // 二合一，一步完成
       (function sum(a,b) {
            console.log(a + b);
        })(20,40);
        // sum (20,40)
       
    //    var username = "小豬豬";
    //    console.log(window);
    //    console.log(window.username);

    //  因為函式可以建立出一個獨立的作用域
    (function () {
        var username = "鯨";
    })();
    console.log(window);
    console.log(window.username);

    // let,const 可宣告全域性，只不過它放在一個單獨管理的全域性空間中
    // 高階函式：回撥，偏函式，柯里化，純函式
    </script>
</body>
</html>

　　

相關文章