前端技术栈es6+promise

news2024/12/23 12:32:27

let入门使用、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let 基本使用</title>
    <script type="text/javascript">

        let name = "hspedu教育";
        //老韩解读
        //1. console.log("name=", name); //使用, 可以输出对象的完整信息
        // 使用+, 字符串的拼接, 如果name是一个对象, 会输出object, 而不会输出对象的完整信息
        //2. console.log("name="+ name);
        console.log("name=", name);

    </script>
</head>
<body>

</body>
</html>

const常量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>const常量/只读变量的使用</title>
    <script type="text/javascript">

        //const 基本使用 => 想一想java基础[语言语法很多是相通]

        /**
         老韩解读
         1. 常量在定义时,需要赋值
         2. 常量赋值后不能修改
         */
        //常量
        const PI = 3.14;
        //invalid assignment to const 'PI'
        //PI = 3.1415926;
        console.log("PI=", PI)


    </script>
</head>
<body>

</body>
</html>

声明对象·

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>声明对象的简写方式</title>
    <script type="text/javascript">
        const age = 800;
        const name = "牛魔王";
        // 传统 声明/定义对象
        let monster = {name: name, age: age};
        // ES6 声明/定义对象
        //老师解读
        //1. {name, age} : 表示对象的属性名是name和age
        //2. 属性name的值是从变量/常量 name来的
        let monster02 = {name, age};
        console.log("monster02=>", monster02);
    </script>
</head>
<body>

</body>
</html>

模板字符串的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板字符串的使用</title>
    <script type="text/javascript">
        //1、字符串,换行会原生输出
        let str1 = `for(int i = 0;i < 10;i++){
            System.out.println("i="+i);
        }`;
        console.log("str1=", str1);
        //2. 字符串插入变量和表达式。变量名写在 ${} 中,${} 中可以放入 JavaScript 表达式。
        let name = "hspedu教育";
        //老师解读
        //(1) 当解析 ${name}, 就找最近的name遍历, 进行替换
        //(2) 然后可以得到最后解析的字符串
        let str2 = `教育名称=${name}`;
        let str3 = `1+2=${1 + 2}`;
        let n1 = 80;
        let n2 = 20;
        let str4 = `${n1}+${n2}=${n1 + n2}`;
        console.log("str2=", str2);
        console.log("str3=", str3);
        console.log("str4=", str4);
        //3. 字符串中调用函数

        function sayHi(name) {
            return "hi " + name;
        }

        let name2 = "tom";
        let str5 = `sayHi() 返回的结果是=${sayHi('jack')}`;
        let str6 = `sayHi() 返回的结果是=${sayHi(name2)}`;
        console.log("str5=", str5);
        console.log("str6=", str6);
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

对象方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象方法的简写形式</title>
    <script type="text/javascript">
        // 传统-对象方法定义
        let monster = {
            name: "红孩儿",
            age: 100,
            sayHi: function () {
                console.log("信息: name=", this.name, " age=", this.age);
            }
        }
        monster.f10 = function () {
          console.log("哈哈");
        };
        monster.sayHi();
        monster.f10();
        // ES6-对象方法定义
        let monster2 = {
            name: "红孩儿~",
            age: 900,
            sayHi() {
                console.log("信息: name=", this.name, " age=", this.age);
            },
            f1() {
                console.log("f1()");
            }
        }
        monster2.sayHi();
        monster2.f1();

    </script>
</head>
<body>

</body>
</html>

对象运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象运算符的扩展</title>
    <script type="text/javascript">
        let cat = {name: "小花猫", age: 2};
        // let cat2 = cat;
        // cat2.name = "大花猫";
        // console.log("cat=>", cat);
        // console.log("cat2=>", cat2);//
        // 拷贝对象(深拷贝)
        let cat2 = {...cat};
        cat2.name = "中花猫";
        console.log("cat=>", cat);//小花猫
        console.log("cat2=>", cat2);//中花猫

        // 合并对象[深拷贝]
        let monster = {name: "白骨精", age: 100};
        let car = {brand: "奔驰", price: 800000};
        let monster_car = {...monster, ...car}
        monster_car.name = "狐狸精";
        console.log("monster=>", monster);
        console.log("monster_car=>", monster_car);

    </script>
