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

目录
相关文章
|
4天前
|
Web App开发 JSON JavaScript
JavaScript对象常用操作JSON总结
JavaScript对象常用操作JSON总结
18 8
|
1天前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
8 1
|
3天前
|
存储 JavaScript 前端开发
JavaScript中的对象是数据结构,存储键值对,键为字符串,值可为任意类型,包括函数(作为方法)
【6月更文挑战第25天】JavaScript中的对象是数据结构,存储键值对,键为字符串,值可为任意类型,包括函数(作为方法)。
10 2
|
3天前
|
JavaScript 索引
Vue.js的`v-for`用于基于数组或对象渲染列表,如遍历数组生成`&lt;li&gt;`元素
【6月更文挑战第25天】Vue.js的`v-for`用于基于数组或对象渲染列表,如遍历数组生成`&lt;li&gt;`元素。基本语法是`v-for=&quot;(item, index) in items&quot;`,支持遍历对象的键值对。注意与`v-if`同用时应使用`&lt;template&gt;`,组件上使用`v-for`需设`key`属性以优化性能。
12 2
|
1天前
|
JavaScript 前端开发
技术经验分享:javaScript遍历对象、数组总结
技术经验分享:javaScript遍历对象、数组总结
技术经验分享:javaScript遍历对象、数组总结
|
7天前
|
存储 JavaScript 前端开发
第六篇-Javascript对象
第六篇-Javascript对象
10 2
|
12天前
|
存储 缓存 JavaScript
JavaScript内存泄漏通常发生在对象不再需要时
【6月更文挑战第16天】JavaScript内存泄漏常由闭包引起,当不再需要的对象仍被闭包引用时,垃圾回收机制无法清理。例如,创建返回大型对象引用的闭包函数会导致内存泄漏。避免泄漏需及时解除引用,清除事件监听器,利用WeakMap或WeakSet,以及定期清理缓存。使用性能分析工具监控内存使用也有助于检测和解决问题。
26 8
|
9天前
|
JavaScript 前端开发
JavaScript进阶-模板字符串与增强的对象字面量
【6月更文挑战第19天】ES6的模板字符串和增强对象字面量提高了JavaScript的易读性和效率。模板字符串(` `)支持变量嵌入和多行,简化了字符串处理;增强对象字面量允许简写属性与方法,以及动态属性名。注意模板字符串的闭合和性能影响,以及对象字面量的简写语法和计算属性名的恰当使用。通过实例展示了这两项特性的应用,助力编写更优雅的代码。
|
10天前
|
设计模式 存储 JavaScript
【JavaScript】JavaScript对象设计哲学:八种模式塑造高效代码
【JavaScript】JavaScript对象设计哲学:八种模式塑造高效代码
18 5