JavaScript 第五天

1. 什么是对象:

对象是一种数据类型, 是一种无序的数据集合
用多个变量保存散乱, 用对象比较统一
保存用户信息, 姓名年龄电话…用之前的数据类型不方便, 很难区分

1. 对象是属性和方法组成:

属性: 信息或特征 (名词), 比如手机尺寸、颜色、重量…
方法: 功能或行为 (动词), 比如打电话、发短信、玩游戏…

let 对象名 = {
    属性名: 属性值,
    方法名: 函数
 }

对象属性没有顺序, 属性和值用 : 隔开 多个属性用 ; 逗号隔开
可使用””或’’ , 一般省略, 除非遇到特殊符号空格、中横线等

let num1 = {
    name: 'mark',
    age: 10
}
console.dir(num1)

2. 属性访问:

简单理解就是获得对象里的属性值
两种方式: 1. 点形式: 对象.属性 2. []形式: 对象[‘属性’]
1. 点属性名不要加引号 2. []属性名加引号 3. 后期不同场景会用到不同写法

let num = {
    name: 'Mark',
    age: 20,
    sex: '男'
}
document.write(num.age)
document.write(num['sex'])

3. 对象中的方法和访问:

数据行为信息叫方法, 方法名和函数构成, 使用 : 分隔
多个属性使用英文 , 分隔
方法名可使用” “或’’，一般省略, 除非遇到特殊符号空格、中横线等
声明对象, 添加若干方法后, 可使用 . 调用对象函数, 称为方法调用
对象.方法(), person.sayHi()
注意: 别忘了给方法名后面加小括号

// 对象中使用匿名函数
let num = {
    say: function () {
        document.write('你好')
    },
    say1: function (a) { // 传参
        document.write(a)
    }
}
// 调用方法 对象.方法名()
num.say()
num.say1('你好')

2. 操作对象

操作数据无非是增删改查
查询对象: 对象.属性、对象[‘属性’]、对象.方法()
重新赋值: 对象.属性 = 值、对象.方法 = function() {}
对象添加新的数据: 对象名.新属性名 = 新值
删除对象中属性: delete 对象名.属性名 (了解)

1. 增加对象属性

num3.sex = '男'
num3.say3 = function () {
    document.write(22)
}
document.write(num3.sex)
num3.say3()

2. 重新赋值对象属性

// 无论是属性或方法, 同一对象中名称一样, 后面的会覆盖前面的
// 重新赋值对象属性值
let num1 = {
    age: 10,
    say: function () {
        document.write(2)
    }
}
// 1. 对象.属性 = 值
document.write(num1.age = 20)
// 2. 对象.方法 = function() {}
num3.say = function() {
    document.write(3)
} 
num3.say2()

3. 删除属性(了解)

1	delete num3.sex

3. 遍历对象

对象没有length属性没有下标, 无法确定长度
主要用for in来遍历对象, 不用它来遍历数组

let num1 = {
    uname: '小明',
    age: 12,
    sex: '男'
}
// 变量名 k 或者key value
// 代入法: k 本身存的就是属性名 k = 'sex'
for (let k in num1) {
    document.write(num1[k])
    // document.write(k) // 属性名
}

1. 遍历数组对象

// 数组可以放任何数据类型
let num1 = [
    {uname: '小红', age: 18, sex: '女', home: '广东省'},
    {uname: '小刚', age: 19, sex: '男', home: '河南省'},
]
// 里面每一个对象都是数组里的元素 值 
for (let key in num1) { // 遍历数组
    document.write(num1[key].uname)
    document.write(num1[key].age)
}

2. 遍历数组对象: 根据数据渲染生成表格

let num1 = [
    {uname: '小红', age: 18, sex: '女', home: '广东省'},
    {uname: '小刚', age: 19, sex: '男', home: '河南省'},
]
document.write(`
    <table>
       <caption>学生列表</caption>
       <tr>
           <th>序号</th>
           <th>姓名</th>
           <th>年龄</th>
           <th>性别</th>
           <th>家乡</th>
       </tr> 
`)
for (let num2 = 0; num2 < num1.length; num2++) {
    document.write(`
        <tr>
            <td>${num2 + 1}</td>
            <td>${num1[num2].uname}</td>
            <td>${num1[num2].age}</td>
            <td>${num1[num2].sex}</td>
            <td>${num1[num2].home}</td>
        </tr> 
    `)
}
document.write(`</table>`)

4. 内置对象

JS内部提供的对象, 各种属性和方法供开发者调用
Math对象是JS提供的 ‘数学高手’ 对象, 提供一系列数学运算方法

5. Math对象方法：

// 1.圆周率
document.write(Math.PI)
// 2.随机数 返回是小数 能得到0 得不到1
document.write(Math.random())
// 3.向上取整 返回是整数
document.write(Math.ceil(1.5))
// 4.floor 向下取整 round 就近取整
document.write(Math.floor(1.5))
document.write(Math.round(-1.6))
// 5.找最大数
document.write(Math.max(5,2,1))
// 6.找最小数
document.write(Math.min(5,2,1))
// pow：幂运算  2. abs：绝对值...

