前端基础知识之JS篇

防抖和节流

防抖：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间。
- 思路：每次触发事件时都取消之前的延时调用方法。
```
function debounce(func, time) {
let timer = null;
return () => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    func.apply(this, arguments);
  }, time);
};
}
```
节流：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率。
- 思路：每次触发事件时都判断当前是否有等待执行的延时函数，如果有，则无视该动作，直到事件执行完后，才能重新触发
```
function throtte(func, time) {
let activeTime = 0;
return () => {
  const current = Date.now();
  if (current - activeTime > time) {
    func.apply(this, arguments);
    activeTime = Date.now();
  }
};
}
```

判断是否为数组的方法

Object.prototype.toString.call()：返回 [Object type]，其中 type 为对象的类型。对于所有基本的数据类型都能进行判断，即使是 null 和 undefined
instanceof：内部机制是通过判断对象的原型链中是不是能找到类型的 prototype，返回 true 或者 false
Array.isArray()：用来判断对象是否为数组。ES5 新增的方法

模块化发展历程

模块化主要是用来抽离公共代码，隔离作用域，避免变量冲突等。思维导图

IIFE：使用自执行函数来编写模块化，特点：在一个单独的函数作用域中执行代码，避免变量冲突。
AMD：使用 requireJS 来编写模块化，特点：依赖必须提前声明好。依赖前置，需要在定义时就写好需要的依赖，提前执行依赖
CMD：使用 seaJS 来编写模块化，特点：支持动态引入依赖文件。延迟执行，需要时引入
CommonJS： nodejs 中自带的模块化。
UMD：兼容 AMD，CommonJS 模块化语法。
webpack(require.ensure)：webpack 2.x 版本中的代码分割。
ES Modules： ES6 引入的模块化，支持 import 来引入另一个 js 。

全局作用域

在 ES5 中，顶层对象的属性和全局变量是等价的，var 命令和 function 命令声明的全局变量，自然也是顶层对象。
但 ES6 规定，var 命令和 function 命令声明的全局变量，依旧是顶层对象的属性，但 let 命令、const 命令、class 命令声明的全局变量，不属于顶层对象的属性。
const 和 let 会生成块级作用域。
var 是全局变量，存在变量作用域提升。

变量生命周期：声明（作用域注册一个变量）、初始化（分配内存，初始化为 undefined）、赋值

var：遇到有 var 的作用域，在任何语句执行前都已经完成了声明和初始化，也就是变量提升而且拿到 undefined 的原因由来
function：声明、初始化、赋值一开始就全部完成，所以函数的变量提升优先级更高
let：解析器进入一个块级作用域，发现 let 关键字，变量只是先完成声明，并没有到初始化那一步。此时如果在此作用域提前访问，则报错 xx is not defined，这就是暂时性死区的由来。等到解析到有 let 那一行的时候，才会进入初始化阶段。如果 let 的那一行是赋值操作，则初始化和赋值同时进行
const、class 都是同 let 一样的道理

箭头函数和普通函数的区别

箭头函数是普通函数的简写，可以更优雅的定义一个函数，和普通函数相比，有以下几点差异：

函数体内的 this 对象，就是定义时所在的对象(又说：定义时所在的作用域中的 this 值)，而不是使用时所在的对象。
不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。
不可以使用 new 命令，因为：

没有自己的 this，无法调用 call，apply。
没有 prototype 属性，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 proto new 过程大致是这样的：

function newFunc(father, ...rest) {
  var result = {};
  result.__proto__ = father.prototype;
  var result2 = father.apply(result, rest);
  if (
    (typeof result2 === "object" || typeof result2 === "function") &&
    result2 !== null
  ) {
    return result2;
  }
  return result;
}

ES6 转 ES5 的思路

参考 Babel 的实现方式，其大致分为三步：

将代码字符串解析成抽象语法树，即所谓的 AST
对 AST 进行处理，在这个阶段可以对 ES6 代码进行相应转换，即转成 ES5 代码
根据处理后的 AST 再生成代码字符串。基于此，其实我们自己就可以实现一个简单的“编译器”，用于把 ES6 代码转成 ES5。比如，可以使用 @babel/parser 的 parse 方法，将代码字符串解析成 AST；使用 @babel/core 的 transformFromAstSync 方法，对 AST 进行处理，将其转成 ES5 并生成相应的代码字符串；过程中，可能还需要使用 @babel/traverse 来获取依赖文件等

