JavaScript 小知识点

原型链相关

• 最详尽的 JS 原型与原型链终极详解

---

isNaN() 和 Number.isNaN() 的区别

isNaN()

• 是 ES1 规范；
• 是全局方法；
• 如果参数不是一个 Number 类型，会先尝试将参数转化为数值，然后对转换后的结果进行是否是 NaN 的判断；

Number.isNaN()

• 是 ES6（ES2015） 规范；
• 是 Number 对象的静态方法；
• 只有参数为 NaN 是才会返回 true；

---

JavaScript 中的错误类型

• SyntaxError 解析代码时发生的语法错误；
• ReferenceError 对象是引用一个不存在的变量时发生的错误；

• RangeError 对象是一个值超出有效范围时发生的错误；

  • 一个数组长度为负数；
  • Number 对象的方法参数超出范围；
  • 函数堆栈超过最大值；

• TypeError 对象是变量或参数不是预期类型时发生的错误；

  • 比如：对字符串、布尔值、数值等原始类型的值使用 new 命令；

• URIError 对象是 URI 相关函数的参数不正确时抛出的错误；

  • 主要涉及 encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()、unescape()
• EvalError eval 函数没有正确执行时抛出的错误；已经不再使用；
• Error

自定义错误

可以创建自定义错误类，让其集成 Error；

参考链接

• 错误处理机制

---

encodeURI 和 encodeURIComponent 的区别

encodeURI

encodeURI('http://example.com/test space')
// http://example.com/test%20space
// 对整个 URL 进行编码，而 URL 的特定标识符不会被转码

encodeURIComponent

encodeURIComponent('http://example.com/test space')
// http%3A%2F%2Fexample.com%2Ftest%20space
// 对URL中的参数进行编码，因为参数也是一个URL，如果不编码会影响整个URL的跳转

参考链接

