对象枚举 , 数组和对象遍历 三目运算符 对象的深度克隆 —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;
        }

猜你喜欢

转载自blog.csdn.net/weixin_33975951/article/details/87530509