02学习 JS面向对象笔记 义美

其实很多人都说JS难，其实JS就是要多练习，JS 快速成长 多练 从头到尾 1~3 遍
多练 然后写代码的能力提升快 不要拷贝别人的代码

本篇文章记录的是

0.属性的操作

1.属性的删除

2.属性的检测

3.枚举属性

4.序列化对象

-----------------------------

属性的设置 和 获取

例：

var obj ={};

obj.name = 'shaozhu';//方法一

obj['age'] = 22;//方法二

这两个设置属性的区别 ！！！！！

用点 '.' 只能获取自身的属性

[] 可以是变量 也就是说 当value 是变量的时候，'.'是获取不到的，要用[] 来获取

var obj ={};

obj.name = "shaozhu";

obj['age']=22;

obj['age']

22

-----------------------

反面例子

var o = {};

o.name = 'xxx';

var nameA = 'name';

console.log(o[nameA]);

输出 xxx

[nameA] 里面的就是变量 如果用点的画就不行了

-----------------------

正面例子

var o = {}

o.name = 'xxx';
var nameA = 'name';
console.log(o[name]);

输出 undefined 这里应该是要加引号的 呵呵

----------------------------------------------

知识点1.属性的删除

var o = {}

o.name = 'xxx';

delete o.name;

-----------------------

知识2.属性的检测

1. in 运算符 (返回 布尔类型 )

2.hasOwnProperty()

3. ！==undefined

var o = {}

o.name = 'xxx';

console.log("name" in o);//方法1 返回布尔类型


console.log(o.hasOwnProperty("name"));//方法2 返回布尔类型


console.log(o.name !== "undefined" ) //方法3 返回布尔类型 这个方法有缺点 慎用 也有点 low

记得加引号

-----------------------

知识点3.枚举属性

-----------------------

for in

var o ={x:1,y:2,z:3};//数组

for(a in o){
console.log(a);//得到的是key

}

这样遍历出来的 key x y z

-----------------------

for in

var o ={x:1,y:2,z:3};//数组

for(a in o){
console.log(o[a]);//得到value

}

这样遍历出来的就是 value 1 2 3

--------------------------------------

var arr = [{x:1},{y:2},{z:3}];//数组对象

for(a in arr){console.log(a)} //0 1 2 得到的是数组的索引

PS：

for 是同步的

each 是异步的

$.each(data,function(index,item)){
...
}

---------------------------

4.序列化对象

数据类型有 xml json

var o2 = {x:1,y:2,z:3};

 console.log(typeof(JSON.stringify(o2)));//对象转字符串

string

------------

var o2 = {x:1,y:2,z:3};

var str = JSON.stringify(o2);//转成字符串

console.log(typeof(JSON.parse(str)));

//字符串转对象

object

---------------------------------------

var o2 = {x:1,y:2,z:3};

var str = JSON.stringify(o2);//转成字符串
var obj =JSON.parse(str);

//这个是深拷贝
console.log( typeof(obj));

obj.x

object

1

---------------------------------------

深拷贝 类似于双胞胎 完全独立的 各自有各自的行为 JSON.parse(str);

//这个是深拷贝 不会随着发生变化

浅拷贝 (引用) 相对于影子 对象 数组 都是浅拷贝 人和影子会一起动（对象和数组都是引用） 会随着发生变化

var o2 = {x:1,y:2,z:3};

var p = o2;
o2.x = '123';
console.log(p)

{x: "123", y: 2, z: 3}//改变了！！！

一个 ajax 的例子

function getFormData() {
var _name = $.trim($(".name").val());
var _age = $.trim($(".age").val());
var _address = $.trim($(".address").val());
var _mobile = $.trim($(".mobile").val());
var _email = $.trim($(".email").val());

var data = {
"name": _name,
"age" : _age,
"address" : _address,
"mobile" : _mobile,
"email" : _email
};
return data;
};
//提交
$(".btn-submit").on('click',function() {
var data = getFormData();
alert(JSON.stringify(data));
$.ajax({
type: "POST", //请求方式
url: url, //请求路径
cache: false,//是否异步
data: {dataJson: JSON.stringify(data)}, //传参
dataType: 'json', //返回值类型
success: function (msg) {

},
error: function () {

}
});
});

//数组对象有a返回1反之返回2；

var arr =[{a:1,q:2,w:3},{d:1,r:2,c:3},{t:1,v:2,z:3},{g:1,f:2,z:3}];

 

"a" in arr[0]

解：

var arr = [{a:1,q:2,w:3},{d:1,r:2,c:3},{t:1,v:2,z:3},{g:1,f:2,z:3}]

var arr =[{a:1,q:2,w:3},{d:1,r:2,c:3},{a:1,v:2,z:3},{g:1,f:2,z:3}];

for(var i=0;i<arr.length;i++){

if("a" in arr[i]){
//属性检测
console.log(1);

break;

}
}

var arr = [{a:1,q:2,w:3},{d:1,r:2,c:3},{t:1,v:2,z:3},{g:1,f:2,z:3}]
$.each(arr,function(index,item){
if(item.hasOwnProperty('a')){
console.log('ok');

}else{
console.log('error');
}
})