一些好用的js方法

已于 2024-12-31 14:49:16 修改
阅读量553 收藏 7
点赞数 7
文章标签： javascript 前端 开发语言
于 2023-12-01 13:37:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45757927/article/details/134732524
版权

目录

1，动态当前时间（年月日时分秒，星期）

2，颜色

        2.1，颜色16进制转rgba

        2.2，随机生成16进制颜色

3，数组方法

forEach()

map()

includes()

indexOf()

some()

every()

find()

findIndex()

filter()

reduce()

for...in

for...of

sort()

new Set()

Object.assign()

4，对象方法

Object.keys()

Object.values()

Object.entries()

5，正则表达式

6.ajax相关

1，fetch提交表单数据

2，axios提交表单数据

7，防抖和节流

1，动态当前时间（年月日时分秒，星期）
更新    使用 padStart() 添加前缀字符串0
var timer=setInterval(function(){
    const time = new Date()
    const year = time.getFullYear()
    const month = String(time.getMonth()+1).padStart(2, '0')
    const day = String(time.getDate()).padStart(2, '0')
    const hour = String(time.getHours()).padStart(2, '0')
    const min = String(time.getMinutes()).padStart(2, '0')
    const second = String(time.getSeconds()).padStart(2, '0')
    const week = time.getDay()
    const sumTime = year+"年"+month+"月"+day+"日  "+hour+":"+min+":"+second+"  星期"+(week==1?"一":week==2?"二":week==3?"三":week==4?"四":week==5?"五":week==6?"六":"日")
    console.log(sumTime);
},1000)

原先
var timer=setInterval(function(){
    const time = new Date()
    const year = time.getFullYear()
    const month = time.getMonth()+1
    const day = time.getDate()
    const hour = time.getHours()
    const min = time.getMinutes()
    const second = time.getSeconds()
    const week = time.getDay()
    const sumTime = year+"年"+(month<10?("0"+month):month)+"月"+(day<10?("0"+day):day)+"日  "+(hour<10?("0"+hour):hour)+":"+(min<10?("0"+min):min)+":"+(second<10?("0"+second):second)+"  星期"+(week==1?"一":week==2?"二":week==3?"三":week==4?"四":week==5?"五":week==6?"六":"日")
},1000)
2，颜色
        2.1，颜色16进制转rgba
//  颜色16进制转rgba
function hexToRgba(hex, alpha = 1) {  
    // 判断输入是否合法  
    if (!/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(hex)) {  
         throw new Error('输入的16进制颜色代码不合法！');  
    }
    // 解析16进制颜色代码  
    let red = parseInt(hex.slice(1, 3), 16);  
    let green = parseInt(hex.slice(3, 5), 16);  
    let blue = parseInt(hex.slice(5, 7), 16);  
    // 返回RGBA格式的颜色值  
    return `rgba(${red}, ${green}, ${blue}, ${alpha})`;  
}
        2.2，随机生成16进制颜色
const randomColor = () => {  
    const letters = '0123456789ABCDEF';  
    let color = '#';  
    for (let i = 0; i < 6; i++) {  
        color += letters[Math.floor(Math.random() * 16)];  
    }  
    return color;
}
3，数组方法
forEach()

遍历数组

array.forEach((item, index, array)=> {
    // item表示数组的每一项
    // index表示数组的下标索引
    // array表示原数组
    // 执行函数
})
map()

遍历数组，根据原数组，返回一个长度与之对应的新数组

array.map((item, index, array)=> {
      return 值    // 值表示新数组中对应项的
})
includes()

判断数组中是否包含某个指定的元素，如果包含返回 true，否则返回 false

array.includes("元素")
indexOf()

返回数组中某个元素对应的下标索引 如果有多个 只会返回第一个的下标索引，如果没有返回-1

array.indexOf("元素")
some()

如果数组中有一个元素符合条件返回true，否则返回false

array.some((item)=>{
    // item判断条件
})
array.some((item)=>{
    item.键值 == object.键值
})
every()

如果数组中所有的元素都符合条件返回true，否则返回false

array.every((item)=>{
    // item判断事件
    return item判断事件
})
find()

查找数组中是否存在符合条件的元素，如果有返回当前元素值，如果没有返回undefined，只会查找第一个元素，停止遍历

array.find((item)=>{
    // item判断事件
    return item判断事件
})
findIndex()

查找数组中是否存在符合条件的元素，如果有返回当前元素值的下标索引，如果没有返回-1，只会查找第一个元素，停止遍历

arr.findIndex(item=>{
    // item判断事件
    return item判断事件
})
filter()

将数组中符合要求的元素留下，组成一个新的数组并返回

array.filter((item)=>{
    // item判断事件
    return item判断事件
})
reduce()
// arr.reduce((prev, cur, index, arr) => {
//
// }, initialValue)

