• React学习手册读书笔记：JavaScript基础

    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面试题集合

    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面试题集合

    javascript
    生命周期 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面试题集合

    javascript
    其他 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对象应用实战

    javascript

    背景

    Blob 对象是 二进制大型对象（ binary large object ）的简称，顾名思义用来表示二进制数据内容。Blob 对象数据可以按文本或二进制格式进行读取，而且是不可变的。

    数据可以来源于文件，因此 Blob 可以用来读写文件，比如读写一个图片文件的内容。操作文件通常采用 File 对象，File 继承了 Blob 的数据读写功能，并在此基础上扩展实现文件系统相关功能。

    本文先讲解 Blob 对象相关接口，再讲解一些典型应用场景，最终彻底掌握 Blob 对象用法。

    阅读全文

  • IEEE-754浮点数那些坑：0.1加0.2不等于0.3！

    javascript

    浮点数是计算机程序中最基本的数据类型，几乎所有编程语言都有浮点类型。但你或许不知道，浮点数可能有精度不足的问题，使用不当会酿成大祸。以 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 ）。

    阅读全文

  • 面向错误编程

    javascript

    背景

    公司有一个应急系统，管理各种类型的应急策略，前端代码质量一言难尽。最近有新需求，领导要求梳理主机异常应急策略，为此我们给系统添加一种新的策略类型——主机异常应急策略。

    后端加上新类型后，您猜咋滴？前端好几个页面白屏了！只要数据里有新类型的策略就会！

    我看了看代码，您猜咋滴？问题出在策略类型标签上：类型字段后端为英文常量，前端将其展示成一个中文标签。由于类型有好几种，前端用一个字典来映射渲染函数，代码大致如下：

    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和异步函数的理解

    javascript

    后端同学组织了技术分享，交流《Unix环境高级编程》读书心得，前端同学怎能落下？

    实际上，前端圈的分享会稍早前就开始组织了，只不过我没空将其中的点滴一一记录。

    作为项目的技术负责人，前端本不是我的主业。目前，前端团队无论从代码质量还是技术水平，都不太令人满意。我每周合并代码时，有时会瞟一眼，有些同学的代码真的堪忧。

    目前，前端团队都是初级工程师，功底较差，做出来的东西只是能用而已。他们既不会总结经验，形成最佳实践；做事又随便，总是机械地应付任务。我苦口婆心地劝他们要多看看书，思考代码要怎么写更好，但收效甚微。

    既然规劝没用，我就强制他们学习！我定的第一个课题是 TypeScript ，因为他们的代码质量很差，希望引入 TypeScript 后提升代码健壮性。前后端分享频率都是每周一次，但我有点忙不过来，后续改成双周一次。

    组织过好几次 TypeScript 学习后，有同学提议分享自己感兴趣的研究课题，我没反对。最近李同学在研究 Promise ，因此 Promise 便成了本周的分享主题。

    我是后端出身，虽然前端项目也是我在主导，但知识盲区还有很多。Promise 之前就一直没用对，真是贻笑大方。正好趁着这次机会，好好梳理下 Promise 的来龙去脉，故有此篇。

    阅读全文