javascript对象基础

简介: javascript对象基础

文章和代码已经归档至【Github仓库:https://github.com/timerring/front-end-tutorial 】或者公众号【AIShareLab】回复 javascript 也可获取。

对象

对象是 JavaScript 数据类型的一种,之前已经学习了数值类型、字符串类型、布尔类型、undefined。对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。

语法

声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。

    // 声明字符串类型变量
    let str = 'hello world!'

    // 声明数值类型变量
    let num = 199

    // 声明对象类型变量,使用一对花括号
    // user 便是一个对象了,目前它是一个空对象
   // {} 是对象字面量
    let user = {
   }

属性和访问

数据描述性的信息称为属性,如人的姓名、身高、年龄、性别等,一般是名词性的。

  1. 属性都是成对出现的,包括属性名和值,它们之间使用英文 : 分隔
  2. 多个属性之间使用英文 , 分隔
  3. 属性就是依附在对象上的变量
  4. 属性名可以使用 ""'',一般情况下省略,除非名称遇到特殊符号如空格、中横线等
     // 通过对象描述一个人的数据信息
     // person 是一个对象,它包含了一个属性 name
     // 属性都是成对出现的,属性名 和 值,它们之间使用英文 : 分隔
     let person = {
         
       name: '小明', // 描述人的姓名
       age: 18, // 描述人的年龄
       stature: 185, // 描述人的身高
       gender: '男', // 描述人的性别
     }
    

声明对象,并添加了若干属性后,可以使用 .[] 获得对象中属性对应的值,我称之为属性访问。

  <script>
    // 通过对象描述一个人的数据信息
    // person 是一个对象,它包含了一个属性 name
    // 属性都是成对出现的,属性名 和 值,它们之间使用英文 : 分隔
    let person = {
    
      name: '小明', // 描述人的姓名
      age: 18, // 描述人的年龄
      stature: 185, // 描述人的身高
      gender: '男', // 描述人的性别
    };

    // 访问人的名字
    console.log(person.name) // 结果为 小明
    // 访问人性别
    console.log(person.gender) // 结果为 男
    // 访问人的身高
    console.log(person['stature']) // 结果为 185
   // 或者
    console.log(person.stature) // 结果同为 185
  </script>

扩展:也可以动态为对象添加属性,动态添加与直接定义是一样的,只是语法上更灵活。

    // 声明一个空的对象(没有任何属性)
    let user = {
   }
    // 动态追加属性
    user.name = '小明'
    user['age'] = 18

    // 动态添加与直接定义是一样的,只是语法上更灵活

方法和调用

数据行为性的信息称为方法,其本质是函数。

  1. 方法是由方法名和函数两部分构成,它们之间使用 : 分隔
  2. 多个属性之间使用英文 , 分隔
  3. 方法是依附在对象中的函数
  4. 方法名可以使用 ""'',一般情况下省略,除非名称遇到特殊符号如空格、中横线等
  <script>
    // 方法是依附在对象上的函数
    let person = {
    
      name: '小红',
      age: 18,
      // 方法是由方法名和函数两部分构成,它们之间使用 : 分隔
      singing: function () {
    
        console.log('两只老虎,两只老虎,跑的快,跑的快...')
      },
      run: function () {
    
        console.log('我跑的非常快...')
      }
    }
  </script>

声明对象,并添加了若干方法后,可以使用 .[] 调用对象中函数,称之为方法调用。

  <script>
    // 方法是依附在对象上的函数
    let person = {
    
      name: '小红',
      age: 18,
      // 方法是由方法名和函数两部分构成,它们之间使用 : 分隔
      singing: function () {
    
        console.log('两只老虎,两只老虎,跑的快,跑的快...')
      },
      run: function () {
    
        console.log('我跑的非常快...')
      }
    }

    // 调用对象中 singing 方法
    person.singing()
    // 调用对象中的 run 方法
    person.run()

  </script>

