我的个人博客

729_React_函数式组件

发表于 2023-08-01 分类于 React

<script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入bable,用于将jsx转换为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      function Demo() {
        //这里的this为undefined，因为babel开启了严格模式
        console.log(this);
        return <h2>我输出了一段内容</h2>;
      }
      Demo();
      console.log(Demo);

      //渲染
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>

729_React_列表渲染

发表于 2023-08-01 分类于 React

<script type="text/babel">
      var data = ["Vue", "React", "Angular"];
      const VDOM = (
        <div>
          <h1>前端js框架列表</h1>
          <ul>
            {data.map((item, index) => {
              // 这里面只能写js表达式
              return <li key={index}>{item}</li>;
            })}
          </ul>
        </div>
      );

      ReactDOM.render(VDOM, document.querySelector("#test"));
    </script>

729_React_hello

发表于 2023-08-01 分类于 React

<!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>
      .testjsx {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入bable,用于将jsx转换为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 此处一定要写bable，表示要写入jsx代码 -->
    <script type="text/babel">
      const h1id = "h1Id";
      const myData = "Hello React";
      //1、创建虚拟DOM
      const VDOM = (
        <div>
          <h1 id={h1id} className="testjsx">
            <span style={{ fontSize: "50px", color: "pink" }}>{myData}</span>
          </h1>
        </div>
      );
      //2、渲染虚拟DOM到页面
      ReactDOM.render(VDOM, document.querySelector("#test"));
    </script>
  </body>
</html>

725_set和map数据结构

发表于 2023-07-25 分类于 ES6

<script>
      //数据结构和数组最大的区别就是数据结构不允许存储重复的值
      //set
      let s = new Set([11, 22]);
      console.log(s.size);

      //自动去掉重复的值
      let s1 = new Set([11, 22, 22, 33]);
      var arr = [...s1];
      console.log(arr);

      //添加，删除，判断，清除
      s.add(33).add(44);
      s.delete(11);
      console.log(s.has(33)); //true
      console.log(s); //22,33,44
      //遍历数据结构
      s.forEach((value) => {
        console.log("里面的值为" + value);
      });
      s.clear();
      console.log(s); //空

      console.log("-----------------------------------------");

      //map:是一组键值对的结构，用于解决以往不能用对象做为键的问题，具有极快的查找速度

      const m = new Map([
        ["Kris", 21],
        ["Bob", 19],
        ["Lily", 25],
        ["Jack", 27],
      ]);
      //添加元素
      m.set("卢航", 20);
      //查找特定的值并返回
      console.log(m.get("Kris")); //21
      console.log(m.get("Lily")); //25
      console.log("-----------------");
      m.forEach((value) => {
        console.log(value);
      });
    </script>

725_深浅拷贝

发表于 2023-07-25 分类于 ES6

<script>
      var o = {};
      var per = {
        name: "刘德华",
        age: 18,
        sex: {
          xingbie: "男",
        },
      };
      //浅拷贝:只拷贝复杂数据类型的地址，这个地址依旧指向堆里面的数据值
      Object.assign(o, per);
      //   for (var k in per) {
      //     o[k] = per[k];
      //   }
      console.log(per.sex.xingbie); //男
      o.sex.xingbie = "女";
      console.log(per.sex.xingbie); //女

      console.log("-----------------------------");
      //浅拷贝：每一层的数据都会被拷贝
      //   总之，typeof 和 instanceof 都是用来判断变量类型的，区别在于：
      //   1、typeof判断所有变量的类型，返回值有number、string、boolean、function、object、undefined。
      //   2、typeof对于丰富的对象实例，只能返回object，导致有时候得不到真实的数据类型。
      //   3、instanceof用来判断对象，代码形式（obj1 instanceof obj2）（判断obj1是否为obj2的实例），obj2必须为对象，否则会报错。返回的是布尔值。
      //   4、instanceof可以对不同的实例对象进行判断，判断方法是根据对象的原型链依次向下查询，如果obj2的原型属性存在于obj1的原型链上，（obj1 instanceof obj2）值为true。
      var o1 = {};
      var per1 = {
        name: "刘德华",
        age: 18,
        sex: {
          xingbie: "男",
        },
      };
      //封装函数
      function deeoCopy(newObj, oldObj) {
        for (var key in oldObj) {
          //判断是不是数组
          if (oldObj[key] instanceof Array) {
            newObj[key] = [];
            deeoCopy(newObj[key], oldObj[key]);
          }
          //判断是不是对象
          if (oldObj[key] instanceof Object) {
            newObj[key] = {};
            deeoCopy(newObj[key], oldObj[key]);
          } else {
            //简单数据类型
            newObj[key] = oldObj[key];
          }
        }
      }
    </script>

725_call,apply,bind总结

发表于 2023-07-25 分类于 ES6

<script>
      //call方法：
      //1、调用函数并修改this指向，也能传递参数
      //2、可以实现继承
      function fn(x, y) {
        console.log(this);
        console.log(x + y);
      }

      let o = {
        name: "我的",
      };
      fn.call(o, 1, 2);

      function Father(name, sex, age) {
        this.name = name;
        this.sex = sex;
        this.age = age;
      }

      function Son(name, sex, age) {
        Father.call(this, name, sex, age);
      }
      var son = new Son("刘德华", "男", 18);
      console.log(son.age);

      //apply方法：
      //1、调用函数并修改this指向，也能传递参数
      //2、传递的参数必须是数组形式的
      console.log("-----------------------------");
      var arr = [99, 15, 25, 36, 87];
      var max = Math.max.apply(Math, arr);
      console.log(max);

      //bind方法：
      //1、可以改变this指向但不调用函数
      //2、不改变原来的函数，返回的是一个新函数
      console.log("-------------------------------");
      function f(a, b) {
        console.log(this);
        console.log(a + b);
      }
      let p = { mingzi: "卢航" };
      f(1, 2); //window  3
      f.bind(p, 1, 2)(); //{ mingzi: "卢航" }  3
    </script>

724_js数据类型

发表于 2023-07-24 更新于 2023-07-25 分类于 js

简单数据类型	说明	默认值举例
Number	包含整形值和浮点值	1，1.1
Boolean	true、false等价于1、0	true,false
String	字符串类型(‘abc’*1结果为NaN)	111+’222’
Undefined	已经声明但未给值	var a;
Null	为空	var a=null;

数据类型转换	说明	举例
检测数据类型	typeof 111	Number
转为数字型	parseInt(),parseFlost(),Number()
字符串拼接	+，只要有字符串和其他类型拼接，结果都是字符串	‘abc’+111
隐式转换	利用数学运算”-“, “/“, “*”来转换	‘12’-0结果为数字12
转换为布尔类型	代表空或者表示否定的意思都会转为false	Boolean(undefined)为false

<script>
      //   var a = "bbb" + 1;
      //   console.log(typeof a);
      //   console.log(111 + "123");
      //   console.log(10 * a);

      //复杂数据类型传参
      console.log("null这个数据类型返回的是" + typeof null + "是一个空的对象");
      //简单数据类型的值存放在栈里面
      //复杂数据类型是指通过new得来的数据，它先在栈里面存放地址，这个地址指向存放在堆里面的数据
      function Person(name) {
        this.name = name;
      }

      let p = new Person("刘德华");

      function fn(x) {
        console.log(x.name); //刘德华
        x.name = "卢航我儿";
        console.log(x.name); //卢航我儿
      }
      console.log(p.name); //刘德华
      fn(p);
      console.log(p.name); //卢航我儿
    </script>

724_小程序与Web开发的区别

发表于 2023-07-24 分类于前端八股

1、规模不同，web可以运行制作大项目，而小程序则可以脱离软件应用，供人进行简单的使用和操作，也因此它使用起来更加便捷，只要依赖于微信并注册账号即可；

2、.有各自的标签语言，web除了JS语言还主要用到了html和css，小程序要学会使用wxml标签语言；

3、web的开发成本比较小程序而言要大得多，在进行编辑开发过程中涉及到的模块架构要更多，也因此需要更多的人力精力；

4、维护代价不同，二者相较来说，网站的维护更加繁复；

5、适用性不同，web在电脑和手机上都可以，而小程序只适用于手机，不可能脱离手机使用；

6、运行环境不同，web依赖于浏览器，而小程序的运行环境是非完整的浏览器

724_用户输入网址到展示发生了什么

发表于 2023-07-24 分类于前端八股

1、DNS域名解析

若缓存中已经有了该资源且该资源没有国企，就直接返回该资源，反之就开始DNS解析

2、建立TCP连接

三报文握手

3、发送HTTP请求

三部分：状态码、响应头、响应体

4、服务器处理并返回HTTP报文

5、浏览器解析渲染页面

6、关闭TCP连接

四次挥手

724_TCP三次握手

发表于 2023-07-24 更新于 2023-07-25 分类于前端八股

1、SYN：TCP连接请求报文端首部的同步位设置为1，表示是TCP连接请求报文段

2、seq：设置一个初始值，表示TCP客户/服务器进程所选择的初始序号

3、ACK=1表示是一个TCP连接确认报文段

4、SYN被设置为1表示不能携带数据，但要消耗掉一个序号

1、DNS域名解析

2、建立TCP连接

3、发送HTTP请求

4、服务器处理并返回HTTP报文

5、浏览器解析渲染页面

6、关闭TCP连接

四报文挥手: