1. 笔耕屋首页
  2. 学习

JavaScript对象与堆栈空间

霍欣标 • • 学习

JavaScript语言中，对象（object）也是一种数据类型，可以理解为是一种无序的数据集合，用来详细的描述某个事物，然而数组是有序的数据集合。

静态特征（姓名，年龄，身高，性别，爱好）：可以使用数字，字符串，数组，布尔类型等表示

动态行为（点名，唱，跳，rap）： 使用函数表示

对象声明语法是 let = 对象名 {} 或者let 对象名 = new Object() ，实际开发中，我们多用{}。小是对象字面量。

  <script>
    let huo = {
      unmae: '欣标',
      age: 18,
      gender: '男'
    }
    console.log(huo)
    console.log(typeof huo) //判断数据类型 object
  </script>

对象有属性和方法组成：

属性：信息或叫特征（名词）。如：手机尺寸、颜色、重量等

方法：功能或叫行为（动词）。如：打电话、发短信、玩游戏

属性都是成对出现的，包括属性名和值，它们之间使用英文:分隔

多个属性之间使用英文,分隔

属性就是依附在对象上的变量（外面是变量，对象内是属性）

属性名可以使用“或”，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

对象属性

对象本质是无序的数据集合，操作数据无非就是增删改查语法：

查询对象

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

  <script>
    let huo = {
      unmae: '欣标',
      age: 18,
      gender: '男'
    }
    console.log(huo.age) // 18
    console.log(huo.gender) // 男
  </script>

查的另外一种写法

为防止对象局部变量于全局变量有冲突，可使用'' 或"" 包含属性名，例如 ：'goods-name' ，用- 让属性名更有条理。

  <script>
    let huo = {
      'goods-name': '欣标',
      age: 18,
      gender: '男'
    }

    console.log(huo['goods-name']) // 欣标 
  </script>

改值对象

  <script>
    let huo = {
      unmae: '欣标',
      age: 18,
      gender: '男'
    }
    huo.age = 22

    console.log(huo.age) // 22
  </script>

新增对象

  <script>
    let huo = {
      unmae: '欣标',
      age: 18,
      gender: '男'
    }
    huo.hobby = '记笔记'

    console.log(huo) //欣标 18 男 记笔记
  </script>

删除对象

  <script>
    let huo = {
      unmae: '欣标',
      age: 18,
      gender: '男'
    }
    delete huo.age

    console.log(huo) // 欣标 男 
  </script>

改和增语法一样，判断标准就是对象有没有这个属性，没有就是新增，有就是改。

对象方法

数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。

方法是由方法名和函数两部分构成，它们之间使用:分隔，多个属性之间使用英文,分隔

方法是依附在对象中的函数

方法名可以使用‘’或”“，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

let obj = {
  uname: '刘德华',
  // 方法
  song: function () {
    console.log('冰雨')
  },
  say: function () {
    console.log('学到就要教人，赚到就要给人')
  }
}

// 方法调用 对象名.方法名
obj.song()     // 冰雨
obj.say()      // 学到就要教人，赚到就要给人
let obj = {
  uname: '刘德华',
  // 方法 可以理解为函数
  song: function (x, y) {
    console.log(x + y)
  },

}

// 方法调用 对象名.方法名
obj.song(1, 2)        // 3

遍历对象

对象里面是无序的键值对，没有规律，不像数组里面有规律的下标，所以没有像数组一样的length属性，所以无法确定长度。

在开发环境中，我们俗成约定了使用k或者key 来装对象属性，obj[k] 获取对象值。

let obj = {
  uname: '欣标',
  age: 18,
  gender: '男'
}
// 循环 声明变量K，指向对象obj
for (let k in obj) {
  console.log(obj[k]) // 遍历数组 结果是 欣标 18 男
}
let arr = ['huo', 'red', 'blue']

// 循环 声明变量K，指向变量arr
for (let k in arr) {
  console.log(k) // 数组的下标 索引号 但是是字符串" 结果是 0 1 2
  console.log(arr[k]) // 遍历数组 结果是 huo red blue
}

遍历数组对象

定义一个存储了若干学生信息的数组，并打印出来。

