javascript通用方法封装

置顶

汤卓杰

已于 2022-11-09 14:53:18 修改

阅读量391

点赞数

文章标签： javascript 前端

于 2022-07-22 14:05:13 首次发布

本文链接：https://blog.csdn.net/tang31415926/article/details/125930743

版权

工作上常用方法每次重写，便想封装一起，方便调用，也当作备忘录

时间字符串格式

js中的Date对象原生的方法里，都不适用实际需求："2022-11-09 12:03:32"

let t = new Date();
console.log(t.toString());//Wed Nov 09 2022 12:14:09 GMT+0800 (中国标准时间)
console.log(t.toLocaleString());//2022/11/9 12:14:09

将斜杠"/"替换为"-"，可以初步实现，其中月、日不满10没补0倒是能接受。

new Date().toLocaleString().replace(/\//g,"-");

replaceAll()方法有的地方不兼容，所以用replace()。
其中toLocaleString()方法，显然是转为当地时间，官方将我们所在时区时间格式定为这样。在某些场景格式不对。

其他时区运行该代码
将浏览器信息设为其他时区
其他接入js的API但时区设置为其他地方的。

可以自己写个自定义的方法，直接给到Date的原型链上：

/**
 增加Date自定义原型链
 给Date实例对象添加toStr()方法，返回年月日时分秒字符串，补0，如 `2022-08-08 17:12:00`
 */
Date.prototype.toStr = function () {
   
    // return this.toLocaleString().replace(/\//g,"-");//本地时间格式，CN时：`2022/8/11 09:22:08`
    let y = this.getFullYear();
    let M = this.getMonth() + 1;
    let d = this.getDate();
    let h = this.getHours();
    let m = this.getMinutes();
    let s = this.getSeconds();
    M = M > 9 ? M : ("0" + M);
    d = d > 9 ? d : ("0" + d);
    h = h > 9 ? h : ("0" + h);
    m = m > 9 ? m : ("0" + m);
    s = s > 9 ? s : ("0" + s);
    return y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s;
}

引入该文件或插入该代码，在后面就能直接：Date().toStr()，方法名是自定义的，只要不重名即可。

对象深拷贝

javascript对象可分为：基本数据类型、引用数据类型。其中引用引用型数据，其变量指向的其实是引用目标的存储地址。由于js是弱数据类型语言，在打印的时候也看不出来。如果是其他编程语言的话，引用数据会直接显示引用地址，或者对象类。

基本数据类型拷贝

闲话少说，如果是基本数据类型，复制就直接复制了：

let a=1;
let b=a;//1

对象拷贝

如果是对象：

let obj1 = {
   
	a:1,
	b:2
}
let obj2 = obj1;

在obj1被声明的时候，就会给一个存储空间，有自己的存储地址。比如abc@1234(随便写的，便于理解)，那么obj2被赋值的时候，是把这个存储地址abc@1234给obj2，那么每次使用它的时候，程序会根据该地址（好比X省X市X县X小区X号）找到该对象。

深拷贝

以上两段代码就是浅拷贝，使用简单，但有个问题，如果我是想复制一个完整的对象，另外使用呢？

let obj1 = {
   
	a:1,
	b:2
}
let obj2 = obj1;
obj1.a=33;
console.log(obj2.a);//33

浅拷贝只是复制了地址，相当于一个人多了个外号，人还是那个人。改变一个变量下面的属性，另一个变量也会跟着改变。
这时候就要用到深拷贝。

let obj1 = {
   
	a:1,
	b:2
}
let arr1=[1,2,3];

let obj2 = {
   ...obj1}
let arr2 = [...arr1];

obj1.a="txt";
arr1.push("text");

console.log(obj2.a);//1
console.log(arr2);//[1,2,3]

多层对象拷贝

js原生的深拷贝能解决大部分问题，但如果是复杂结构的对象，就处理不了。

let obj1 = {
   
	a:1,
	b:{
   
		name:"test"
	}
}
let obj2 = {
   ...obj1}
obj1.a=100;
console.log(obj2.a);//1

obj1.b.name="abc";
console.log(obj2.b.name);//"abc"

以上示例表明：原生方法的“深拷贝”其实也不够“深”，它最多只会给第一层的内容重新开辟存储空间，再下一层还是引用数据。
假如现在想要复制一个多层结构的引用型数据，进行另外的操作，不能让两变量互相影响，那么原生方法就不适用了。

递归复制

第一种方法就是：判断子属性是什么类型，若是基本数据类型，直接复制。若是引用数据类型，如果是数组，将数组遍历，递归。如果是普通对象，也是遍历属性名、属性值，再对属性值递归。如果是function（特殊的对象），就直接复制（这种情况更建议定义一个类）。
这种方法麻烦，而且递归有溢栈、死循环的风险。（主要是麻烦）。

JSON

将数据转JSON字符串，再转js对象，会完全开辟新的存储空间。

function copy (obj) {
   
    return JSON.parse(JSON.stringify(obj));
}

其他

有些插件会自带深拷贝的方法，如jQuery的$.extend()。请自行探究。
拷贝的目的就是：复制某变量里所有层级内容，且不能互相影响，如果真的结构过于复杂，更建议新定义一个class。

兼容iOS的时间字符串

在windows系统上的浏览器中，new Date("2022-11-09 14:22:25")这种格式是可以正常运行的。但是在苹果手机上，只能new Date("2022/11/09 14:22:25")，它只识别/而不识别-（Windows、Android都可以同时识别-、/），有时候后台给的数据就是这种格式的话，就会异常（isNaN)。
所以保险起见，多平台开发时，一律将-替换为/再转时间对象。