js常用函数集锦(持续更新)

简介: js常用函数集锦(持续更新)

js常用函数规整

/*
 *获取某一段时间内所有日期
 * @param starDay 开始时间
 * @param endDay 结束时间
*/
function getDayAll(starDay, endDay) {
    var arr = [];
    var dates = [];
    // 设置两个日期UTC时间
    var db = new Date(starDay);
    var de = new Date(endDay);
    // 获取两个日期GTM时间
    var s = db.getTime() - 24 * 60 * 60 * 1000;
    var d = de.getTime() - 24 * 60 * 60 * 1000;
    // 获取到两个日期之间的每一天的毫秒数
    for (var i = s; i <= d;) {
      i = i + 24 * 60 * 60 * 1000;
      arr.push(parseInt(i))
    }
    // 获取每一天的时间  YY-MM-DD
    for (var j in arr) {
      var time = new Date(arr[j]);
      var year = time.getFullYear(time);
      var mouth = (time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() + 1));
      var day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate());
      var YYMMDD = year + '-' + mouth + '-' + day;
      dates.push(YYMMDD)
    }
    return dates
  }
      //范例
    var dataAll = getDayAll('2020-05-18', '2020-08-01');
    console.log('dataAll',dataAll)
/**
  * 
  * @param {*} startDate  开始日期
  * @param {*} endDate  结束日期
  * return 计算间隔天数
  */
   function GetDateDiff(startDate, endDate) {
    var startTime = new Date(Date.parse(startDate.replace(/-/g, "/"))).getTime();
    var endTime = new Date(Date.parse(endDate.replace(/-/g, "/"))).getTime();
    var dates = Math.abs((startTime - endTime)) / (1000 * 60 * 60 * 24);
    return dates;
   }
/**
 * 数组元素排序
 */
function sequence(a, b) {
      return b - a;
    }
    let valueNun = [2,5,1,9,4,0,10]
    let newValueArr = valueNun.sort(sequence)
    console.log('newValueArr',newValueArr)
/**
* 数组元素去重
*/
  function unique(arr) {
      let hash = [];
      for (let i = 0; i < arr.length; i++) {
        if (hash.indexOf(arr[i]) === -1) {
          hash.push(arr[i]);
        }
      }
      return hash;
    }
    let nameArr = ['22','33','22']
    let newNameArr = unique(nameArr)
    colsole.log('newNameArr',newNameArr)
/*
* 获取某个元素下标
* arr: 传入的数组
* obj: 需要获取下标的元素
* */
  function getArrayIndex(arr, obj) {
    var i = arr.length;
    while (i--) {
      if (arr[i] === obj) {
        return i;
      }
    }
    return -1;
  }
/**
  * 清除所有未知定时器
  */
//这里的i需要给大一点的数,毕竟你不知道有多少未知定时器
  function clearTimeOutFunc() {
    for (var i = 1; i < 1000; i++) {
      clearTimeout(i);
      <!-- clearInterval(i)-->
    }
  }
/**
  * 返回日期数列里与目标数列最近的日期下标器
  */
const getNearestDateIndex = (targetDate, dates) => {
    if (!targetDate || !dates) {
        throw new Error('Argument(s) is illegal !')
    }
    if (!dates.length) {
        return -1
    }
    const distances = dates.map(date => Math.abs(date - targetDate))
    return distances.indexOf(Math.min(...distances))
}
// e.g.
const targetDate = new Date(2019, 7, 20)
const dates = [
    new Date(2018, 0, 1),
    new Date(2019, 0, 1),
    new Date(2020, 0, 1),
]
getNearestDateIndex(targetDate, dates) // 2
/**
  * 返回日期数列里最小的日期
  */
const getMinDate = dates => {
    if (!dates) {
        throw new Error('Argument(s) is illegal !')
    }
    if (!dates.length) {
        return dates
    }
    return new Date(Math.min.apply(null, dates)).toISOString()
}
// e.g.
const dates = [
    new Date(2018, 3, 10),
    new Date(2019, 3, 10),
    new Date(2020, 3, 10),
]
getMinDate(dates) // 2018-04-09T16:00:00.000Z
/**
  * 打乱数组
  */
const arrayShuffle = array => {
    if (!Array.isArray(array)) {
        throw new Error('Argument must be an array')
    }
    let end = array.length
    if (!end) {
        return array
    }
    while (end) {
        let start = Math.floor(Math.random() * end--)
        ;[array[start], array[end]] = [array[end], array[start]]
    }
    return array
}
// e.g.
arrayShuffle([1, 2, 3])
/**
  * 判断是否支持webp图片格式
  */
const canUseWebp = () => (document.createElement('canvas').toDataURL('image/webp', 0.5).indexOf('data:image/webp') === 0)
// e.g.
canUseWebp() // 新版的chrome里为true,火狐里为false
/**
  * 判断是否是url
  */
