常用的JavaScript方法记录

最新推荐文章于 2025-12-27 19:25:02 发布

原创最新推荐文章于 2025-12-27 19:25:02 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端技术专栏收录该内容

1 篇文章

订阅专栏

文章目录

1、时间格式化

/**
 * 时间格式化
 * @param fmt 格式:例如 yyyy-MM-dd HH:mm:ss
 * @param date 时间
 * @return {*} 返回格式后的时间字符串 如 2020-03-29 18:34:09
 */
function dateFormat(fmt, date) {
  let ret;
  const opt = {
    "y+": date.getFullYear().toString(), // 年
    "M+": (date.getMonth() + 1).toString(), // 月
    "d+": date.getDate().toString(), // 日
    "H+": date.getHours().toString(), // 时
    "m+": date.getMinutes().toString(), // 分
    "s+": date.getSeconds().toString() // 秒
    // 有其他格式化字符需求可以继续添加，必须转化成字符串
  };
  for (let k in opt) {
    ret = new RegExp("(" + k + ")").exec(fmt);
    if (ret) {
      fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
    }
  }
  return fmt;
}
/**
 let date = new Date();
 dateFormat("yyyy/MM/dd HH/mm/ss", date);
 dateFormat("yyyy-MM-dd HH:mm:ss", date);
 dateFormat("HHmmss", date);
 dateFormat("yyyyMMdd", date);
 */

2、判断是否是数字类型

/**
 * 判断是否是数字
 * @param val
 * @returns {boolean}
 */
function isRealNumber(val) {
    if (!val) {
        return false;
    }
    if (typeof val === 'number') {
        return true;
    }
    let reg = /^-?\d+(\.\d+)?$/;
    return reg.test(val);
}

3、异步

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  let result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: 'resolved'
}

asyncCall();

4、对象数组排序

/**
 * 按某个属性排序数组，使用方法 list.sort(compareByProp('age'))
 *
 *  如果是多级对象，则可传递多个参数 如按对象req中reqItem对象的age属性排序 req.reqItem.age，则参数为 ['reqItem','age']
 * @param props 单个属性字符串或字符串数组（多级对象）
 * @param desc 是否需要递减排序，默认false，递增排序
 * @returns {(function(*, *): number)|(function(*, *): number)}
 */
function compareByPro(props, desc) {
    if (desc === undefined) {
        d
    }
    if (Array.isArray(props) && props.length > 0) {
        return function (obj1, obj2) {
            let value1 = obj1;
            let value2 = obj2;
            for (let i = 0; i < props.length; i++) {
                let p = props[i];
                value1 = value1[p];
                value2 = value2[p];
            }
            return desc ? (value2 - value1) : (value1 - value2)
        }
    } else {
        return function (obj1, obj2) {
            return desc ? (obj2 - obj1) : (obj1 - obj2)
        }
    }
}

5、判断字符串与子串

substr(start [，length])方法

if("hello world".substr(0, 2) === "he"){}

substring(start [, end])方法

if("hello world".substring(1, 3) === "ell"){}

slice(beginIndex[, endIndex])方法

if("hello world".slice(1,3) === "ell"){}

indexOf(beginIndex[, endIndex])方法

if("hello world".indexOf("hello") === 0){}

6、数组遍历

forEach(): 循环数组，不会改变元素，不会返回新数组
```
arr.foreach((value,index)=>{console.log(value, index)})
```
map(): 遍历数组，对每个元素进行处理，之后返回元素；会返回一个新数组。
```
let arr2 = arr.map((value,index)=>{let newVal = value+1; return newVal})
```
some(): 遍历数组，在回调函数里进行条件的判断，返回 true 或 false 。当有一个元素满足条件时就停止遍历并返回true；当全部的元素都不满足要求时，返回false
```
let bool = arr.some((value,index)=>{return value>3})
```
every(): 遍历数组，同上。当有一个元素不满足条件时就停止遍历并返回false；当全部元素都满足时，返回true
```
let bool = arr.every((value,index)=>{return value > 3})
```
filter(): 遍历数组，在回调函数里进行条件判断，当结果为true时，将该元素返回，组成一个新数组。
```
let arr2 = arr.filter((value,index)=>{return value > 3})
```

reduce(): 归约

/** * * @param preValue 必须，上一次返回的值 * @param currentValue 必须，当前遍历的数组元素 * @param currentIndex 可选，当前遍历的数组元素下标 * @param arr 可选，当前元素所属的数组 * @param initialValue 可选，初始值，将作为第一次遍历时preValue的值， *          若没有initialValue，则会少一次遍历（首次遍历时，将从第二个元素开始， *          此时preValue取数组的第一个元素，currentValue取数组的第二个元素，currentIndex从1开始） */array.reduce(function(preValue, currentValue, currentIndex, arr), initialValue)

