5 - 检测数据类型

一、检测数据类型

1. typeof

typeof:用来检测数据类型的 typeof[value] return: 首先是个字符串：字符串中包含对应的数据类型，例如”number”、”object”、”undefined”、”function” 局限性：

1. typeof null // object
   不能具体区分对象数据类型的值（无法检测正则还是数组等）
2. typeof [] // object
3. typeof {} // object
4. typeof /^&/ // object

优势：使用方便，所以在真实项目中，我们也会大量应用它来检测，尤其是在检测基本数据类型值（除 null 以外）和函数数据类型值的时候，它还是很方便的

function fun (n, m) {
    // 形参赋值默认值
    // ES6 func (n = 0, m = 0)
    // 检测形参的值是否为undefined
    n === undefined ? n : null;
    typeof m === "undefined" ? m = 0 : null;
    // 基于逻辑或和逻辑与处理，（瑕疵：不仅仅是不传赋值默认值，如果传递的值是假也会处理成为默认值
    n = n || 0;
    m = m || 0;
    // 回调函数执行
    typeof callback === "function" ? callback() : null;
    callback && callback() 
    // 瑕疵：传递为真即可执行，不一定是一个函数，这样写是开发者心里已经知道，要不然不传，要传就是一个函数
}
func (10, 20, function anonymous () {});

instanceof

instanceof:本意是用来检测实例是否隶属于某个类的运算符，我们基于这种方式，也可以用来做某些数据类型的检测，例如：数组、正则等。

局限性：

1. 不能处理基本数据类型
2. 只要在当前实例的原型链中（proto)出现过的类，检测结果都是 ture (用户可能会手动修改原型链的指向：example.proto 或者 在类的继承中 等情况)

function func () {
    // arguments：类数组
    arguments.__proto__ = Array.prototype;
    console.log(arguments instanceof Array) // ture
}
func();
let arr = [],
    reg = /^&/,
    obj = {};
console.log(arr instanceof Array); // true
console.log(reg instanceof Array); // false
console.log(arr instanceof Object); // true
console.log(obj instanceof Array); // false
// 检测基本数据类型
console.log(1 instanceof Number); // false
// 创建值的两种方式
// 字面量
let n = 12;
// 构造函数
let m = new Number('12');

constructor

constructor:构造函数

在类的原型上一般都会有 constructor 属性，存储当前类本身，我们也是利用这一点，获取某类的实例constructor 属性值，验证是否为所属的类，从而进行数据类型检测

局限性：constructor 的值太容易被修改了

let n = 12,
    arr = [];
console.log(n.constructor === Number); // true
console.log(arr.constructor === Array); // true
console.log(arr.constructor === Object); // false
arr.constructor === 111; // 设置私有属性
console.log(arr.constructor === Array); // false
Func.prototype = {}; // 这样原型上没有 constructor 属性（重构了）

Objcet.prototype.toString.call(value)

Objcet.prototype.toString.call(value) : 原理是调用 Object 原型上的 toString 方法，让方法执行的时候，方法中的 this 是要检测的数据类型，从而获取到数据类型所属类的详细信息

信息的模板: “[objcet 所属类]” , 例如： “[object Array]” …

在所有的数据类型类中，他们的原型上都有 toString 方法，除 Objcet.prototpye.toString。不是把数据类型转换为字符串，其余的都是转换为字符串，而 Object 的原型上的 toString 是检测当前实例隶属类的详细信息的。

obj.toString();

1. 首先基于原型链查找机制，找到 object.prototype.toString
2. 把找到的方法执行，方法中的 this：obj
3. 方法内部把 this(obj) 所属类信息输出
4. 方法执行：方法中的 this 是谁，就是检测谁的所属类信息

let _obj = {};
console.log(_obj.toString.call(100)); // [object Number]
Objcet.prototype.toString.call(100); // 两者等价
function func (n, m) {
    return n + m;
}
let obj1 = {},
    obj2 = {
        name:'zhufeng'
    };
obj1.toSrring();
console.log([12, 23].toString()); // 12, 23
console.log(/^\d+$/.toString()); // /^\d+$/
console.log(func.toString()); // "function func(n, m) {..."
console.log(obj1.toString()); // "[object Object]"
console.log(obj2.toString()); // "[object Object]"
这个方法很强大
所有数据类型隶属的类信息检测的一清二楚
let _obj = {},
toString = _obj.toString
[object '数据类型']
// String Boolean Null Undefined ...