生成0-10的随机数

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

生成5-10的随机数

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

生成N-N之间的随机数

Math.floor(Math.random() * (M - N + 1)) + N
document.write(Math.floor(Math.random() * (10 - 1 + 1) + 1))
// 函数封装法
function fn(min, max) {
    return Math.floor(Math.random() * (max - min - min) + min)
}
let re = fn(1, 10)
document.write(re)

4. 随机点名

// floor random 随机显示数组里名字
function fn(min, max) {
    return Math.floor(Math.random() * (max - min - min) + min)
}
let num1 = ['赵云', '黄忠', '张飞', '马超', '曹操', '刘备']
// 调用函数随机数 生成1个随机数 作为数组索引号
let num2 = fn(0, num1.length - 1)
document.write(num1[num2])

5. 随机点名 (改进版: 点完名后不重复)

// 点名后不重复点名 删除它
// 数组中删除刚才抽中的索引号
num1.splice(num2, 1)
console.log(num1)

6. 猜数字游戏

// 用户输入一个数 生成1 ~ 10之间的随机数
let num1 = fn(1, 10)
while (true) {
// 无限弹窗 直到输入正确为止
    let num2 = +prompt('请输入您猜的数字')
    if (num1 < num2) {
        alert('你猜大了, 继续猜吧!')
    } else if (num1 > num2) {
        alert('你猜小了, 继续猜吧!')
    } else {
        alert('恭喜您猜对了!')
        break
    }
}

7. 学成在线页面渲染

<div class="box w">
    <div class="box-hd">
        <h3>精品推荐</h3>
        <a href="">查看全部</a>
    </div>
    <div class="box-bd">
        <ul class="clearfix">
            <script>
                let data = [
                    {
                        src: 'images/course01.png',
                        title: 'Think PHP 5.0 博客系统实战项目演练',
                        num: 1125
                    }
                ]
                // 根据data数据个数渲染有多少个li
                for (let num = 0; num < data.length; num++) {
                    document.write(`
                    <li>
                         <img src=${data[num].src}>
                         <h4>${data[num].title}</h4>
                         <div class="info">
                         <span>高级</span> • <span>${data[num].num}</span>人在学习
                         </div>
                    </li>
                    `)
                }
            </script>
        </ul>
    </div>
</div>

6. 术语解释

术语	解释	举例
关键字	在JS中有特殊意义的词汇	let、var、function、if、else、switch、case、break
保留字	目前JS中没意义, 以后具有特殊意义的词汇	int、short、long、char
标识符	变量名、函数名另一种叫法	无
表达式	能产生值的代码, 配合运算符出现	10+3、age >= 18
语句	按用途会分类: 输出、声明、分支语句	无

1. 基本数据和引用数据类型

简单类型又叫基本数据或值类型, 复杂类型又叫引用类型
值类型: 简单数据/基本数据, 在存储时变量中存储的是值本身, 因此叫值类型
引用类型: 复杂数据, 在存储时变量中存储的仅仅是地址(引用), 因此叫引用数据类型

2. 堆/栈空间分配区别：

简单数据类型存放到栈里 2. 引用数据类型存放到堆里
栈(操作系统): 由操作系统自动分配存放函数的参数值、局部变量的值等, 操作方式类似于数据结构中的栈
堆(操作系统): 存储复杂类型(对象), 由程序员分配释放, 若不释放, 由垃圾回收机制回收

3. 简单类型的内存分配

值类型(简单数据类型): string、number、boolean、undefined、null

值类型变量的数据直接存放在变量(栈空间)中

// 简单数据类型存储值 10
let num1 = 10
let num2 = num1
num2 = 20
document.write(num1)

4. 复杂类型的内存分配

引用类型(复杂数据类型): 通过new关键字创建的对象(系统对象、自定义对象) 如Object、Array、Date…
引用类型变量(栈空间)里存放的是地址, 真正的对象实例存放在堆空间中

// 对象 引用数据类型 栈里存储的是地址 20
let obj1 = {
    age: 10
}
let obj2 = obj1
obj2.age = 20
// 因为它们是复杂数据类型 栈都指向同一地址
document.write(obj1.age, obj2.age)

本节单词:

key、value
in
math
object
PI、random、ceil、floor、round、max、min
uname、age、sex、goods、address、weight
dir
delete

1. 什么是对象:

1. 对象是属性和方法组成:

2. 属性访问:

3. 对象中的方法和访问:

2. 操作对象

1. 增加对象属性

2. 重新赋值对象属性

3. 删除属性(了解)

3. 遍历对象

1. 遍历数组对象

2. 遍历数组对象: 根据数据渲染生成表格

4. 内置对象

5. Math对象方法：

生成0-10的随机数

生成5-10的随机数

生成N-N之间的随机数

4. 随机点名

5. 随机点名 (改进版: 点完名后不重复)

6. 猜数字游戏

7. 学成在线页面渲染

6. 术语解释

1. 基本数据和引用数据类型

2. 堆/栈 空间分配区别：

3. 简单类型的内存分配

4. 复杂类型的内存分配

本节单词:

2. 堆/栈空间分配区别：