Javascript常用代码片段-01

【01】获取数组中元素，数量随机，内容随机

handleData(["济南", "北京", "南京", "青岛", "上海", "成都"])
function handleData(data) {
    let tempArr = [...data];
    const num = Math.ceil(Math.random() * tempArr.length);
    const ret = new Array(num).fill().map(() => {
        const target = tempArr.splice(
            Math.floor(Math.random() * tempArr.length),
            1
        );
        return target[0];
    });
    console.log(ret)
}

【02】复制文本内容

        该函数用于将指定的文本复制到剪贴板中。它首先尝试使用clipboardData对象将文本复制到剪贴板中，如果该对象存在，说明浏览器支持此方法，直接调用其setData方法将文本复制到剪贴板中。

        如果clipboardData对象不存在，该函数则尝试使用document.execCommand方法将文本复制到剪贴板中。该方法已经被弃用，但仍然有些浏览器支持。在该方法中，我们先创建一个textarea元素，并将需要复制的文本赋值给它。然后，将该元素添加到body中，将其left设置为-9999px，相当于将其放到屏幕外面。接着，选中该元素中的文本，调用document.execCommand方法将该元素中的文本复制到剪贴板中，最后再将该元素删除。

        注意，这个函数只是尝试复制文本到剪贴板，实际是否成功复制要取决于浏览器是否支持该方法。如果两种复制方式都不支持，则返回false。

const copyText = (text) => {
  // 方法1：尝试使用clipboardData对象将文本复制到剪贴板中
  const clipboardData = window.clipboardData;
  if (clipboardData) { // 如果clipboardData对象存在，说明浏览器支持此方法
    clipboardData.clearData(); // 清除剪贴板中的旧数据
    clipboardData.setData('Text', text); // 将text数据复制到剪贴板中
    return true; // 返回复制成功
  } 
  // 方法2：使用document.execCommand方法将文本复制到剪贴板中
  // 注意，该方法已经被弃用，但仍然有些浏览器支持，使用时要注意兼容性
  else if (document.execCommand) {
    // 创建一个textarea元素，并将需要复制的文本赋值给它
    const el = document.createElement('textarea');
    el.value = text;
    el.setAttribute('readonly', ''); // 设置为只读模式，防止用户误操作
    el.style.position = 'absolute';
    el.style.left = '-9999px'; // 将元素的left设置为-9999px，相当于将其放到屏幕外面
    document.body.appendChild(el); // 将该元素添加到body中
    el.select(); // 选中该元素中的文本
    // 将该元素中的文本复制到剪贴板中
    document.execCommand('copy');
    // 删除该元素
    document.body.removeChild(el);
    return true; // 返回复制成功
  }
  return false; // 复制失败
}

copyText("测试");

【03】防抖和节流

        何为防抖？在指定时间段内如果重复触发事件，只以最后一次触发为准。例如输入搜索，当用户持续输入内容时，使用防抖来减少搜索请求次数。

        如下代码所示，debounce函数接受两个参数（一个函数和一个延迟时间），返回一个新函数。当调用新函数时，它会在延迟时间内等待，如果延迟时间内再次调用，那么之前的定时器会被清除，重新创建一个新的定时器。如果在延迟时间内没有再次调用，则会调用传入的函数并传入相应的参数。

