JavaScript对象(Object)

简介: 对象由花括号分隔,在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义,也叫json。属性由逗号分隔,空格和折行无关紧要。声明可横跨多行。

对象(Object)


对象由花括号分隔,在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义,也叫json。

属性由逗号分隔,空格和折行无关紧要。声明可横跨多行。


定义一个对象, 姓名:Keafmd, 年龄:18 ,地址:北京,isEdu:false


样例代码:


var Ke = {
    'name': 'Keafmd',
    'age': 18,
    address: '北京',
    isEdu:false
}
console.log(Ke)

完整代码:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      var Ke = {
          'name': 'Keafmd',
          'age': 18,
          address: '北京',
          isEdu:false
      }
      console.log(Ke)
    </script>
  </head>
  <body>
  </body>
</html>

效果截图:

1.png


对象的创建


使用{}创建


var person = {
    name : 'Keafmd',
    sayHi:function(){
        console.log('hi, my name is :'+this.name)
    }
};

样例代码:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      var person = {
          name : 'Keafmd',
          sayHi:function(){
              console.log('hi, my name is :'+this.name)
          }
      };
      console.log(person) 
      person.sayHi()
    </script>
    <title></title>
  </head>
  <body>
  </body>
</html>

效果截图:

2.png


使用Object创建


var p = new Object();
p.name = 'Keafmd';
p.age = 18;
console.log(p);

样例代码:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      var p = new Object();
      p.name = 'Keafmd';
      p.age = 18;
      console.log(p);
    </script>
    <title></title>
  </head>
  <body>
  </body>
</html>

效果截图:

3.png


使用Function创建


function Student(){
   this.name = '';
    this.age = 0;
}
var stu1 = new Student();
stu1.name = "Keafmd";
stu1.age = 18;
stu1.address = '哈尔滨';
console.log(stu1);
var stu2 = new Student();
console.log(stu2);

样例代码:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      function Student(){
          this.name = '';
          this.age = 0;
      }
      var stu1 = new Student();
      stu1.name = "Keafmd";
      stu1.age = 18;
      stu1.address = '哈尔滨';
      console.log(stu1);
      var stu2 = new Student();
      console.log(stu2);
    </script>
    <title></title>
  </head>
  <body>
  </body>
</html>

效果截图:

4.png



使用class关键字


class Human{
   constructor(name) {
        this.name = name;
    }
    sayHi(){
        console.log('我是: '+this.name);
    }
}
var  h1 = new Human('Keafmd');
h1.sayHi()

样例代码:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      class Human{
          constructor(name) {
          this.name = name;
          }
          sayHi(){
              console.log('我是: '+this.name);
          }
      }
      var  h1 = new Human('Keafmd');
      h1.sayHi()
    </script>
    <title></title>
  </head>
  <body>
  </body>
</html>

效果截图:

5.png


对象的原型模型


通过对象可以给对象扩展字段(属性、方法)

如果想同一个类型,都添加属性,则需要用到原型 prototype


样例代码:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function Student(){
                this.name = '';
                this.age = 0;
            }
            var  s1 = new Student();
            //给对象扩展方法
            // s1.sayHi =function(){
            //     console.log('打招呼')
            // }
            //给原型扩展
            Student.prototype.sayHi = function(){
                console.log('打招呼')
            }
            s1.sayHi();
            var  s2 = new Student();
            s2.sayHi();
        </script>
    </head>
    <body>
    </body>
</html>

效果截图:

6.png

相关文章
|
15天前
|
JavaScript
JS 获取对象数据类型的键值对的键与值
JS 获取对象数据类型的键值对的键与值
|
24天前
|
JavaScript 前端开发
Math对象:JavaScript中的数学工具
Math对象:JavaScript中的数学工具
27 1
N..
|
1月前
|
存储 JavaScript 前端开发
JavaScript中的对象
JavaScript中的对象
N..
10 0
|
18天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
2天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可以是任意类型且有序,与对象的字符串或符号键不同;Set存储唯一值,无重复。两者皆可迭代,支持for...of循环。Map有get、set、has、delete等方法,Set有add、delete、has方法。示例展示了Map和Set的基本操作。
16 3
|
4天前
|
JavaScript 前端开发 开发者
JavaScript中的错误处理:try-catch语句与错误对象
【4月更文挑战第22天】JavaScript中的错误处理通过try-catch语句和错误对象实现。try块包含可能抛出异常的代码,catch块捕获并处理错误,finally块则无论是否出错都会执行。错误对象提供关于错误的详细信息,如类型、消息和堆栈。常见的错误类型包括RangeError、ReferenceError等。最佳实践包括及时捕获错误、提供有用信息、不忽略错误、利用堆栈信息和避免在finally块中抛错。
|
9天前
|
JavaScript
【Js】检查Date对象是否为Invalid Date
【Js】检查Date对象是否为Invalid Date
14 0
|
10天前
|
存储 JavaScript 前端开发
JavaScript的引用数据类型主要包括对象
【4月更文挑战第16天】JavaScript的引用数据类型主要包括对象
16 4
|
15天前
|
JavaScript
js 字符串String转对象Object
该代码示例展示了如何将一个以逗号分隔的字符串(`&#39;1.2,2,3,4,5&#39;`)转换为对象数组。通过使用`split(&#39;,&#39;)`分割字符串并`map(parseFloat)`处理每个元素,将字符串转换成浮点数数组,最终得到一个对象数组,其类型为`object`。
|
22天前
|
存储 JavaScript 前端开发
在浏览器中存储数组和对象(js的问题)
在浏览器中存储数组和对象(js的问题)
10 0