JavaScript常用方法整理

发表于 更新于 分类于 阅读次数： 本文字数： 644 阅读时长 ≈ 2 分钟

字符串方法

剔除字符串中所有空格

1
2
3
 const trim = (str) => {
  return str.replace(/(^\s*)|(\s*$)/g, '')
}

案例：

1
2
3
4
5
6
let demo = ' a b c d '
trim(demo)

//输出
console.log(demo)
>>> abcd

随机生成一个UUID

1
2
3
4
5
6
7
function S4() {
  return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
}

function guid() {
  return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
}

驼峰字符变量转下划线变量

1
2
3
4
5
6
7
/**
 * @param str 需要转下划线的驼峰字符串
 * @returns 字符串下划线
 */
const humpToUnderline = (str) => {
  return str.replace(/([A-Z])/g, '-$1').toLowerCase()
}

案例

image-20221206114202192

需要转驼峰的下划线字符串

1
2
3
4
5
6
7
8
9
10
/**
 * @param str 需要转驼峰的下划线字符串
 * @returns 字符串驼峰
 */
const underlineToHump = (str) => {
  if (!str) return ''
  return str.replace(/\_(\w)/g, (_, letter) => {
    return letter.toUpperCase()
  })
}

案例

image-20221206113958186

生成随机字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * 随机生成字符串
 * @param {string} len 字符串长度
 * @returns
 */
const randomString = (len) => {
	if (len <= 11) {
		return Math.random()
			.toString(36)
			.slice(2, 2 + len)
			.padEnd(len, '0')
	} else {
		return randomString(11) + randomString(len - 11)
	}
}

案例

image-20230524114345751

生成随机16进制的颜色

1
2
3
4
5
6
7
/**
 * 生成随机16进制的颜色编码
 * @returns
 */
const randomColor = () => {
	return '#' + Math.random().toString(16).slice(2, 8).padEnd(6, '0')
}

案例：

image-20230524134042701

对象方法

数组对象方法

数组拆分为N个小的数组

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * 数组拆分为小的数组
 * @param array 需拆分的数组
 * @param size 每组数组多少个
 */
function splitArray(array, size) {
  const data = []
  for (let i = 0; i < array.length; i += size) {
    data.push(array.slice(i, i + size))
  }
  return data
}

Map方法

工具方法

获取变量类型

1
2
3
4
5
6
7
8
9
10
/**
 * 获取变量值的数据类型
 * @param obj 变量值
 */
function getType(obj) {
    const originType = Object.prototype.toString.call(obj); // 获取类型。返回格式为[object type]，需要提取出type的值
    const tmpType = originType.split(' ')[1]; // 根据空格分割，并取第二个
    const type = tmpType.slice(0, -1); // 从0截取到倒数第一个字符（不含最后一个）
    return type.toLowerCase(); // 转换为小写
}

判断变量值是否为空

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
 * 判断变量值是否为空
 * @param val 变量值
 */
function isEmpty(val){
  if (val === undefined || val === null) {
    return true
  }

  if (isArray(val) || isString(val)) {
    return val.length === 0
  }

  if (val instanceof Map || val instanceof Set) {
    return val.size === 0
  }

  if (isObject(val)) {
    return Object.keys(val).length === 0
  }

  return false
}

重新编写JSON和对象的相互转换，能转换function

JSON转对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
 * 解析带有function字段的JSON字符串工具
 * @param json
 * @returns {any}
 * @constructor
 */
export function JSONParse(json) {
  return JSON.parse(json, (k, v) => {
    if (k) {}
    if (typeof v === 'string' && v.indexOf && v.indexOf('function') > -1) {
      // eval 可能在eslint中报错，需要加入下行注释
      // eslint-disable-next-line
      return eval(`(function () {
          return ${v}
      })()`);
    }
    return v
  })
}

对象转JSON

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
 * 对象转JSON字符串，带有function字符序列化
 * @param option
 * @returns {string}
 * @constructor
 */
function JSONStringify(option) {
  return JSON.stringify(option,
    (key, val) => {
      if (key) {}
      // 处理函数丢失问题
      if (typeof val === 'function') {
        return `${val}`
      }
      // // 处理undefined丢失问题
      // if (typeof val === 'undefined') {
      //   return 'undefined'
      // }
      return val
    },
    4
  )
}