开发中常用的JS知识点集锦

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏python学习路

五、XML与xpath--------------爬取美女图片 先用一个小实例开头吧(爬取贴吧每个帖子的图片)XML 和 HTML 的区别XML文档示例

除了正则表达式处理HTML文档,我们还可以用XPath,先将 HTML文件 转换成 XML文档,然后用 XPath 查找 HTML 节点或元素。 ----  先...

3654
来自专栏前端说吧

JS-DOM 综合练习-动态添加删除班级成绩表

3748
来自专栏别先生

Javascript函数的简单学习

第九课 函数的定义与调用 1:函数的定义     语法格式     function 函数名(数据类型 参数1){//function是定义函数的关键字    ...

1898
来自专栏Danny的专栏

【POI框架实战】——POI导出Excel时设置单元格类型为数值类型

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

2213
来自专栏liulun

自己动手写UI库——引入ExtJs(布局)

第一:来看一下最终的效果 ? 第二:来看一下使用方法: ? 第三: Component类代码如下所示: public class Compo...

2085
来自专栏视觉求索无尽也

Markdown:技巧进阶参考资料:开始学习:

本文作者:keloli 本文说明:本文首发于2017.08.01,用于收集Markdown排版中的一些技巧,会不断更新。

1972
来自专栏JadePeng的技术博客

Angular快速学习笔记(3) -- 组件与模板

1873
来自专栏进击的君君的前端之路

定时器

1836
来自专栏大数据钻研

献给前端的小伙伴,祝大家面试顺利!

HTML相关问题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 最主要的不同: XHTM...

3015
来自专栏BestSDK

“Excel格式”最风骚玩法,炫技加薪就靠它了

话不多说直接上干货! 001 自定义格式概述 01 调出单元格格式对话框 选中需要设置格式的单元格,按「CTRL+1」快捷键打开「设置单元格格式」对话框。 在对...

3623

扫码关注云+社区

领取腾讯云代金券