let students = [
  { name: '小明', age: 18, gender: '男', hometown: '河北省' },
  { name: '小红', age: 19, gender: '女', hometown: '河南省' },
  { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
  { name: '小丽', age: 18, gender: '女', hometown: '山东省' }
]
for (let i = 0; i < students.length; i++) {
  // console.log(i)  // 下标索引号
  // console.log(students[i]) // 每个对象
  console.log(students[i].name)
  console.log(students[i].hometown)
}

案例：渲染学生表格

需求：根据以上数据渲染生成表格

// 1. 数据准备
let students = [
  { name: '小明', age: 18, gender: '男', hometown: '河北省' },
  { name: '小红', age: 19, gender: '女', hometown: '河南省' },
  { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
  { name: '小丽', age: 18, gender: '女', hometown: '山东省' }
]
// 2. 渲染页面
for (let i = 0; i < students.length; i++) {
  document.write(`
          <tr>
            <td>${i + 1}</td>
            <td>${students[i].name}</td>
            <td>${students[i].age}</td>
            <td>${students[i].gender}</td>
            <td>${students[i].hometown}</td>
          </tr>
          `)
}
学生信息

将数据渲染到页面中…

学生列表
序号 姓名 年龄 性别 家乡

内置对象

JavaScript内部提供的对象，包含各种属性和方法给开发者调用。Math对象是JavaScript提供的一个“数学”对象，提供了一系列做数学运算的方法。

Math对象包含的方法有：

random：生成0-1之间的随机数（包含0不包括1）
ceil： 向上取整
floor：向下取整
max： 找最大数
min： 找最小数
pow：幂运算
abs：绝对值Math对象在线文档

取整与四舍五入

//【属性】:
console.log(Math.PI) // 3.141592653589793

//【方法】:
// 向上取整
console.log(Math.ceil(1.1)) // 2
console.log(Math.ceil(1.5)) // 2
console.log(Math.ceil(1.9)) // 2

// 向下取整
console.log(Math.floor(1.1)) // 1
console.log(Math.floor(1.5)) // 1
console.log(Math.floor(1.9)) // 1

// 四舍五入
console.log(Math.round(1.1)) // 1
console.log(Math.round(1.5)) // 2
console.log(Math.round(-1.1)) // -1
console.log(Math.round(-1.5)) // -1
console.log(Math.round(-1.51)) // -2

取整函数parseInt() 与内置函数Math.floor() 在某种程度非常的相似，但是parseInt() 有个强大功能，它里面可以写字符串，默认转为字符串。

// 向下取整
console.log(Math.floor(1.1)) // 1
console.log(Math.floor('12px')) // NaN

// 取整函数
console.log(parseFloat(1.1)) // 1.1
console.log(parseFloat('12px')) // 12

取最大值和最小值

console.log(Math.max(1, 2, 3, 4, 5)) // 5
console.log(Math.min(1, 2, 3, 4, 5)) // 1
console.log(Math.abs(-1)) // 1

生成随机数

Math.random()随机数函数，返回一个0- 1之间，并且包括0不包括1的随机小数。

// 左闭右开，能取到 0~1之间的随机小数
console.log(Math.random())

生成0-10的随机整数：

Math.floor(Math.random() * (10 + 1))

生成5-10的随机整数：

Math.floor(Math.random() * (5 + 1)) + 5

生成N-M之间随机整数：

Math.floor(Math.random() * (M - N + 1)) + N
// 使用函数封装生成N-M之间的随机数
function getRandom(N, M) {
  return Math.floor(Math.random() * (M - N + 1)) + N
}

// N是4，M是8，实参可以给任意值
console.log(getRandom(4, 8))

生成随机数组的值

// 一个数组索引号 0 1 2，
let arr = ['red', 'blue', 'pink']
// 随机生成的数字 0 ~ 2（数组长度）
let random = Math.floor(Math.random() * arr.length)
console.log(arr[random]) // 随机数组的值

数组抽取值并删除

let arr = ['张飞', '赵云', '黄忠', '马超', '刘备', '曹操', '诸葛亮', '董卓']
let random = Math.floor(Math.random() * arr.length)
document.write(arr[random]) // 随机数组的值

// 删除 random是起始位置（下标）, 删除几个元素
arr.splice(random, 1)

console.log(arr) // 调试控制台打印数组

案例：猜数字游戏

需求：程序随机生成 1~10 之间的一个数字，用户输入一个数字。

①：如果大于该数字，就提示，数字猜大了，继续猜
②：如果小于该数字，就提示，数字猜小了，继续猜
③：如果猜对了，就提示猜对了，程序结束

// 随机生成一个数字
function getRandom(N, M) {
  return Math.floor(Math.random() * (M - N + 1)) + N
}
let random = getRandom(1, 10)

// 没有固定次数，使用while循环
while (true) {
  let num = +prompt('请输入一个数字：')
  if (num > random) {
    alert('您猜大了')
  } else if (num < random) {
    alert('您猜小了')
  } else {
    alert('猜对了，太厉害了')
    break // 退出循环
  }
}
// 有固定次数使用for循环，猜错三次就退出
// 这个是开关变量，默认打开
let flag = true

// 循环三次
for (let i = 1; i <= 3; i++) {
  let num = +prompt('请输入一个数字：')
  if (num > random) {
    alert('您猜大了,继续')
  } else if (num < random) {
    alert('您猜小了，继续')
  } else {
    flag = false      // 改变开关变量，关掉
    alert('猜对了，太厉害了')
    break // 退出循环
  }
}
// 开关变量为错误，就不再执行，正确依然执行
if (flag) {
  alert('次数已经用完了')
}

案例：生成随机颜色

需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。

① 如果参数传递的是true或者无参数，则输出 一个随机十六进制的颜色
② 如果参数传递的是false，则输出 一个随机rgb的颜色

分析：

提示：十六进制颜色格式为#ffffff其中f可以是任意 0-f之间的字符

提示：rgb颜色格式为rgb(255,255,255) ，其中255可以是任意0-255之间的数字

function getRandomColor(flag = true) {
  if (flag) {
    // 如果是true则返回 #fffff
    let str = '#'
    let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
    // 利用for循环，随机抽6次数组里值累加到str
    for (let i = 1; i <= 6; i++) {
      let random = Math.floor(Math.random() * arr.length)
      str = str + arr[random]
    }
    return str
  } else {
    // 如果是false则返回的是rgb颜色 红色 绿色 蓝色
    let r = Math.floor(Math.random() * 256)
    let g = Math.floor(Math.random() * 256)
    let b = Math.floor(Math.random() * 256)
    return `rgb(${r},${g},${b})`
  }
}
console.log(getRandomColor(false)) // 函数调用控制台打印随机rgb颜色
console.log(getRandomColor(true))  // 函数调用控制台打印随机十六进制颜色
console.log(getRandomColor())     // 默认控制台打印随机十六进制颜色

// 改变一个div的样式，随机生成颜色
const div = document.querySelector('div')  
div.style.backgroundColor = getRandomColor()

案例：学成在线页面渲染

对象属性中字符串有空格，在调用的时候用"" 外双内单。Demo

let data = [
  {
    src: 'images/course01.png',
    title: 'Think PHP 5.0 博客系统实战项目演练',
    num: 1125
  },
  {
    src: 'images/course02.png',
    title: 'Android 网络动态图片加载实战',
    num: 357
  },
  {
    src: 'images/course03.png',
    title: 'Angular2大前端商城实战项目演练',
    num: 22250
  },
  {
    src: 'images/course04.png',
    title: 'AndroidAPP实战项目演练',
    num: 389
  },
  {
    src: 'images/course05.png',
    title: 'UGUI源码深度分析案例',
    num: 124
  },
  {
    src: 'images/course06.png',
    title: 'Kami2首页界面切换效果实战演练',
    num: 432
  },
  {
    src: 'images/course07.png',
    title: 'UNITY 从入门到精通实战案例',
    num: 888
  },
  {
    src: 'images/course08.png',
    title: 'Cocos 深度学习你不会错过的实战', // 有空格字符串的对象属性，调用的时候要加""
    num: 590
  },
  {
    src: 'images/course04.png',
    title: '自动添加的模块',
    num: 1000
  }
]

for (let i = 0; i < data.length; i++) {
  document.write(`
                          <li>
                              <a href="#">
                                  <img src=${data[i].src} title="${data[i].title}">
                                  <h4>
                                     ${data[i].title}
                                  </h4>
                                  <div class="info">
                                      <span>高级</span> • <span>${data[i].num}</span>人在学习
                                  </div>
                              </a>
                          </li>
                        `)
}

知道一些术语，让自己更专业

术语解释举例
关键字在JavaScript中有特殊意义的词汇let var function if else switch case break
保留字在目前的javaScript中没意义，但未来可能会具有特殊意义的词汇int short long char
标识符变量名、函数名的另一种叫法无
表达能产生值的代码，一般配合运算符出10 + 3 age >= 18
语句一段可执行的代码if() for()

堆栈空间分配

堆栈空间分配原理

简单数据类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型。

string,number,boolean,undefined,null

简单数据类型存放到栈里面。

栈：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈

引用数据类型

引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型.

通过 new 关键字创建的对象（系统对象、自定义对象），如object、Array、Date等

引用数据类型存放到堆里面。

堆：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

let和const的选择

变量声明有三个 var let const ，var 淘汰了，尽量优先使用const ，如果发现它后面是要被修改的，再改为let ，这样语义更好。

JavaScript对象与堆栈空间

const声明的值不能更改，而且const声明变量的时候需要里面进行初始化。

对于引用数据类型，const声明的变量，里面存的不是值，而是地址。

const names = []
//  这样追加是不对的，names = [1, 2, 3]
//可以这样追加
names[0] = 1
names[1] = 2
names[2] = 3

const obj = {}
/* 
obj = {
uname: 'xinbiao'
} 
*/
// 可以这样追加
obj.unme = 'xinbiao'

原创文章，作者：霍欣标，如若转载，请注明出处：https://www.bigengwu.cn/xue/97.html

霍欣标的头像霍欣标
0
上一篇 2024-07-14 23:34
下一篇 2024-08-02 08:27

相关推荐

联系方式

博主人懒，应管局要求暂不开启站内私信和评论功能，如需帮助请发邮件。

邮箱账号：1969600480@qq.com

分享本页
返回顶部