前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >「必须收藏」周末学到的 10 个 JS 实用的小技巧

「必须收藏」周末学到的 10 个 JS 实用的小技巧

作者头像
陈大鱼头
发布2021-08-20 10:44:11
3670
发布2021-08-20 10:44:11
举报
文章被收录于专栏:鱼头的Web海洋鱼头的Web海洋

趁着周末偷偷学习的 10 个 JS 实用小技巧,大家一起来学习一下吧~

同步阻塞法实现sleep函数

代码语言:javascript
复制
const sleep = delay => {
    const start = new Date().getTime();
    while (new Date().getTime() < start + delay) {
       continue;
    };
};
console.log(1);
sleep(3000);
console.log(2);

利用 new URL 解析 URL

代码语言:javascript
复制
const parseURL = (url = '') => {
    const res = new URL(url);
    res.queryParams = key => {
        if (key) {
           return res.searchParams.get(key)
        };
        const params = {};
        const paramGroup = res.search.replace(/^\?/,'').split('&');
        paramGroup.forEach(param => {
            const [key, val] = param.split('=');
            params[key] = val;
        });
        return params;
    };
    return res;
};
parseURL('https://www.example.com/a/b?c=1&d=2');

一行代码实现星级评分

代码语言:javascript
复制
const getRate = (rate = 0) => '★★★★★☆☆☆☆☆'.slice(5 - rate, 10 - rate);
getRate(3);

用位运算提升效率

代码语言:javascript
复制
// | 取整
let num1 = 1.7;
num1 = num1 | 0;

// >> 取半
let num2 = 6;
num2 = num2 >> 1; // 3

// << 加倍

let num3 = 6;
num3 = num3 << 1; / / 12

// ^ 交换值
let num4 = 10;
let num5 = 20;

num4 ^= num5;
num5 ^= num4;
num4 ^= num5; // num4 === 2, num5 === 1

// & 判断奇数
let num6 = 10;
let num7 = 11;

num6 & 1 === 1; // true
num7 & 1 === 1; // false

// ~ 判断是否存在
const data = '123456';
const key = '3';
const keyIsExist = !!~data.indexOf(key); // true

// 是否 2 的整数幂
const isPowerOf2 = num => (num & (num - 1)) === 0;
isPowerOf2(8) // true
isPowerOf2(7) // false

判断是否是千分符字符

代码语言:javascript
复制
const numberIsThousand = str => /^-?\d{1,3}(,\d{3})*(\.\d+)?$/.test(str);
numberIsThousand('100,000,000,000') // true
numberIsThousand('100,000,000,00') // false

复制文本到剪切板

代码语言:javascript
复制
const copyToClipboard = content => {
    const clipboardData = window.clipboardData;
    if (clipboardData) {
        clipboardData.clearData();
        clipboardData.setData('Text', content);
        return true;
    } else if (document.execCommand) {
        const el = document.createElement('textarea');
        el.value = content;
        el.setAttribute('readonly', '');
        el.style.position = 'absolute';
        el.style.left = '-9999px';
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        return true;
    }
    return false;
};copyToClipboard('hello world');

一行代码生成指定长度的数组

代码语言:javascript
复制
const List = len => [...new Array(len).keys()];
const list = List(10); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

判断数据类型

代码语言:javascript
复制
const type = data => {
      let toString = Object.prototype.toString;
      const dataType =
        data instanceof Element
          ? 'element' // 为了统一DOM节点类型输出
          : toString
              .call(data)
              .replace(/\[object\s(.+)\]/, '$1')
              .toLowerCase()
      return dataType
};

type({}); // object

正则判断字符重复次数不超过两次

代码语言:javascript
复制
const strIsRepeatThan2 = (str = '') => /^(?!.*(.).*\1{2})[\da-zA-Z].+$/.test(str);
strIsRepeatThan2('123456'); // true
strIsRepeatThan2('1234566'); // true
strIsRepeatThan2('12345666'); // false

正则匹配可以只有 0 但开头不能是 0 的数字

代码语言:javascript
复制
const getCorrectNumber = (str = '') => /^(\d|[1-9]\d*)$/.test(str);
getCorrectNumber('0'); // true
getCorrectNumber('011'); // false
getCorrectNumber('101'); // true
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-08-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 鱼头的Web海洋 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 同步阻塞法实现sleep函数
  • 利用 new URL 解析 URL
  • 一行代码实现星级评分
  • 用位运算提升效率
  • 判断是否是千分符字符
  • 复制文本到剪切板
  • 一行代码生成指定长度的数组
  • 判断数据类型
  • 正则判断字符重复次数不超过两次
  • 正则匹配可以只有 0 但开头不能是 0 的数字
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档