js引入方式、变量与常量的声明与使用方式、函数与高阶函数，实例演示、实例演示函数的参数及归并参数、箭头函数的语法与使用场景、立即执行函数的语法与使用方式，实例演示 - HTML前端学习

首页 > 博客列表 > js引入方式、变量与常量的声明与使用方式、函数与高阶函数，实例演示、实例演示函数的参数及归并参数、箭头函数的语法与使用场景、立即执行函数的语法与使用方式，实例演示

博主信息

博文 11

粉丝 0

访问量 9921

专题推荐

更多>

js引入方式

引入方式效果图

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS的引入方式</title>
</head>
<body>
    <!-- 外部鸡屎代码 -->
    <!-- function FsayHello(content) {
    document.write(content + "<br>");
    } -->
    <!-- JS外部引用方式 -->
    <script src="jswb.js"></script>
    <script>
        FsayHello('今日系鱼人节，兄弟姐妹们收好你地条尾啦~~');
    </script>
    <!-- JS内部引用方式 -->
    <script>
        document.write('万一被人踩到，就扑街咯~~~</br>')
        console.log('学个鸡屎学到头晕、身庆')
    </script>
    <!-- 属性事件方式 -->
    <button onclick="alert('学鸡屎的难度系数：\n 五颗星！！！')">收到</button>
</body>
</html>

变量与常量的声明与使用方式

命名方式;
1) 由字母，数字，下划线，$组成，禁止数字开头.
2) 严格区分大小写.
3) 不能使用系统关键字和保留字
命名方案;
1) 驼峰式【推荐使用】:userName;
2) 帕斯卡式【大驼峰】:UserName 常应用与类及构造函数
3) 蛇形式：user_name
4) 匈牙利式：oBtn 将数据类型放在变量最前面 aNmubers
常量的值不允许被修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量与常量的使用方式</title>
</head>
<body>
    <!-- 命名方式;
    由字母，数字，下划线，$组成，禁止数字开头，严格区分大小写 ，不能使用系统关键字和保留字
    命名方案;
    驼峰式【推荐使用】:userName;
    帕斯卡式【大驼峰】:UserName 常应用与类及构造函数
    蛇形式：user_name
    匈牙利式：oBtn 将数据类型放在变量最前面 aNmubers -->
    <script>
        let a = 1;
        let A = 2;
        // 以上两个变量是不同的
        // 判断变量是否为数组使用命令:Array.isArray(变量)返回值为布尔型true,false;
        // 变量的数据类型:
        // 1.原始类型：数值，字符串，布尔
        // boolean[布尔型]\null[空值]\number[数值]\string[字符串]\undefined[未定义]\
        //   typeof 变量 ，可以查看变量的类型
        let price = 999;
        console.log(price, typeof price);
        let userName = "php";
        console.log(userName, typeof userName);
        //    把变量赋值为null即可
        userName = null;
        // 将原始值以某种规则进行组合，就构成了复合类型;
        // 引用类型（对象）：对象(Object),数组（array），函数(function)
        // 函数允许添加属性或方法
        // 生成一个字符串
        let str = new String('hello word');
        // console.log(str);
        // 拿到字符串的原始值
        console.log(str.valueOf());
        let sum = 200;
        sun = sum++ + ++sum;
        console.log(sum);
        // 为什么会等于202呢？
        // 下面解析说明一下
        let sum1 = 10;
        document.write(sum1++, ",", sum1, "<br>")
        // 第一个sum1++这个时候输出仍为10 ,后面的sum1才得到自增后的结果
        document.write(++sum1, ",", sum1)
        // 第一个sum1++这个时候输出为12，再11的基础上自增了1并赋值给了自己
        // 所以 上面的sum算式理解为 200 +（201+1）=202
        // 常量的值不允许被修改
        const myName = "Tigon";
    </script>
</body>
</html>

函数与高阶函数，函数参数，归并参数、箭头函数的语法与使用场景、执行函数的语法与使用方式实例演示

代码区

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数与高阶函数</title>
</head>
<body>
    <!-- 函数允许重写 -->
    <script>
        console.log(sum(50));
        function sum(num) {
            let m = 0;
            for (let i = 0; i <= num; i++) {
                m += i;
            }
            return m;
        }
        // 如果不希望函数提升，必须先声明再使用，可以使用匿名函数
        // 通过变量或者常量来引用这个函数
        let sum1 = function (num) {
            let m = 0;
            for (let i = 0; i <= num; i++) {
                m += i;
            }
            return m;
        }
        console.log(sum1(50));
        // ...归并参数，rest语法，将所有参数压到一个数组中来简化参数的获取过程
        let sum2 = function (...arr) {
            let k = 0;
            for (let index = 0; index < arr.length; index++) {
                k += arr[index];
            }
            return k;
        }
        console.log(sum2(1, 2, 3, 4));
        let sum3 = function (...arr) {
            // reduce 计算数组所有内容求和
            return arr.reduce((p, c) => p + c);
        }
        console.log(sum3(1, 2, 3, 4));
        //返回多个值的办法,用数组或者对象返回 
        function getuser() {
            return { id: 1, name: "php", email: "php@qq.com" };
        }
        console.table(getuser());
        // 高阶函数：使用函数为参数或者将函数做为返回值的函数 
        // 函数作为参数传参的就是回调函数
        // 1.回调函数
        document.addEventListener("click", function () {
            alert("大家晚上好");
        });
        // 2.偏函数
        let sum4 = function (a, b) {
            return function (c, d) {
                return a + b + c + d;
            }
        }
        let f1 = sum4(1, 2);
        console.log(f1(3, 4));
        // 进一步优化,柯里化
        sum4 = function (a) {
            return function (b) {
                return function (c) {
                    return function (d) {
                        return a + b + c + d;
                    }
                }
            }
        }
        let res = sum4(1)(2)(3)(4);
        console.log(res);
        // 纯函数，没有引入外部变量的，如果引入了就不是纯函数了
        let ccc = 100;
        function add(a, b) {
            return a + b + c;
            // 这里去掉C就是纯函数了
        }
        // 箭头函数
        let sum5 = function (a, b) {
            return a + b;
        }
        // 简化  匿名函数可以使用箭头函数来简化它
        sum5 = (a, b) => {
            return a + b;
        }
        console.log(sum5(10, 20));
        // 可以再次简化， 如果箭头函数的代码体只有一行语句，可以删除大括号，同时return也要去掉,因为自动了return功能
        sum5 = (a, b) => a + b;
        //如果只有一个参数的时候参数的括号也可以去掉，不过不建议去掉，容易搞混
        console.log(sum5(20, 20));
        // 立即置行函数(这里放函数)(这里放参数)  --IIFE
        (function add2(a, b) {
            console.log(a + b);
        })(100, 200);
        // 因为是立即调用的关系可去掉函数名
        function (a, b) {
            console.log(a + b);
        }) (100, 200);
    </script>
</body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

vscode安装及插件使用等

2021-03-19 22:14:33