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 constvar 淘汰了,尽量优先使用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

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

相关推荐

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

邮箱账号:1969600480@qq.com