chenfx , record everything……

在之前 CSS 语法学习篇章中，学习了选择器的一部分基础知识，这里再进行更进一步的学习；在前面的 CSS 语法学习篇章中也了解了一些选择器，但在进入到具体的选择器介绍之前，首先要对选择器有一个整体的认识。

先说说选择器是什么，选择器是由 CSS 最先引入的一个机制(但随着document.querySelector等API的加入，选择器已经不仅仅是CSS的一部分了)。

选择器的基本意义是：根据一些特征，选中元素树上的一批元素。

从选择器的结构来分，从简单到复杂可以分成以下几种：

• 简单选择器：针对某一特征判断是否选中元素
• 复合选择器：连续写在一起的简单选择器，针对元素自身特征选择单个元素
• 复杂选择器：由“空格” “>” “~” “+” “||” 等符号链接的复合选择器，根据父元素或者前序元素检查单个元素
• 选择器列表：由逗号分隔的复杂选择器，表示“或”的关系

前面学习了解了关于执行上下文、作用域、闭包之间的关系，这里会更深层次的进行学习，了解一些更为细节的部分：语句。
语句是任何编程语言的基础结构，与 JavaScript 对象一样，JavaScript 语句同样具有“看起来很像其他语言，但是其实一点儿都不一样”的特点。
比较常见的语句包括变量声明、表达式、条件、循环等，为了了解 JavaScript 语句有哪些特别之处，首先通过一个不太常见的例子来介绍 JavaScript 语句执行机制设计的一种基础类型：Completion 类型。

Completion 类型

在函数 foo 中，使用了一组 try 语句，在 try 语句里面有 return 语句，那么 finally 中的内容还会执行吗？

1
2
3
4
5
6
7
8
9
10
11

function foo() {
  try {
    return 0;
  } catch (err) {
    console.log('err:', err);
  } finally {
    console.log('finally block');
  }
}

console.log(foo());

在前一章学习过程中了解了执行上下文是什么，也知道了任何语句的执行都会依赖特定的上下文。
一旦上下文被切换，整个语句的想过可能都会发生改变；那么，切换上下文的时机就显得非常重要。
在JavaScript中，切换上下文最主要的场景是函数调用；这里就对函数调用切换上下文的事情进行学习，首先，了解一下函数家族。

函数

在 ES2018 中，函数已经非常复杂了，如下：

第一种，普通函数：用function关键字定义的函数，如下：

1
2
3

function foo() {
  // code
}

第二种，箭头函数：用 => 运算符定义的函数，如下：

1
2
3

const foo = () => {
  // code
}

在处理字符串的时候，经常会有查找某些符合规则的字符串的需要，正则表达式就是用于描述这些规则的工具。
在 windows/Dos 下有用于文件查找的 通配符，* 和 ? 。例如：

• *.doc 表示查找目录下所有的 word 文档

和通配符类似，正则表达式也是用来进行文本匹配的工具，只不过比起通配符它能更精确地描述你的需求。

通过实例入门

1
2
3
4

var reg = /\bhi\b/ig;
var regStr = 'lf him---history---ihslsaaahI lsssaaa HI xxxxx Hi';
regStr.match(reg);
// ['HI', 'Hi']

作为一个开发者，怎么找到和修复 bug 可能是经常出现的问题，可能经常使用 console.log() 把代码值打印在控制台看是否正确；这里，它将彻底的改变了。
这里会介绍怎么正确的 debugging，也将学到怎么使用 Chorme Developer Tools 设置断点在代码里面逐行执行，这样就能高效的发现和解决出现在代码里面的一些问题。
本文的目标是展示怎样修复一个特殊的 bug，用工作流程的方式有助于学习。

1. 复现 Bug

复现 bug 是找出并修复 bug 的第一步，复现 bug 意味着用一系列的方法来找出当前导致 bug 的代码位置。而复现 bug 需要很久的时间，因此就需要用便捷的方法去掉不需要的步骤。
跟随下面的步骤说明来复现并修复一个问题：

• 这里有一个网页在教程中作为 demo，请确定你已经用一个新的 tab 在浏览器打开， open demo；
• 在示例网页中，在 Number 1 的输入框输入 5，在 Number 2 的输入框输入 1；
• 点击 Add Number 1 And Number 2；
• 查看最终输出的结果是： 5 + 1 = 51；

噢。。。为什么结果错了，正确的不应该是 6 吗？这个 bug 就需要去找出并修复它。