let arr = [1, 2, 3, 4, 5, 6, 7]arr.reduce((pre, cur, idx, arr1) => {    console.log(pre, cur, idx)    return cur * 2}, 10)/* 10 1 02 2 14 3 26 4 38 5 410 6 512 7 6 */

let arr = [1, 2, 3, 4, 5, 6, 7]arr.reduce((pre, cur, idx, arr1) => {    console.log(pre, cur, idx)    return cur * 2})/*1 2 14 3 26 4 38 5 410 6 512 7 6*/

7、对象深浅复制

（1）浅复制

简单对象的复制：

let obj1 = { foo: "foo", bar: "bar" };let obj2 = { hello: "world" };// 使用扩展运算符let copy1 = { ...obj1, ...obj2};// 或使用Object.assign(target, source1, source2...)let copy2 = Object.assign({}, obj1, obj2);// copy1 与 copy2结果是一样的：{ foo: 'foo', bar: 'bar', hello: 'world' }

但如果是复杂一点的对象，如{ a: 0 , b: { c: 0 } }这样的，属性对应的值也是一个对象时，上面的方法就有问题了。若使用上面的两种方法，则得到的copy对象中，属性b的值与源对象中b的值共享的是同一个内存，即copy对象中的b的值只是源对象中对应引用的一份拷贝，改了源对象，copy对象会跟着变，反之亦然。这时候可以用下面的深拷贝。

（2）深复制

最简单的一种深拷贝，就是先序列化，再反序列化。

let obj = { a: 0 , b: { c: 0 } };let copy = JSON.parse(JSON.stringify(obj));

8、字符串常用操作

略，详见：https://www.cnblogs.com/guoyeqiang/p/8178336.html

9、异步

function resolveAfter2Seconds() {    return new Promise((resolve, reject) => {        setTimeout(() => {            let num = Math.floor(Math.random() * 10)            if (num > 5) {                resolve('resolve ' + num);            } else {                reject('reject ' + num)            }        }, 2000);    });}

Promise有两个回调，一个是resolve，一个是reject，前者为成功后的回调，后者为失败后的回调。

resolveAfter2Seconds().then(res => {    console.log('success: ' + res)}).catch(err => {    console.log('failure: ' + err)})

异步变同步，关键在于async以及await，下面的代码中，1、2、3是按顺序执行的，2虽是异步，但await的存在使得语句被阻塞在这里，只有2执行完，才会执行3。去掉async或await都是没有效果的，去掉后，2中的result就不再是resolve回调的结果了，而是Promise对象，需要像上面一样使用then或catch来获取结果。

function resolveAfter2Seconds() {  return new Promise(resolve => {    setTimeout(() => {      resolve('resolved');    }, 2000);  });}async function asyncCall() {  console.log('calling'); // 1  let result = await resolveAfter2Seconds(); // 2  console.log(result); // 3}asyncCall();

10、Object.is(value1:any, value2:any)方法

Object.is('foo', 'foo');     // trueObject.is(window, window);   // trueObject.is('foo', 'bar');     // falseObject.is([], []);           // falselet foo = { a: 1 };let bar = { a: 1 };Object.is(foo, foo);         // trueObject.is(foo, bar);         // falseObject.is(null, null);       // true// Special CasesObject.is(0, -0);            // falseObject.is(-0, -0);           // trueObject.is(NaN, 0/0);         // true

11、对象遍历

Object.keys(obj)

Object.keys(obj).forEach(function(key){     console.log(key,obj[key]);});

for…in

for(let key in obj) {
     console.log(key,obj[key]);
}

Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames(obj).forEach(function(key){
    console.log(key,obj[key]);
});

Reflect.ownKeys(obj)

Reflect.ownKeys(obj).forEach(function(key){
	console.log(key,obj[key]);
});

12、数组操作

concat方法：数据连接.将两个数组或者数组和其他数据链接成一个新的数组并返回。
join方法：修改数组的间隔符数组名.join(“符号”);返回字符串
pop方法：移除最后一个元素，并返回该元素
push方法：在数组的最后添加新的元素，并返回数组的长度
reverse方法：反转数组内容
shift方法：移除第一个元素并返回该元素
unshift方法：在数组的第一个位置添加新的元素，并返回数组的长度。
splice方法：从指定位置开始删除指定数量的内容，同时可以在删除的位置添加新的内容

13、驼峰下划线互转

// 下划线转换驼峰
function toHump(name) {
    return name.replace(/\_(\w)/g, function(all, letter){
        return letter.toUpperCase();
    });
}
// 驼峰转换下划线
function toLine(name) {
  return name.replace(/([A-Z])/g,"_$1").toLowerCase();
}