JS对象基本用法

135 阅读3分钟

简单数据类型:Number,String,Null,Undefined,boolean,symbol

复杂数据类型:object对象,唯一一种复杂数据类型

一、对象

(一)定义

1.一种无序的相关属性和方法的集合

2.是键值对的集合

(二)创建对象的两种方式

(1)利用字面量创建对象

1.创建

①属性、方法采用键值对的形式

②多个属性、方法,用,隔开

③方法冒号跟的是一个匿名函数

var obj={}     //空对象
var obj={
    uname:'张三',
    age: 18,
    sex: '男',
    sayHi: function(){
        console.log('hi');
    }
}
2.使用对象

①对象名.属性名

console.log(obj.uname);

②对象名['属性名']

console.log(obj.['age']);

③对象名.方法名 obj.sayHi();

变量和属性,函数和方法

相同:变量和属性都是用来存储数据;函数和方法都是实现某种功能

不同:变量和函数单独存在,属性和方法在对象里

(2)用new Object创建对象

① 利用等号赋值的方法添加对象属性和方法 ② 每个属性和方法之间用分号结束

var obj=new Object();    //创建空对象
obj.uname='张三';
obj.age=18;
obj.sex='男';
obj.sayHi=function(){
    console.log("hi");
    }

二、对象的增删改查

(一)删除

1.删除对象属性

delete obj.xxx;
delete obj['xxx'];

2.验证对象中是否包含某属性名

①不包含

'xxx' in obj === false

② 包含

'xxx' in obj && obj.xxx === undefined;

(二)查看

1.查看自身属性

Object.keys(obj);

2.查看对象属性+共有属性

console.dir(obj);

3.判断一个属性是自身的还是共有的

obj.haaOwnProperty('toString');

4.查看对象某个属性的值

obj['key'];
obj.key;

注意 obj[name]中name是一个变量,加''才表示属性名

(三)增加和修改

1.直接赋值

let obj ={uname: '张三'}; //uname是字符串
obj.uname = '张三';       //uname是字符串
obj['uname'] = '张三';  
obj[uname]='张三';         //错误写法,因为uname是变量,值是不确定的
obj['una'+'me']='张三';
let key = 'uname'; obj[key] = '张三';
let key = 'uname'; obj.key='张三';//错误,因为key是变量,obj.key等价于obj['key'];

2.批量赋值

    Object.assign({
         uname: '张三',
         age: 18;
         })

修改或增加共有属性

  Object.prototype.toString = 'xxx';

修改隐藏属性Object.create

let common ={ age: 18};
let obj =Object.create(common);
obj.uname='张三';

扩展

'name'in objobj.hasOwnProperty('name')的区别

'name' in obj是指判断对象obj及该对象的原型上是否有名为name的 属性;

obj.hasOwnProperty('name')是指仅判断obj对象上是否有名为name的属性。

对象的隐藏属性

  • JS中每个对象都有一个隐藏属性__proto__
  • 这个隐藏属性存储着共有属性组成的对象的地址
  • 这个共有属性组成的对象叫做原型 原型

原型

1.每个对象都有原型
  • 原型存储对象的共有属性
比如obj的原型就是一个对象
obj.__proto__存着这个对象的地址
这个对象有toString/valueOf等属性
2.对象的原型也是对象
  • 所以对象的原型也有原型,为null
  • obj对象的原型即为所有对象的原型,这个原型包含所有对象的共有属性,是对象的根

原型链

var common={
   '国籍': '中国',
   hairColor: 'black';
   }
   
var person={
   name: 'frank';
   }
person.__proto__=common;
console.dir(person)
运行结果

运行结果

图解

图解