</head>
<body>

</body>
</html>

对象解构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象解构</title>
    <script type="text/javascript">

        //对象解构
        /**
         * let monster = {name: '牛魔王', age: 800}
         * 细节说明
         * 1. 对象解构时,let{name, age} 中的 name 和 age 名称需要和对象属性名保持一致
         * 2. 也可解构对象部分属性,比如 let{age} 这样就只取出age 属性
         * 3. 还有其它的形式,比如方法上使用对象解构
         */
            //monster是一个对象
        let monster = {name: '牛魔王', age: 800};
        //传统方式取出属性-解构 对象名.属性名
        console.log(monster.name, " ", monster.age);

        //ES6对象解构
        //老韩解读
        //1. 把monster对象的属性, 赋值给{name,age}
        //2. {name,age} 的取名name 和 age 要和monster对象的属性名保持一致
        //3. 使用{} 包括, 不要使用[]
        //4. {name,age} 顺序是无所谓
        let {name, age} = monster;
        console.log("========================");
        console.log("name=", name, " age=", age);

        //下面这个写法也可以
        //let {name, age} = {name: '牛魔王', age: 800};

        //还有其它的形式,比如方法上使用对象解构
        //如果这样使用,仍然要保证名称和对象的属性名一致
        function f1({name, age}) {

            console.log("f1-name=", name, " ", "f1-age=", age)
        }

        f1(monster);

    </script>
</head>
<body>

</body>
</html>

let细节

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let 使用注意事项和细节</title>
    <script type="text/javascript">


        // let 细节1
        // (1) let 声明的变量, 在代码块中,则作用域在代码块中
        // (2) var声明的变量, 在代码块中,作用域没有限制
        {
            var name = "韩顺平教育";
            let job = "java工程师";
            console.log("name=", name);
            console.log("job=", job);
        }

        console.log("name=", name);
        //console.log("job=", job);//job is not defined

        // let 细节2
        // 1. var 可以声明多次
        // 2. let 只能声明一次
        var num1 = 100;
        var num1 = 200;
        console.log(num1);
        let num2 = 600;
        //Syntax => 语法
        //let num2 = 900;//Uncaught SyntaxError: redeclaration of let num2

        console.log(num2);

        // let 细节3
        // 1. let 不存在变量提升
        // 2. var 存在变量提升

        console.log("x=", x);//undefined
        var x = "tom";

        //can't access lexical declaration 'z'
        console.log("z=", z);
        let  z = "mary";


    </script>
</head>
<body>

</body>
</html>

数组赋值解构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组解构赋值</title>
    <script type="text/javascript">

        let arr = [1, 2, 3];
        //如果要看某个变量的类型
        console.log("arr=>", arr);
        //数组解构[取出元素]
        //1.传统
        let x = arr[0], y = arr[1], z = arr[2];
        console.log(x, y, z);
        //2. ES6风格
        let [a, b, c] = arr;
        console.log("==================================");
        console.log(a, b, c);

        let [num1, num2, num3] = [100, 200, 300];
        console.log(num1, num2, num3);

    </script>
</head>
<body>

</body>
</html>

箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数的使用</title>
    <script type="text/javascript">
        // 传统定义函数
        var f1 = function (n) {
            return n * 2
        }
        console.log("传统= " + f1(2))
        // ES6 , 箭头函数使用

        let f2 = (n) => {
            return n * 2;
        }
        console.log("f2() 结果= ", f2(100));//200
        //上面的es6 函数写法,还可以简化
        let f3 = n => n * 3;
        console.log("f3() 结果=", f3(100));//300

        //函数也可以传给一个变量=> 看看java基础匿名内部类
        function hi(f4) {
            console.log(f4(900));
        }
        hi((n) => {
            return n + 100
        });
        hi((n) => {
            return n - 100
        });


    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

箭头函数2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数使用案例2</title>
    <script type="text/javascript">
        // 传统
        var f1 = function (n, m) {
            var res = 0
            for (var i = n; i <= m; i++) {
                res += i
            }
            return res
        }
        console.log("传统= " + f1(1, 10))
        // ES6 , 箭头函数使用
        let f2 = (n, m) => {
            var res = 0
            for (var i = n; i <= m; i++) {
                res += i
            }
            return res
        };
        console.log(f2(1, 10));
    </script>
