5月22日笔记

5月22日笔记

昨天学的hooks的两个函数，

useState

一个是 useState 他有两种初始化方式，1.是直接赋值，2.是通过回调函数来进行赋值，回调函数中可以写上你的逻辑判断,但是切记，回调函数中一定要加上return。 如果要更改值，切记useState是异步获取，如果想同步获取，就在修改的后面再加一个修改函数，里面放个回调函数，然后传递的值就是新改后的值。 代码如下： ` const [index,setIndex]=useState(值)

const [index,setIndex]=useState(()=>{ return 值 }) `

如果问为啥是异步而不是同步？ 是因为如果一个事件多次进行修改值的操作，那么就会浪费性能，如果修改一个值多次，那么他就只执行最后一次，如果执行修改两个不同的值，他会合并成一次进行修改。

useEffect

首先，useEffect有两个参数，一个是回调函数，后面一个是依赖， 而useEffect他的主要作用其实就是模拟类组件中的生命周期，通过依赖的不同来模拟不同的生命周期， 例如:

挂载期

useEffect(()=>{

},[])

他模仿的就是componentDidMount,在代码渲染完成后运行，并且这个生命周期只执行一次，后续不再执行，

更新期

useEffect(()=>{

},[x])

他模仿的就是componentDidUpdate,监听x,在x发生改变后运行。并且[]可以存放多个值,如果注意如果后面的[]不加的话，就会每次页面有啥数据变动，他也会跟着运行，极易写成死循环，使用的时候注意。

卸载期

useEffect(()=>{
        return ()=>{
           
        }
},[x])

他模仿的就是componentWillUnmount,在x发生改变后运行，注意如果后面的[]不加的话，就会每次页面有啥数据变动，他也会跟着运行，极易写成死循环，使用的时候注意。

es6

多使用const定义因为const比正常的let 和 var运行速度会更快,而且const和let 有块级作用域,并且没有var那样的变量提升

小案例

在不定义第三个变量的情况下交换两个变量的值

let a=1;
let b=2;
[a:b]=[b:a]

这样就可以在不定义第三个值的情况下，交换两个变量的值了

es6数组解构

let arr=[1,2,3,4]
const [a1,...b1]=arr;
a=1,
b1=[2,3,4]

es6数组扁平化

arr.flat()//这个是主要的是降维，降维一级，从二维数组降维成一维数组，一个flat（）降一级，如果你想直接无论几维数组都降维成一级数组那就再括号放一个叫 Infinity的属性， 代码如下：

arr.flat(Infinity)

es6如果进行创建数组元素数量为100

let arr=new Array(100); arr2.fill('');

去除空格

去除空格es6有个属性叫trim（） 例如：

let str="    张三    "
str.trim()

常用的数组方法

find

数组.find(()=>{
return true;
//会停止循环然后返回符合条件的这条数据
})

findIndex

数组.findIndex(()=>{
return true;
//会停止循环然后返回符合条件的这条数据的下标
})

forEach

数组.forEach(()=>{

//没有返回值，并且循环会一直进行到底
})

小练习

面试官问你如何让forEach停止循环？

答：1.在代码中添加break，使代码报错，forEach停止 2.使用throw new Error()抛出一个错误

动画

transform

transform:translate3D(x,y,z) scale(1) rotate(900deg) translate:这个是平移 scale：这个是放大缩小 rotate：这个是旋转 旋转单位和其他不太一样 他的单位是deg

transition

transition：名字 运行时间 运行状态

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!