2021-08-08Javascript对象

Javascript对象

1.Javascript前言

任何东西都可以是对象,对象都有属性

2.Javascript对象定义

1.new关键字创建对象

var obj = new Object;
obj.name = '马志强';
obj.age= 70;
obj.color = 'green';
obj.eat = function (){
	console.log('烤鸭');
}
console.log(obj);

2.工厂类创建对象

// 创建工厂,设置好函数的形参(属性)
function testFactory(name,age,color){
	var obj = new Object();
	obj.name = name;
	obj.age = age;
	obj.color = color;
	return obj;
}
// 给工厂传参
var shoes = testFactory('Adidas',37,'white');
console.log(shoes);
var shoes2 = testFactory('Nike',41,"skyblue");
console.log(shoes2);

3.构造方法创建对象

1.结构

function 方法名字 (){},方法名字首字母大写

2.创建构造器,设置好形参(属性)

function Animal(name,age,type){
// this后面是属性名,=后面是属性值
	this.name = name;
	this.age = age;
	this.type = type;
}

3.调用构造器,new一个函数名,然后传参

var p = new Animal('二筒',1,'cat');
console.log(p);

4.为对象添加新的属性

p.hobby = '罐头';
console.log(p);

5.为对象添加新的方法

p.sleep = function(){
	console.log('every where')
}
console.log(p);

6.新属性和方法被添加到p,而不是其他的animal对象上

var p1 = new Animal('二筒',0.8,'UScat');
console.log(p1)

7.构造函数的返回值

• 不需要return,直接将对象返回
• 构造函数会直接将对象给变量，而不是通过return返回的

function People(name,heigth,gender){
	this.name = name;
	this.height = heigth;
	this.gender = gender;
// 如果构造函数return了基本数据类型,返回的是对象,如果return了引用数据类型,那么返回的是数组
// 但是构造函数的左右是为了创建对象,不是为了返回值,所以构造函数return就违背了构造函数的设计思想啊,这里可以把构造函数理解为一个构造器,如果需要使用,就new一个函数名来调用
	// return 111;
	// return [1,2,3,4];
}
var p1 = new People('张三',140,'male');
console.log(p1);

4.字面量创建对象

{属性名(key):属性值(value),属性名2:属性值2}
key可以加引号也可以不加,默认不加,特殊情况下得加,比如key命名不规范,包含特殊字符

var person = {name:"red romance", age:18, color:"yellow"};

3.Javascript对象属性

1.定义对象的属性

• 对象的属性是有键值对组成的 >>> 键(key),值(value)
• 键和值,用冒号隔开,name : ‘张三’
• 键被称作对象的属性,值被称作属性值
• 对象的属性基本上都是字符串,大部分属性的引号可以省略不写,命名不规范或者 出现特殊字符时需要加引号

2.给对象添加属性

var cat = {name:'二筒',age:0.8,gender:'female'};
	console.log(cat);
	// (1)点语法(函数名加点加要添加的属性,等号后面传参)
	cat.color = 'black + white';
	console.log(cat);
	// (2)中括号语法,需要在中括号内给属性加引号(函数名后面中括号,中括号内引号,引号内key,等号后面传参)
cat['type'] = 'USshort';
console.log(cat);

• 点语法和中括号语法的区别

  • 点语法在遇到key有特殊字符的时候,就不生效了

  • // cat.nose-color = 'pink';
    // console.log(cat);
    cat['nose-color'] = 'pink';
    console.log(cat);
    

    点语法遇到变量替换,不会报错但是输出的结果是替换后的变量,不是要添加的key,容易造成误解

    var fp = 'fourPaw';
    cat.fp = 'pink';
    console.log(cat); */
    // 中括号语法可以完美解决这个问题,但是替换的变量在中括号内不加引号
    var fp = 'fourPaw';
    cat[fp] = 'pink';
    console.log(cat);
    // 实际的企业级开发中,点语法用的较多,因为简单,在命名key的时候遵守命名规则,不要搞特殊字符
    

3.修改对象属性

var tea = {name:'阿萨姆',price:5,'bg-color':'red'};
console.log(tea);
// 修改属性,有则改之,无则加勉(有这个属性就改了,没有这个属性就加上)
tea.price = 4.5;
console.log(tea);
tea.type = 'drink';
console.log(tea);
// 修改'bg-color',也不可以用点语法
// tea.bg-color = 'yellow';
// console.log(tea);
tea['bg-color'] = 'yellow';
console.log(tea);
// 变量替换的时候,也不可以用点语法
var bg = 'bg-color';
// tea.bg-color = 'green';
// console.log(tea);
tea[bg] = 'green';
console.log(tea);

4.删除对象属性

var milkTea = {name:'芋泥波波奶茶',price:33,'element-type':'water',likePeopleType:'women'}
delete milkTea.price;
console.log(milkTea);
// 删除'element-type'也不可以用点语法
// delete milkTea.element-type;
// console.log(milkTea);
// delete milkTea["element-type"];
// console.log(milkTea);
// 变量替换的时候,也不可以用点语法
var et = 'element-type';
// 此时不会有任何删除,因为函数内找不到et这个key
delete milkTea.et;
console.log(milkTea);
delete milkTea[et];
console.log(milkTea);

5.查询对象的属性

var company = {name:'Tencent',location:'广东省深圳市','a-type':'Internet'};
console.log(company);
console.log(company.name);
console.log(company['location']);
// 查询'a-type'不可以用点语法
// console.log(company.a-type);
console.log(company["a-type"]);
// 变量替换查询属性不可以用点语法
var n = 'name';
// 返回undefined,因为函数内没有n这个key
console.log(company.n);
console.log(company[n]);

6.对象的遍历(使用for in循环)

var women_Star = {name:'辛芷蕾',age:30};
// for in 默认情况下遍历的是key,相当于把key替换成x,所以遍历结果要想得到value,需要给x加[]
for(x in women_Star){
	console.log(x,women_Star[x]);
}