JavaScript工具类（七）：array数组

Array

定义：数组对象是使用单独的变量名来存储一系列的值。

一、创建数组

字面方式

var myCars = ['Audi', 'Benz', 'BMW']

常规方式

var myCars = new Array()
myCars[0] = 'Audi'
myCars[1] = 'Benz'
myCars[2] = 'BMW'

简洁方式

var myCars = new Array('Audi', 'Benz', 'BMW')

二、常用属性

属性	描述
length	设置或返回数组元素的个数。
prototype	允许你向数组对象添加属性或方法。
constructor	返回创建数组对象的原型函数。

三、常用方法

方法	描述
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
shift()	删除并返回数组的第一个元素。
pop()	删除并返回数组的最后一个元素。
splice(index,howmany,itemX)	从数组中添加或删除元素。
slice(start, end)	返回一个新的数组，包含从 start 到 end （不包括该元素）的数组中的元素。
join()	连接数组，返回字符串。
reverse()	反转数组的元素顺序。
sort(sortby)	对数组的元素进行排序。如果不传参数则按照字符编码的顺序
forEach(function(item, index){})	调用数组的每个元素，并将元素传递给回调函数。（不能break）
filter(function(item, index){ return *** })	返回一个新的数组，新数组中的元素是 return true 的所有元素。不会改变原始数组

四、伪数组（类数组）

定义：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。

• 函数的 argument 参数；
• 调用 getElementsByTagName、document、childNodes 之类的，它们都返回 NodeList 对象都属于伪数组。

如何将伪数组数组转化为真正的Array对象：

Array.prototype.slice.call(fakeArray)

五、array 数组方法封装

u.array = {};

检索数组（子元素为数组、对象、字符串等）

/**
 * @description 检索数组（子元素为数组、对象、字符串等）
 * @param {Array} source [''] [[]] [{}]
 * @param {*} searchElement 当子元素为对象时，只用匹配该对象的某一个（几个）属性即可
 * @return {Number} 索引 或 -1
 */
u.array.indexOf = function(source, searchElement) {
    var index = -1
    // 子元素为对象
    if (u.isObject(searchElement)) {
        u.forEach(source, function(i, item) {
            var isHas = true
            u.forEach(searchElement, function(searchKey, searchValue) {
                if (item[searchKey]) {
                    if (!u.equal(item[searchKey], searchValue)) {
                        isHas = false
                        return false
                    }
                }
                else {
                    isHas = false
                }
            })
            if (isHas) {
                index = i
                return false
            }
        })
        return index
    }
    // 子元素为数组
    if (u.isArray(searchElement)) {
        u.forEach(source, function(i, item) {
            if (u.equal(item, searchElement)) {
                index = i
                return false
            }
        })
        return index
    }
    // 子元素为字符串
    else {
        return source.indexOf(searchElement)
    }
}

向数组的末尾添加一个或多个元素，并返回新的长度

/**
 *@description 向数组的末尾添加一个或多个元素，并返回新的长度
 * @param {Array} target 目标数组
 * @param {Array} array 要添加的数组
 * @return {Number} 新数组的长度
 */
u.array.push = function(target, array) {
    if (u.isEmpty(array)) return
    if (!u.isArray(array)) array = [array]
    return Array.prototype.push.apply(target, array)
}

对数组排序

/**
 * @description 对数组排序
 * @param {Array} array 源数组 [{}]
 * @param {String} sortKey 排序字段
 * @param {String} order 排序方式，asc升序，desc降序，默认为升序
 * @return {Array} 排序后的新数组
 */
u.array.sort = function(array, sortKey, order) {
    if (u.isEmpty(array)) return []
    var ret = array.concat([])
    order = order || 'asc'
    ret.sort(function(a, b) {
        var aVal = a[sortKey]
        var bVal = b[sortKey]
        if (aVal > bVal) return order === 'asc' ? 1 : -1
        else if (aVal < bVal) return order === 'asc' ? -1 : 1
        return 0
    })
    return ret
}

数组去重（子元素为数组、对象、字符串等）

/**
 * @description 数组去重（子元素为数组、对象、字符串等）
 * @param {Array} array [''] [[]] [{}]
 * @param {String Array} keys 根据属性去重（针对子元素是对象时）
 * @param {Boolean} ignoreSort 是否忽略排序（针对子元素是数组时）
 * @return {Array}
 */
u.array.unique = function(array, keys, ignoreSort) {
    var ret = []
    u.forEach(array, function(i, item) {
        if (keys && u.isObject(item)) { // 根据属性去重，去掉排在末位的对象
            if (!u.isArray(keys)) keys = [keys]
            var searchObj = {}
            u.forEach(keys, function(i, selectKey) {
                searchObj[selectKey] = item[selectKey]
            })
            if (u.array.indexOf(ret, searchObj) === -1) ret.push(item)
        }
        else if (ignoreSort && u.isArray(item)) {
            if (u.array.indexOf(ret, item.sort()) === -1) ret.push(item)
        }
        else {
            if (u.array.indexOf(ret, item) === -1) ret.push(item)
        }
    })
    return ret
}

