-
React学习手册读书笔记:JavaScript基础
变量申明 在 ES2015( ES6 )以前,只能通过 var 关键字来声明变量。ES2015 引入了两个新的关键字: const 和 let 。 let 我们先来看 let 关键字,它主要是用来解决 var 关键字的作用域提升问题。那么,作用域提升应该怎么理解呢?我们来看一个例子: 1 2 3 4 5 6 7 8 var topic = "JavaScript"; if (topic) { var topic = "React"; console.log("block", topic); // block React } console.log("global", topic); // global React 这段代码用 var 声明了一个全局变量 topic , if 语句体内又声明了同名变量,结果赋值影响到了全局的 topic 。换句话将,if 代码块中的 var 变量声明被提升到全局。 变量的作用域太大,容易引发 BUG 了。为此,ES2015 引入新关键字 let ,支持块级作用域: 1 2 3 4 5 6 7 8 var topic = "JavaScript"; if (topic) { let topic = "React"; console.阅读全文 -
JavaScript面试题集合
数据类型 null 和 undefined 的区别 浮点数精度 请问对表达式 0.1 + 0.2 === 0.3 求值,结果是什么? 0.1 加上 0.2 ,数学上结果应该是 0.3 ,因此表达式的值应该是 true 。如果你这样回答,就错啦!正确答案应该是 false 。这是为什么呢? 众所周知,计算机内部以二进制处理数据,浮点数也不例外。准确来说,计算机内部采用二进制版的科学计数法来表示浮点数。因为在二进制中,1 不能被 10 整除,十进制的 0.1 无法用二进制小数精确表示。 类比 $\frac{1}{3}$ 在十进制中,只能用无穷无尽的小数 0.3333…… 不断逼近;$\frac{1}{10}$ 在二进制中也是一个无限循环的小数,也只能不断逼近。但由于计算机表示浮点数小数部分的位数是有限的,这样就会有误差。 误差在计算的过程中会不断积累,以致出现 0.1 + 0.2 不等于 0.3 的现象,使用不当就会酿成大祸。为了避免浮点数精度不足的坑,我们可以采用高精度的十进制类库( decimal )。 更多关于浮点数精度问题,可以参考这篇文章:IEEE-754浮点数那些坑 。 数组去重有哪些方法 双重循环(低效) 利用indexOf include findIndex等方法判断(低效) 利用Set进行去重(需要注意顺序) 先排序,在遍历 数组的常用方法有哪些 forEach map filter reduce every some shift unshift push pop splice Set的常用方法有哪些 add has delete clear entries forEach values 如何深拷贝对象 JSON.阅读全文 -
React面试题集合
生命周期 React组件生命周期有哪些阶段? Initialization :组件准备设置初始化状态和默认属性; Mounting :组件准备好挂载到浏览器 DOM 树,这个阶段调用两个生命周期方法: 挂载前调用 componentWillMount ; 挂载后调用 componentDidMount ; Updating :更新组件,由 props 或 state 的更改触发: 更新前调用 shouldComponentUpdate 判断是否需要更新; 确定需要更新后,在更新前调用 componentWillUpdate ; 在更新后调用 componentDidUpdate ; Unmounting :组件已经不再需要了,它从浏览器 DOM 树卸载下来: 卸载前调用 componentWillUnmount 方法; React组件生命周期方法有哪些? componentWillMount :在组件准备挂载到 DOM 树之前执行,用于根组件中 APP 级配置; componentDidMount :在组件挂载后执行,通常在这个阶段做: 网络数据请求; DOM操作; 状态更新; 设置事件监听器; componentWillReceiveProps : shouldComponentUpdate :确定是否更新组件; 默认情况下,它返回 true ,表示需要重新渲染组件; 如果确定 props 和 state 更新后无须重新渲染,可以返回 false ,避免渲染,提升性能; componentWillUpdate :在组件准备更新前执行( shouldComponentUpdate 返回 true 才会更新); componentDidUpdate :在组件完成更新后执行; componentWillUnmount :在组件卸载前执行,用于执行一些清理工作: 删除事件监听; 组件通信 React组件有哪几种通信方式? 父子组件通信(父传子):父组件通过 props 向子组件传数据;阅读全文 -
Vue面试题集合
其他 Vue.set方法是干什么用的? 向响应式对象中添加一个 property ,并确保这个新 property 同样是响应式的,可以触发视图更新。它用于向响应式对象添加新 property ,因为 Vue 无法探测新增 property ,例如: 1 this.myObject.newProperty = 'hi' Vue组件CSS样式如何避免影响其他组件? scoped 隔离组件样式。 computed 方法有什么作用? 计算属性,可将比较复杂的计算逻辑置于该函数中,只有当依赖值发生变化时,才会重新执行计算。 .native 修饰符有什么作用? 将原生事件绑定到组件上。 Vue 有哪些事件修饰符?分别起什么作用? .stop:停止将事件传播到上层 .prevent:阻止默认行为 .capture:捕获下层事件 .self:只当 event.target 是当前元素自身时才触发处理函数(事件不是从内部元素触发的) .once:只监听一次事件 v-if 和 v-show 有什么区别? v-if 是条件渲染,控制组件是否渲染出来; v-show 则通过样式控制组件是否显示(组件已经渲染出来,只是不显示); 如果组件需要来回切换,通常用 v-show ,避免重复渲染、销毁; 【小菜笔记】系列文章首发于公众号【小菜学编程】,敬请关注: -
Blob对象应用实战
阅读全文背景
Blob 对象是 二进制大型对象( binary large object )的简称,顾名思义用来表示二进制数据内容。Blob 对象数据可以按文本或二进制格式进行读取,而且是不可变的。
数据可以来源于文件,因此 Blob 可以用来读写文件,比如读写一个图片文件的内容。操作文件通常采用 File 对象,File 继承了 Blob 的数据读写功能,并在此基础上扩展实现文件系统相关功能。
本文先讲解 Blob 对象相关接口,再讲解一些典型应用场景,最终彻底掌握 Blob 对象用法。
-
IEEE-754浮点数那些坑:0.1加0.2不等于0.3!
阅读全文浮点数是计算机程序中最基本的数据类型,几乎所有编程语言都有浮点类型。但你或许不知道,浮点数可能有精度不足的问题,使用不当会酿成大祸。以 JS 为例,我们来看一个例子:
1
0.1 + 0.2 === 0.3 // false
0.1 加上 0.2 居然不等于 0.3 ,那结果等于多少呢?
1
0.1 + 0.2 // 0.30000000000000004
结果等于一个非常接近 0.3 的值,但不等于 0.3 !真是令人瞠目结舌!这是为什么呢?
想要回答这个问题,我们得知道浮点数在计算机内部是怎么表示的。IEEE 754 是目前使用最广泛的浮点数表示和运算标准,从中即可找到问题的答案。不过想要学习它之前,我们得先掌握 科学记数法 ( scientific notation )。
-
面向错误编程
阅读全文背景
公司有一个应急系统,管理各种类型的应急策略,前端代码质量一言难尽。最近有新需求,领导要求梳理主机异常应急策略,为此我们给系统添加一种新的策略类型——主机异常应急策略。
后端加上新类型后,您猜咋滴?前端好几个页面白屏了!只要数据里有新类型的策略就会!
我看了看代码,您猜咋滴?问题出在策略类型标签上:类型字段后端为英文常量,前端将其展示成一个中文标签。由于类型有好几种,前端用一个字典来映射渲染函数,代码大致如下:
1 2 3 4 5 6 7
const strategyTypes = { Link: () => <Tag color="magenta">链接</Tag>, CheckList: () => <Tag color="orange">确认表</Tag>, Card: () => <Tag color="green">应急卡片</Tag>, Routine: () => <Tag color="cyan">常规应急操作</Tag>, Host: () => <Tag color="red">主机异常策略</Tag>, };
-
谈谈我对Promise和异步函数的理解
阅读全文后端同学组织了技术分享,交流《Unix环境高级编程》读书心得,前端同学怎能落下?
实际上,前端圈的分享会稍早前就开始组织了,只不过我没空将其中的点滴一一记录。
作为项目的技术负责人,前端本不是我的主业。目前,前端团队无论从代码质量还是技术水平,都不太令人满意。我每周合并代码时,有时会瞟一眼,有些同学的代码真的堪忧。
目前,前端团队都是初级工程师,功底较差,做出来的东西只是能用而已。他们既不会总结经验,形成最佳实践;做事又随便,总是机械地应付任务。我苦口婆心地劝他们要多看看书,思考代码要怎么写更好,但收效甚微。
既然规劝没用,我就强制他们学习!我定的第一个课题是 TypeScript ,因为他们的代码质量很差,希望引入 TypeScript 后提升代码健壮性。前后端分享频率都是每周一次,但我有点忙不过来,后续改成双周一次。
组织过好几次 TypeScript 学习后,有同学提议分享自己感兴趣的研究课题,我没反对。最近李同学在研究 Promise ,因此 Promise 便成了本周的分享主题。
我是后端出身,虽然前端项目也是我在主导,但知识盲区还有很多。Promise 之前就一直没用对,真是贻笑大方。正好趁着这次机会,好好梳理下 Promise 的来龙去脉,故有此篇。