2024年Web前端最全vue使用xe-utils通用函数库(1)，算法面试经典100题

跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。

也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

面试准备

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。

• isMap (val) 判断是否 Map 对象

• isWeakMap (val) 判断是否 WeakMap 对象

• isSet (val) 判断是否 Set 对象

• isWeakSet (val) 判断是否 WeakSet 对象

• isLeapYear (date) 判断是否闰年

• isEqual (obj1, obj2) 深度比较两个对象之间的值是否相等

• isDateSame (date1, date2, format) 判断两个日期是否相同

常用函数

• toNumber ( num ) 转数值

• toInteger ( num ) 转整数

• toFixedNumber ( num, digits ) 和 Number.toFixed 类似，区别就是不会对小数进行四舍五入，结果返回数值

• toFixedString ( num, digits ) 和 Number.toFixed 类似，区别就是不会对小数进行四舍五入，结果返回字符串

• toArray ( array ) 将对象或者伪数组转为新数组

• toStringJSON (str) 字符串转 JSON

• toJSONString (obj) JSON 转字符串

• getType (obj) 获取对象类型

• getSize ( obj ) 返回对象的长度

• uniqueId ( prefix ) 获取一个全局唯一标识

• uniq ( array ) 数组去重

• union ( …array ) 将多个数的值返回唯一的并集数组

• random ( min, max ) 获取一个指定范围内随机数

• range ( start, stop, step ) 序号列表生成函数

• clear (obj[, defs, assigns]) 清空对象; defs如果不传（清空所有属性）、如果传对象（清空并继承)、如果传值(给所有赋值)

• remove (obj, iteratee) 移除对象属性

• assign (destination, …sources) 浅拷贝一个或者多个对象到目标对象中，如果第一值是true，则使用深拷贝

• clone (obj, deep) 浅拷贝/深拷贝

• destructuring (obj, …target) 将一个或者多个对象值解构到目标对象

• trim ( str ) 去除字符串左右两边的空格

• trimLeft ( str ) 去除字符串左边的空格

• trimRight ( str ) 去除字符串右边的空格

• escape ( str ) 转义HTML字符串，替换&, <, >, ", ', `字符

• unescape ( str ) 反转 escape

• camelCase ( str ) 将带驼峰字符串转成字符串

• kebabCase ( str ) 将字符串转成驼峰字符串

• repeat ( str, count ) 将字符串重复 n 次

• padStart ( str, targetLength, padString ) 用指定字符从前面开始补全字符串

• padEnd ( str, targetLength [, padString] ) 用指定字符从后面开始补全字符串

• startsWith ( str, val [, startIndex] ) 判断字符串是否在源字符串的头部

• endsWith ( str, val [, startIndex] ) 判断字符串是否在源字符串的尾部

• slice ( array, start, end ) 裁剪 Arguments 或数组 array，从 start 位置开始到 end 结束，但不包括 end 本身的位置

• indexOf (obj, val) 返回对象第一个索引值

• findIndexOf (obj, iteratee [, context]) 返回对象第一个索引值

• lastIndexOf (obj, val) 从最后开始的索引值,返回对象第一个索引值

• findLastIndexOf (obj, iteratee [, context]) 从最后开始的索引值，返回对象第一个索引值

• includes (obj, val) 判断对象是否包含该值,成功返回 true 否则 false

• includeArrays (array1, array2) 判断数组是否包含另一数组

• each ( obj, iteratee [, context] ) 通用迭代器

• arrayEach ( obj, iteratee [, context] ) 数组迭代器

• objectEach ( obj, iteratee [, context] ) 对象迭代器

• lastEach ( obj, iteratee [, context] ) 通用迭代器，从最后开始迭代

• lastArrayEach ( obj, iteratee [, context] ) 数组迭代器，从最后开始迭代

• lastObjectEach ( obj, iteratee [, context] ) 对象迭代器，从最后开始迭代

