对象枚举 , 数组和对象遍历 三目运算符 对象的深度克隆 —JS学习笔记

枚举 遍历

遍历数组

 // 如何取数组的值关键 :数组有length 
        var arr = ['1苹果', '2香蕉', '3芒果', '4柠檬'];
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]); // 1苹果 ,2香蕉,3芒果,4柠檬
        }

遍历对象, var prop in obj 取出对象所有属性的值(不取属性 只取值)

 var obj = {
            a: 123,
            b: 234,
            c: 345,
        };

  for (var prop in obj) {
  //  console.log(obj.prop); 结果是undefined 
  //  底层原理结果是:console.log(obj['prop']) 此时的'prop'代表的是一个属性名
   //  obj.name------>obj['name'] 



     if (obj.hasOwnProperty(prop)) { //判断prop 是不是自己的属性。hasOwnProperty(prop),属性名的字符串形式传进去
        console.log(obj[prop]); //此时的prop 代表的是一个变量  系统带的不会遍历到, 只有自己设的才会被遍历到
    //  cosole.log(obj.prop)    obj.prop底部原理是 ————> obj['prop'] 
//obj.prop 的prop 是字符串''prop''-->obj.''prop''。obj[ ]内部是变量 、表达式、基本类型
// obj[1+2] =》 obj[3]
// var a = "A"; var b="B"; obj[a+b] => obj["AB"]
            }

    }




数组也算特殊类型的对象,也可以用var prop in arr取出数组所有索引的值

 var arr1 = ['我在图书馆', 25, 'xuexi'];
var key//  和var key in arr1 结果一样 可以在外部申明变量
for ( key in arr1) {
          console.log(arr1[key]); //我在图书馆  25  xuexi

   }
知识点:

obj.name=obj['name']
1+''='1';

下面的案例很好的将这个两个知识点运用到

 var deng = {
            wife1: {
                name: "小赵",

            },
            wife2: {
                name: "小赵",

            },
            wife3: {
                name: "小赵",

            }
            sayWife: function(num) {

                return this['wife' + num]
            }

        }
  console.log(deng.sayWife(3)); // {name:''小孙"}


正确区分数组和对象的方法

 typeof ([ ])--->"object"  
typeof( {}) ---->"object"

typeof() 无法区分数组和对象。

1.instanceof
instanceof: A instanceof B -->> A对象是不是B构造函数构造出来的
正确说明: 看A对象的原型链上 有没有 B的原型,其实起作用的是 constructor
[ ] instanceof Array--->true
var obj={ },obj instanceof Array ---->false
2.constructor
[ ].constructor ---->function Array(){}
var obj={},obj.constructor ---->function Object(){ }

3.toString(){ } 推荐使用,区别数组和对象
包装类都重写了自己的toString方法,
Number.prototype.toString
Arry.prototype.toString
Boolean.prototype.toString
String.prototype.toString
只有Object.prototype.toString 能够区分

 Object.prototype.toString=functon(){ 
---》 识别调用者 并且返回相应的结果  

}  //我们需要找的也是这个调用者的类型。这个调用者 其实也就是函数方法的 this。

猜想:通过包装类特点可了解 ,().toString() 是处理调用者的。根据调用者的数据类型可选择下面对应的方法。

Object.prototype.toString.call( [ ]); // ''[object Array ]''
bject.prototype.toString.call(123); //''[object Number]''
bject.prototype.toString.call({ }); //"[object obje

三目运算符

三目运算符号:
条件判断?是:否 并且会返回值
比if else高端点 有返回值

var Num = 1 > 0 ? ("10" > 9 ? 1 : 0) : 2; //结果是1 
var Num2 = 1 > 0 ? ("10" > 9 ? 1 : 0) : 2; //结果是0 

克隆

浅度克隆,互相影响
 function clone(ori, target) {

            var tar = target|| {}; //排除没有传target —target= undefied 或者 null
       
            for (var prop in ori) {


                tar[prop] = ori[prop];
            }
            return tar;
        }
深度克隆 各自独立

步骤:
遍历对象,(var prop in object)
1,判断是否是原始值 typeof() 判断是否是 object
2,判断是数组还是对象 使用 toString() 总共有3种方法 instanceof() constructor--->不建议使用 有跨子域的问题。
3,建立相应的数组或对象
4,递归

 function deepClone(origin, target) {
            var target = target || {}, // 遍历对象 排除没有传target —target= undefied 或者 null
                toStr = Object.prototype.toString,
                arrStr = "[object Array]";
            for (var prop in origin) {
                // 只取自身的属性和值。避免拿原型链上的属性和值
                if (origin.hasOwnProperty(prop)) {
                    // 判断是原始值是否是引用值: 方法typeof() null
                    if (origin[prop] !== "null" &&
                        typeof(origin[prop]) == 'Object') {
                        // 判断是 对象还是数组的引用值
                        target[prop] = toStr.call(origin[prop]) == arrStr ? [] : {};
                        deepClone(origin[prop], target[prop]);





                    } else {
                        // 原始值时:
                        target[prop] = origin[prop];

                    }



                }
            }
            return target;
        }
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,039评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,223评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,916评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,009评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,030评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,011评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,934评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,754评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,202评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,433评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,590评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,321评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,917评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,568评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,738评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,583评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,482评论 2 352

推荐阅读更多精彩内容