• 百分号编码 Percent-encoding
• [escape,encodeURI,encodeURIComponent有什么区别?

](https://www.zhihu.com/questio...

---

Array.from / 扩展运算符 ... / rest 参数 ...

概念定义

ES6 中的三个点 ... 有两个名字：rest 参数 / 扩展运算符

• 当用在函数定义时的形参前面是，称为 rest 参数。当函数调用时，用于接收不确定数量的参数；
• 当与结构赋值组合使用时，称为 rest 参数，用于接收剩余的值，存储在数组中；
• 当用在字符串或数组前面时，称为扩展运算符，将数组或字符串进行拆解；

Array.from

Array.from 是 Array 对象的一个静态方法。可以通过一下方式来创建数组对象：

• 伪数组对象（拥有一个 length 属性和若干索引属性的任意对象）；
• 可迭代对象；

Array.from 还有一个可选参数 mapFn，可以在最后生成的数组上再执行一次 map 方法后再返回；也就是说 Array.from(obj, mapFn, thisArg) 相当于 Array.from(obj).map(mapFn, thisArg)

扩展运算符 ...

扩展运算符是一个运算符，和 Array.from 最大的区别在于其只能从可迭代对象中进行解构；

---

JavaScript 的迭代方法

forEach()

让数组中每一项做一些事，不能被 break；

• 返回值：undefined；

map()

让数组对每一项进行某种计算后产生一个新数组；

• 返回值：一个新数组；

filter()

筛选出数组中符合条件的项，组成新数组；

• 返回值：一个新数组；

reduce()

对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值；

• 返回值：函数累计处理的结果；

every()

检测数组中的每一项是否都符合条件；

• 返回值：布尔值；

some()

检测数组中是否有任意项符合条件；

• 返回值：布尔值；

对数组空位的处理

数组的空位指，数组的某一个位置没有任何值。比如，Array构造函数返回的数组都是空位。

ES5 对空位的处理

• forEach(), filter(), reduce(), every() 和some()都会跳过空位。
• map()会跳过空位，但会保留这个值
• join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。

// forEach方法
[,'a'].forEach((x,i) => console.log(i)); // 1

// filter方法
['a',,'b'].filter(x => true) // ['a','b']

// every方法
[,'a'].every(x => x==='a') // true

// reduce方法
[1,,2].reduce((x,y) => return x+y) // 3

// some方法
[,'a'].some(x => x !== 'a') // false

// map方法
[,'a'].map(x => 1) // [,1]

// join方法
[,'a',undefined,null].join('#') // "#a##"

// toString方法
[,'a',undefined,null].toString() // ",a,,"

ES6 对空位的处理

ES6 则是明确将空位转为undefined。

• Array.from 方法会将数组的空位，转为 undefined，也就是说，这个方法不会忽略空位；
• 扩展预算符 ... 也会将空位转为 undefined；

Array.from(['a',,'b']);
// ["a", undefined, "b"]

[...['a',,'b']]
// ["a", undefined, "b"]

• copyWithin() 会连空位一起拷贝；

[,'a',,'b'].copyWithin(2,0)
// [,"a",,"a"]

• fill() 将会视空位为正常的数组位置；

new Array(3).fill('a');
// ["a", "a", "a"]

• for...of 循环也会遍历空位；

let arr = [, ,];
for (let i of arr) {
  console.log(1);
}
// 1
// 1

上面代码中，数组arr有两个空位，for...of并没有忽略它们。如果改成map方法遍历，空位是会跳过的。
但是，for...in 是会直接跳过空位，不会进行遍历的，需要特别留意；

entries()、keys()、values()、find()和findIndex()会将空位处理成undefined。

// entries()
[...[,'a'].entries()] // [[0,undefined], [1,"a"]]

// keys()
[...[,'a'].keys()] // [0,1]

// values()
[...[,'a'].values()] // [undefined,"a"]

// find()
[,'a'].find(x => true) // undefined

// findIndex()
[,'a'].findIndex(x => true) // 0

参考链接

• 数组的扩展

---

javaScript 循环语句的对比

for

for...in

• 会跳过空值；
• 将会遍历对象自身的所有可枚举属性以及对象从其构造函数原型中继承的属性；
• for...in 语句以原始插入顺序迭代对象的可枚举属性，不能依赖于迭代的表面有序性；
• for...in 不应该用于迭代 Array，一是其顺序不确定，二是其会迭代所有对象和对象构造函数原型链里的可迭代属性；

for...of

• 不会跳过空值；
• 在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句，这里特别留意，Object 不是一个可迭代对象；
• 对于for...of的循环，可以由break, continue, throw 或return终止。在这些情况下，迭代器关闭。
• for...of 语句遍历可迭代对象定义要迭代的数据；

---

ES6 中的 Class

一个问题，为何 SubClass.__proto__ === SuperClass？

• 可能的回答：__proto__ 属性与 ES6 classes 的继承

再一个问题，ES6 中的 Class到底更接近之前的 Object 还是 Fcnction？

• 经过测试，确定是 Function；

super的一些小知识点

根据调用位置的不同，super 关键字的含义不同；

• 在子类的构造函数中使用 super()，super代表了父类的构造函数，此时，父类构造函数中的 this 指向的是子类；
• 在子类的实例方法中使用 super，super指向父类的 prototype 对象，调用父类方法时，调用的是父类的原型链上的方法；此时，该方法中的 this 指向的是子类的实例；
• 在子类的静态方法中使用 super，super指向父类 ，调用父类方法时，调用的是父类的静态方法；此时，该方法中的 this 指向的是子类；

原生构造函数的继承

• 对原生构造函数使用 apply 不会更改其 this，也就是说，原生构造函数的 this 无法绑定，从而导致拿不到内部属性；
• 究其原因，是因为 ES5 中的构造函数是先新建子类的实例对象 this，再将父类的属性添加到子类上，由于父类的内部属性无法获取，导致无法继承原生的构造函数；
• ES6 允许继承原生构造函数定义子类，ES6 是先新建父类的实例对象 this，然后再用子类的构造函数修饰 this，使得父类的所有行为都可以继承；
• 注意：继承 Object 的子类，会有一个行为差异；ES6 改变了 Object 构造函数的行为，一旦发现 Object 方法不是通过 new Object() 这种形式调用，ES6 规定 Object 构造函数忽略参数；

---

修饰器

呃，待续。