const debounce = (func, delay) => {
    let timer;
    return function (...args) {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
};

        何为节流？在指定时间段内如果重复触发事件，只会执行一次。例如按钮点击，在极短时间内连续点击，通过节流处理，使按钮只会被触发一次。

        如下代码所示，throttle函数接受两个参数（一个函数和一个延迟时间）,返回一个新函数。当调用这个函数时，它会在延迟时间内等待，如果在延迟时间内再次调用，则不会执行任何操作。当延迟时间结束后，才会执行一次传入的函数并传入相应参数。与debounce函数不同，throttle函数在执行完函数之后，会将flag标记重新设置为true，以便下次能够再次执行。

const throttle = (func, delay) => {
    let timer;
    let flag = true;
    return function (...args) {
        if (!flag) {
            return;
        }
        if (!timer) {
            flag = false;
            timer = setTimeout(() => {
                func.apply(this, args);
                timer = null;
                flag = true;
            }, delay);
        }
    };
};

【04】过滤字符串中的非法字符

        如下代码所示，通过正则表达式pattern来匹配非法字符串，然后使用replace函数将非法字符串替换成空字符串。

function filterCharacter(str) {
    let pattern = new RegExp(
        "[`~!@#$^&*()=：”“'。，、？|{}':;'%,\\[\\].<>/?~！@#$……&*（）&;—|{ }【】‘；]"
    );
    let resultStr1 = "";
    for (let j = 0; j < str.length; j++) {
        resultStr1 = resultStr1 + str.substr(j, 1).replace(pattern, "");
    }
    return resultStr1;
}

【05】常用正则判断

        如下代码所示，用于验证手机号码是否符合规范，规范是指手机号码必须由11位数字组成，且1开头。

const validatePhoneNum = (mobile) => {
    const reg = /^1[3,4,5,6,7,8,9]\d{9}$/;
    return reg.test(mobile);
};

        如下代码所示，用于验证密码是否符合规范，规范是指密码必须由6-18位大小写字母、数字或下划线组成。

const validatePassword = (password) => {
    const reg = /^[a-zA-Z0-9_]{6,18}$/;
    return reg.test(password);
};

【06】初始化空数组

const arrList = Array(6).fill()

【07】RGB与16进制互相转换

        如下代码所示，利用位运算符和toString方法实现RGB到十六进制的转换。

function RGBToHex(r, g, b) {
    // 将 RGB 颜色转换为 16 进制形式的字符串
    // 通过位运算符和 toString 方法实现
    // 1 << 24 表示左移 24 位，等同于 Math.pow(2, 24)
    // r << 16 表示将 r 值左移 16 位，g << 8 和 b 相似
    // 然后将这三个值相加并通过 toString(16) 转换成 16 进制字符串
    // 最后通过 slice(1) 去掉第一位多余的 0，得到形如 #b2e837 的颜色字符串
    return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
RGBToHex(178, 232, 55); // 这里的输出是 #b2e837

function RGBToHex(rgb) {
    var rgbArr = rgb.split(/[^\d]+/)
    var color = rgbArr[1]<<16 | rgbArr[2]<<8 | rgbArr[3]
    return '#'+ color.toString(16)
}

        如下代码所示，将十六进制转换为RGBA。

function hexToRGB(hex, opacity) {
    return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + 
        ',' + parseInt('0x' + hex.slice(3, 5)) + 
        ',' + parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')';   
}

        如下代码所示，将十六进制转换为RGB。

function hexToRGB(hex) {
    var hexx = hex.replace('#', '0x')
    var r = hexx >> 16
    var g = hexx >> 8 & 0xff
    var b = hexx & 0xff
    return `rgb(${r}, ${g}, ${b})`
}

【08】检查是否是函数

        如下代码所示，使用与号分割了三个子表达式，第一个判断对象类型是否是函数，第二个排除可能是DOM节点的情况，因为DOM节点有nodeType属性，而其值是一个数值类型。第三个排除可能是类数组对象的情况，因为类数组对象一般都有item方法。

const isFunction = (obj) => {
    // 判断对象类型是否为函数，且排除掉可能的 DOM 节点和类数组对象
    return typeof obj === "function" && 
           typeof obj.nodeType !== "number" && 
           typeof obj.item !== "function";
};

【09】检查数组是否安全

        如下代码所示，主要用来检查一个数组是否为安全数组。

        所谓安全数组是指在当前的 JS 引擎中，可以安全使用数组方法的数组。如果传入的数组不是安全数组，则该函数会返回一个空数组。

        函数中主要使用了 Array.isArray() 方法来判断传入的数组是否为数组类型，如果是，则直接返回该数组，否则返回一个空数组。这个方法的作用就是用来判断一个值是否为数组类型，它会返回一个布尔值。

        因为在 JS 中，有些对象看起来像数组，但它们不是安全数组，如类数组对象。这些对象具有类似于数组的 length 属性和从 0 开始的数字键，但它们没有数组方法，例如 push() 和 pop()。如果对这些对象使用数组方法，则可能会引发异常。

        因此，在使用数组方法之前，我们通常需要先判断该对象是否为安全数组，以确保程序的正常运行。

const safeArray = (array) => {
    // 判断是否为安全数组，是则返回原数组，否则返回一个空数组
    return Array.isArray(array) ? array : [];
};

【10】检查对象是否安全

        如下代码所示，用来判断传入的参数 obj 是否为有效对象。这里的有效对象指的是非数组类型的对象且拥有属性。如果是有效对象，则返回 obj，否则返回一个空对象 {}。

// 判断一个对象是否为有效对象
const isVaildObject = (obj) => {
    return typeof obj === 'object' && 
           !Array.isArray(obj) && 
           Object.keys(obj).length;
    // 如果对象的类型是 "object"、不是数组，并且拥有属性，则认为是有效对象
}

// 返回一个安全的对象
const safeObject = obj => isVaildObject(obj) ? obj : {};

【11】随机生成颜色

function getColor() {
    let randomArr = [
        '0', '1', '2', '3', '4', 
        '5', '6', '7', '8', '9', 
        'a', 'b', 'c', 'd', 'e', 'f'
    ];
    let color = "";
    for (let i = 0; i < 6; i++) {
      color += randomArr[Math.ceil(Math.random() * 15)]
    }
    return `#${color}`
}

【12】数组去重

        如下代码所示，利用Set不能包含重复值的特性实现去重。

const arr = [1,2,1, 3, 6, 2, 3];
console.log(Array.from(new Set(arr)))

【13】获取数组指定位置的元素

        如下代码所示，利用at方法获取数组中指定位置的元素，语法为array.at(index)，其中index表示要获取元素的位置，如果index为负数，则表示从数组末尾开始计算位置。如果index超出数组范围，则返回undefined。

const arr = ['1', '2', '3'];
console.log(arr.at(0)) // 正数第一个元素
console.log(arr.at(1)) // 正数第二个元素

console.log(arr.at(-1)) // 倒数第一个元素
console.log(arr.at(-2)) // 倒数第二个元素

【14】筛选字符串中所有数字

var str = "scale(2, 1)";
var nums = str.match(/\d+/g);
console.log(nums); // 输出 ["2", "1"]

【15】数组转换成对象

const arr = [
    ["key1", "1"],
    ["key2", "2"],
    ["key3", "3"]
];

const obj = Object.fromEntries(arr);
console.log(obj); // {key1: '1', key2: '2', key3: '3'}

【16】多重条件判断优化

const conditions = ["1", "2", "3"];
if(conditions.includes(condition)) {
	// some logic
}

​​​​​​​【16】交换两个值

let a = 1;
let b = 2;
[a, b] = [b, a]

​​​​​​​【17】判断一个数的奇偶

// 偶数 & 1 = 0
// 奇数 & 1 = 1
console.log(2 & 1)    // 0
console.log(3 & 1)    // 1

​​​​​​​【18】实现取整操作

console.log(~~ 3.14)    // 3
console.log(3.14 >> 0)  // 3
console.log(3.14 << 0)  // 3
console.log(3.14 | 0)   // 3

​​​​​​​【19】数组排序

(1) 数字升序

arr.sort((a, b) => a-b)

(2) 按字母顺序对字符串数组进行排序

arr.sort((a, b) => a.localeCompare(b))

(3) 按照真假值排序

const data = [
    { bool: true },
    { bool: false },
    { bool: true }
]
data.sort((a, b) => Number(b.bool) - Number(a.bool))

​​​​​​​【20】JS主动向剪切板增加内容

function copyFn(text) {
    let input = document.createElement("input");
    input.value = text;
    document.body.appendChild(input);
    input.select();
    document.execCommand("copy");
    document.body.removeChild(input);
}