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

awesome23 发布于2019-08-26 13:24 / 2375人阅读

摘要：索引对象深拷贝网络图片转在线图片点击下载对象深拷贝对象深拷贝对象深拷贝对象深拷贝对象的深拷贝一级属性拷贝和多级属性嵌套拷贝深拷贝函数满足属性多级嵌套处理重复引用，防止死循环属性为对象，递归深度复制测试对象的深拷贝大锤一级属性深拷贝的函数特性

索引

1、对象深拷贝

2、网络图片转base64, 在线图片点击下载

3、对象深拷贝

4、对象深拷贝

5、对象深拷贝

6、对象深拷贝

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("
****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("

.....数组的深拷贝测试...."); 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......
");

    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);

私有云混合云 php中常用js函数 linux系统中的常用命令常用的服务器开发语言 php常用的开发工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108769.html

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

摘要：索引对象深拷贝网络图片转在线图片点击下载对象深拷贝对象深拷贝对象深拷贝对象深拷贝对象的深拷贝一级属性拷贝和多级属性嵌套拷贝深拷贝函数满足属性多级嵌套处理重复引用，防止死循环属性为对象，递归深度复制测试对象的深拷贝大锤一级属性深拷贝的函数特性索引 1、对象深拷贝 2、网络图片转base64, 在线图片点击下载 3、对象深拷贝 4、对象深拷贝 5、对象深拷贝 6、对象深拷贝 1、对象的深...

denson 2019-08-08 10:37 评论0 收藏0
开发中常用的JS知识点集锦

摘要：索引对象深拷贝网络图片转在线图片点击下载对象深拷贝对象深拷贝对象深拷贝对象深拷贝对象的深拷贝一级属性拷贝和多级属性嵌套拷贝深拷贝函数满足属性多级嵌套处理重复引用，防止死循环属性为对象，递归深度复制测试对象的深拷贝大锤一级属性深拷贝的函数特性索引 1、对象深拷贝 2、网络图片转base64, 在线图片点击下载 3、对象深拷贝 4、对象深拷贝 5、对象深拷贝 6、对象深拷贝 1、对象的深...

cooxer 2019-08-01 10:04 评论0 收藏0
后台开发常问面试题集锦（问题搬运工，附链接）

摘要：基础问题的的性能及原理之区别详解备忘笔记深入理解流水线抽象关键字修饰符知识点总结必看篇中的关键字解析回调机制解读抽象类与三大特征时间和时间戳的相互转换为什么要使用内部类对象锁和类锁的区别，，优缺点及比较提高篇八详解内部类单例模式和 Java基础问题 String的+的性能及原理 java之yield(),sleep(),wait()区别详解-备忘笔记深入理解Java Stream流水...

spacewander 2019-08-21 17:42 评论0 收藏0
后台开发常问面试题集锦（问题搬运工，附链接）

摘要：基础问题的的性能及原理之区别详解备忘笔记深入理解流水线抽象关键字修饰符知识点总结必看篇中的关键字解析回调机制解读抽象类与三大特征时间和时间戳的相互转换为什么要使用内部类对象锁和类锁的区别，，优缺点及比较提高篇八详解内部类单例模式和 Java基础问题 String的+的性能及原理 java之yield(),sleep(),wait()区别详解-备忘笔记深入理解Java Stream流水...

xfee 2019-08-15 12:33 评论0 收藏0
后台开发常问面试题集锦（问题搬运工，附链接）

摘要：基础问题的的性能及原理之区别详解备忘笔记深入理解流水线抽象关键字修饰符知识点总结必看篇中的关键字解析回调机制解读抽象类与三大特征时间和时间戳的相互转换为什么要使用内部类对象锁和类锁的区别，，优缺点及比较提高篇八详解内部类单例模式和 Java基础问题 String的+的性能及原理 java之yield(),sleep(),wait()区别详解-备忘笔记深入理解Java Stream流水...

Brenner 2019-08-05 12:25 评论0 收藏0