扩展:也可以动态为对象添加方法,动态添加与直接定义是一样的,只是语法上更灵活。

  <script>
    // 声明一个空的对象(没有任何属性,也没有任何方法)
    let user = {
    }
    // 动态追加属性
    user.name = '小明'
    user.['age'] = 18

    // 动态添加方法
    user.move = function () {
    
      console.log('移动一点距离...')
    }
  </script>

注:无论是属性或是方法,同一个对象中出现名称一样的,后面的会覆盖前面的。

多词属性或-等属性

对于多词属性或则 - 等属性,点操作就不能用了。
我们可以采取: 对象[‘属性’]方式,单引号和双引号都可以。

let person = {
   
    'user-name' : 'timerring',
}

console.log(person.user-name) // NaN
console.log(person['user-name']) // timerring

null

null 也是 JavaScript 中数据类型的一种,通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时,结果为 object

遍历对象

对象没有像数组一样的 length 属性, 所以无法确定长度,对象里面是无序的键值对(前后关系不会影响), 没有规律,不像数组里面有规律的下标。

  <script>
    // for in 我们不推荐遍历数组
    let arr = ['pink', 'red', 'blue']
    for (let k in arr) {
    
      console.log(k)  // 数组的下标 索引号  但是是字符串类型的 '0'
      console.log(arr[k])  // arr[k]
    }
    // 1. 遍历对象 for in  
    let obj = {
    
      uname: 'pink老师',
      age: 18,
      gender: '男'
    }

    // 2. 遍历对象
    for (let k in obj) {
    
      console.log(k) // 属性名  'uname'   'age'
      // console.log(obj.k)
      // 翻译过来就是:console.log(obj.'uname') 实际不能这么用,可以采用另一种方法:
      // console.log(obj['uname'])   'uname'  === k
      console.log(obj[k])  // 输出属性值  obj[k]
    }
  </script>

⚠for in 不提倡遍历数组因为 k 是字符串类型的。
记住: k 是获得对象的属性名,对象名[k] 是获得属性值

内置对象

回想一下我们曾经使用过的 console.logconsole其实就是 JavaScript 中内置的对象,该对象中存在一个方法叫 log,然后调用 log 这个方法,即 console.log()
除了 console 对象外,JavaScritp 还有其它的内置的对象

Math

Math 是 JavaScript 中内置的对象,称为数学对象,这个对象下即包含了属性,也包含了许多的方法。

属性

  • Math.PI,获取圆周率
    // 圆周率
    console.log(Math.PI);
    

方法

  • Math.random() : 0 ~ 1 之间的随机数, 包含 0 不包含 1 [0, 1)
  • Math.ceil(3.4) : 舍弃小数部分,整数部分加1(向上取整)
  • Math.floor(4.68) : 舍弃小数部分,整数部分不变
  • Math.round(4.849) : 四舍五入取整
  • Math.max(10, 21, 7, 24, 13) : 在一组数中找出最大的
  • Math.min(24, 18, 6, 19, 21) : 在一组数中找出最小的
  • Math.pow(4, 2) : 求 4 的 2 次方
  • Math.sqrt(16) : 求平方根

测试: https://ks.wjx.top/vj/tHu7X7y.aspx

目录
相关文章
|
2月前
|
JavaScript 前端开发
JavaScript Date(日期) 对象
JavaScript Date(日期) 对象
50 2
|
1月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
1月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
1月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
19 1
JavaScript中对象的数据拷贝
|
1月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
2月前
|
存储 JavaScript 前端开发
JavaScript 对象的概念
JavaScript 对象的概念
49 4
|
2月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
50 1
|
2月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
22 2
|
2月前
|
JavaScript 前端开发 Unix
Node.js 全局对象
10月更文挑战第5天
39 2
|
2月前
|
存储 JavaScript 前端开发
js中的对象
js中的对象
24 3