const isUrl = str => /^(((ht|f)tps?):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?$/.test(str)
// e.g.
isUrl('https://www.baidu.com') // true
isUrl('https://www') // false
/**
 * 判断是否是emoji
 */
const isEmoji = str => /(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]/g.test(str)
// e.g.
isEmoji('🌏') // true
isEmoji('earth') // false
/**
 * 连字符转驼峰
 */
const toCamelCase = (str = '', separator = '-') => {
    if (typeof str !== 'string') {
        throw new Error('Argument must be a string')
    }
    if (str === '') {
        return str
    }
    const newExp = new RegExp('\\-\(\\w\)', 'g')
    return str.replace(newExp, (matched, $1) => {
        return $1.toUpperCase()
    })
}
// e.g.
toCamelCase('hello-world') // helloWorld
/**
* 驼峰转连字符
*/
const fromCamelCase = (str = '', separator = '-') => {
    if (typeof str !== 'string') {
        throw new Error('Argument must be a string')
    }
    if (str === '') {
        return str
    }
    return str.replace(/([A-Z])/g, `${separator}$1`).toLowerCase()
}
// e.g.
fromCamelCase('helloWorld') // hello-world
/**
* 等级判断
*/
const getLevel = (value = 0, ratio = 50, levels = '一二三四五') => {
    if (typeof value !== 'number') {
        throw new Error('Argument must be a number')
    }
    const levelHash = '一二三四五'.split('')
    const max = levelHash[levelHash.length - 1]
    return levelHash[Math.floor(value / ratio)] || max
}
// e.g.
getLevel1(0) // 一
getLevel1(40) // 一
getLevel(77) // 二
/**
* 事件模拟触发
*/
const event = new Event('click')
const body = document.querySelector('body')
body.addEventListener('click', ev => {
    console.log('biu')
}, false)
body.addEventListener('touchmove', ev => {
    body.dispatchEvent(event)
}, false)
// 这时候在移动端下滑动手指的时候就会触发click事件
/**
* 判断dom是否相等
*/
const isEqualNode = (dom1, dom2) => dom1.isEqualNode(dom2)
/*
    <div>这是第一个div</div>
    <div>这是第二个div</div>
    <div>这是第一个div</div>
*/
const [一, 二, 三,] = document.getElementsByTagName('div')
// e.g.
isEqualNode(一, 二) // false
isEqualNode(一, 三) // true
isEqualNode(二, 三) // false
/**
* 多属性双向绑定
*/
/*
    <div id="box" class="box" style="border: 1px solid; width: 100px; height: 100px;"></div>
    <output id="ouput" name="output"></output>
*/
const keys = Object
.values(box.attributes)
.map(({name, value}) => ({name, value}))
const cacheData = {}
const properties = keys.reduce((acc, cur) => {
    const obj = {}
    cacheData[cur.name] = box.attributes[cur.name]
    obj[cur.name] = {
        get() {
            return cacheData[cur.name]
        },
        set(data) {
            output.value = `${cur.name}: ${data}`
            cacheData[cur.name] = data
        }
    }
    return {
        ...acc,
        ...obj
    }
}, {})
Object.defineProperties(box, properties)
// 当我们修改input相应的属性时,output文字就会变成修改的内容
/**
*  获取指定范围内的随机数
*/
const getRandom = (min = 0, max = 100) => {
    if (typeof min !== 'number' || typeof max !== 'number') {
        throw new Error('Argument(s) is illegal !')
    }
    if (min > max) {
        [min, max] = [max, min]
    }
    return Math.floor(Math.random() * (max - min + 1) + min)
}
// e.g.
getRandom(1, 100) // 89
getRandom(1, 100) // 5
/**
*  文件尺寸格式化
*/
const formatSize = size => {
    if (typeof +size !== 'number') {
        throw new Error('Argument(s) is illegal !')
    }
    const unitsHash = 'B,KB,MB,GB'.split(',')
    let index = 0
    while (size > 1024 && index < unitsHash.length) {
        size /= 1024
        index++
    }
    return Math.round(size * 100) / 100 + unitsHash[index]
}
formatSize('10240') // 10KB
formatSize('10240000') // 9.77MB
/**
*  获取数组前/后指定数量元素
*/
const arrayRange = (array, index, distance = '+') => {
    if (!Array.isArray(array) || typeof index !== 'number' || index < 0) {
        throw new TypeError('Argument(s) is illegal');
    }
    return arr.slice(0, `${distance}${index}`)
}
arrayRange(['a', 'b', 'c'], 2) // ["a", "b"]
arrayRange(['a', 'b', 'c'], 2, '-') // ["a"]

操作数组元素,置顶div

function onToppingClick(index: any) {
    let seq = 1;
    for (let i = 0; i < showIdsArr.length; i++) {
      let c = index === i ? 0 : seq;
      showIdsArr[i].key = c;
      let maxtop = (showIdsArr.length - c) * 30
      let maxleft = c * 20
      showIdsArr[i].sty = { ...showIdsArr[i].sty, position: "absolute", top: maxtop, left: maxleft, zIndex: 99 - c };
      if (index !== i) {
        seq++;
      }
    }
    setShowArr([...showIdsArr]);
    // console.table(showIdsArr);
  }
目录
相关文章
|
2月前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
49 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
2月前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
3月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
3月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
4月前
|
JavaScript 前端开发 安全
JavaScript函数详解
JavaScript函数的详细解析,包括函数的定义和调用方式(如一般格式、匿名函数、构造函数、自调用函数、箭头函数和严格模式)、函数参数(arguments对象、可变参数、默认参数值)、闭包的概念和应用实例。
JavaScript函数详解
|
3月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
62 4
|
3月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
36 2
|
3月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
38 5
|
3月前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
29 3
|
3月前
|
前端开发 JavaScript
探索JavaScript函数基础
探索JavaScript函数基础
27 3