Skip to content

1.设置多个动态class类的时候一定要加[]

image-20230722105342717

不能不加[],会报错,并且不会告知出错的位置,很难找!

image-20230722105409954

2.分页搜索前端必须要做的事情

除了进行换页操作的时候,其他任何时候都要把页数重置(包括更换条件查询,清空查询)

当前页数和相关搜索方法,必须在本组件中进行维护,不能放到全局

3.空类型的判断

js
function isEmptyContent(content) {
  if (Array.isArray(content)) { //空数组
    return content.length === 0;
  }

  if (typeof content === 'object' && content !== null) { //空对象
    return Object.keys(content).length === 0;
  }

  if (typeof content === 'string') { //空字符串
    return content.trim() === '';
  }
  
  if (typeof content === null || typeof content === undefined) { //为null或者undefined
    return content.trim() === '';
  }
  
  return false;
}

注意:如果函数的形参没有接收到值,那么它将为 undefined

比较好的判断空对象的方法:

1.首先是JSON.stringify(data) === '{}',它可以通过将对象转为字符串来判断是否为空。为空,则为true,否则就是false。

2.接下来是Object.keys(data).length,它是通过判断对象自身有没有key 值来判断是否为空的。

4.在Vue中,@click绑定的函数可以直接传递参数,而在React中onClick绑定的函数不能直接传递参数的原因?

这是因为Vue和React在处理事件绑定时采取了不同的设计思想。

在Vue中,事件绑定使用的是模板语法,例如@click,并且Vue提供了一种特殊的语法来实现直接传递参数给事件处理函数。你可以在模板中直接在事件绑定时使用方法调用,并传递参数作为参数列表。

html
<template>
  <button @click="handleClick('Vue')">Click me</button>
</template>

Vue在编译模板时会识别这种语法,自动将参数传递给事件处理函数。——> 类似原生html绑定js事件,是在触发事件的时候才去调用函数,而不是把函数直接执行,所以可以直接传参!没有参数的时候,加不加括号都可以!

而在React中,事件绑定使用的是JSX语法,例如onClick,它与Vue的模板语法不同。JSX是JavaScript的一种扩展语法,它是通过函数调用来实现的,并不支持直接传递参数给事件处理函数。

jsx
import React from 'react';

class MyComponent extends React.Component {
  handleClick = () => {
    console.log('Clicked with message:', this.props.message);
  };

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

在React中,你可以定义事件处理函数,然后在onClick中引用该函数,但无法直接在onClick中传递参数。要传递参数,可以使用闭包(匿名函数)或者使用bind()方法来包装事件处理函数。

jsx
// 使用闭包传递参数
<button onClick={() => this.handleClick('React')}>Click me</button>

// 使用bind()方法传递参数
<button onClick={this.handleClick.bind(this, 'React')}>Click me</button>

这样的设计是由于Vue和React在事件处理的机制上有所不同。Vue的模板语法直接支持方法调用并传递参数,而React的JSX语法是在JavaScript中进行函数调用的,所以需要采用额外的方式来传递参数。

5.for…in循环 遍历对象

在 JavaScript 中,for...in 循环用于遍历对象的可枚举属性(包括自身属性和继承属性)。它不适用于遍历数组,通常用于遍历对象的键值对。

for...in 循环的语法如下:

js
for (const key in object) {
  // 在这里执行对每个属性的操作
}

其中,key 表示对象的属性名,object 是要遍历的对象。

需要注意的是,for...in 循环会遍历对象的所有可枚举属性,包括继承属性。如果你只想遍历对象自身的属性而不包括继承属性,可以结合使用 hasOwnProperty() 方法进行判断:

js
const person = {
  name: 'John',
  age: 30,
  occupation: 'Engineer'
};

for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key + ': ' + person[key]);
  }
}
// 输出:
// name: John
// age: 30
// occupation: Engineer

为什么不推荐直接用于遍历数组?for...in 循环在遍历数组时会遍历数组的索引,包括数字索引和非数字索引(对象属性名)。然而,它还会遍历数组对象的原型链上的属性,这可能导致意外的结果。——>在实际项目开发中不推荐使用!

6.遍历数组:for (const item of arr)

注意:如果仅仅是一个算法题的普通数字类型等的数组,那么**for (const index in arr)**也是完全没有问题的,这也是一种常用的方式!

7.遍历Map:for (const [key, value] of hash)