我的个人博客

记录我的学习心路历程

0%

发表于 分类于

1、字符串和数字比较

  1. 如果type(x)是数字，type(y)是字符串,则返回x==toNumber(y)的结果。
  2. 如果type(x)是字符串，type(y)是数字,则返回toNumber(x)==y的结果。

2、数字和布尔值比较

  1. 如果type(y)是布尔值，则返回x==toNumber(y)的结果。
  2. 如果type(x)是布尔值，则返回toNumber(x)==y的结果。
console.log(undefined==null) //true
console.log(undefined===null) //false

发表于 分类于

ES Module和CommonJS的区别

1、ES module 属于编译时加载，在编译的时候就能确定模块之间的关系；而CommonJS属于运行时加载，采用ES module的好处是可以做到tree sharking。ES module无法做到运行时加载，因此提出了import( )函数，完成运行时加载，和require( )的区别是，import( )是异步执行的，而require( )是同步执行的。

2、ES module可以加载到模块的部分内容，而CommonJS需要加载整个文件，然后在拿到其中的内容。

3、ES module输出的是值得引用，而CommonJS输出的是值的拷贝。

CMD和AMD的区别

在定义模块时，对依赖的处理不同：AMD推崇依赖前置，在定义模块的时候要声明其依赖的模块；而CMD推崇就近依赖，只有在用到某个模块时才会进行require( )

对依赖模块执行时机的处理不同：AMD在依赖模块加载完成后直接执行依赖模块，依赖的执行顺序和属性顺序不一定一致。CMD在依赖模块加载完成后并不执行，只是下载。等到所有的依赖模块都加载好之后，进入回调的函数逻辑，遇到require语句的时候才执行对应的模块，这样模块的执行顺序就和我们书写的顺序保持一致了。

发表于 分类于 
function Person(name, age) {
  this.name = name;
  this.age = age;
}

let obj = {
  my: '我的',
};
class Per {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
let p = new Person('刘亦菲', 18);
let person = new Per('牛逼', 66);
console.log(p instanceof Person); //true
console.log(p.prototype); //undefined
console.log(p.__proto__); //构造函数
console.log(p.__proto__ === Person.prototype); //true
console.log(Object.prototype); //类的构造函数
console.log(p.__proto__.__proto__ === Object.prototype); //true
console.log(Person.__proto__ === Function.prototype); //true
console.log(Function.prototype.__proto__ === Object.prototype); //true
console.log(obj.__proto__ === Object.prototype); //true
console.log(person.__proto__); //构造函数
console.log(person.__proto__.__proto__ === Object.prototype); //true

发表于 分类于

JS数据类型以及判断方式

基本数据类型：Number、String、boolean、undefined、null、Bigint、Symbol

引用数据类型：Object、Array、Function

衍生问题1：怎么判断一个数据类型

typeof:不能区分null和object,不能区分Array和object

instanceof:可以判断对象的具体类型

===：可以判断null和undefined

衍生问题2：为什么typeof判断null为object

null的二进制编码表示为000，而对象表示为0x00

衍生问题3：null和undefined区别

undefined:当我们声明一个变量没有赋值时，这个变量的值就是undefined

null:表示初始化时将要赋值为一个对象，结束时赋值为null表示垃圾对象

发表于 更新于 分类于

Square组件

import React from 'react';
//import { useState } from 'react';

export default function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );

Board组件

import React from 'react';
import Square from '../Square';
//import Game from '../Game';
import { useState } from 'react';

//这个辅助函数用于判断谁是获胜者
function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

//状态提升：将子组件的状态提升到父组件
//要从多个子组件收集数据，或让两个子组件相互通信，请改为在其父组件中声明共享 state。父组件可以通过 props 将该 state 传回给子组件。这使子组件彼此同步并与其父组件保持同步。
export default function Board() {
  const [squares, setSquares] = useState(Array(9).fill(null));
  const [xIsNext, setxIsNext] = useState(true);

  function handleClick(i) {
    //如果方块不为空或者已经决出获胜者，游戏就终止
    if (squares[i] || calculateWinner(squares)) {
      return;
    }

    //改变点击的Square状态，并更新数组
    //思考：为什么不直接改变原数组的值，而是要重新生成一个数组再赋值？
    //1、使得复杂的功能（时间旅行）容易实现。2、降低Diff算法的成本
    const nextSquares = squares.slice();
    if (xIsNext) {
      nextSquares[i] = 'X';
    } else {
      nextSquares[i] = 'O';
    }
    setSquares(nextSquares);
    setxIsNext(!xIsNext);
    //xIsNext = !xIsNext;
  }

  //如果游戏没有结束，就显示下一步该谁走。如果游戏结束就显示获胜者
  const winner = calculateWinner(squares);
  let status;
  if (winner) {
    status = '获胜者是' + winner;
  } else {
    status = '下一步该轮到' + (xIsNext ? 'X' : 'O');
  }
  return (
    <>
      <div className="board-row">
        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
      </div>
      <div className="board-row">
        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
      </div>
      <div className="board-row">
        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
      </div>
      <h1>{status}</h1>
    </>
  );
}

发表于 更新于 分类于

MyButton组件

import React from 'react';

//以对象的形式接收App组件传递下来的count(状态)和handleClick事件处理函数，
export default function MyButton({ count, handleClick }) {
  console.log(count);
  return (
    <div>
      <button onClick={handleClick}>点我{count}次</button>
    </div>
  );
}

App组件

import React from 'react';
import { useState } from 'react';
import MyButton from './components/MyButton';

export default function App() {
  const [count, setCount] = useState(0);
  function handleClick() {
    setCount(count + 1);
  }
  return (
    <>
      {/* 将函数handleClick和count传递给MyButton组件 */}
      <MyButton count={count} handleClick={handleClick} />
      <MyButton count={count} handleClick={handleClick} />
    </>
  );
}

发表于 更新于 分类于

MyButton组件：

import React from 'react';
import { useState } from 'react';

export default function MyButton() {
  const [count, setCount] = useState(0);
  function handleClicked() {
    setCount(count + 1);
  }
  return (
    <>
      <button onClick={handleClicked}>点了{count}次</button>
    </>
  );
}

App组件

import React from 'react';
import { useState } from 'react';
import './components/MyButton';
import MyButton from './components/MyButton';
export default function App() {
  //count的初始值是0，setCount用于更新count的值
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }
  return (
    <>
      <button onClick={handleClick}>点了我{count}次</button>

      <button onClick={handleClick}>点了我{count}次</button>
      <p></p>
      {/* 如果多次渲染同一个组件，会使得每个组件都会有自己的state 
      每一个组件都会记得自己的count值，不会受到其他按钮影响*/}
      <MyButton />
      <MyButton />
    </>
  );
}

发表于 更新于 分类于 
import React from 'react';

const cars = [
  {
    car: '奔驰',
    money: 18,
    id: 1,
  },
  {
    car: '东风',
    money: 17,
    id: 2,
  },
  {
    car: '宝马',
    money: 19,
    id: 3,
  },
];

export default function App() {
  return (
    <>
      {cars.map(item => (
        <li key={item.id}>
          {item.car}-{item.money}
        </li>
      ))}
    </>
  );
}

发表于 更新于 分类于 
import React from 'react';
import Hello from './components/Hello';
import About from './components/About';

let islogin = 0;
export default function App() {
  //条件渲染，根据islogin的值判断显示哪个组件
  return <>{islogin ? <About /> : <Hello />}</>;
}