Home > Web Front-end > JS Tutorial > Basic usage of JavaScript objects

Basic usage of JavaScript objects

WBOY
Release: 2022-08-04 09:49:07
forward
1435 people have browsed it

This article brings you relevant knowledge about javascript, which mainly introduces related issues about JavaScript objects. An object is a set of unordered related properties and methods. All things They are all objects, such as strings, values, arrays, functions, etc. Let’s take a look at them together. I hope it will be helpful to everyone.

Basic usage of JavaScript objects

[Related recommendations: javascript video tutorial, web front-end

1. Statement Two syntaxes for objects

#What is an object?

In JavaScript, an object is an unordered collection of related properties and methods. Everything is an object, such as strings, values, arrays, functions, etc.

Objects are composed of attributes and methods:

  • Attributes: characteristics of things, represented by attributes in objects (common nouns)

  • Method: behavior of things, represented by method in the object (common verb)

let obj = {'name': 'frank','age' : 18}  // 简单写法 let obj = new Object({'name': 'frank'}) // 正规写法
Copy after login

Note:

  • The key name (key) is a string , not an identifier, and can contain any characters
  • The quotation marks can be omitted, but when there are Chinese characters and spaces in the key name , symbols and other special characters cannot be omitted. If omitted, only identifiers can be written.
  • Even if the quotation marks are omitted, the key name is still a string

2. Delete the attributes of the object

1.delete obj.xxx or delete obj['xxx']

to delete the xxx attribute of obj. Only attributes can be deleted and cannot be used to delete objects.

Note: Distinguish between "attribute value is undefined" and "does not contain attribute name"

delete obj.xxx or delete obj['xxx'] You can modify the attribute name to delete.

Basic usage of JavaScript objects

Use 'xxx' in obj to check whether the attribute name is deleted successfully

2.Does not contain the attribute name

'xxx' in obj===false

3.Contains the attribute name, but the value is undefined

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

Note:obj.xxx === undefined , cannot determine whether 'xxx' is an attribute of obj

Basic usage of JavaScript objects

##obj.name = undefined just changes the attribute value to empty, but the attribute The name still exists.

Basic usage of JavaScript objects

3. View the properties of the object

    ##View all properties of itself
Object.keys(obj)

2. Basic usage of JavaScript objectsView its own shared properties

console.dir(obj)

Basic usage of JavaScript objectsOr use Object.keys to print out

obj.__proto

__ (not recommended)

3. Basic usage of JavaScript objectsDetermine whether a property is its own or shared

##obj.hasOwnProperty('toString') // false No Self's // ture is its own.

4.

View a single attribute valueBasic usage of JavaScript objects
There are two methods:

Square bracket method:
    obj['key']
  • Dot syntax:
  • obj.key
  • obj['k' 'ey']
  • It can also be said that there is a string in it

     obj.name  obj['name']
     obj.name 不等价于 obj[name]
    Copy after login
    let name ='frank'
    obj[name]等价于obj['frank']
    而不是obj.name 或 obj['name']
    除非let key = 'name';
    此时obj[key] = 'frank'
    Copy after login
  • 4. Modify or add the properties of the object

Direct assignment
    Use bracket syntax or dot syntax="xxx" to assign value
  1. let obj={name:'frank'} //name是字符串
    obj.name='frank'       //对字符串name进行修改
    obj['name']='frank'
    ~~obj[name]='frank'~~   因为name值不确定 可能不等于字符串name
    obj['na'+'me']='frank' //运算的形式赋值
    let key='name'; obj[key]='frank' // 通过引入变量来赋值
    let key='name';~~obj.key='frank'~~ obj.key等价于obj['key']
    Copy after login

2. Basic usage of JavaScript objectsBatch assignment

Object.assign(obj,{age:18,gender:'name',...})

(Who to assign the value to, { What})

3. Modify or add shared attributes

  • 无法通过自身修改或增加共有属性

(读的时候走原型,写的时候只走自身属性,如果你要运行的话只运行自身的属性)

let obj = {},obj2 = {};obj.toString='xxx'//只会修改自身属性obj2.toString//还是在原型上
Copy after login
  • 偏要修改或增加原型上的属性, 一般来说不要修改原型,会引起很多问题
   obj.__proto__.toString='xxx'  //不推荐
   window.Object.prototype.toString='xxx' //与上式子相同
Copy after login
  • 修改隐藏属性(修改原型)

    不推荐使用__proto__ 代码:obj.__proto__=common

    推荐使用Object.create

let obj=Object.create(common)obj.name='frank'obj.age='jack' //简单用法
Copy after login

规范大概的意思是,要改就一开始改,别后来再改,影响性能。

var common={'国籍':'中国',hairColor:'black'}
var person=Object.create(common,{name:{value:'frank'}})
cosole.log(person)  // 正规 但是复杂用法
Copy after login

提问:

‘name’ in obj和obj.hasOwnProperty(‘name’) 的区别?

'name' in obj 是查看name属性是否在 obj 对象里面。这里是包含了 自身属性和共有属性。

obj.hasOwnProperty('name') 是查看这个name属性属于自身属性还是共有属性

// false 不是自身属性 //ture 是自身属性

变量,属性,函数,方法的区别?

相同点:变量和属性都是用来存储数据的

不同点:

变量:单独声明并赋值,使用的时候直接写变量名 单独存在

属性:在对象里面不需要声明,使用的时候必须是  对象.属性

相同点:函数和方法都是实现某种功能的

不同点:        

 函数:是单独声明的并且调用的 函数名()   单独存在

方法:在对象里面 调用的时候  对象.方法()

【相关推荐:javascript视频教程web前端

The above is the detailed content of Basic usage of JavaScript objects. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template