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>

posted @ 2024-06-07 00:12 豹纹守宫阅读(18) 评论(0) 收藏举报

刷新页面返回顶部

js变量与函数常识学习

公告