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 构造函数忽略参数；

---

修饰器

呃，待续。