</head>
<body>

</body>
</html>

箭头函数与对象解构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数+对象解构</title>
    <script type="text/javascript">
        const monster = {
            name: "红孩儿",
            age: 1000,
            skill: ['红缨枪', '三位真火']
        }
        //要求:在方法形参取出monster对象的skill属性
        //传统方式

        function f1(monster) {
            console.log("skill=", monster.skill);
        }

        f1(monster);

        //箭头函数

        let f2 = ({skill}) => {
            console.log("skill=", skill);
        }
        //老韩解读
        //1. f2 传入对象 monster
        //2. f2形参是 {skill} , 所以es6的对象解构特性, 会把monster对象的 skill属性赋给
        //   skill
        //3. 对象解构的前提就是 {skill}的skill 和 monster的 skill属性是一致
        f2(monster);

        //箭头函数+解构, 注意有{}, skill 名称需要和对象属性名一致.
        let f3 = ({age, name, skill}) => {
            console.log("skill=", skill, " age=", age, " name=", name);
        }

        f3(monster);


    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

作业1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 给你一个对象let cat = {name: 'jack', age: 10}; 要求使用模板字符串显示cat的信息
        let cat = {name: 'jack', age: 10};
        let str = `cat的信息为 name=${cat.name} age=${cat.age}`;
        console.log(str);
    </script>
</head>
<body>

</body>
</html>

作业2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        //看下面的代码, 请问输出什么, 并分析原因
        let dog = {name: "大黄", age: 3};

        //老师分析
        //1. 使用对象解构
        //2. namex  undefined
        //3. age 3
        let {namex, age} = dog;
        console.log("namex=", namex, " age=", age);
    </script>
</head>
<body>

</body>
</html>

作业3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //根据给出的数据, 用ES6的方式, 构建对象person, 并提供方法(用最简洁的方式), 可以输出信息
        const name = "周星驰";
        const job = "演员";
        let person = {
            name,
            job,
            show() {
                console.log("person信息 name=", this.name, " job=", this.job);
            }
        }
        person.show();
    </script>
</head>
<body>

</body>
</html>

作业4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //根据给出的数据, 用ES6的方式, 编写方法, 使用对象解构的方式, 得到 oper 和 arr, 并根据oper的值 , oper可以是+、-、*、/  来计算结果
        var cal = {
            oper: "/",
            arr: [1, 2, 3, 5]
        }

        function f1({oper, arr}) {
            let res = 0;//初始化的值,要分析考虑
            //这里小伙伴们可以考虑arr的传入,并且做分析
            //判断arr 是不是null, 并且arr.length <=1 , 就直接返回arr[0]
            if ("+" == oper) {
                res = arr[0];
                for (let i = 1; i < arr.length; i++) {
                    res += arr[i];
                }
            } else if ("-" == oper) {
                res = arr[0];
                for (let i = 1; i < arr.length; i++) {
                    res -= arr[i];
                }
            } else if ("*" == oper) {
                res = arr[0];
                for (let i = 1; i < arr.length; i++) {
                    res *= arr[i];
                }
            } else if ("/" == oper) {
                res = arr[0];
                for (let i = 1; i < arr.length; i++) {
                    res /= arr[i];
                }
            } else {
                console.log("oper输入不正确..")
            }
            return res;
        }

        console.log("f1运算的结果=", f1(cal))
    </script>
</head>
<body>

</body>
</html>

作业5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        //调用f8 函数, arr是数组, fun传入箭头函数, 可以计算 arr的和, 并写出调用方法
        function f8(arr, fun) {
            console.log(fun(arr));//调用模板
        }

        f8([1, 2, 3, 4, 5], (arr) => {
            let res = 0;
            for (let i = 0; i < arr.length; i++) {
                res += arr[i];
            }
            return res;
        })
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/882693.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

字符函数、数值函数、日期时间函数、聚集函数、判断函数、运算符号、排序、分组、过滤、分页、插入表记录、更新表记录、删除表记录