筛选出符合条件的数组，生成新的数组

/**
 * @description 筛选出符合条件的数组，生成新的数组
 * @param {Array} source 原数组 [{}]
 * @param {Object} filterProperty 条件对象 { status: ['1','2'] }
 * @param {Boolean} getDeleteData 是否返回被过滤掉的数组，默认false
 * @return {Array} 符合条件的数据 或 不符合条件的数据
 */
u.array.filter = function(source, filterProperty, getDeleteData) {
    if (u.isEmpty(source) || u.isEmpty(filterProperty)) return []

    var ret = []
    var retByDelete = []
    u.forEach(source, function(i, item) {
        var equal = true
        u.forEach(filterProperty, function(filterKey, filterValue) {
            var itemValue = item[filterKey]
            if (!u.isArray(filterValue)) filterValue = [filterValue]
            if (filterValue.indexOf(itemValue) === -1) {
                equal = false
                return false
            }
        })
        if (equal) ret.push(item)
        else retByDelete.push(item)
    })
    if (getDeleteData) return retByDelete
    return ret
}

选择数组的子元素（对象）的一个（多个）属性

/**
 * @description 选择数组的子元素（对象）的一个（多个）属性
 * @param {Array} source 源数组 [{}]
 * @param {String Array} keys 属性（集合）
 * @return {Array} 新数组 [''] 或 [{}]
 */
u.array.select = function(source, keys) {
    if (u.isEmpty(source) || u.isEmpty(keys)) return source

    var ret = []
    u.forEach(source, function(i, item) {
        if (u.isArray(keys)) {
            var obj = {}
            u.forEach(keys, function(j, key) {
                obj[key] = u.object.getValue(item, key)
            })
            ret.push(obj)
        }
        else {
            ret.push(u.object.getValue(item, keys))
        }
    })
    return ret
}

合并两个数组，生成新的数组

/**
 * @description 合并两个数组，生成新的数组
 * @param {Array} source 原数组
 * @param {Array} array 待合并的数组
 * @param {String Array} keys 根据属性去重（针对子元素是对象时）
 * @param {Boolean} ignoreSort 是否忽略排序（针对子元素是数组时）
 * @return {Object}
 */
u.array.concat = function(source, array, keys, ignoreSort) {
    if (u.isEmpty(source)) return array
    if (u.isEmpty(array)) return source

    var ret = []
    ret = source.concat(array)
    ret = u.array.unique(ret, keys, ignoreSort)
    return ret
}

对数组中的元素进行分组

/**
 * @description 对数组中的元素进行分组
 * @param {Array} array 数组
 * @param {Array} fields 分组的依据字段
 * @return {Array} 分组后的新数组
 */
u.array.group = function(array, fields) {
    if (u.isEmpty(array) || u.isEmpty(fields)) return null

    var ret = []
    u.forEach(array, function(i, item) {
        if (!u.isArray(fields)) fields = [fields]

        var itemGroup = {}
        u.forEach(fields, function(i, field) {
            itemGroup[field] = item[field]
        })
        var index = u.array.indexOf(ret, itemGroup)
        if (index === -1) {
            itemGroup.group = []
            itemGroup.group.push(item)
            ret.push(itemGroup)
        }
        else {
            ret[index].group.push(item)
        }
    })
    return ret
}

删除数组中 指定的元素 或 不合法的值（undefined, null, ‘’)

/**
 * @description 删除数组中 指定的元素 或 不合法的值（undefined, null, '')
 * @param {Array} source 原数组
 * @param {*} values 被删除的元素集合，不传则删除不合法的值
 */
u.array.remove = function(array, values) {
    if (u.isEmpty(array)) return []
    // 删除不合法的值
    if (u.isEmpty(values)) {
        var i = array.length
        while (i--) {
            var item = array[i]
            if (item === null || item === undefined || item === '') {
                array.splice(i, 1)
            }
        }
    }
    // 删除指定的元素
    else {
        if (!u.isArray(values)) values = [values]
        u.forEach(values, function(i, value) {
            var index = u.array.indexOf(array, value)
            if (index > -1) array.splice(index, 1)
        })
    }
}

清空数组中的元素

/**
 * @description 清空数组中的元素
 * @param {Array} array 源数组
 */
u.array.clear = function(array) {
    if (u.isEmpty(array)) return

    array.splice(0, array.length)
}

下载

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用法实例