• forOf ( obj, iteratee [, context] ) 通用迭代器,支持 return false 跳出循环 break

• lastForOf ( obj, iteratee [, context] ) 通用迭代器,从最后开始迭代，支持 return false 跳出循环 break

• keys (obj) 获取对象所有属性

• values (obj) 获取对象所有值

• entries (obj) 获取对象所有属性、值

• first (obj) 获取对象第一个值

• last (obj) 获取对象最后一个值

• groupBy ( obj, iteratee [, context] ) 集合分组,默认使用键值分组，如果有 iteratee 则使用结果进行分组

• countBy ( obj, iteratee [, context] ) 集合分组统计，返回各组中对象的数量统计

• sortBy ( arr, iteratee [, context] ) 数组按属性值升序

• shuffle ( array ) 将一个数组随机打乱，返回一个新的数组

• sample ( array, number ) 从一个数组中随机返回几个元素

• some ( obj, iteratee [, context] ) 对象中的值中的每一项运行给定函数,如果函数对任一项返回 true,则返回 true,否则返回 false

• every ( obj, iteratee [, context] ) 对象中的值中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回 true,否则返回 false

• filter ( obj, iteratee [, context] ) 根据回调过滤数据

• find ( obj, iteratee [, context] ) 查找匹配第一条数据

• findKey ( obj, iteratee [, context] ) 查找匹配第一条数据的键

• map ( obj, iteratee [, context] ) 指定方法后的返回值组成的新数组

• objectMap ( obj, iteratee [, context] ) 指定方法后的返回值组成的新对象

• pick (obj, array) 根据 keys 过滤指定的属性值 或者 接收一个判断函数，返回一个新的对象

• omit (obj, array) 根据 keys 排除指定的属性值 或者 接收一个判断函数，返回一个新的对象

• copyWithin ( array, target, start [, end] ) 浅复制数组的一部分到同一数组中的另一个位置,数组大小不变

• sum ( obj, iteratee [, context] ) 求和函数，将数值相加

• mean ( obj, iteratee [, context] ) 求平均值函数

• reduce ( array, iteratee [, initialValue] ) 接收一个函数作为累加器，数组中的每个值（从左到右）开始合并，最终为一个值

• chunk ( array, size ) 将一个数组分割成大小的组。如果数组不能被平均分配，那么最后一块将是剩下的元素

• min ( arrb[, iteratee] ) 获取最小值

• max ( arr [, iteratee] ) 获取最大值

• commafy ( num [, options] ) 数值千分位分隔符、小数点

日期函数

• now ( ) 返回当前时间戳

• timestamp ( date[, format] ) 将日期转为时间戳

• toStringDate ( str, format ) 任意格式字符串转为日期

• toDateString ( date [, format, options] ) 日期格式化为任意格式字符串

• getWhatYear ( date, year [, month] ) 返回前几年或后几年的日期,可以指定年初(first)、年末(last)、月份(0~11)，默认当前

• getWhatMonth ( date, month [, day] ) 返回前几月或后几月的日期,可以指定月初(first)、月末(last)、天数，默认当前

• getWhatWeek ( date, week [, day] ) 返回前几周或后几周的日期,可以指定星期几(0~6)，默认当前

• getWhatDay ( date, day [, mode] ) 返回前几天或后几天的日期

• getDayOfYear ( date [, year] ) 返回某个年份的天数,可以指定前几个年或后几个年，默认当前

• getYearDay ( date ) 返回某个年份的第几天

• getYearWeek ( date ) 返回某个年份的第几周

• getMonthWeek ( date ) 返回某个月份的第几周

• getDayOfMonth ( date [, month] ) 返回某个月份的天数,可以指定前几个月或后几个月，默认当前

• getDateDiff ( startDate, endDate [, rules] ) 返回两个日期之间差距,如果结束日期小于开始日期 done 为 fasle

高级函数

• toArrayTree ( array, options ) 一个高性能的树结构转换函数，将一个带层级的数据列表转成树结构