二、封装一个数据类型检测的方法库

var _obj = {
        isNumeric: "Number",
        isBoolean: 'Boolean',
        isString: 'String',
        isNull: 'Null',
        isUndefined: 'Undefined',
        isSymbol: 'Symbol',
        isPlainObject: 'Object',
        isArray: 'Array',
        isRegExp: 'RegExp',
        isDate: 'Date',
        isFunction: "Function",
        isWindow: 'Window'
    },
    _toString = _obj.toString,
    _type = {};
for (var key in _obj) {
    if (!_obj.hasOwnProperty(key)) break;
    _type[key] = (function () {
        var reg = new RegExp("^\\[object " + _obj[key] + "\\]$");
        return function anonymous(val) {
            return reg.test(_toString.call(val));
        }
    })();
}；

三、回调函数

把一个函数当作实参传递个另外一个函数，在另外一个函数执行过程当中，把传递进来的函数执行，这种机制就是回调函数 真实场景应用：

1. AJAX 异步请求成功做什么事
2. 浏览器内置的一些方法支持回调函数
3. 插件组件封装中的钩子函数（生命周期函数）

四、一个综合的 each 方法

/*
 * _each：遍历数组、类数组、对象中的每一项 
 *   @params
 *     obj:需要迭代的数组、类数组、普通对象
 *     callback:回调函数（每遍历数组中的某一项，就会把回调函数执行一次；而且需要把当前遍历的内容和索引[属性值和属性名]传给回调函数；接收回调函数的返回结果，如果是 false，则结束当前的循环，如果是其它值，让返回的值替换数组中的当前项，如果没有返回值，则什么都不处理...）
 *     context:传递的第三个参数，可以改变回调函数中的 THIS 指向，不传递默认是 window
 *   @return
 *     返回一个新的数组或者对象（原来的数组或者对象不变）
 */
function _each(obj, callback, context = window) {
    let isLikeArray = _type.isArray(obj) || (('length' in obj) && _type.isNumeric(obj.length));
    typeof callback !== "function" ? callback = Function.prototype : null;
    // 数组或者类数组
    if (isLikeArray) {
        let arr = [...obj];
        for (let i = 0; i < arr.length; i++) {
            let item = arr[i],
                result = callback.call(context, item, i);
            if (result === false) break;
            if (typeof result === "undefined") continue;
            arr[i] = result;
        }
        return arr;
    }
    // 对象的处理
    let opp = {
        ...obj
    };
    for (let key in opp) {
        if (!opp.hasOwnProperty(key)) break;
        let value = opp[key],
            result = callback.call(context, value, key);
        if (result === false) break;
        if (typeof result === "undefined") continue;
        opp[key] = result;
    }
    return opp;
}

五、重写 replace 方法

/*
 * 重写字符串内置方法 replace 
 *    1.正则在字符串中匹配几次，我们传递的回调函数就会被执行几次（前提：正则设置了 global 修饰符）
 *    2.每一次执行回调函数，都把当前正则匹配的信息（既有大正则，也有小分组的）传递给回调函数
 *    3.还要接收回调函数的返回值，返回的是啥内容，就要把当前字符串中正则匹配这一部分内容替换成啥
 */
~ function () {
    // 处理字符串：把字符串中的某一项替换成另外一项
    function handle(str, val1, val2) {
        let index = str.indexOf(val1);
        return str.substring(0, index) + val2 + str.substring(index + val1.length);
    }
    function replace(reg, callback) {
        let _this = this.substring(0),
            isGlobal = reg.global,
            arr = reg.exec(this);
        while (arr) {
            // 捕获到的结果是数组(执行回调函数,把捕获的结果传递给它)；还要接收回调函数执行的返回值，用返回值替换字符串中当前正则匹配的内容；
            if (typeof callback === "function") {
                let res = callback.apply(null, arr);
                _this = handle(_this, arr[0], res);
            }
            arr = reg.exec(this);
            // 不设置 GLOBAL 的情况执行一次
            if (!isGlobal) break;
        }
        return _this;
    }
    String.prototype.replace = replace;
}();
let str = "{0}年{1}月{2}日",
    arr = ['2019', '09', '03'];
str = str.replace(/\{(\d)\}/g, function (content, group1) {
    return '@#' + arr[group1];
});
console.log(str);