Top NSD DBA DAY02 案例1&#xff1a;常用函数案例2&#xff1a;查询结果处理案例3&#xff1a;管理表记录 1 案例1&#xff1a;常用函数 1.1 问题 练习字符函数练习数学函数练习日期函数练习聚集函数练习数学计算练习if函数练习case函数 1.2 方案 函数&#xff1a;MySQL…

将树莓派转身为强大的Web服务器:使用Nginx和cpolar实现远程访问

文章目录 1. Nginx安装2. 安装cpolar3.配置域名访问Nginx4. 固定域名访问5. 配置静态站点 安装 Nginx&#xff08;发音为“engine-x”&#xff09;可以将您的树莓派变成一个强大的 Web 服务器&#xff0c;可以用于托管网站或 Web 应用程序。相比其他 Web 服务器&#xff0c;Ngi…

【Python】使用python解析普通格式的报文为someip格式报文

文章目录 1.安装scapy库2.示例 1.安装scapy库 使用 pip 安装 scapy 第三方库&#xff0c;打开 cmd&#xff0c;输入以下命令&#xff1a; pip install scapy出现如图所示&#xff0c;表示安装成功&#xff1a; 2.示例 要解析someip格式报文&#xff0c;需要导入someip模块&a…

《Rethinking the Expressive Power of GNNs via Graph Biconnectivity》阅读笔记

一.文章概述 现如今存在许多工作探索GNN的表达能力&#xff0c;然而对于其中大多数方法&#xff0c;仍然缺乏对它们可以系统地和可证明地获取哪些额外表达力的深刻理解。在本文中&#xff0c;作者通过图双连通性&#xff08;biconnectivity&#xff09;引入一类新的表达能力度…

Java并发编程(七)实践[生产者-消费者]

生产者-消费者 概述 生产者消费者问题&#xff0c;也称有限缓冲问题&#xff0c;是一个多线程同步问题的经典案例。该问题描述了共享固定大小缓冲区的两个线程在多线程开发中,如果生产者(生产数据的线程)处理速度很快,而消费者(消费数据的线程)处理速度很慢,那么生产者就必须…

CMake生成的VS项目之后运行弹出错误框:无法启动...\Debug\~.exe,找不到指定的文件夹

问题&#xff1a; CMake生成的VS项目之后运行弹出错误框&#xff1a;无法启动…\Debug~.exe&#xff0c;找不到指定的文件夹 首先确实Debug文件夹中没有.exe文件 问题的根本是项目缺东西&#xff0c;有问题&#xff0c;当所有问题解决了&#xff0c;也就不会出现这个问题的&am…

【Mariadb高可用MHA】

目录 一、概述 1.概念 2.组成 3.特点 4.工作原理 二、案例介绍 1.192.168.42.3 2.192.168.42.4 3.192.168.42.5 4.192.168.42.6 三、实际构建MHA 1.ssh免密登录 1.1 所有节点配置hosts 1.2 192.168.42.3 1.3 192.168.42.4 1.4 192.168.42.5 1.5 192.168.42.6 …

02-C++数据类型-高级

数据类型-高级 4、复合类型 4.4、结构简介 struct inflatable {char name[20];float vol;double price; };inflatable vincent; //C struct inflatable goose; //C例子 // structur.cpp -- a simple structure #include <iostream> struct inflatable // structu…

【数据库系统】--【2】DBMS架构

DBMS架构 01DBMS架构概述02 DBMS的物理架构03 DBMS的运行和数据架构DBMS的运行架构DBMS的数据架构PostgreSQL的体系结构RMDB的运行架构 04DBMS的逻辑和开发架构DBMS的层次结构DBMS的开发架构DBMS的代码架构 05小结 01DBMS架构概述 02 DBMS的物理架构 数据库系统的体系结构 数据…

(二)结构型模式:5、装饰器模式(Decorator Pattern)(C++实例)

目录 1、装饰器模式&#xff08;Decorator Pattern&#xff09;含义 2、装饰器模式的UML图学习 3、装饰器模式的应用场景 4、装饰器模式的优缺点 5、C实现装饰器模式的简单实例 1、装饰器模式&#xff08;Decorator Pattern&#xff09;含义 装饰模式&#xff08;Decorato…