• toTreeArray ( array, options ) 将一个树结构转成数组列表

• property ( path ) 返回一个获取对象属性的函数

• pluck ( array, key ) 获取数组对象中某属性值，返回一个数组

• invoke ( list, path, …arguments ) 在list的每个元素上执行方法,任何传递的额外参数都会在调用方法的时候传递给它

• zip ( ) 将每个数组中相应位置的值合并在一起

• unzip ( arrays ) 与 zip 相反

• delay (callback, wait[, …arguments]) 该方法和 setTimeout 一样的效果，区别就是支持额外参数

• bind (callback, context[, …arguments]) 创建一个绑定上下文的函数

• once (callback, context[, …arguments]) 创建一个只能调用一次的函数,只会返回第一次执行后的结果

• after (count, callback, context) 创建一个函数, 调用次数超过 count 次之后执行回调并将所有结果记住后返回

• before (count, callback, context) 创建一个函数, 调用次数不超过 count 次之前执行回调并将所有结果记住后返回

• throttle (callback, wait[, options]) 创建一个策略函数，当被重复调用函数的时候，至少每隔多少秒毫秒调用一次该函数

• debounce (callback, wait[, options]) 创建一个防反跳策略函数，在函数最后一次调用多少毫秒之后才会再次执行，如果在期间内重复调用会重新计算延迟

浏览器函数

• serialize ( query ) 序列化查询参数

• unserialize ( str ) 反转序列化查询参数

• browse ( ) 获取浏览器信息

• locat ( ) 获取地址栏信息

• parseUrl ( url ) 解析 URL 参数

• getBaseURL ( ) 获取上下文路径

• cookie ( name, value, options ) Cookie 操作函数

三、如何全局使用xe-utils

================

这玩意肯定需要全局使用，这样工程中任何地方都能方便使用。

3.1 安装xe-utils

---

3.1.1 ES6方式（推荐）：

npm install xe-utils vxe-utils --save

备注：最好连同vxe-utils一起安装了

3.1.2 CDN安装

3.1.3 AMD安装

require.js安装实例：

// require 配置

require.config({

paths: {

// …,

‘xe-utils’: ‘./dist/xe-utils.min’,

‘vxe-utils’: ‘./dist/vxe-utils.min’

}

})

// ./main.js 安装

define([‘Vue’, ‘xe-utils’, ‘vxe-utils’], function (Vue, XEUtils, VXEUtils) {

Vue.use(VXEUtils, XEUtils)

})

3.2 全局配置

---

在main.js中通过Vue.use()来全局安装：

import Vue from ‘vue’

import XEUtils from ‘xe-utils’

import VXEUtils from ‘vxe-utils’

// mounts 可以设置[‘cookie’, ‘browse’, ‘locat’]

Vue.use(VXEUtils, XEUtils, {mounts: [‘cookie’]})

3.3 全局参数配置（可省略）

---

这步操作，可以省略，即全部采用默认的。

XEUtils.setup({

cookies: {

path: ‘/’

},

treeOptions: {strict: false, parentKey: ‘parentId’, key: ‘id’, children: ‘children’, data: null},

formatDate: ‘yyyy-MM-dd HH:mm:ss.SSS’,

formatString: ‘yyyy-MM-dd HH:mm:ss’,

formatStringMatchs : {

E: [‘周日’, ‘周一’, ‘周二’, ‘周三’, ‘周四’, ‘周五’, ‘周六’],

q: [null, ‘第一季度’, ‘第二季度’, ‘第三季度’, ‘第四季度’]

},

commafys: {spaceNumber: 3, separator: ‘,’, fixed: 0}

})

3.4 使用

---

在vue文件中，template标签利用$utils.方法名调用，script中利用this.$utils.方法名调用：

template标签中：

{{ $utils.toDateString(startDate, 'yyyy-dd-MM HH:mm:ss') }}

//直接使用$utils.函数名称来调用函数

script标签中：