JavaScript工具类（四）：数据类型

数据类型

一、类型划分

基本数据类型：Undefined、Null、Boolean、Number、String、Symbol

引用数据类型：Object、Array、Function

二、区别

1、存储位置不同

• 基本数据类型直接存储在 栈 (stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；

• 引用数据类型存储在 堆 (heap)中的对象,占据空间大、大小不固定，如果存储在栈中，将会影响程序运行的性能；

• 引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

• 内存图：

2、赋值不同

• 基本类型：赋值的时候，只是值的赋值。

• 引用类型：赋值的时候，不仅是值的赋值，而且也是引用的传递。

  var a = [1,2,3];
  var b = a; // 赋值后，a、b指向同一个地址
  b.push(4);
  console.log(a); // [1,2,3,4] ---> 会影响a，因为地址一样
  
  var c = [1,2,3,4];
  console.log(a == c); // false 地址不一样(引用类型指向)
  

三、数据类型判断

方法	描述
typeof	返回一个字符串 undefined boolean number string function symbol object
toString()	转化为字符串

返回false的值有：undefined null 0 '' boolean

四、全局函数

函数	描述
escape()	对字符串进行编码。不会对 ASCII 字母和数字进行编码，也不会对*@-_+./这些 ASCII 标点符号进行编码。其他所有的字符都会被转义序列替换。
encodeURI()	把字符串编码为 URI。不会对,/?:@&=+$#这些在 URI 中具有特殊含义的 ASCII 标点符号进行编码。
encodeURIComponent()	把字符串编码为 URI 组件。不会对 ASCII 字母和数字进行编码，也不会对-_.!~*'()这些 ASCII 标点符号进行编码 。其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。
unescape()	对由 escape() 编码的字符串进行解码。
decodeURI()	对由 encodeURI() 编码的字符串进行解码。
decodeURIComponent()	对由 encodeURIComponent() 编码的字符串进行解码。
eval()	计算 JavaScript 字符串，并把它作为脚本代码来执行。如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句
isNaN()	检查某个值是否是数字。
parseFloat()	解析一个字符串并返回一个浮点数。强制类型转换
parseInt()	解析一个字符串并返回一个整数。强制类型转换
String()	把对象的值转换为字符串。强制类型转换
Number()	把对象的值转换为数字。强制类型转换

五、数据类型方法封装

判断元素是否为字符串

/**
 * @description 判断元素是否为字符串
 * @param {*} source
 * @return {Boolen}
 */
u.isString = function(source) {
    return typeof (source) === 'string'
}

判断元素是否为对象

/**
 * @description 判断元素是否为对象
 * @param {*} source 
 * @return {Boolen}
 */
u.isObject = function (source) {
    return Object.prototype.toString.call(source) === '[object Object]';
};

判断元素是否为数组

/**
 * @description 判断元素是否为数组
 * @param {*} source 
 * @return {Boolen}
 */
u.isArray = function (source) {
    if (Array.isArray) return Array.isArray(source);
    else return source instanceof Array;
};

判断元素是否为函数

/**
 *@description 判断元素是否为函数
 * @param {*} source
 * @return {Boolen}
 */
u.isFunction = function(source) {
    return typeof (source) === 'function'
}

判断元素是否为空

/**
 * @description 判断元素是否为空
 * @param {*} source
 * @return {Boolen}
 */
u.isEmpty = function(source) {
    if (source === undefined || source === null) return true
    if (u.isString(source)) return source.length === 0
    if (u.isArray(source)) return source.length === 0
    if (u.isObject(source)) return JSON.stringify(source) === '{}'
    else return source.toString().length === 0
}

遍历数组、对象

/**
 * @description 遍历数组、对象
 * @param {*} source 对象或数组，（字符串也适用）
 * @param {Function} func 执行函数，function(i, item) 或 function(key, value)。执行函数返回 false 时，循环终止。
 */
u.forEach = function(source, func) {
    if (u.isEmpty(source)) return
    if (typeof (func) !== 'function') return
    var i = 0
    for (var ikey in source) {
        var flag = func.apply(window, [(typeof (source) === 'object' ? ikey : i++), source[ikey]])
        if (flag === false) break
    }
}

判断两个元素是否相等

/**
 * @description 判断两个元素是否相等
 * @param {*} source1
 * @param {*} source2
 * @param {Boolean} ignoreCase 是否忽略掉大小写，不传则为false
 * @param {Boolean} ignoreSort 是否忽略排序，不传则为false
 * @return {Boolean} 是否相等
 */
u.equal = function(source1, source2, ignoreCase, ignoreSort) {
    u.prop_equal = true
    // 同为数组或同为对象
    if ((u.isArray(source1) && u.isArray(source2)) || (u.isObject(source1) && u.isObject(source2))) {
        if (u.isArray(source1)) {
            if (source1.length !== source2.length) {
                u.prop_equal = false
                return false
            }
            if (ignoreSort) {
                source1.sort()
                source2.sort()
            }
        }
        else {
            if (u.length(source1) !== u.length(source2)) {
                u.prop_equal = false
                return false
            }
        }

        u.forEach(source1, function(ikey, item) {
            return u.equal(item, source2[ikey], ignoreCase, ignoreSort)
        })
        return u.prop_equal
    }
    // 字符串
    else {
        if (ignoreCase) {
            source1 = String.prototype.toLowerCase.call(source1.toString())
            source2 = String.prototype.toLowerCase.call(source2.toString())
        }
        if (source1 !== source2) u.prop_equal = false
        return u.prop_equal
    }
}

深拷贝

/**
 * @description 深拷贝 对象或数组
 * @param {*} source 源数据
 * @return {*}
 */
u.copy = function(source) {
    var ret
    if (u.isObject(source)) {
        ret = {}
        u.forEach(source, function(key, value) {
            if (u.isObject(value) || u.isArray(value)) {
                value = u.copy(value)
            }
            ret[key] = value
        })
    }
    else if (u.isArray(source)) {
        ret = []
        u.forEach(source, function(i, item) {
            if (u.isObject(item) || u.isArray(item)) {
                item = u.copy(item)
            }
            ret.push(item)
        })
    }
    else return source
    return ret
}

扩展对象（深拷贝）

/**
 * @description 扩展对象（深拷贝）
 * @param {Object} target 目标对象
 * @param arguments 后面的属性会覆盖掉前面的
 */
u.extend = function(target) {
    if (!u.isObject(target)) return

    for (var i = 1; i < arguments.length; i++) {
        var nextObj = arguments[i]
        if (u.isObject(nextObj)) {
            for (var key in nextObj) {
                var value = nextObj[key]
                if (u.isObject(value) || u.isArray(value)) {
                    value = u.copy(value)
                }
                target[key] = value
            }
        }
    }
    return target
}

判断元素的长度

/**
 * @description 判断元素的长度
 * @param {*} source
 * @return
 */
u.length = function(source) {
    if (source === undefined || source === null) return 0
    if (u.isString(source)) return source.length
    if (u.isArray(source)) return source.length
    if (u.isObject(source)) {
        var len = 0
        for (var key in source) {
            if (Object.prototype.hasOwnProperty.call(source, key)) { // 每个对象都有一个内部属性（__proto__指向原型）
                len++
            }
        }
        return len
    }
}

下载

npm i sg-utils -S

GitHub地址（记得给星哦）

https://github.com/shiguang0116/sg-utils

系列文章

JavaScript工具类（一）：util.js创建及上传
JavaScript工具类（二）：cookie缓存
JavaScript工具类（三）：localStorage本地储存
JavaScript工具类（四）：数据类型
JavaScript工具类（五）：string字符串
JavaScript工具类（六）：number数字
JavaScript工具类（七）：array数组
JavaScript工具类（八）：object对象
JavaScript工具类（九）：date日期
JavaScript工具类（十）：base64编码、解码
JavaScript工具类（十一）：浏览器、移动端类型
JavaScript工具类（十二）：validate表单验证
JavaScript工具类（十三）：url路径处理
JavaScript工具类（十四）：json数据格式
JavaScript工具类：util.js用法实例