What is a js object? Introduction to js objects (with code)

This article brings you what is a js object? The introduction of js objects (with code) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is an object

In JavaScript, an object is like an entity with separate properties and types. A cup is an object. The cup has attributes such as color and weight. Likewise, a JavaScript object has properties that define its characteristics.
A method is a function associated with an object, or in other words, a method is an object property whose value is a function.
Objects can be divided into the following categories

• Built-in objects/native objects

are predefined objects in the JavaScript language

• Host object

is an object provided by the JavaScript running environment

• Custom object

It is an object created by the developer independently

Object object

The Object type is a reference type. But the Object type is the parent of all types in JavaScript (all types of objects can be the properties and methods of Object)

Creating objects

/*
* 1. 对象的初始化器创建方式
*     var 对象名=｛
*      属性名 : 属性值
*      方法名 : function{
*         方法体
*      ｝
*    ｝
*/
var obj = {
    name : '九筒',
    age : 2,
    sayYou : function () {
        console.log('火锅')
    }
};

/* 2. 对象的构造函数方式
*      * 利用所有的引用类型创建对应的对象->具有具体的类型
*        var num = new Number;//number类型
*        var str = new String;//string类型
*        var boo = new Boolean;//boolean类型
*      * 利用Object作为构造函数创建对象
*        var 对象名 = new Object();
*        var 对象名 = Object();
*/
var num = new Number();
var str = new Storage();
var boo = new Boolean();

var obj2 = new Object();
var obj3 = Object();

/*   利用Object.create创建对象
*      var 对象名 = Object.create(null) -> 创建一个空对象
      var 对象名 = Object.create(obj)
      * obj - 表示另一个对象
      * 特点 - 当前创建的新对象拥有与obj对象相同的属性和方法*/
var obj4 = Object.create(null);
var obj5 = Object.create(obj);

Properties of objects

Define the properties of the object

The properties of the object are like variables attached to the object

/*对象介意定义多个属性
*  属性之间使用逗号分开*/
var obj = {
    name : '吴凡',
    age : 23,
    book : function () {
        console.log('暗毁')
    }
};

Calling the properties of the object

/*  调用对象的属性
*     对象名.属性名
*     不适用于复杂命名的属性名称*/
console.log(obj.name);

/*   对象名[属性名]-通用方式
     适用于复杂命名的属性名称
*     */
console.log(obj['name']);//属性名是字符串形式

Add, delete, and modify the properties of the object

var obj = {
    name : '火锅',
    variety : '比熊',
    age : function () {
        console.log('3')
    }
}
   /* 新增对象的属性
   *    1对象名.新的属性名 = 属性值
   *    2对象名[新的属性名] = 属性值*/
obj.col='白色';
console.log(obj.col);//白色

   /*删除对象的属性
   * delete 对象名.属性名
   * delete 对象名[属性名]*/
delete obj.col
console.log(obj.col);//undefined

  /*修改对象的属性
  * 对象名.已存在的属性名 = 属性值
  * 对象名[已存在的属性名] = 属性值*/
obj.name = '九筒';
console.log(obj.name);//九筒

Detecting the properties of objects

var obj = {
    name : '火锅',
    variety : '比熊',
    age : function () {
        console.log('3')
    }
};
console.log(obj.name)

/*   1. 判断对象的属性值是否为undefined*/
if (obj.name !==undefined){
    console.log('obj对象name属性存在')
}else{
    console.log('obj对象name属性不存在')
}

/*   2. 判断对象的属性值，先转换为boolean类型*/
if (obj.name){
    console.log('obj对象name属性存在')
}

/*   3. 利用in关键字进行判断*/
if ('name' in obj){
    console.log('obj对象name属性存在')
}else{
    console.log('obj对象name属性不存在')
}

/*   4. Object类型提供了hasOwnProperty()方法*/
if (obj.hasOwnProperty('name')){
    console.log('obj对象name属性存在')
}else{
    console.log('obj对象name属性不存在')
}

Convenience properties

var obj = {
    name : '小薄荷',
    age : '0.3',
    variety : function () {
        console.log('萨摩耶')
    }
};
// 1.for...in语句
for (var objAttr in obj) {
    // 通过对象属性或方法对应的值的类型进行区别
    if (obj[objAttr] instanceof Function) {
        // 当前是对象的方法
        obj[objAttr]();
    } else {
        // 当前是对象的属性
        console.log(obj[objAttr]);
    }
}

// 2.Object类型提供了keys()方法 - 只能遍历可枚举的属性
var arr = Object.keys(obj);
for (var v in arr) {
    var objAttr = arr[v];
    // 通过对象属性或方法对应的值的类型进行区别
    if (obj[objAttr] instanceof Function) {
        // 当前是对象的方法
        obj[objAttr]();
    } else {
        // 当前是对象的属性
        console.log(obj[objAttr]);
    }
}

// 3.Object类型提供了getOwnPropertyNames()方法 - 包括不可枚举的属性
var arr = Object.getOwnPropertyNames(obj);
for (var v in arr) {
    var objAttr = arr[v];
    // 通过对象属性或方法对应的值的类型进行区别
    if (obj[objAttr] instanceof Function) {
        // 当前是对象的方法
        obj[objAttr]();
    } else {
        // 当前是对象的属性
        console.log(obj[objAttr]);
    }
}

Methods of objects

Methods for calling, adding, modifying, and deleting objects

The methods and attributes for calling, adding, modifying, and deleting objects are basically the same

var obj = {
    name : '火锅',
    variety : '比熊',
    age : function () {
        console.log('3')
    }
}

/*调用对象的方法*/
// 1.对象名.方法名()
obj.sayMe();
// 2.对象名[方法名]()
obj['sayMe']();

/*新增对象的方法*/
// 1.对象名.新的方法名 = function(){}
obj.name = function(){
    console.log('九筒');
}
console.log(obj);
// 2.对象名[新的方法名] = function(){}

/*修改对象的方法*/
// 1.对象名.方法名 = function(){}
obj.name = function(){
    console.log('九筒');
}
// 2.对象名[方法名] = function(){}

/*删除对象的方法*/
//1.delete 对象名.方法名
delete obj.sayMe;
// 访问对象中不存在的方法 -> 报错(TypeError: obj.sayMe is not a function)
// obj.sayMe();
// 2.delete 对象名[方法名]

Related recommendations:

Summary of character methods and string operation methods in js (with code )

Analysis of common problems in the http proxy library http-proxy in nodejs

The above is the detailed content of What is a js object? Introduction to js objects (with code). For more information, please follow other related articles on the PHP Chinese website!