zoukankan      html  css  js  c++  java
  • web开发:javascript基础

    本文目录:

    一、js引入

    二、变量的定义

    三、三种弹出框

    四、调试方式

    五、数据类型

    六、数据类型转换

    七、运算符

    八、分支机构

    九、循环结构

    十、异常处理

    十一、函数

     

    一、js引入

    - ES: ECMAScript语法
    - DOM: document对象模型 => 通过js代码与页面文档(出现在body中的所有可视化标签)进行交互
    - BOM: borwser对象模型 => 通过js代码与浏览器自带功能进行交互


    - 行间式
    ```
    出现在标签中的全局事件属性中
    this代表该标签, 可以访问全局属性, 再访问具体操作对象(eg: this.style.color = "red")
    ```
    - 内联式
    ```
    出现在script脚本标签中
    可以通过标签的id唯一标识,在js代码块中操作页面标签
    js采用的是小驼峰命名规范, 属于解释性语言(由上至下依次解释执行)
    ```
    - 外联式
    ```
    通过script标签的src属性链接外部js文件, 链接后, script标签本身内部的js代码块将会被屏蔽
    在任何位置都可以使用this对象,当this对象不指向任意一个标签时,代表的是window对象
    ```
    - js具体出现的位置
    ```
    head标签的底部: 依赖性js库
    body标签的底部(body与html结束标签的之间): 功能性js脚本
    ``
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>js引入</title>
        <!--js出现的第一个位置-->
        <script>
            // 一般为 依赖型JS库
        </script>
    </head>
    <body>
        <!--脚本:一段功能代码块, 可以嵌套在其他语言中使用, 完成一些额外的功能-->
        <!--js可以用来书写脚本, js就是脚本语言, 书写在script标签中-->
        <!--js三个组成部分:ES(ECMAScript)语法 | DOM(document object model) | BOM(browser object model)-->
        <script>
    
        </script>
    
        <!--1.行间式-->
        <!--i) 行间式代码块书写在一个个全局事件名属性中,没有script这样的一个全局属性-->
        <!--ii) 在某一个标签的某一个事件属性值中,出现的this代表该标签-->
        <!--iii) 该标签对象this可以访问该标签的任意全局属性(eg:style),
        然后再间接访问具体需要操作的对象(style.color)-->
        <div id="ddd" onmouseover="this.style.color = 'red'" onmouseleave="this.style.color = 'blue'">这是一个拥有行间式js的div</div>
    
        <!--2.内联式-->
        <!--i) 可以通过标签的id(唯一标识),在js代码块中访问到该标签(js的选择器)-->
        <!--ii) js代码块中语法采用的是小驼峰命名法, 属性的值都是用字符串形式进行赋值-->
        <!--iii) js属于解释性语言,所有加载顺序会影响执行结构 => 内联式的script标签出现的位置-->
        <script>
            ddd.style.backgroundColor = "pink"
        </script>
    
        <!--3.外联式-->
        <!--i) 通过script标签的src数据链接外部js文件-->
        <!--ii) 使用外联的script(拥有src属性)标签,会屏蔽掉标签内部的js代码块-->
        <!--iii) 在js任意地方,均由this对象,this对象不指向任何标签时,指向的是window对象-->
        <script src="js/01.js">
            // 被屏蔽掉的代码块
            ddd.style.fontSize = "100px";
        </script>
    </body>
    <!--js出现的第二个位置-->
    <script>
        // 一般为 功能性JS脚本
    </script>
    </html>

     

    二、变量的定义


    ```js
    四种定义变量的方式
    语法: 关键词 变量名 = 变量值
    num = 10; // 省略关键词, 定义的为全局变量, 在任何位置定义, 在任何位置都可以访问, 但不建议使用
    var num = 10; // var关键词, 无块级作用域, 定义在块级作用域中的变量, 外界也可以访问
    let num = 20; // let关键词, 有块级作用域, 定义在块级作用域中的变量, 外界无法访问
    const NUM = 30; // const关键词,有块级作用域, 定义在块级作用域中的变量, 外界无法访问, 且变量的值不能再被二次修改, 所以为常量
    /* 产生块级作用域的方式
    {
        直接书写
    }
    if语句可以产生
    while语句可以产生
    for语句也可以产生
    */
    // 函数可以产生局部作用域, 除了定义在局部作用域中的全局变量(没有关键字的变量声明), 外界可以访问, 其他定义方式, 外界都不可以访问
    ```
    ```js
    // ES5 | ES6
    // 是ECMAScript两个语法版本, ES6是ES5之后的一个版本, 但是对ES5向下兼容, ES6中支持ES5语法
    ```
    ```js
    // 命名规范
    // 变量命名规范
    // 可以由哪些组成: 字母, 数字, _, $, 中文(一般不考虑)
    // 可以以什么开头: 字母, _, $, 中文
    // 不能出现什么: 关键字, 保留字
    // 提倡什么书写规范: 小驼峰, 支持_连接语法
    好的 = "真好";
    console.log(好的);
    ```
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>变量的定义</title>
    </head>
    <body>
        变量的定义
    </body>
    <script>
        // python
        // 1.以换行标识语句的结束
        // 2.以同缩进标识附属关系
    
        // js
        // 1.以分号(;)标识语句的结束
        // 2.以作用域({})标识附属关系
    
        // 定义变量
        // py: 变量名 = 变量值
        // js: 声明关键词 变量名 = 变量值
        console.log(num);  // 注: 变量在未定义赋值之前也可以去使用,值为undefined
        // 定义变量: 在程序运行过程中, 值可以发生改变的量
        var num = 10;
        console.log(num);
    
        // 定义常量: 在程序运行过程中, 值不会被改变的量
        const NUM = 3.14;
        // JS中区分大小写
        console.log(num, NUM);
        // NUM是标标准准常量语法, 为只读的值, 不允许修改
        // NUM = 3.141592653;
    
    
    </script>
    
    <script>
        // 块级作用域
        // 定义变量
        // var无块级作用域
        {
            var a = 666;
        }
        // let有块级作用域
        {
            let b = 888;
            console.log(b);
        }
        console.log(a);
        // let定义的变量具有块级作用域, 在块级作用域之外无法访问
        // console.log(b);
    
        {
            const c = 999;
        }
        // const定义的=常量具有块级作用域, 在块级作用域之外无法访问
        // console.log(c);
    
        // 在ES6语法下, 定义变量(let)常量(const)都具有块级作用域
        // 在ES5语法下, 没有定义常量的概念, 且所有定义变量都不具有块级作用域
    </script>
    <script>
        // 局部作用域
        // ES5语法下, 只有方法(函数)才能产生局部作用域
        // ES6语法下, 块级作用域都可以为局部作用域
        // 块级作用域的范围 >= 局部作用域范围
    
        /* py
        def func():
            缩进
         */
        function func() {
            var aaa = 10;
            let bbb = 20;
            const ccc = 30;
    
            // 定义全局变量
            // 注: 定义全局变量与重新赋值语法相同, 容易混淆, 不建议使用
            ddd = 40;
        }
        func() // 执行一下函数, 所有的变量(常量)均产生了
    
        {
            ddd = 50;
        }
        // console.log("aaa>>>:", aaa)  // 不能被访问
        // console.log("bbb>>>:", bbb)  // 不能被访问
        // console.log("ccc>>>:", ccc)  // 不能被访问
        console.log("ddd>>>:", ddd)  // 可以访问
    
    
    
    </script>
    <script>
        // 变量命名规范
        // 可以由哪些组成: 字母, 数字, _, $, 中文(一般不考虑)
        // 可以以什么开头: 字母, _, $, 中文
        // 不能出现什么: 关键字, 保留字
        // 提倡什么书写规范: 小驼峰, 支持_连接语法
        好的 = "真好";
        console.log(好的);
    </script>
    </html>

     

    三、三种弹出框

    ```js
    // 普通弹出框
    // alert("你丫真帅!!!");
    // 输入框: 以字符串形式接收用户输入内容
    // var info = prompt("请输入内容:");
    // console.log(info)
    // 确认框: 根据用户选择确认或取消, 得到 true | false 两个布尔结果
    // var res = confirm("你是猪吗?");
    // console.log(res)
    ```
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>三种弹出框</title>
    </head>
    <body>
    三种弹出框
    </body>
    <script>
        // 普通弹出框
        // alert("你丫真帅!!!");
    
        // 输入框
        // var info = prompt("请输入内容:");
        // console.log(info)
    
        // 确认框
        // var res = confirm("你是猪吗?");
        // console.log(res)
    
        // window为顶级对象, 三种弹出框都是附属于window的
        // window.alert(123)
    </script>
    </html>

     

    四、调试方式

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>调试方式</title>
    </head>
    <body>
        调试方式
    </body>
    <script>
        var a = 10;
        var b = a;
        var c = b;
    
        // console.log(a, b, c);
    
        // alert(a)
        // alert(b)
        // alert(c)
    
        // document.write(a, b, c)
    
        // debug 断点
    </script>
    </html>

     

    五、数据类型

    ```js
    // 值类型
    var a = 10;  // Number 10
    var a = 'abc';  // String abc
    var a = true;  // Boolean true
    var a = undefined  // undefined undefined
    // 引用类型
    var a = function(){}  // function f(){}
    var a = {}  // Object {}
    var a = null  // Null null
    // 其他Object具体体现
    Array | Date | RegExp
    ```
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>基本数据类型</title>
    </head>
    <body>
        基本数据类型
    </body>
    <script>
        // 值类型
        // 1.number类型
        var num = 10;
        // 类型, 值
        console.log(typeof(num), num)
        // 判断方式
        console.log(typeof num == 'number');
    
        num = 3.14;
        console.log(typeof(num), num);
    
        // 2.string类型
        var str = '单引号字符串';
        console.log(typeof(str), str);
        str = "双引号字符串";
        console.log(typeof(str), str);
    
        // 3.boolean类型
        var res = true;
        console.log(typeof(res), res);
        res = false;
        console.log(typeof(res), res);
    
        // 4.undefined类型
        console.log(typeof(abc), abc);
        var abc = undefined;
        console.log(typeof(abc), abc);
    
        // 引用类型
        // 5.function类型
        var fn = function (a, b) { return a + b; };
        console.log(typeof(fn), fn);
    
        // 6.object类型 (类字典方式来使用)
        var obj = {
            name: 'egon',
            age: 78
        };
        console.log(typeof(obj), obj);
        console.log(obj instanceof Object);
    
        // 其他形式对象
        // 7.null类型
        var xyz = null;
        console.log(typeof(xyz), xyz);  // object null
        console.log(xyz instanceof Object);  // false => Null类型
    
        // 具体的对象类型
        // Array类型
        var a = new Array(1, 2, 3, 4, 5);
        console.log(a, typeof a);
        // 判断方式
        console.log(typeof a == 'object');
        console.log(a instanceof Object);
        console.log(a instanceof Array);
    
        // Date类型
        var a = new Date();
        console.log(a, typeof a);
        // 判断方式
        console.log(typeof a == 'object');
        console.log(a instanceof Object);
        console.log(a instanceof Date);
    
        // RegExp类型
        var a = new RegExp('a');
        a = /[abc]/;
        console.log(a, typeof a);
        // 判断方式
        console.log(typeof a == 'object');
        console.log(a instanceof Object);
        console.log(a instanceof RegExp)
    
        // 使用正则
        console.log('abc'.match(a))
    </script>
    </html>

     

    六、数据类型转换

    ```js
    // 1.通过类型声明转换
    Number() | String() | Boolean()
    // 2.方法(函数)
    parseInt('10') | parseFloat('3.14')
    123..toString()
    // 3.隐式转换
    +'10' => 10
    '' + 10 => '10'
    ```
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>数据类型转换</title>
    </head>
    <body>
        number | boolean | string 之间相互转换
    </body>
    <script>
        // 1. number 与 boolean类型
        // boolean类型的true就是数字1, false就是数字0
        console.log((true + true) * 10 * false)
        // number 中 0, NaN 可以直接当false来使用, 其他的都可以当true来使用
    
        // 2. string,boolean 转换为 number
        var a = '10'; // => 10
        a = '3.14';  // => 3.14
        a = '3.14.15';  // => NaN
        var b = true;
    
        var n1 = Number(a);
        console.log(n1)
        var n2 = Number(b);
        console.log(n2)
    
        a = '3.14.15';  // 3.14
        a = 'a3.14';  // NaN
        console.log(parseFloat(a));
    
        a = '3.94.15';  // 3
        console.log(parseInt(a));
    
        // 体现弱语言类型
        a = '10';
        var res = +a; // number 10
        console.log(typeof(res), res)
    
        // 3.number, string 转换为 boolean
        // 在分支或循环判断中, 系统会将数字与字符串类型自动转换为布尔类型
        // 不在判断中, 如何转换
        console.log(Boolean(""));
        console.log(Boolean(0));
        console.log(Boolean(NaN));
        console.log(Boolean(null));
    
        console.log(Boolean("1"));
        console.log(Boolean(-100));
    
        // 4.number, boolean 转换为 string
        console.log(String(true));
        console.log(String(1));
    
        var a = 123;
        console.log(a.toString());
        console.log(123..toString());
        console.log(3.14.toString());
    
        var c = 123 + "";
        console.log(typeof c, c);
    
        // 用例
        var z1 = 2 + +"5";  // 7
        z1 = 2 + "5"; // "25"
        // z1 = 2 ++"5";  // 语法错误 ++连在一起是 ++语法(了解)
        var z2 = "5" - 2;  // 3
        console.log(z1, z2);
    
        // 补充
        // NaN与NaN不相等
    </script>
    </html>

     

    七、运算符

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>运算符</title>
    </head>
    <body>
        运算符
    </body>
    <script>
        // 算术运算符
        // + | - | * | / | % | ++ | --
        console.log(5 / 2);  // 2.5
        // 取整
        console.log('%d', 5 / 2); // "2"
        var num = parseInt(5 / 2);  // 2
        console.log(num);
    
        // 取模(求余)
        console.log(5 % 2);  // 1
        // 任何一个自然数对 n 取余, 结果为 [0, n-1]
    
        // 自增|自减 ++|--
        // ++就是自增1, --就是自减1
        var num = 10
        console.log(num++);  // 10
        console.log(++num);  // 12
        console.log(num);  // 12
        // ++在变量后(num++), 先将变量的值拿去使用,再自身自增1
        // ++再变量前(++num), 先将变量自身自增1, 再将结果拿去使用
        // 总结: 不管++在前在后,运算结束后,变量自身值一定自增1
    
        // res = ++num  <==>  num++; res = num
        // res = num++  <==>  res = num; ++num
    
    </script>
    <script>
        // 赋值运算符
        // = | += | -= | *= | /= | %=
        var x = 10;  // 将10的值赋值给变量x
        y = x;  // 将变量x的值传递给变量y
        console.log(y);  // 10
    
        x += 10;  // x = x + 10, 运算方式由右至左, 将x+10的结果重新复制给x
        console.log(y);  // 10, y的值虽然来源于x, 但y值只由自身控制
    
        // x /= 10  == x = x / 10
    </script>
    <script>
        // 比较运算符, 结果为Boolean类型
        // == | ===
        console.log("5" == 5);  // true, 只做值比较
        console.log("5" === 5);  // false, 比较值及类型
    
        // != | !==
        console.log("5" != 5);  // false, 只做值比较
        console.log("5" !== 5);  // true, 比较值及类型
    
    </script>
    <script>
        // 逻辑运算符, 运算结果通常为Boolean(可以不是)
        // 或 | 与 | 非 <==>  || | && | !
    
        // &&(与)
        var a = 10;
        var b = 20;
        var c = "20";
        var res = a < b && b == c;  // true
        console.log(res)
        // 总结&&: 全真为真, 有假则假
        // 总结||: 全假则假, 有真则真
        // 总结!: 真则假, 假则真
    
        // 逻辑运算符的结果本质上为表达式值
        // 表达式: 由数字,变量,运算符组成的合法式子
        res = a < b && c;
        console.log(res);
    
        res = (a = 1 || b == c);
        console.log(res);
    
        // 针对 && | ||
        // 疑问: 逻辑运算符结果可能为逻辑运算符之前表达式的值,也可能是之后表达式的值
        // 当逻辑运算符出现 短路现象 , 就是之前表达式的值, 否则(正常情形下), 就是之后表达式的值
    
        // &&, 前一个表达式为假时, 整个式子的结果已经确定为假, 后表达式不会被执行, 就是被短路了
        var num = 10;
        res = false && num++;
        console.log(res, num);  // null, 10
        res = null && ++num;
        console.log(res, num);  // null, 10
    
        // ||, 前一个表达式为真时, 整个式子的结果已经确定为真, 后表达式不会被执行, 就是被短路了
        res = -10 || ++num;
        console.log(res, num);  // -10, 10
    
        // 特殊小技巧 => 类似于if分支来使用 ***
        /* if a > b:
            print(a)
         */
        var a = 100;
        a > b && console.log("大值a:", a);
    
    
    </script>
    <script>
        // 三目运算符
        // 语法:  条件表达式 ? 表达式1 : 表达式2
        var a = 10, b = 20;
        var res = a < b ? a : b;  // 取小值
        console.log(res);
        res = a < b ? b : a;  // 取大值
        console.log(res);
    
        // 类似于if...esle...
        a < b ? console.log("表达式结果为true") : console.log("表达式结果为false")
    
    
    </script>
    <script>
        let abc = 10;
        // let abc = 20;  // 在es6语法下,有变量的重复定义规则, 不允许在同一作用域下,出现变量的重复定义
        {
            let abc = 20;  // 可以编译运行通过
        }
    
        // ES6新增
        let [a1, b1, c1] = [1, 2, 3];
        // a1=1,b2=2,c3=3
    
        let [a2, ...b2] = [1, 2, 3];
        // a2=1,b2=[2,3]
    
        let {key: a3} = {key: 10};
        // a3=10
    
        let [a4, b4, c4] = 'xyz';
        // a4='x',b4='y',c4='z'
    
        console.log("end")
    </script>
    </html>

     

    八、分支机构

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>分支结构</title>
    </head>
    <body>
        分支结构
    </body>
    <script>
        // 程序本质分为三大结构: 顺序结构 | 分支结构 if|switch | 循环结构 for|while|do...while
        // 根据程序代码执行的方式 划分为 三大结构
    
        // 逻辑运算符 => 类似于 if单分支结构
        // 三目运算符 => 类似于 if...else分支结构
    
        /* py 语法
            if 条件表达式:
                代码块;
    
           js 语法
            if (表达式) {
                代码块
            }
         */
        if (1) {
            var a = 10;
            let b = 20;
            console.log("d:%d只能在块级作用域中访问", b);
        }
        console.log("a:%d在块级作用域内外都可以访问", a);
    
        /* 全语法
            if (表达式1) {
    
            } else if () {
    
            }
            ...
            else if () {
    
            }
            else {
    
            }
         */
        /*
        if 与 if直接可以随意嵌套
         */
        var salary = prompt("请输入所发工资:");
        if (salary > 0) {
            console.log("工资已发, 打算还账!");
            salary -= 100000;
            if (salary > 0 ) {
                console.log("拯救世界...");
            } else if (salary == 0) {
                 console.log("家里蹲, 峡谷见");
            } else {
                console.log("借钱, 填窟窿, 谁来拯救我...");
                console.log("借%d元钱", -salary);
            }
        } else {
            console.log("拿我刀来, 允许你跑49m");
        }
    </script>
    <script>
        // switch分支
        /* 语法
            switch (结果为整数|字符串的表达式) {
                case 值1(值需要和表达式进行类型统一): 代码块; break;
                ...
                case 值n: 代码块; break;
                default: 代码块;
            }
         */
    
        // 用例
        var num = prompt("请输入一个自然数: ");  // 输入接收的默认为字符串类型数据
        var num = +num;
        switch (num) {
            case "0": console.log("用户输入的是数字0"); break;
            case "1": console.log("用户输入的是数字1"); break;
            case 0: console.log("change, 用户输入的是数字0"); break;
            case 1: console.log("change, 用户输入的是数字1"); break;
            default: console.log("用户输入的是数字非0和1");
        }
        // default分支, 出现在所有case之下, 当所有case没有匹配上, 走该分支,
        // 该分支也可以省略, 代表没有未匹配到的动作
    
        // switch()中的表达式结果为 整型 或 字符串, case的值要与其对应
    
        // break作用是结束分支结构(结束所属switch语句), 可以省略
    
        var month = +prompt("请输入月份");
        switch (month) {
            case 1: case 3: case 5: case 7: case 8: case 10:  case 12:
                console.log("%d月天数为31天", month); break;
            case 4: case 6: case 9: case 11:
                console.log("%d月天数为30天", month); break;
            case 2:
                console.log("%d月天数为28天", month);
        }
        
    </script>
    </html>

     

    九、循环结构

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>循环结构</title>
    </head>
    <body>
    循环结构
    </body>
    <script>
        /* 循环
        py
        while 条件表达式:
            代码块;
    
        js
        while (条件表达式) {
            代码块;
        }
         */
    
        var count = 0;
        while (count < 5) {
            console.log("我最棒, 我最帅, 我是天下第一!");
            count++;
        }
    
        // for循环
        /*
        for (循环变量定义并初始化①; 循环变量条件表达式②; 循环变量增量③) {
            代码块④;
        }
        执行顺序 ① ②④③ ... ②④③ ②, ②④③个数就是循环次数
         */
    
        for (var i = 0; i < 5; i++) {
            console.log("我最棒, 我最帅, 我是天下第一!");
        }
    
        // 所有for循环可以解决的问题, 都可以由while来解决
        // while循环可以解决不明确循环次数的循环需求
    
        // break: 结束当前所属循环体
        // continue: 结束本次循环,进入下一次循环
    
        for (var i = 0; i < 5; i++) {
            if (i == 3) break;
            console.log(i);  // 0, 1, 2
        }
        for (var i = 0; i < 5; i++) {
            if (i == 3) continue;
            console.log(i);  // 0, 1, 2, 4
        }
    
        // do...while循环
        // 无论条件是否满足, 都需要执行一次循环体 (循环体只是要被执行一次)
        var num = 0;
        do {
            console.log("我最棒, 我最帅, 我是天下第一!");
            num++;
        } while (num < 5);  // 当条件满足时, 返回循环体
    
    
    
    </script>
    </html>

     

    十、异常处理

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>异常处理</title>
    </head>
    <body>
    异常处理
    </body>
    <script>
        // 了解
        let num = 10;
        try {
            console.log(num);  // try...catch捕获的是runtime时的异常
            let num = 20;
        } catch (e) {
            console.log(e)  // catch为处理异常的分支
        } finally {
            console.log('无论是否出现异常,该分支都会被执行')
        }
    </script>
    <script>
        console.log(num)
    </script>
    </html>

     

    十一、函数

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>函数</title>
    </head>
    <body>
    函数
    </body>
    <script>
        // 什么函数: 具有特定功能的代码块
    
        // 函数与方法: 调用方式的不同 函数通过函数名 | 方法通过调用者.语法调用
    
        // 如何定义函数:
        /*
        function 函数名(参数列表) {
            函数体;
            (函数体可以包含函数的返回值)
        }
        */
    
        // 函数的调用: 函数名(参数列表)
        //      函数的调用()一定不可以省略, 参数列表看情况(不管需不需要,均可以传或不传)
        // 函数的分类:
        // 无参函数:
        function fn1() {
            console.log("无参函数")
        }
        fn1();
        // 有参函数:
        function fn2(a, b) {
            console.log("a,b的和:", a + b)
        }
        fn2(10, 20);
        // 匿名函数:
        var fn3 = function () {
            // 匿名函数虽然没有名字, 但会开辟内存空间, 所以当然可以用一个变量来指向这个内存空间
            console.log("没有直接定义名字的函数");
        };
        fn3();  // 系统不好在()()之间添加;作为语句结束,需要添加分号时一定需要手动添加
        fn4 = fn3;
        fn4();
    
        // 匿名函数的自调用
        (function () {
            // 定义一个匿名函数, 至少需要使用一次, 使用一次的方式就叫做 匿名函数的自调用
            // 如果匿名函数不存在任何使用, 编译就无法通过
            // 匿名函数的自调用:
            //      1.将整个匿名函数作为一个整体, 用()将其包裹
            //      2.并完成函数的调用, 添加 (参数列表)
            console.log(" 匿名函数的自调用");
        })();
    
        // 函数的参数:
        function func1() {
            console.log("无参");
        }
        // 均可以调用
        func1();
        func1(10, 20);
    
        function func2(a, b) {
            console.log(">>>", a + b);
        }
        func2()
        func2(10)
        func2(10, 20)
        func2(10, 20, 30)
    
        // 默认值参数
        function func3(a, b=20, c, d=40) {  // 定义在函数声明中的参数为形参
            console.log("***", a + b + c + d);
        }
        var temp = 1000;
        func3(10, 100, temp)  // 函数调用传入的实际值,或拥有实际值的变量为实参
    
        // 函数的返回值:
        // js的函数只能返回一个值, 这个值可以为任意类型(如果想返回多个值,将多个值放到数组或对象中)
        let func4 = () => {
            // return 1000, 8888, 6666;  // 这种情况返回的是最后一个值
            return [1000, 8888, 6666];
        };
        console.log(func4())
    
        // 函数的嵌套(定义 | 调用)
    </script>
    
    <!-- 一个人写的js -->
    <script>
        // 为什么要出现匿名函数的自调用
        (function () {  // 为了生成一个局部作用域
            var num = 10;
        })();
    
        function abc() {
            var abc = 20;
            console.log(abc)
        }
    </script>
    <!-- 另一个人写的js -->
    <script>
        // console.log(num);
        abc()
    </script>
    
    <script>
        // 函数的定义
        (function () {
            // 匿名函数定义并调用
        })()
        
        // ES5
        function fun1() {
            
        }
        var fun2 = function () {
    
        };
        // ES6
        let fun3 = () => {
            
        }
    
        // 函数的调用
        // 函数名(参数列表)
    </script>
    <script>
        // 函数的参数:
        // 1.实参与形参个数可以不匹配,随意规定
        // 2.形参可以设置默认值(并非为py中的关键字参数)
        // 3.实参对形参进行传值时,完全采用位置匹配(eg:第n个实参一定将值传递给第n个形参)
    </script>
    <script>
        // 函数的返回值:
        // 1.函数的返回值有return来明确,没有明确,则相当于返回undefined
        // 2.函数只能返回一个值
        // 3.函数的返回值就是函数的执行结果,也就是函数值
    </script>
    </html>
  • 相关阅读:
    用MFC(C++)实现拼音搜索
    MFC里ON_COMMAND_RANGE消息映射的ID问题
    01:MFC应用程序编程
    MFC笔记(DN)
    linuxmint系统定制与配置(2)-输入法
    linuxmint系统定制与配置(3)-字体
    linuxmint系统定制与配置(1)-系统初始配置
    笔记-读官方Git教程(2)~安装与配置
    笔记-读官方Git教程(1)~认识Git
    Python中多层List展平为一层
  • 原文地址:https://www.cnblogs.com/wuzhengzheng/p/10273551.html
Copyright © 2011-2022 走看看