setTimeout、Promise、Async/Await 的区别

setTimeout：异步函数，同步函数全部执行完之后，才会执行异步函数
Promise：本身是同步的立即执行函数，当在 executor 中执行 resolve 或者 reject 的时候, 此时是异步操作，会先执行 then/catch 等，当主栈完成后，才会去调用 resolve/reject 中存放的方法执行。
async/await：async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再执行函数体内后面的语句。可以理解为，是让出了线程，跳出了 async 函数体。
事件循环中分为宏任务队列和微任务队列。其中 settimeout 的回调函数放到宏任务队列里，等到执行栈清空以后执行； promise.then 里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行；async 函数表示函数里面可能会有异步方法，await 后面跟一个表达式，async 方法执行时，遇到 await 会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行。
Promise，async/await，Generator 等都是为了解决回调地狱（callback hell，大量回调函数嵌套）的问题

JS Intel 对象介绍

Intl 对象是 ECMAScript 国际化 API 的命名空间，它提供对语言敏感的字符串比较、支持数字格式化以及日期和时间的格式化。

// 控制台输入Intel，输出如下所示
{
  Collator: ƒ Collator()
  DateTimeFormat: ƒ DateTimeFormat()
  ListFormat: ƒ ListFormat()
  NumberFormat: ƒ NumberFormat()
  PluralRules: ƒ PluralRules()
  RelativeTimeFormat: ƒ RelativeTimeFormat()
  getCanonicalLocales: ƒ getCanonicalLocales()
  v8BreakIterator: ƒ v8BreakIterator()
}

Intl.Collator 对象：排序器的构造函数，可以支持对语言敏感的字符串比较。

// 数组字符串排序
["15", "2", "100"].sort(); // 结果是：["100", "15", "2"]
["15", "2", "100"].sort(
  new Intl.Collator(undefined, { numeric: true }).compare
); // 结果是：["2", "15", "100"]

// 中文按照首字母拼音排序
var arrUsername = [
  "陈坤",
  "邓超",
  "杜淳",
  "冯绍峰",
  "韩庚",
  "胡歌",
  "黄晓明",
  "贾乃亮",
  "李晨",
  "李易峰",
  "鹿晗",
  "井柏然",
  "刘烨",
  "陆毅",
  "孙红雷"
];
arrUsername.sort(); // 结果是：["井柏然", "冯绍峰", "刘烨", "孙红雷", "李易峰", "李晨", "杜淳", "胡歌", "贾乃亮", "邓超", "陆毅", "陈坤", "韩庚", "鹿晗", "黄晓明"]
arrUsername.sort(new Intl.Collator("zh").compare); // 结果是：["陈坤", "邓超", "杜淳", "冯绍峰", "韩庚", "胡歌", "黄晓明", "贾乃亮", "井柏然", "李晨", "李易峰", "刘烨", "陆毅", "鹿晗", "孙红雷"]

Intl.DateTimeFormat 对象

// 日期信息格式是：“xxxx年xx月xx日 xx:xx:xx”。Google和Firefox 2019/10/24 12:05:53, IE11 2019年10月24日 12:05:53
new Intl.DateTimeFormat("zh", {
  year: "numeric",
  month: "2-digit",
  day: "2-digit", // '2-digit'表示一定使用2位数字表示，因此，如果数值不超过10，会自动在前面加0。
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit",
  hour12: false // hour12设置为false表示我们采用24小时制，晚上是21:00而不是下午9点。
}).format(new Date());

Intl.NumberFormat 对象

// 1. 连续数字千位分隔符分隔
new Intl.NumberFormat(undefined, {
  minimumFractionDigits: 4
}).format(12345.6789); // 结果是："12,345.6789"

// 2. 数字不足位数补0
new Intl.NumberFormat(undefined, {
  minimumIntegerDigits: 2
}).format(8); // 结果是："08"

// 3. 金额中文自带
new Intl.NumberFormat("zh-Hans", {
  style: "currency",
  currency: "CNY",
  currencyDisplay: "name"
}).format(12345.6789); // 结果是："12,345.68 人民币"

//4. 数字变成中文数字显示
"星期" + new Intl.NumberFormat("zh-Hans-CN-u-nu-hanidec").format(new Date().getDay()); // 结果是："星期四"

JS DOM innerText 和 textContent 的区别

// 获取元素的文本内容，推荐使用textContent，兼容性写法如下：
var text = dom.textContent || dom.innerText;

