我的个人博客

记录我的学习心路历程

0%

发表于 更新于 分类于 
import React from 'react';
import './App.css';
function MyButton() {
  return <button>点我</button>;
}
const user = {
  name: 'lzk',
  color: 'pink',
  imgUrl:
    'https://img0.baidu.com/it/u=3021883569,1259262591&fm=253&fmt=auto&app=120&f=JPEG?w=1140&h=641',
};

export default function App() {
  return (
    <>
      <h1 className="h1Color">Hello</h1>
      {/* 行内样式的编写方法 style={ } JSX 大括号内的一个普通 {} 对象*/}
      <h1 style={{ color: user.color, fontSize: 36 }}>欢迎来到React的世界</h1>
      {/* 嵌套组件 */}
      <MyButton />
      {/* src也可以读取变量 */}
      <img src={user.imgUrl} className="pic" alt="" />
    </>
  );
}

发表于 更新于 分类于 
import React, { Fragment } from 'react';
import root from './index';
//import ReactDOM from 'react-dom/client';
import { useState, useEffect, useRef } from 'react';
//import { unmountComponentAtNode } from 'react-dom';

export default function App() {
  const [count, setCount] = useState(0);

  const myRef = useRef();

  function add() {
    //setCount(count + 1);//第一种写法
    setCount(count => count + 1);
  }

  function unmount() {
    //版本问题不能用unmountComponentAtNode
    root.unmount(document.querySelector('#root'));
  }

  function show() {
    alert(myRef.current.value);
  }

  useEffect(() => {
    let timer = setInterval(() => {
      setCount(count => count + 1);
    }, 1000);

    //组件卸载前执行，这里返回的函数相当于componentWiiUnmount
    return () => {
      clearInterval(timer);
    };
  }, [count]);

  return (
    // Fragment能且只能接收key参数
    <Fragment key={1}>
      <input type="text" ref={myRef} />
      <h1>我被点击了{count}次</h1>
      <button onClick={add}>点我</button>
      <button onClick={unmount}>卸载组件</button>
      <button onClick={show}>点我提示数据</button>
    </Fragment>
  );
}

发表于

symbol：是唯一且不可修改的原始值，用来作为对象的key值

bigint：一个基础的数据类型，可以表示任意精度的整数，可以超过数字类型的安全范围

<script>
      //定义bight数据类型
      const b = 4n;
      const a = BigInt(5);
      const c = 2;

      console.log(a); //5n
      console.log(b); //4n

      //console.log(a * '5'); //报错，不支持通过'-','*','/'的方法转换为Number数据类型
      console.log(c * '2');
      console.log(a + b); //9n
      console.log(a - b); //1n

      //console.log(b - c); //报错，Number和Bigint不能混合使用

      const d = BigInt(2);
      console.log(c == d); //true
      console.log(c === d); //false
    </script>

发表于 更新于 分类于

1、Vue和React的区别？

相同点：

1、都采用虚拟DOM和Diff算法

2、都遵循组件化的编程思想

3、都采用数据驱动视图的思想，尽量避免操作DOM

不同点：

1、Vue是js的渐进式框架，React是函数式编程思想，采用jsx语法，主张all in js

2、Vue相对简单易学，但生态还没有React那么完善，性能相对较弱

发表于 分类于

1、谈谈对盒子模型的理解

盒模型封装了周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性

分类上分为：标准盒模型；和 IE盒子模型

标准和模型和IE盒子模型的区别

​ 计算宽度和高度的不同，标准盒模型的width和height只包括内容高度，不包含padding和border的值，而IE盒模型的width和height是包含padding和border值的

发表于 分类于

1、js中的==和===有什么区别

​ ==是判断值是否相等，===是判断值和类型是否全部相等

2、js中深浅拷贝的区别

浅拷贝：只拷贝指向对象的指针而不复制对象本身，新旧对象共享同一块内存

深拷贝：拷贝指针和对象，修改原来的对象不会改变新对象的值

3、原型（对象）、构造函数以及实例化对象的理解

原型：构造函数在创建的过程中，系统自动创建出来与构造函数相关联的一个空对象

构造函数：创建对象时用来初始化实例化对象

实例：通过构造函数和new创造出来的一个对象

类：class Star…

实例化对象：var ldh=new Star()

Star.prototype===ldh.proto

4、闭包的理解

定义：有权访问另一个函数作用域中变量的函数

优点：避免全局污染，不会被垃圾回收机制清除

缺点：消耗大量内存，可能导致内存泄漏

5、js函数中的this指向问题

普通函数：谁调用就指向谁

箭头函数：继承上一级函数中的this

