前端---JavaScript基础2

刺骨的言语ヽ痛彻心扉 2022-10-11 12:26 18阅读 0赞

### 文章目录 ###

*   *  前端---JavaScript基础2
     *   *  对象类型判断
         *   *  call函数
         *  对象属性操作
         *   *  深拷贝方法

## 前端—JavaScript基础2 ##

重构以下代码：（以面向对象的方式）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]  
重构后：（其中this指针问题也可改成箭头函数）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]

### 对象类型判断 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 5]

#### call函数 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 6]

### 对象属性操作 ###

//对象属性操作
    //属性增加
    var obj = { };
    obj.name = "jack";
    obj['age'] = 20;
    var addr = "wh";
    obj[addr] = "武汉";   //使用的变量
    console.log(obj);
    
    //属性删除
    var obj2 = { };
    obj2.name = "aaaaa";
    obj2['age'] = 22;
    delete obj2.name;
    console.log(obj2);
    
    //检测属性
    var obj = { 
    	name:"bbb",
    	age:23,
    	action:function(){ 
    		this.addr = "beijing"
    	}
    }
    obj.action();
    console.log(obj);
    //in
    console.log('name' in obj)
    //hasOwnProperty
    console.log(obj.hasOwnProperty('age'))
    
    //属性枚举 遍历
    var arr = ['a','b','c','d'];
    var obj = { name:"bbb",age:23}
    //for in
    for(var key in obj){ 
    	//属性名 属性值
    	console.log(key,obj[key])
    }
    for(var v in arr){ 
    	console.log(v,arr[v])
    }
    //for
    for(var i=0;i<arr.length;i++){ 
    	console.log(arr[i])
    	//if(条件ok) 终止 return break;
    }
    //forEach 没有返回值
    arr.forEach(function(item,index){ 
    	//不能终止
    	console.log(item)
    })
    //map -- 可修改数组的值 有返回值
    var m = arr.map(function(item){  //循环每一个属性 并返回改变后的属性
    	return item+1;
    })
    //filter 过滤器 返回满足条件的数组
    var f = arr.filter(item){ 
    	return item === 'c';
    })
    //every 返回true false 都必须满足条件
    var e = arr.every(item){ 
    	return item === 'c';
    })
    //some 返回true false 满足其中一个即可
    var e = arr.every(item){ 
    	return item === 'c';
    })
    //reduce
    var arr = [1,3,5,7];
    //总数 当前数
    var s = arr.filter(total,currentValue){ 
    	return total+currentValue;
    },10) //10初始值
    
    
    
    //对象属性拷贝
    //对象序列化与反序列化
    //JSON --- 浏览器中对象
    var obj = { name:"bbb",age:23};
    console.log(JSON.stringify(obj));
    var str = '{name:"bbb",age:23}';
    console.log(JSON.parse(str))

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 8]

#### 深拷贝方法 ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20221005/57a6ed4518c14988a8e02e07282defee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/af58f6f440b74c4ca6105ef676c4ea26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/024d93595d764c98b5e066a30194030e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 3]: /images/20221005/c756c863681a4053a6a5fba97d680ec1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 4]: /images/20221005/174a733fb2ed43d6a8f085bfc1b70951.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 5]: /images/20221005/9a3449dc184544e6907bf8db20fa7a8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 6]: /images/20221005/bd2abe5977374d06ba81b5217cd816b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 7]: /images/20221005/9f97c412980647f4b9f67251a20015c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 8]: /images/20221005/b46bccc18c8640b2b4825f27ee80fb5e.png