xc-book

# 1. 什么是对象:

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

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

  • 属性: 信息或特征 (名词), 比如手机尺寸、颜色、重量…
  • 方法: 功能或行为 (动词), 比如打电话、发短信、玩游戏…
let 对象名 = {
    属性名: 属性值,
    方法名: 函数
 }
  1. 对象属性没有顺序, 属性和值用 : 隔开 多个属性用 ; 逗号隔开
  2. 可使用""或'' , 一般省略, 除非遇到特殊符号 空格、中横线等
let num1 = {
    name: 'mark',
    age: 10
}
console.dir(num1)

# 2. 属性访问:

  1. 简单理解就是获得对象里的属性值
  2. 两种方式: 1. 点形式: 对象.属性 2. []形式: 对象['属性']
  3. 1. 点属性名不要加引号 2. []属性名加引号 3. 后期不同场景会用到不同写法
let num = {
    name: 'Mark',
    age: 20,
    sex: '男'
}
document.write(num.age)
document.write(num['sex'])

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

  1. 数据行为信息叫方法, 方法名和函数构成, 使用 : 分隔

  2. 多个属性使用英文 , 分隔

  3. 方法名可使用" "或''，一般省略, 除非遇到特殊符号空格、中横线等

  4. 声明对象, 添加若干方法后, 可使用 . 调用对象函数, 称为方法调用

  5. 对象.方法(), person.sayHi()

  6. 注意: 别忘了给方法名后面加小括号

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

# 2. 操作对象

  1. 操作数据无非是增删改查
  2. 查询对象: 对象.属性、对象[‘属性’]、对象.方法()
  3. 重新赋值: 对象.属性 = 值、对象.方法 = function() {}
  4. 对象添加新的数据: 对象名.新属性名 = 新值
  5. 删除对象中属性: 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. 删除属性(了解)
delete num3.sex

# 3. 遍历对象

  1. 对象没有length属性没有下标, 无法确定长度
  2. 主要用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. 内置对象

  1. JS内部提供的对象, 各种属性和方法供开发者调用
  2. 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：绝对值...
  1. # 生成0-10的随机数
Math.floor(Math.random() * (10 + 1))
  1. # 生成5-10的随机数
Math.floor(Math.random() * (5 + 1)) + 5
  1. # 生成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. 基本数据和引用数据类型

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

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

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

# 3. 简单类型的内存分配

  1. 值类型(简单数据类型): string、number、boolean、undefined、null
  2. 值类型变量的数据直接存放在变量(栈空间)中 
// 简单数据类型存储值 10
let num1 = 10
let num2 = num1
num2 = 20
document.write(num1)

# 4. 复杂类型的内存分配

  1. 引用类型(复杂数据类型): 通过new关键字创建的对象(系统对象、自定义对象) 如Object、Array、Date...
  2. 引用类型变量(栈空间)里存放的是地址, 真正的对象实例存放在堆空间中 
// 对象 引用数据类型 栈里存储的是地址 20
let obj1 = {
    age: 10
}
let obj2 = obj1
obj2.age = 20
// 因为它们是复杂数据类型 栈都指向同一地址
document.write(obj1.age, obj2.age)

# 本节单词:

  1. key、value
  2. in
  3. math
  4. object
  5. PI、random、ceil、floor、round、max、min
  6. uname、age、sex、goods、address、weight
  7. dir
  8. delete

← 移动开发-流式布局 →