开发中常用的JS知识点集锦
程序员文章站
2022-05-11 14:23:22
索引 1、对象深拷贝 2、网络图片转base64, 在线图片点击下载 3、对象深拷贝 4、对象深拷贝 5、对象深拷贝 6、对象深拷贝 1、对象深拷贝 2、网络图片转base64, 在线图片点击下载 3、对象深拷贝 4、对象深拷贝 5、对象深拷贝 6、对象深拷贝 1、对象的深拷贝（一级属性拷贝和多级属 ......
索引
1、对象的深拷贝（一级属性拷贝和多级属性嵌套拷贝）
//深拷贝函数（满足属性多级嵌套）
function deepcloneobj(sourceobj){
var obj = (sourceobj instanceof array) ? [] : {};
for (var key in sourceobj){
var tmp = sourceobj[key];
//处理重复引用，防止死循环
if (tmp === sourceobj){
continue;
}
if (typeof tmp === 'object'){
obj[key] = arguments.callee(tmp); //属性为对象，递归深度复制
}
else{
obj[key] = tmp;
}
}
return obj;
}
//1、测试对象的深拷贝
var obj = {info:{name:'大锤'}, sign: 'xxx'};
var obj2 = object.assign({}, obj); //一级属性深拷贝 （es6的object.assign函数特性）
var obj3 = {...obj}; //一级属性深拷贝 (es6扩展运算符)
var obj4 = deepcloneobj(obj); //递归深拷贝所有层级属性
var obj5 = json.parse(json.stringify(obj)); //深拷贝所有层级属性
console.log('obj: ', json.stringify(obj));
console.log('obj2: ', json.stringify(obj2));
console.log('obj3: ', json.stringify(obj3));
console.log('obj4: ', json.stringify(obj4));
console.log('obj5: ', json.stringify(obj5));
console.log(".........end..........");
settimeout(function(){
obj.sign = 'a**b';
obj.info.name = '一二三';
console.log('\n****update info ****');
console.log('obj: ', json.stringify(obj));
console.log('obj2: ', json.stringify(obj2));
console.log('obj3: ', json.stringify(obj3));
console.log('obj4: ', json.stringify(obj4));
console.log('obj5: ', json.stringify(obj5));
console.log(".........end..........");
},100);
/*
打印日志结果：
obj: {"info":{"name":"大锤"},"sign":"xxx"}
obj2: {"info":{"name":"大锤"},"sign":"xxx"}
obj3: {"info":{"name":"大锤"},"sign":"xxx"}
obj4: {"info":{"name":"大锤"},"sign":"xxx"}
obj5: {"info":{"name":"大锤"},"sign":"xxx"}
.........end..........
****update info ****
obj: {"info":{"name":"一二三"},"sign":"a**b"} //只拷贝了第一级属性
obj2: {"info":{"name":"一二三"},"sign":"xxx"} //只拷贝了第一级属性
obj3: {"info":{"name":"一二三"},"sign":"xxx"} //只拷贝了第一级属性
obj4: {"info":{"name":"大锤"},"sign":"xxx"} //所有层级深拷贝
obj5: {"info":{"name":"大锤"},"sign":"xxx"} //所有层级深拷贝
*/
//2、测试数组的深拷贝
settimeout(function(){
console.log('\n\n.....数组的深拷贝测试....');
var arr = [{name: '小明'}, true, 18];
var arr2 = object.assign([], arr);
var arr3 = [...arr2];
var arr4 = deepcloneobj(arr);
var arr5 = json.parse(json.stringify(arr));
console.log('arr: ', json.stringify(arr));
console.log('arr2: ', json.stringify(arr2));
console.log('arr3: ', json.stringify(arr3));
console.log('arr4: ', json.stringify(arr4));
console.log('arr5: ', json.stringify(arr5));
console.log("......end......\n");
settimeout(function(){
arr[0].name = '五六七', arr[1] = false, arr[2] = 99;
console.log('arr: ', json.stringify(arr));
console.log('arr2: ', json.stringify(arr2));
console.log('arr3: ', json.stringify(arr3));
console.log('arr4: ', json.stringify(arr4));
console.log('arr5: ', json.stringify(arr5));
}, 100);
/*
数组测试打印日志结果：
.....数组的深拷贝测试....
arr: [{"name":"小明"},true,18]
arr2: [{"name":"小明"},true,18]
arr3: [{"name":"小明"},true,18]
arr4: [{"name":"小明"},true,18]
arr5: [{"name":"小明"},true,18]
......end......
arr: [{"name":"五六七"},false,99]
arr2: [{"name":"五六七"},true,18] //只拷贝了第一级属性
arr3: [{"name":"五六七"},true,18] //只拷贝了第一级属性
arr4: [{"name":"小明"},true,18] //所有层级深拷贝
arr5: [{"name":"小明"},true,18] //所有层级深拷贝
*/
},1000);
2、网络图片转成base64, 在线图片或文件点击下载（隐藏链接）
<div>
<div onclick="clickmedownload()">点我下载</div>
<script type="text/javascript">
/**
* 根据远程图片转成base64数据 (远程图片和当前页面不是同一域名时，需要进行web服务器配置，使其可以跨域下载)
* @param url 图片链接
* @param callback 回调函数
*/
function getbase64byimgurl(url, callback){
let canvas = document.createelement('canvas'),
ctx = canvas.getcontext('2d'),
img = new image;
img.crossorigin = 'anonymous';
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
ctx.drawimage(img,0,0);
//获取base64数据
let base64 = canvas.todataurl('image/png');
//回调
if (callback){
callback(base64);
}
canvas = null;
}
img.src = url;
}
/**
* 把base64转成文件流
* @param base64 base64数据
* @param filename 自定义文件的名字
*/
function getfilebybase64(base64, filename){
let arr = base64.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new uint8array(n);
while(n--){
u8arr[n] = bstr.charcodeat(n);
}
return new file([u8arr], filename, {type:mime});
}
/**
* 测试例子：点击下载，隐藏下载链接
*/
function clickmedownload(){
let imgurl = 'https://img2018.cnblogs.com/blog/454511/201811/454511-20181114115022054-611805083.png';
getbase64byimgurl(imgurl, function(base64){
console.log(base64);
//创建a标签, 设置a标签的href属性和download属性
var aele = document.createelement('a');
aele.setattribute('href', base64);
aele.setattribute('download', 'temp.png');
aele.style.display = 'none'; //隐藏a标签
document.body.appendchild(aele); //将a标签添加到body里
aele.click(); //触发a标签点击事件
document.body.removechild(aele); //下载图片后，移除a标签
});
}
</script>
</div>