call、apply、bind的区别

​ 1、call和apply都可以调用函数修改this指向，但bind必须是以函数的形式传递

​ 2、bind不会调用函数，只改变this指向

6、const、let、var的区别

const：必须先初始化声明，并且值不能修改

var： 全局变量，存在变量提升，可以重复声明

let：块级作用域，不存在变量提升，不能重复声明

7、undefined和null区别

undefined：表示未定义，未赋值的变量，typedef undefined==undefined。Number(undefined)==NaN

null：表示为空，不指向任何地址，typedef null==Object。Number(null)=0

8、js数据类型有哪些

简单数据类型：Number、String、Boolean、null、undefined、ES6新增（symbol、bigint）

复杂数据类型：Object、function

他们之间的区别

​ 简单数据类型：存放在栈内存，占用空间小，大小固定，适合频繁被访问

​ 复杂数据类型：存放在堆内存，占用空间大，大小不固定，运行速度慢

发表于 分类于 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>点击我跳转页面</button>
    <div></div>
    <script>
      var btn = document.querySelector('button');
      var div = document.querySelector('div');
      btn.addEventListener('click', function () {
        //根href一样，可以实现跳转页面，记录浏览历史，可以回退
        //location.assign('http://lzkpersonal.com.cn');

        //替换当前页面，不记录历史，所以不能后退页面
        //location.replace('http://lzkpersonal.com.cn');

        //重新加载页面，如果要强制刷新，可以在括号里面加上true
        location.reload(true);
      });
    </script>
  </body>
</html>

发表于 分类于 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>点击我跳转页面</button>
    <div></div>
    <script>
      var btn = document.querySelector('button');
      var div = document.querySelector('div');
      btn.addEventListener('click', function () {
        //console.log(location.href);//获取当前页面的URL
        //console.log(location.pathname);//返回路径
        //console.log(location.port); //返回端口号，如果未写就返回空字符串
        //console.log(location.search); //返回参数
        //console.log(location.hash); //返回#后面的链接锚点

        location.href = 'http://lzkpersonal.com.cn'; //跳转到其他页面
      });
      var timer = 5;
      setInterval(function () {
        if (timer == 0) {
          location.href = 'http://lzkpersonal.com.cn'; //跳转到其他页面
        } else {
          div.innerHTML = '您将在' + timer + '秒钟后跳转';
          timer--;
        }
      }, 1000);
    </script>
  </body>
</html>

发表于 分类于 
<script>
      // js中用来存储待执行回调函数的队列中包含两个特定的队列
      // 宏队列：用来保存执行的宏任务，比如：定时器、DOM事件操作、ajax
      // 微队列：用来保存执行的微任务，比如：promise
      // js的执行顺序为：同步任务-微任务队列-宏任务队列
      setTimeout(() => {
        console.log(111);
      }, 0);

      new Promise((resolve, reject) => {
        //reject();
        resolve();
        console.log(222);
      }).then(v => {
        console.log(333);
      });
      console.log(444);
      //结果为2，4，3，1
    </script>
<script>
      // js中用来存储待执行回调函数的队列中包含两个特定的队列
      // 宏队列：用来保存执行的宏任务，比如：定时器、DOM事件操作、ajax
      // 微队列：用来保存执行的微任务，比如：promise
      // js的执行顺序为：同步任务-微任务队列-宏任务队列
      const first = () =>
        new Promise((resolve, reject) => {
          console.log(3);
          let p = new Promise((resolve, reject) => {
            console.log(7);
            setTimeout(() => {
              console.log(5);
              resolve(6);
              //定时器执行完成时p的状态和结果已经发生改变，所以resolve(6)，不会改变p的状态和结果
            }, 0);
            resolve(1);
          });
          resolve(2);
          p.then(v => {
            console.log(v);
          });
        });
      first().then(v => {
        console.log(v);
      });
      console.log(4);

      //同:3 7 4
      //微:1 2
      //宏:5
    </script>
<script>
      setTimeout(() => {
        console.log(0);
      }, 0);

      new Promise((resolve, reject) => {
        console.log(1);
        resolve();
      })
        .then(() => {
          console.log(2);
          new Promise((resolve, reject) => {
            console.log(3);
            resolve();
          })
            .then(() => {
              console.log(4);
            })
            .then(() => {
              console.log(5);
            });
        })
        .then(() => {
          console.log(6);
        });

      new Promise((resolve, reject) => {
        console.log(7);
        resolve();
      }).then(() => {
        console.log(8);
      });

      //同:1 7
      //微:2 3 8 4 6 5
      //宏:0
    </script>