自验积累（1）-JavaScript

1. js基础

1.1 数据类型

1.1 基本类型

1. Boolean（布尔）
2. String（字符串）
3. Number（数字）
4. null（空）
5. undefined（未定义）
6. Symbol（符号）（ES2015 新增）

1.2 引用类型

1. Object（对象）
2. Array（数组）
3. Date（日期）
4. Function（函数）？？
5. RegExp（正则表达式）？？
6. Error（错误）？？

1.1.3 变量

1. let与var的区别？
2. 为何 var 能够重复声明？

1.2 数组

1.2.1 数组各版本支持函数

ES3：

• new Array() 构造器

• 改变自身的方法：

  1. push()、pop()：操做数组末尾，pop 返回出栈元素，push 返回数组新长度
  2. shift()、unshift()：操做数组头，unshift 返回出队列元素，shift 返回数组新长度
  3. splice(start,deleteCount[, item1[, item2[, …]]])：删除元素，并向数组添加新元素，返回由原数组中被删除元素组成的数组；
  4. sort()：数组元素默认按照各自转换为字符串的Unicode(万国码)位点顺序排序。例如"Boy"将排到"apple"以前。当对数字排序的时候，25将会排到8以前，由于转换为字符串后，”25”将比”8”靠前；
  5. reverse()：颠倒数组中元素的顺序。

• 不改变自身的方法：

  1. concat()
  2. join()
  3. slice()：将数组中一部分元素浅复制存入新的数组对象，而且返回这个数组对象。
  4. toString()、toLocaleString()：把数组转换为字符串/本地数组，并返回结果
  5. valueOf()：返回数组对象的原始值
  6. toSource()：返回该对象的源代码（目前只有 Firefox 实现了它）

ES5：

• 新增方法：
  1. Array.isArray() 构造函数方法
• 不改变自身的方法：
  1. indexOf()、lastIndexOf()
  2. map()、forEach()、every()、some()、filter()
  3. reduce(fn, initialValue)、reduceRight()

ES6(ES2015)：

新增方法：

• Array.of()、Array.from() 构造函数方法

• 改变自身的方法：

  1. copyWithin(target, start[, end = this.length])：在当前数组内部，将指定位置的成员复制到其余位置（会覆盖原有成员），而后返回当前数组。
  2. fill(value, start[, end = this.length])：将数组指定区间内的元素替换为某个值。

• 不改变自身的方法：

  1. find() 和 findIndex()：返回数组中第一个知足条件的元素/索引
  2. keys()、values() 和 entries()：返回一个数组迭代器对象
  3. flat()，flatMap()：默认只会“拉平”一层

• 可使用 for ... of 遍历数组

• Array.of() 用于将参数依次转化为数组中的一项，而后返回这个新数组，而无论这个参数是数字仍是其它。它基本上与Array构造器功能一致，惟一的区别就在单个数字参数的处理上。以下：

  Array.of(8.0); // => [8] 
  Array(8.0);    // => [undefined × 8]
  复制代码

  参数为多个，或单个参数不是数字时，Array.of() 与 Array 构造器等同。

  Array.of(8.0, 5); // => [8, 5]
  Array(8.0, 5);    // => [8, 5]
  Array.of('8');    // => ['8']
  Array('8');       // => ["8"]
  复制代码

• Array.from() 用于将两类对象转为真正的数组：相似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。所谓相似数组的对象，本质特征只有一点，即必须有length属性。 注意：

  • 扩展运算符（...）也能够将某些数据结构转为数组。扩展运算符背后调用的是遍历器接口（Symbol.iterator），若是一个对象没有部署这个接口，就没法转换。
  • 任何有length属性的对象，均可以经过Array.from方法转为数组，而此时扩展运算符就没法转换。

ES7(ES2016)

新增方法：

1. includes()：与 indexOf() 的惟一区别就是includes()可以发现NaN，而 indexOf() 不能。

   var array = [NaN]; 
   console.log(array.includes(NaN)); // => true 
   console.log(array.indexOf(NaN)>-1); // => false
   复制代码

1.2.2 检验数组类型

ES3：

var a = []; 
// 1.基于instanceof 
a instanceof Array; 

