前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js - 常用功能方法汇总(updating...)

js - 常用功能方法汇总(updating...)

作者头像
xing.org1^
发布2018-12-06 15:48:31
3680
发布2018-12-06 15:48:31
举报
文章被收录于专栏:前端说吧

一、查值的类型(可用于拷贝)

代码语言:javascript
复制
 1 /*
 2     * @Author: guojufeng@ 
 3     * @Date: 2018-10-30 20:07:06
 4     * @purpose 获取一个值的类型
 5     * @param {variateName} target: 要获取类型的变量名或对象
 6     * @output {string} result || "null": 返回的参数 - result或者null,为字符串形式的
 7     */
 8     function getType(target) {
 9       if(target === null){
10         console.log(target)
11         return "null";
12       }
13       let result = typeof (target);
14       if (result == "object") { 
15         if (target instanceof Array) {
16           result = "array";
17         } else if (target instanceof Object) {
18           result = "object";
19         }
20       }
21       console.log(result)
22       return result;//返回类型值的字符串形式
23     }

 应用:

代码语言:javascript
复制
1 var nu= null;// null 怎么算
2 var un= undefined;
3 var c = new Array;
4 var d = {};
5 console.log(getType(c),getType(d),getType(nu),getType(un))

 二、深拷贝

接上一个方法,实现深拷贝。

/* 思路 */

查值的类型

  三种方法:1、instanceof 2、tostring.call(target) 3、target.constuctor

如果是原始值

  就直接复制

如果是引用值,

  则进行遍历,查看每一项的具体类型

    如果是数组,新建一个数组,forEach时把每一项抛进新数组

    如果是对象,新建一个对象,for in时让新旧对象的键值一一对应

      遍历过程中,再次判断引用类型值的每一项

        如果是原始值,就直接复制

        如果是引用值,就继续看具体类型、新建对应类型、一一遍历

          遍历过程中,再次判断引用类型值的每一项,

            如果是原始值,就直接复制

            如果是引用值,就继续看具体类型、新建对应类型、一一遍历

              遍历~~~【->-> 递归】

代码语言:javascript
复制
 1 /*
 2     * @Author: guojufeng@ 
 3     * @Date: 2018-10-30 20:48:44 
 4     * @purpose 深度克隆
 5     * @param {variateName} origin: 要克隆的对象变量名
 6     * @output {对应值} 根据origin的类型返回的具体值
 7 */
 8 function deepClone(origin) {
 9     let type = getType(origin),
10     target;
11     if (type == "array") {
12         target = [];
13         /* 数组 */
14         origin.forEach(el = >{
15             console.log("ele", el) target.push(deepClone(el));
16         });
17     } else if (type == "object") {
18         /* 对象 */
19         target = {};
20         for (const key in origin) {
21             if (origin.hasOwnProperty(key)) {
22                 /* 注意,只拷贝元素身上的,而不拷贝其原型上的值 */
23                 const el = origin[key];
24                 target[key] = deepClone(el);
25             }
26         }
27     } else if (type == "function") {
28         /* 函数 */
29         target = function() {};
30         target = origin;
31     } else {
32         /* 原始值 */
33         target = origin;
34     }
35     return target;
36 }

应用:

代码语言:javascript
复制
var test = [1, 2, null, undefined, false, [3, 4]];
var res = deepClone(test);
console.log(res, getType(res)) 
res.push(222);
console.log(res) 
console.log(test) 
var test1 = {
    a: 1,
    b: 2,
    c: [1, 2],
    d: function() {
        console.log(this.d)
    }
};
var res1 = deepClone(test1);
console.log(res1, getType(res1)) 
res1.b = 3;
res1.c.push('test');
console.log("res1修改值", res1);
console.log("test1原始值", test1);
res1.d = null;
console.log("res1修改值", res1);
console.log("test1原始值", test1);

简单类型的值克隆就不说了,这里举例了两个:一个克隆数组,一个克隆对象。

这个是克隆数组后,新数组增加值与元素组的比较。可以发现,新数组 res 虽然新增了值,但是对旧数组 test 没有影响。

说明这种引用类型的克隆不是简单的复制了一个指针

还有这个对象的克隆,新对象 res1 增添自己属性上数组的值【res1.c.push('test');】以及修改销毁自身的函数【res1.d = null;】,对于原对象 test1 都没有任何影响。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-10-30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、查值的类型(可用于拷贝)
  •  二、深拷贝
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档