不同之一，调用对象不同：innerText只有HTML元素才可以调用，但是textContent任意Node节点都可以。HTMLElement.innerText和Node.textContent。
不同之二，值获取规则不同。
1. 块级元素与换行符：innerText会保留块级元素的换行特性，以换行符形式呈现，视觉中的空格实际上是换行符。
2. 隐藏元素的获取与否：display:none元素是无法使用innerText获取的，但是textContent却可以，无论元素隐藏与否。
3. 性能与回流：读取innerText的值将触发回流以确保计算出的样式是最新的，而回流在计算上很昂贵，会降低性能，因此应尽可能避免回流。而textContent只是单纯读取文本内容，因此性能更高。
4. IE浏览器不符合上面规则：在IE浏览器下，innerText的表现和规范是不符的，最终表现为textContent属性一样的效果，也就是没有空格，也不会不显示隐藏元素。

JS DOM变化的监听检测

自定义元素声明周期与DOM变化检测：用ES6的基础创建自定义元素（Custom Elements），使用其内置的生命周期，对DOM变化进行实时更新。（IE不支持）
MutationObserver与DOM变化检测：Mutation Observer是在DOM level 4中定义的新API，可以监听DOM的变化。（兼容IE11）
Mutation events与DOM变化检测：使用类似'click', 'mouseover'（兼容IE9，IE10）
Object.defineProperty与属性变化检测：检测某几个DOM属性的变化，而不需关心DOM节点的增删改。
CSS3 animation动画与检测：借助animationend回调判断DOM元素的变化，此方法可以识别添加，属性变化，甚至DOM删除。

分析地址栏url，获取参数

浏览器已经有了内置的API接口可以对URL进行处理，这个API就是URLSearchParams()以及URL()

new URL('https://www.zhangxinxu.com/wordpress/?s=url').searchParams.get('s');
new URLSearchParams('?s=url').get('s');

form原生JS验证方法和属性

form内置验证的外部表现
- 设置required这样的HTML属性
- CSS 有诸多匹配的伪类，如:required伪类, :optional伪类或是:valid，:invalid伪类等
- JS DOM事件这块表单元素可以监听'invalid'和'valid'事件
form表单元素内置验证方法和属性
- checkValidity()：验证当前表单控件元素，或者整个表单是否验证通过，返回值是布尔值，true或者false
- reportValidity()：触发浏览器的内置的验证提示交互，返回布尔值，true或者false
- setCustomValidity()：设置自定义的验证，可以使用这个方法自定义提示文字
- validity属性与ValidityState对象：每一个标准的表单控件，例如输入框，下拉框以及单复选框都内置一个validity属性，这是个只读属性，可以返回当前元素各种验证状态

js工具

zepto和jquery的区别

js闭包this解决

this对象是运行时基于函数的执行环境绑定的：在全局函数中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象。

var name = "The Window";
var object = {
    name: "My object",
    getNameFunc: function() {
        return function() {
            return this.name;
        };
    }
}
alert(object.getNameFunc()()); // "The Window"

把最后的一句拆成两个步骤执行：
var first = object.getNameFunc();
var second = first();
    其中第一步，获得的first为返回的匿名函数，此时的getNameFunc()作为object的方法调用，如果在getNameFunc()中使用this，此时的this指向的是object对象。
    第二部，调用first函数，可以很清楚的发现，此时调用first函数，first函数没有在对象中调用，因此是作为函数调用的，是在全局作用域下，因此first函数中的this指向的是window。

为什么匿名函数没有取得其包含作用域（外部作用域）的this对象呢？每个函数被调用时，其活动对象都会自动取得两个特殊变量：this和arguments。内部函数在搜索这两个变量时，只会搜索到其活动对象为止，因此永远不可能直接访问外部函数中的这两个变量。《Javascript高级程序设计》

var name = "The Window";
var object = {
    name: "My object",
    getNameFunc: function() {
        var that = this;   // 将getNameFunc()的this保存在that变量中
        var age = 15;
        return function() {
            return that.name;
        };
    }
}
alert(object.getNameFunc()());   // "My object"
 其中，getNameFunc()执行时的活动对象有：that/age/匿名函数，在执行匿名函数时，同时引用了getNameFunc()中的活动对象，因此可以获取that和age的值。但是由于是在全局环境中调用的匿名函数，因此匿名函数内部的this还是指向window。

zptime / blog

前端基础知识之JS篇 #22