袁光斌的Blog

前言 最近写算法题，需要用到二维数组保存状态。 JavaScript如何创建二维数组呢？遇到个方法，看起来很酷，但实际上，有坑 有坑的方法代码如下所示： const arr = new Array(10).fill(new Array(10).fill(0)); 控制台打印arr 这时候，若你想设置，arr[0][0] = 1，你会发现二维数组所有子数组的第一项都被改为1 这便是坑了，你只想改成第一个子数组中的第一项，却一下子改变了所有子数组的第一项。 原因分析让我们再来看看上面二维数组的定义方法 const arr = new Array(10).fill(new Array(10).fill(0)); 使用了Array.prototype.fill()方法，下面是MDN上关于fill()方法的描述。 发现问题了吗？ 该方法使用一个固定的值填充数组，所以上面这种定义方式是将新创建的数组的引用，填充到了上一层数组的每一个位置。 拒绝坑，从老实码代码做起var a = new Array();for(var i=0;i<5;i++){ //一维长 ...

Hooks Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook是什么？Hook 是什么？ ​ Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。例如，useState 是允许你在 React 函数组件中添加 state 的 Hook。 什么时候我会用 Hook？ ​ 如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以在现有的函数组件中使用 Hook。 注意： 在组件中有些特殊的规则，规定什么地方能使用 Hook，什么地方不能使用。我们将在 Hook 规则中学习它们。 Hook规则Hook 本质就是 JavaScript 函数，但是在使用它时需要遵循两条规则。官方提供了一个 linter 插件来强制执行这些规则： 1.🍅只在最顶层使用 Hook​ 不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。 ​ 遵 ...

一、数据类型1. JavaScript有哪些数据类型，它们的区别？JavaScript共有八种数据类型，分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。 其中 Symbol 和 BigInt 是ES6 中新增的数据类型： Symbol 代表创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。 BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整数范围。 这些数据可以分为原始数据类型和引用数据类型： 栈：原始数据类型（Undefined、Null、Boolean、Number、String） 堆：引用数据类型（对象、数组和函数） 两种类型的区别在于存储位置的不同： 原始数据类型直接存储在栈（stack）中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储； 引用数据类型存储在堆（heap）中的对象，占据空间大、大小不固定。如果存储在栈中，将 ...

CSS3 硬件加速简介上一篇文章学习了重绘和回流对页面性能的影响，是从比较宏观的角度去优化 Web 性能，本篇文章从每一帧的微观角度进行分析，来学习 CSS3 硬件加速的知识。 CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 进行渲染，减少 CPU 操作的一种优化方案。由于 GPU 中的 transform 等 CSS 属性不会触发 repaint，所以能大大提高网页的性能。 我做了一个页面，左边元素的动画通过 left/top 操作位置实现，右边元素的动画通过 transform: translate 实现，你可以打开 chrome 的 “Paint flashing” 查看，绿色部分是正在 repaint 的内容。 查看地址 从 demo 中可以看到左边的图形在运动时外层有一圈绿色的边框，表示元素不停地 repaint，并且可以看到其运动过程中有丢帧现象，具体表现为运动不连贯，有轻微闪动。 动画与帧之前学习 flash 的时候，就知道动画是由一帧一帧的图片组成，在浏览器中也是如此。我们首先看一下，浏览器每一帧都做了什么。 JavaScript：JavaScript 实 ...