学习 Iterator 迭代器

今天看到一个面试题&#xff0c; 让下面解构赋值成立。 let [a,b] {a:1,b:2} 如果我们直接在浏览器输出这行代码&#xff0c;会直接报错&#xff0c;说是 {a:1,b:2} 不能迭代。 看了es6文档后&#xff0c;具有迭代器的就一下几种类型&#xff0c;没有Object类型&#xff0c;…

探索Java中的静态变量与实例变量:存储区域、生命周期以及内存分配方式的区别

文章目录 静态变量实例变量不可变对象静态变量和实例变量有什么区别&#xff1f;静态变量实例变量 Object 类都有哪些公共方法&#xff1f;Java 创建对象有哪几种方式&#xff1f;ab 与 a.equals(b) 有什么区别&#xff1f;总结 &#x1f389;欢迎来到Java面试技巧专栏~探索Jav…

Nacos详解(springcloud+nacos实战)

Nacos详解 Nacos1.介绍2.Nacos专业术语2.1 服务 (Service)2.2 服务注册中心 (Service Registry)2.3服务提供方 (Service Provider)2.4服务消费方 (Service Consumer)2.5版本依赖关系 Nacos 注册中心1. 启动NacosServer2 使用 Nacos 做注册中心2.1 nacos-client-b2.2 nacos-clie…

部门用户权限应用的设计和创建(进行中)

数据库表设计 代码实现之前首先是表设计&#xff0c; 六个基本步骤 1.需求分析 (分析用户需求,包括数据、功能和性能需求&#xff09; 2.概念结构设计(主要采用 E-R图) 3.逻辑结构设计 (将ER图转换成表,实现从E-R模型到关系模型转换&#xff09; 4.数据库物理设计 (为设计的…

深度学习的“前世今生”

1、“感知机”的诞生 20世纪50年代&#xff0c;人工智能派生出了这样两个学派&#xff0c;分别是“符号学派”及“连接学派”。前者的领军学者有Marvin Minsky及John McCarthy&#xff0c;后者则是由Frank Rosenblatt所领导。 符号学派的人相信对机器从头编程&#xff0c;一个…

Vue-5.编译器idea

关闭 IDEA 自动更新 IDEA无法搜索插件 填写idea下载插件的官方地址点击ok测试成功则ok https://plugins.jetbrains.com/idea 全局内存配置&#xff08;重启后生效&#xff09; 部署 Alibaba Cloud toolkit&#xff08;部署代码的利器&#xff09; Git&#xff08;需要安装gi…

人工智能原理(4)

目录 一、确定性推理 1、推理方式 2、控制策略 二、推理的逻辑基础 1、永真和可满足性 2、等价性和永真蕴含 3、置换与合一 三、自然演绎推理 四、归结演绎推理 1、子句型 2、鲁滨逊归结原理 3、归结策略 一、确定性推理 推理&#xff1a;就是按照某种策略从已有事…

微机原理与接口技术 学习笔记(二) 存储器

文章目录 一&#xff0c;存储器1.1 概述1.1.1 半导体存储器的分类按制造工艺&#xff1a; 易失性或挥发性存储器 / 不易失性或不挥发性存储器按制造工艺&#xff1a; 1.1.2 半导体存储器的性能指标1.1.3 半导体存储器的一般结构及组成 1.2 随机存取存储器 RAM1.2.1 静态RAM1.2.…

操作符和表达式求值

目录 1.运算符的优先级和结合性 1.1运算符的优先级 1.2结合性 2.操作符的使用最终带来的是一个表达式的值 2.1.隐式类型转换&#xff08;整型提升&#xff09; 2.1.1整形提升的例子 2.2算术转换 1.运算符的优先级和结合性 运算符是编程语言中的基本元素之一&#xff0c;主…

临床试验三原则-对照、重复、随机

临床试验必须遵循三个基本原则&#xff1a;对照、重复、随机。 一、对照原则和对照的设置 核心观点&#xff1a;有比较才有鉴别。 对照组和试验组同质可比。 三臂试验 安慰剂&#xff1a;试验组&#xff1a;阳性对照组1&#xff1a;n&#xff1a;m&#xff08;n≥m&#xff…