JavaScript对象详解之对象属性的添加

 更新时间:2023年07月06日 11:39:30   作者:谦虚且进步  
这篇文章主要给大家介绍了关于JavaScript对象详解之js对象属性的添加的相关资料,在JavaScript中对象是通过键值对来存储数据的一种数据类型,可以通过直接给对象添加属性的方式来增加对象的属性,需要的朋友可以参考下

一,什么是对象?

英文名object,翻译成中文就是对象。用英语的角度来说object就是物体实体,即使他看不见摸不着。中文的对象指的是女朋友。在计算机中,用英语的角度理解对象,就是说:放在内存里面的复杂数据集合,也叫做数据与方法的封装,是一种编程逻辑概念。

函数是对数据与代码的封装,假如再把函数及函数外的数据进行封装,那就是object,即对象。

二,创建一个对象

将一些函数与对象封装起来就是对象,所谓封装在语法层面就是,把函数和变量用英文大括号{}包起来。使用:key:value的形式,value可以是对象的值,也可以是对象的地址。

key的值可以不符合标识符的命名规范,但是必须使用引号引起来,比如'12qw'=1。每个键值对之间使用英文逗号隔开。

//创建一个obj对象
var obj1 = {
    str1: 'woaini',
    "10p": 10
};
function f() {
    console.log(1)
};
var obj1 = {
    str1: 'woaini',
    "10p": 10,
    fun: f,
    fun1: function() {
        console.log(2)
    }
};
obj1.fun();
obj1.fun1();

如果一个键的值是一个函数,则称这个键名为这个对象的方法。如果一个键的值是基本数据类型,则称这个键名为这个对象的属性。

三,对象的嵌套

即对象的属性仍然可以是一个对象。运算符.表示getattr的意思,即访问对象属性。

var obj1 = {
    str1: 'woaini',
    "10p": 10,
    fun1: function() {
        console.log(2)
    },
    obj_inn: obj2 = {
        num: 1
    }
};
console.log(obj1.obj_inn.num);

四,对象的属性与修改

1,使用点.运算符

var obj1 = {
    str1: 'woaini',
};
console.log(obj1.str1);

2,使用[]符号

var obj1 = {
    str1: 'woaini',
};
console.log(obj1['str1'])

记住键需要加上引号。

3,修改属性

var obj1 = {
    str1: 'woaini',
};
obj1.str1 = 666
console.log(obj1['str1'])

五,给对象添加属性

var obj1 = {
};
obj1.name = 'xiaoming';
obj1['age'] = 10;
console.log(obj1.age, obj1.name);

六,查看与删除对象的属性

1,使用Object.keys(obj)方法查看对象所有属性

var obj1 = {
    str1: 'woaini',
};
obj1.str1 = 666
obj1.age = 18
console.log(Object.keys(obj1))
// [ 'str1', 'age' ]

2,使用delete()方法删除对象属性

var obj1 = {
    str1: 'woaini',
};
obj1.str1 = 666
obj1.age = 18
console.log(delete obj1.age)
// true

删除一个对象里不存在的属性不仅不会报错而且还会返回true。当试图删除一个无法删除的属性时,则会返回false。删除对象属性:实际上是与相关的对象进行解绑。

3,使用增强版for循环遍历对象元素

var obj1 = {
    str1: 'woaini',
};
obj1.str1 = 666
obj1.age = 18
for (var item in obj1) {
    console.log(obj1[item])
}

七,Object对象方法

这里讲解关于Object对象的一些知识,它类似于基类,是所有对象的老大。

1,Object对象的本身方法

Object本身就是一个对象,可以给他添加属性和方法。利用键值对形式给对象添加的方法叫做Object本身方法。只能使用Object.funcname()来执行。

Object.add = function() {
    console.log(1)
}
Object.add()

2,Object对象自己的实例方法

使用Object.prototype.name()形式添加的方法称为对象的实例方法。可以被任意对象使用。

function f() {
    console.log(1)
};
Object.prototype.fun = f;
var obj = {}
obj.fun()

八,函数与对象注意点

1,函数体里调用其他函数

可以再一个函数的函数体里面调用另一个函数,即函数名+()。

2,函数体行数不超过50行

每个函数的函数体不超过50行,如果超过的话最好拆分,使用函数搭积木实现功能。

总结

到此这篇关于JavaScript对象详解之对象属性添加的文章就介绍到这了,更多相关js对象属性添加内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript设计模式之缓存代理模式原理与简单用法示例

    JavaScript设计模式之缓存代理模式原理与简单用法示例

    这篇文章主要介绍了JavaScript设计模式之缓存代理模式原理与简单用法,结合实例形式简要分析了javascript缓存代理模式的基本原理、使用方法及相关操作注意事项,需要的朋友可以参考下
    2018-08-08
  • JavaScript实现为事件句柄绑定监听函数的方法分析

    JavaScript实现为事件句柄绑定监听函数的方法分析

    这篇文章主要介绍了JavaScript实现为事件句柄绑定监听函数的方法,结合实例形式分析了javascript事件绑定的常用技巧与注意事项,需要的朋友可以参考下
    2017-11-11
  • 由 JavaScript 的 with 引发的探索

    由 JavaScript 的 with 引发的探索

    这篇文章主要介绍了由 JavaScript 的 with 引发的探索,js 的 with 是为对象访问提供命名空间式的访问方式,with 创建一个对象的命名空间,在这个命名空间内你可以直接访问对象的属性,而不需要通过对象来访问,下面一起来了解更多详细内容吧
    2022-01-01
  • js实现模态框的拖拽效果

    js实现模态框的拖拽效果

    这篇文章主要为大家详细介绍了js实现模态框的拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JS定义函数的几种常用方法小结

    JS定义函数的几种常用方法小结

    这篇文章主要介绍了JS定义函数的几种常用方法,结合实例形式总结分析了javascript函数表达式、Lambda 表达式、对象方法等常见函数定义操作技巧,需要的朋友可以参考下
    2019-05-05
  • 快速查找数组中的某个元素并返回下标示例

    快速查找数组中的某个元素并返回下标示例

    最近在写jquery的combobox插件时遇到效率问题,再加上jquery选择器的类帅选,导致效率很慢,采用以下方式二,可以轻松解决此问题
    2013-09-09
  • 一文详解JavaScript的继承机制

    一文详解JavaScript的继承机制

    在JavaScript中,继承允许一个对象从另一个对象继承属性和方法,本文将详细介绍JavaScript中的继承机制,包括原型链、构造函数、原型对象以及几种实现继承的方法,需要的朋友可以参考下
    2024-04-04
  • webpack常用构建优化策略小结

    webpack常用构建优化策略小结

    这篇文章主要介绍了webpack常用构建优化策略小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • js实现按Ctrl+Enter发送效果

    js实现按Ctrl+Enter发送效果

    按Ctrl+Enter发送,思路是监听textarea的onkeydown事件,当ctrl键被按下,并且,keycode为13(回车),时,调用发送表单的函数
    2014-09-09
  • JavaScript数组reduce()方法 

    JavaScript数组reduce()方法 

    这篇文章主要介绍了JavaScript数组reduce()方法,reduce()方法是处理数组的方法,它接收一个函数和一个初始值,然后将数组中的每个元素和初始值当作参数传入这个函数中进行处理,最后返回和初始值相同类型的值,需要的朋友可以参考一下
    2022-01-01

最新评论