// prev				即上一次回调函数执行的返回值,必填
// cur				当前元素的值,必填
// index			当前元素下标,可选
// arr				原始数组,可选
// initialValue		初始值,可选

const arr = [1, 2, 3, 4, 5];

// 数组求和，求累乘
const sum = arr.reduce( (prev, cur, index, arr) => {
	console.log(prev, cur, index, arr);
	return prev + cur;	// 求和
	// return prev * cur;	// 求累乘
});

// 正则匹配		将小写'o'替换为大写'O'  
let arr1 = ['hello','World']
arr1 = arr1.reduce( (prev, cur) => {
	const replaced = cur.replace(/o/g, 'O');  
	if (Array.isArray(prev)) {  
		prev.push(replaced);  
		return prev;  
	} else {  
		return [replaced];  
	}  
},[])
console.log(arr1)	// ["hellO","WOrld"]

// 合并数组
let arr2 = [[0], [1], [2]]
arr2 = arr2.reduce( (prev, cur) => {
	return prev.concat(cur);
})
console.log(arr2)	// [0, 1, 2]

// 修改数组值（正则匹配赋值）
// 需求：去掉对象arr3中键名的后缀ID，并赋值给arr2
let arr3 = {
	user: null,
	name: null
}
let arr4 = {
	userID: 123,
	nameID: 456
}
arr3 = Object.entries(arr4).reduce( (prev, [key, value]) => {
	const newKey = key.replace(/ID$/, '')
	prev[newKey] = value
	return prev
},{})
console.log(arr3)	// { "user": 123, "name": 456 }
for...in

循环遍历，一般用来遍历对象

for(var 变量名 in 对象) {
    // 变量名是返回对象的键名
}
但是也能遍历数组 如果遍历数组时候 返回的是下标索引
for(var 变量名 in 数组) {
    // 变量名是返回数组的下标索引
}
for...of

循环遍历，一般用于遍历数组

for(var 变量 of 数组) {
    // 变量是数组的每一个项
}
sort()

对包含数字的数组进行排序

array.sort()

// 升序
arr.sort(function (a, b) {
    return a - b;
});
 
// 降序
arr.sort(function (a, b) {
    return b - a;
});
new Set()

数组去重

array = [...new Set(array)]
Object.assign()

数组转对象

Object.assign({},array)

来源：微信公众号：Nodejs技术栈

地址：这份 JavaScript 数组方法速查表分享给您！ (qq.com)

4，对象方法
Object.keys()

获取键名

方法1：
Object.keys(对象) //生成数组

方法2：
for(var 变量名 in 对象){
    // 变量名为键名
}
Object.values()

获取键值

Object.values(对象) //生成数组
Object.entries()

对象转数组

Object.entries(对象)
5，正则表达式

去除文字中空格

.replace(/\s+/g,"")

去除<span></span>标签

.replace(/<\/?span>/g, '')

input输入框只允许输入整数(配合监听input)

.replace(/[^0-9]/g, "")

去除大小写字母

.replace(/[a-zA-Z]/g, "")
6.ajax相关
1，fetch提交表单数据

场景：前端提交载荷到后端，发送表单数据场景（配置headers不起效果）

// 后端数据库date为dateTime格式

// 错误
fetch("url",
  {
   method: 'post',
   headers: {
      "Content-Type": "multipart/form-data"
   },
   body: JSON.stringify({
       data: '2020-01-01'
   })
}.then(res=>res.json()).then(item=>{
}.catch(err=>{
}

//正确
const formData = new FormData();
formData.append('date', '2020-01-01');

fetch("url",
  {
   method: 'post',
   body: formData
  }
}.then(res=>res.json()).then(item=>{
}.catch(err=>{
}
2，axios提交表单数据
//Axios封装

const formData = new FormData();
formData.append('data', data);

Axios({
     url: '',
     method: 'post',
     data/params: formData,
     headers: {
        "Content-Type": "multipart/form-data"
     }
}).then((res)=>{
    
}

7，防抖和节流

/**
 * 防抖函数
 * @param {Function} func - 要防抖的函数
 * @param {number} delay - 防抖的延迟时间（毫秒）
 * @returns {Function} - 返回一个新的防抖函数
 */
export function debounce(func, delay) {
    let timeoutId;
    return function (...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
}

/**
 * 节流函数
 * @param {Function} func - 要节流的函数
 * @param {number} delay - 节流的延迟时间（毫秒）
 * @returns {Function} - 返回一个新的节流函数
 */
export function throttle(func, delay) {
    let lastCall = 0;
    return function (...args) {
        const now = Date.now();
        if (now - lastCall >= delay) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

使用：

import { debounce, throttle } from './debounce&throttle'
/**
 * @param {fc} func - 触发的函数
 * @param {fc1} func - 要节流的函数
 * @param {number} delay - 节流的延迟时间（毫秒）
 */
const fc = throttle(() => {fc1()}, number)

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

未语君安然

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值