第一次提交

chenzhengqingzzz · Jun 22, 2023 · 7582823 · 7582823
commit 7582823
Show file tree

Hide file tree

Showing 1,381 changed files with 211,023 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/react-course（1）.zip b/react-course（1）.zip
diff --git a/react-course（1）/01_基础知识复习/01_变量.html b/react-course（1）/01_基础知识复习/01_变量.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <title>变量</title>
+    <script>
+        /*
+        *   var
+        *       - 没有块级作用域
+        *   let
+        *       - 有块级作用域
+        *   const
+        *       - 和let类似，具有块级作用域，但是它只能赋值一次
+        *       - 使用场景：
+        *           1. 对于一些常量可以使用const声明
+        *           2. 对于一些对象（函数）也可以使用const声明
+        *                  这样可以避免对象（函数）被意外修改
+        * */
+        {
+            let a = 10;
+        }
+
+        // console.log(a);
+
+        for(let i=0; i<5; i++){
+            console.log('循环内部-->', i);
+        }
+
+        // console.log('循环外部-->', i);
+
+        (function (){
+            if(false){
+                var b = 33;
+            }
+        })();
+
+
+        if(false){
+            let b = 33;
+        }
+
+        // console.log(b);
+
+        const c = 44;
+        // c = 'hello';
+
+        const PI = 3.14;
+
+
+        // console.log(c);
+
+        const obj = {name:'孙悟空'};
+        obj.age = 18;
+
+        const fn = function (){
+
+        };
+
+        console.log(obj.age);
+
+    </script>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/react-course（1）/01_基础知识复习/02_解构赋值.html b/react-course（1）/01_基础知识复习/02_解构赋值.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <title>解构赋值</title>
+    <script>
+
+        // let a, b;
+        let arr = ['孙悟空', '猪八戒'];
+
+        /*
+
+        a = arr[0];
+        b = arr[1];
+
+        */
+
+        // [a, b] = arr;
+
+        // const [a, b] = arr;
+
+
+        function fn() {
+            return ['沙和尚', '唐僧'];
+        }
+
+        // const [a, b] = fn();
+
+        arr = ['孙悟空', '猪八戒', '沙和尚', '唐僧'];
+        // const [a, b, ,c] = arr; // 可以跳过元素
+        // const [a, b, ...c ] = arr; // ...变量，会接收后边所有的元素
+        // console.log('a='+a, 'b='+b, 'c='+c);
+
+        const obj = {
+            name: '孙悟空',
+            age: 18,
+            gender: '男'
+        };
+
+        let a, b, c;
+
+        // ({name:a, age:b, gender:c} = obj); // 将name赋值给a，age赋值给b，gender赋值给c
+
+        const {name, gender, age} = obj; // 如果变量名和属性名一致，则可以只写一个
+
+        // console.log(a, b, c);
+        // console.log(name, age, gender);
+
+        // 利用数组的解构来交换两个变量的位置
+        a = 10;
+        b = 20;
+
+        [a, b] = [b, a]; // 交换变量a和b的位置
+
+        arr = [1, 3, 2];
+        [arr[1], arr[2]] = [arr[2], arr[1]]; // 交换数组中两个元素的位置
+
+        // console.log('a =', a);
+        // console.log('b =', b);
+        console.log(arr);
+
+
+    </script>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/react-course（1）/01_基础知识复习/03_展开.html b/react-course（1）/01_基础知识复习/03_展开.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <title>展开</title>
+    <script>
+
+        /*
+        *   可以通过 ... 展开一个数组
+        * */
+
+        function fn(a, b, c) {
+            return a + b + c;
+        }
+
+        const arr = [1, 2, 3];
+
+        // 计算数组中三个数字的和
+        let result = fn(...arr);
+        // console.log(result);
+
+        // const arr2 = [...arr]; // 相当于将arr浅复制给arr2
+        const arr2 = [7, 8, 9, ...arr, 4, 5, 6];
+
+        // console.log(arr2);
+
+        const obj = {
+            name: '孙悟空',
+            age: 18,
+            gender: '男'
+        };
+
+        // const obj2 = {...obj}; // 将obj在新的对象中展开，相当于浅复制
+        const obj2 = {address: '花果山', ...obj, name: '猪八戒',};
+
+        console.log(obj2);
+
+    </script>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/react-course（1）/01_基础知识复习/04_箭头函数.html b/react-course（1）/01_基础知识复习/04_箭头函数.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <title>箭头函数</title>
+    <script>
+
+        /*
+        *   箭头函数
+        *       - 只有一个参数的函数
+        *           参数 => 返回值
+        *       - 如果没有参数，或多个参数，参数需要使用()括起来
+        *           () => 返回值
+        *           (a, b, c) => 返回值
+        *       - 箭头后边的值就是函数的返回值
+        *           - 返回值必须是一个表达式（有值的语句）
+        *           - 如果返回值是对象，必须加()
+        *       - 如果需要在箭头函数中定义逻辑，可以直接在箭头后跟一个代码块，
+        *           代码块中语法和普通函数没有区别
+        * */
+
+        const fn = function (a){
+            return 'hello';
+        };
+
+        const fn2 = a => a+'hello';
+        const fn3 = (a, b) => a+'hello';
+
+        // console.log(fn2(123));
+
+        const sum = (a, b) => a + b;
+        let result = sum(123, 456);
+
+        const fn4 = (a, b) => {
+          if(a === 10){
+              a += 5;
+          }else if(a === 20){
+              a += 10;
+          }
+          return a + b;
+        };
+
+        result = fn4(10, 5);
+
+        console.log(result);
+
+
+    </script>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/react-course（1）/01_基础知识复习/05_箭头函数.html b/react-course（1）/01_基础知识复习/05_箭头函数.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <title>箭头函数</title>
+    <script>
+
+        /*
+        *   1.箭头函数中没有arguments
+        *   2.箭头函数中没有自己的this
+        *       - 它的this总是外层作用域的this
+        *   3.箭头函数中的this无法通过call()、apply()、bind()修改
+        *   4.箭头函数无法作为构造函数使用
+        *
+        * */
+
+        function fn(a, b, ...args){
+            // arguments用来保存函数的实参
+            // console.log(arguments.length);
+            console.log(args);
+        }
+
+        const fn2 = (...args)=>{
+            console.log(args);
+        };
+
+        const fn3 = () => {
+            console.log(this);
+        };
+
+        const obj = {
+            hello:()=>{
+                console.log(this);
+            }
+        };
+
+        const obj2 = {
+            hello:function (){
+                const test = () => {
+                    console.log('-->',this);
+                };
+
+                test();
+            }
+        };
+
+        obj2.hello();
+
+        // new fn3();
+
+
+
+
+    </script>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/react-course（1）/01_基础知识复习/06_模块化/m1.js b/react-course（1）/01_基础知识复习/06_模块化/m1.js
@@ -0,0 +1,39 @@
+const a = 'm1模块中的变量a';
+export const b = 20; // 命名导出 b
+export const c = 30; // 命名导出 c
+const obj = {
+    name: '孙悟空'
+};
+const fn = () => {
+    console.log('我是fn');
+};
+
+/*
+*   作为一个模块，我们不希望模块中所有的内容都暴露给外部
+*   作为导入方，也不希望导入无用的变量
+*
+*   export（导出）
+*       - 导出用来决定一个模块中哪些内容可以被外部查看
+*       - 导出分成两种：
+*           1.默认导出
+*               - 语法：
+*                   export default xxx;
+*               - 一个模块中只能有一个默认导出
+*           2.命名导出
+*
+*   import（导入）
+*       - 导入用来将外部模块中的内容导入到当前模块中
+*       - 导入默认模块
+*           import a from './m1.js';
+*           - 导入默认模块时，变量名可以自主指定，无需和模块中的变量名对应
+*           - 在网页中导入模块时，模块的路径必须写完整（/、./或../开头，扩展名也得写上）
+*       - 导入指定内容
+*           import {b, c} from './m1.js';
+*       - 导入默认及指定内容
+*           import a, {b, c, obj, fn} from './m1.js';
+*
+*
+* */
+
+export default a; // 将变量a作为默认导出暴露
+export {obj, fn}; // 命名导出
diff --git a/react-course（1）/01_基础知识复习/06_模块化/模块化.html b/react-course（1）/01_基础知识复习/06_模块化/模块化.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <title>模块化</title>
+    <!--
+        默认情况下，script标签中不能使用import语句，
+            如果想让其支持模块化，必须设置script的type属性为module
+    -->
+    <script type="module">
+
+        // 导入m1模块中的默认模块
+        // import haha from './m1.js';
+
+        // 导入m1模块中的b和c
+        // import {b as hello, c, obj, fn} from './m1.js';
+
+        import a, {b, c, obj, fn} from './m1.js';
+        console.log(a, b, c, obj);
+
+        fn();
+
+    </script>
+</head>
+<body>
+
+</body>
+</html>