// 2.基于constructor 
a.constructor === Array; 

// 3.基于Object.prototype.isPrototypeOf 
Array.prototype.isPrototypeOf(a); 

// 4.基于getPrototypeOf 
Object.getPrototypeOf(a) === Array.prototype; 

// 5.基于Object.prototype.toString 
Object.prototype.toString.apply(a) === '[object Array]';
复制代码

以上，除了Object.prototype.toString外，其它方法都不能正确判断变量的类型。

要知道，代码的运行环境十分复杂，一个变量可能使用浑身解数去迷惑它的创造者。且看：

var a = {
    __proto__: Array.prototype
};

// 分别在控制台试运行如下代码// 1.基于instanceof
a instanceof Array; // => true

// 2.基于constructor
a.constructor === Array; // => true

// 3.基于Object.prototype.isPrototypeOfArray.prototype.isPrototypeOf(a); // => true

// 4.基于getPrototypeOf
Object.getPrototypeOf(a) === Array.prototype; // => true
复制代码

以上，4种方法将所有返回true，为何呢？咱们只是手动指定了某个对象的__proto__属性为Array.prototype，便致使了该对象继承了Array对象，这种绝不负责任的继承方式，使得基于继承的判断方案瞬间土崩瓦解。

不只如此，咱们还知道，Array是堆数据，变量指向的只是它的引用地址，所以每一个页面的Array对象引用的地址都是不同的。iframe中声明的数组，它的构造函数是iframe中的Array对象。若是在iframe声明了一个数组x，将其赋值给父页面的变量y，那么在父页面使用y instanceof Array ，结果必定是false的。而最后一种返回的是字符串，不会存在引用问题。实际上，多页面或系统之间的交互只有字符串可以畅行无阻。

1. value instanceof Array

缺点：

• 在多个全局做用域（一个页面包含多个 frame ）的状况下，会有问题。value 必须与 Array 构造函数在同一个全局做用域中。（Array 是 window 的属性）若是 value 是在另外一个 frame 中定义的数组，那么上面代码会返回 false。

2. Object.prototype.toString.call(value) == "[object Array]"

function isArray(){
    return Object.prototype.toString.call(value) == "[object Array]"
}
复制代码

一样思路能够用来检测某个值是否是 原生函数 或 正则表达式：

function isFunction(){
    return Object.prototype.toString.call(value) == "[object Function]"
}

function isRegExp(){
    return Object.prototype.toString.call(value) == "[object RegExp]"
}
复制代码

ES5：

1. Array.isArray()

环境要求：IE9+

Array.isArray([]); // => true 
Array.isArray({0: 'a', length: 1}); // => false
复制代码

ES6：

1.2.3 数组遍历

1.2.4 数组去重

1.2.5 删除数组中全部的重复元素(包括自身)

如a = [1, 2, 3, 2]，指望获得b = [1, 3]

a.filter(v=> a.indexOf(v) === a.lastIndexOf(v))
复制代码

1.2.6 数组排序

各浏览器的针对 sort() 方法内部算法实现不尽相同，排序函数尽可能只返回-一、0、1三种不一样的值，不要尝试返回 true 或 false 等其它数值，由于可能致使不可靠的排序结果。

1. 纯数字

let arr = [10, 1, 3, 20];
arr.sort((a,b)=>a-b)
复制代码

1.2.5 怎样去除两个数组的交集，合并成新数组

如：a = [1, 2, 3, 4], b = [3, 4, 5, 5], 指望获得c = [1, 2, 5, 5]

let temp = a.filter(v=>b.includes(v)); 
let c = [...a,...b].filter(v=> !temp.includes(v))
复制代码

1.2.6 Array.from 使用实例

1. 生成一个从0到指定数字的新数组

   Array.from({length: 10}, (v, i) => i); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   复制代码

2. 将字符串转为数组，而后返回字符串的长度。 由于 Array.from 能正确处理各类 Unicode 字符，能够避免 JavaScript 将大于\uFFFF的 Unicode 字符，算做两个字符的 bug。

   function countSymbols(string) {
     return Array.from(string).length;
   }
   复制代码

1.3 对象

1.3.1 怎么判断两个对象相等？

【未完待续】