WEBSTORM前端 —— 第4章：JavaScript —— 第8节：对象

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.声明对象
    // let pink = {
    //   uname: 'pink老师',
    //   age: 18,
    //   gender: '女'
    // }
    // // console.log(pink)
    // // console.log(typeof pink)
    // // 改 把性别的女改为男
    // pink.gender = '男'
    // console.log(pink)
    // // 增
    // pink.hobby = '足球'
    // console.log(pink)
    // // 删 (了解)
    // delete pink.age
    // console.log(pink)
    // // let num = 10
    // num = 20
    // console.log(num)
    // 1. 声明
    // console.log(window.name)
    let obj = {
      'goods-name': '小米10青春版',
      num: '100012816024',
      weight: '0.55kg',
      address: '中国大陆'
    }
    obj.name = '小米10 PLUS'
    obj.color = '粉色'
    // console.log(obj.name)
    console.log(obj.num)
    console.log(obj.weight)
    console.log(obj.address)
    console.log(obj.color)
    // console.log(obj.goods - name)
    // 查的另外一种属性：
    // 对象名['属性名']
    console.log(obj['goods-name'])


    // 查总结：
    // (1) 对象名.属性名  obj.age
    console.log(obj.num)
    // (2) 对象名['属性名']  obj['age']
    console.log(obj['num'])





    // // console.log(address)
    // // 2. 使用属性 查  对象名.属性名
    // console.log(obj.address)
    // console.log(obj.name)


  </script>
</body>

</html>

2. 对象有属性和方法组成

①属性

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

②方法

功能或叫行为（动词）。比如手机打电话、发短信、玩游戏…

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let obj = {
      uname: '刘德华',
      // 方法
      song: function (x, y) {
        // console.log('冰雨')
        console.log(x + y)
      },
      dance: function () { }
    }
    // 方法调用 对象名.方法名
    // console.log(obj.song(1, 2))
    obj.song(1, 2)

    // document.write('123')
  </script>
</body>

</html>

3. 属性

数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。

属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔
多个属性之间使用英文 , 分隔
属性就是依附在对象上的变量（外面是变量，对象内是属性）
属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

4.练习：请声明一个产品对象，里面包如下信息

要求：

商品对象名字： goods
商品名称命名为： name
商品编号： num
商品毛重： weight
商品产地： address

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.声明对象
    // let pink = {
    //   uname: 'pink老师',
    //   age: 18,
    //   gender: '女'
    // }
    // // console.log(pink)
    // // console.log(typeof pink)
    // // 改 把性别的女改为男
    // pink.gender = '男'
    // console.log(pink)
    // // 增
    // pink.hobby = '足球'
    // console.log(pink)
    // // 删 (了解)
    // delete pink.age
    // console.log(pink)
    // // let num = 10
    // num = 20
    // console.log(num)
    // 1. 声明
    // console.log(window.name)
    let obj = {
      'goods-name': '小米10青春版',
      num: '100012816024',
      weight: '0.55kg',
      address: '中国大陆'
    }
    obj.name = '小米10 PLUS'
    obj.color = '粉色'
    // console.log(obj.name)
    console.log(obj.num)
    console.log(obj.weight)
    console.log(obj.address)
    console.log(obj.color)
    // console.log(obj.goods - name)
    // 查的另外一种属性：
    // 对象名['属性名']
    console.log(obj['goods-name'])


    // 查总结：
    // (1) 对象名.属性名  obj.age
    console.log(obj.num)
    // (2) 对象名['属性名']  obj['age']
    console.log(obj['num'])





    // // console.log(address)
    // // 2. 使用属性 查  对象名.属性名
    // console.log(obj.address)
    // console.log(obj.name)


  </script>
</body>

</html>

5.属性-查

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

语法：对象名.属性

简单理解就是获得对象里面的属性值。

另外一种写法：

对于多词属性或则 - 等属性，点操作就不能用了。
我们可以采取：对象[‘属性’] 方式，单引号和双引号都阔以

对象[‘属性’] 方式，单引号和双引号都阔以
也可以用于其他正常属性，比如：
[]语法里面的值如果不添加引号默认会当成变量解析

总结：

没有必要的时候直接使用点语法, 在需要解析变量的时候使用 [] 语法

6.属性-改

语法：对象名.属性 = 新值

7.属性-增

语法：对象名.新属性 = 新值

8.属性-删

语法：delete 对象名.属性

9.练习：请对产品对象，做如下操作

要求:

1. 请将商品名称里面的值修改为：小米10 PLUS

2. 新增一个属性颜色 color 为 ‘粉色’

3. 请依次页面打印输出所有的属性值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1.声明对象
    // let pink = {
    //   uname: 'pink老师',
    //   age: 18,
    //   gender: '女'
    // }
    // // console.log(pink)
    // // console.log(typeof pink)
    // // 改 把性别的女改为男
    // pink.gender = '男'
    // console.log(pink)
    // // 增
    // pink.hobby = '足球'
    // console.log(pink)
    // // 删 (了解)
    // delete pink.age
    // console.log(pink)
    // // let num = 10
    // num = 20
    // console.log(num)
    // 1. 声明
    // console.log(window.name)
    let obj = {
      'goods-name': '小米10青春版',
      num: '100012816024',
      weight: '0.55kg',
      address: '中国大陆'
    }
    obj.name = '小米10 PLUS'
    obj.color = '粉色'
    // console.log(obj.name)
    console.log(obj.num)
    console.log(obj.weight)
    console.log(obj.address)
    console.log(obj.color)
    // console.log(obj.goods - name)
    // 查的另外一种属性：
    // 对象名['属性名']
    console.log(obj['goods-name'])


    // 查总结：
    // (1) 对象名.属性名  obj.age
    console.log(obj.num)
    // (2) 对象名['属性名']  obj['age']
    console.log(obj['num'])





    // // console.log(address)
    // // 2. 使用属性 查  对象名.属性名
    // console.log(obj.address)
    // console.log(obj.name)


  </script>
</body>

</html>

10.对象中的方法

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

方法是由方法名和函数两部分构成，它们之间使用 : 分隔
多个属性之间使用英文 , 分隔
方法是依附在对象中的函数
方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
声明对象，并添加了若干方法后，可以使用 . 调用对象中函数，我称之为方法调用。
也可以添加形参和实参

三、遍历对象

1.for 遍历对象的问题

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <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.uname)
      // console.log(obj.k)
      // console.log(obj.'uname')
      // console.log(obj['uname'])   'uname'  === k
      console.log(obj[k])  // 输出属性值  obj[k]
    }
  </script>
</body>

</html>

2.遍历对象

一般不用这种方式遍历数组、主要是用来遍历对象

for in语法中的 k 是一个变量, 在循环的过程中依次代表对象的属性名

由于 k 是变量, 所以必须使用 [ ] 语法解析

一定记住： k 是获得对象的属性名，对象名[k] 是获得属性值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    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)
    }
  </script>
</body>

</html>

3.案例：遍历数组对象

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

②分析：

打印表格头部和尾部
中间的行遍历数组，然后填充对象数据

③请把下面数据中的对象打印出来：

// 定义一个存储了若干学生信息的数组

let students = [

{name: '小明', age: 18, gender: '男', hometown: '河北省'},

{name: '小红', age: 19, gender: '女', hometown: '河南省'},

{name: '小刚', age: 17, gender: '男', hometown: '山西省'},

{name: '小丽', age: 18, gender: '女', hometown: '山东省'}

]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 600px;
            text-align: center;
        }

        table,
        th,
        td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        caption {
            font-size: 18px;
            margin-bottom: 10px;
            font-weight: 700;
        }

        tr {
            height: 40px;
            cursor: pointer;
        }

        table tr:nth-child(1) {
            background-color: #ddd;
        }

        table tr:not(:first-child):hover {
            background-color: #eee;
        }
    </style>
</head>

<body>
    <h2>学生信息</h2>
    <p>将数据渲染到页面中...</p>

    <table>
        <caption>学生列表</caption>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>家乡</th>
        </tr>
        <!-- script写到这里 -->
        <script>
            // 1. 数据准备
            let students = [
                { name: '小明', age: 18, gender: '男', hometown: '河北省' },
                { name: '小红', age: 19, gender: '女', hometown: '河南省' },
                { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
                { name: '小丽', age: 18, gender: '女', hometown: '山东省' },
                { name: '晓强', age: 16, 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>
                `)
            }
        </script>
    </table>

</body>


</html>

四、内置对象

1.内置对象-内置对象是什么

JavaScript内部提供的对象，包含各种属性和方法给开发者调用

思考：我们之前用过内置对象吗？

document.write( )
console.log( )

2.内置对象-Math

①介绍：Math对象是JavaScript提供的一个“数学”对象

②作用：提供了一系列做数学运算的方法

③Math对象包含的方法有：

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 属性
    console.log(Math.PI)
    // 方法
    // ceil 天花板  向上取整
    console.log(Math.ceil(1.1)) // 2 
    console.log(Math.ceil(1.5)) // 2 
    console.log(Math.ceil(1.9)) // 2 
    // floor 地板  向下取整
    console.log(Math.floor(1.1))  // 1
    console.log(Math.floor(1.5))  // 1
    console.log(Math.floor(1.9))  // 1
    console.log(Math.floor('12px'))  // 1
    console.log('----------------')
    // 四舍五入 round
    console.log(Math.round(1.1))  // 1
    console.log(Math.round(1.49))  // 1
    console.log(Math.round(1.5))  // 2
    console.log(Math.round(1.9))  // 2
    console.log(Math.round(-1.1))  // -1 
    console.log(Math.round(-1.5))  // -1
    console.log(Math.round(-1.51))  // -2

    // 取整函数 parseInt(1.2)   // 1
    // 取整函数 parseInt('12px')   // 12

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

    // null  类似 let obj = {}
    let obj = null 
  </script>
</body>

</html>

3.内置对象-生成任意范围随机数

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 左闭右开 能取到 0 但是取不到 1 中间的一个随机小数
    // console.log(Math.random())

    // 0~ 10 之间的整数
    // console.log(Math.floor(Math.random() * 11))
    // let arr = ['red', 'green', 'blue']
    // let random = Math.floor(Math.random() * arr.length)
    // // console.log(random)
    // console.log(arr[random])
    // 取到 N ~ M 的随机整数
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    console.log(getRandom(4, 8))
  </script>
</body>

</html>

4.案例1：随机点名案例

需求：请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中，不允许重复显示

分析：

①：利用随机函数随机生成一个数字作为索引号

②：数组[随机数] 生成到页面中

③：数组中删除刚才抽中的索引号

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
    // 1. 得到一个随机数， 作为数组的索引号， 这个随机数 0~6
    let random = Math.floor(Math.random() * arr.length)
    // 2. 页面输出数组里面的元素 
    document.write(arr[random])

    // 3. splice(起始位置(下标), 删除几个元素)
    arr.splice(random, 1)
    console.log(arr)
  </script>
</body>

</html>

5.案例2：猜数字游戏

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

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

分析：

①：利用随机数生成一个数字
②：需要一直猜，所以需要不断的循环
③：因为条件是结果猜对了，就是判断条件退出，用while循环合适
④：内部判断可以用多分支语句

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1. 随机生成一个数字 1~10
    // 取到 N ~ M 的随机整数
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    let random = getRandom(1, 10)
    console.log(random)
    // 需要不断的循环
    while (true) {
      // 2. 用户输入一个值
      let num = +prompt('请输入你猜的数字:')
      // 3. 判断输出
      if (num > random) {
        alert('您猜大了')
      } else if (num < random) {
        alert('您猜小了')
      } else {
        alert('猜对啦，真厉害')
        break  // 退出循环
      }
    }
  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 1. 随机生成一个数字 1~10
    // 取到 N ~ M 的随机整数
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    let random = getRandom(1, 10)
    // 2. 设定三次  三次没猜对就直接退出
    let flag = true  // 开关变量 
    for (let i = 1; i <= 3; i++) {
      let num = +prompt('请输入1~10之间的一个数字:')
      if (num > random) {
        alert('您猜大了，继续')
      } else if (num < random) {
        alert('您猜小了，继续')
      } else {
        flag = false
        alert('猜对了，真厉害')
        break
      }
    }
    // 写到for的外面来
    if (flag) {
      alert('次数已经用完')
    }
  </script>
</body>

</html>

6.案例3：生成随机颜色

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

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

function getRandomColor(flag){

}

console.log(getRandomColor(true)) //#ffffff

console.log(getRandomColor(false)) //rgb(255,255,255)

分析：

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

let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']

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

步骤：

①：如果参数为true或者无参数，则处理16进制颜色，核心思想是循环6次，生成随机的6个数字（取值范围0~15），根据这个数字去找数组的值，然后和 # 拼接起来，并且返回值。

②：如果参数为false，随机生成一个0~255的数给三个变量，分别作为 r g b 三个颜色，之后拼接字符串rgb(255,255,255)格式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 300px;

    }
  </style>
</head>

<body>

  <script>
    // 1. 自定义一个随机颜色函数
    function getRandomColor(flag = true) {
      if (flag) {
        // 3. 如果是true 则返回 #ffffff
        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++) {
          // 每次要随机从数组里面抽取一个  
          // random 是数组的索引号 是随机的
          let random = Math.floor(Math.random() * arr.length)
          // str = str + arr[random]
          str += arr[random]
        }
        return str

      } else {
        // 4. 否则是 false 则返回 rgb(255,255,255)
        let r = Math.floor(Math.random() * 256)  // 55
        let g = Math.floor(Math.random() * 256)  // 89
        let b = Math.floor(Math.random() * 256)  // 255
        return `rgb(${r},${g},${b})`
      }

    }
    // 2. 调用函数 getRandomColor(布尔值)
    console.log(getRandomColor(false))
    console.log(getRandomColor(true))
    console.log(getRandomColor())



    // let str = '#'
    // str = str + 'f'


  </script>
</body>

</html>

五、综合案例：学成在线页面渲染案例

需求：根据数据渲染列表页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学车在线首页</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>

    </style>
</head>

<body>

    <!-- 4. box核心内容区域开始 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <!-- <li>
                    <a href="#">
                        <img src="images/course01.png" alt="">
                        <h4>
                            Think PHP 5.0 博客系统实战项目演练
                        </h4>
                        <div class="info">
                            <span>高级</span> • <span>1125</span>人在学习
                        </div>
                    </a>
                </li> -->
                <script>
                    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>
                      `)
                    }
                </script>
            </ul>
        </div>
    </div>

</body>

</html>

1.拓展-术语解释

2.拓展- 基本数据类型和引用数据类型

目标：了解基本数据类型和引用数据类型的存储方式

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

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

string ，number，boolean，undefined，null

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

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

3.栈与堆

4.简单类型的内存分配

值类型（简单数据类型）： string ，number，boolean，undefined，null

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

5.复杂类型的内存分配

引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

亚马逊云科技技术品牌专区

更多推荐

2026年麒麟KYCP云计算认证深度解析：高级信创云人才的能力标尺

麒麟KYCP云计算是信创云平台高级运维认证，由工信部与麒麟软件联合颁发，聚焦KVM虚拟化、Kubernetes编排及信创云安全架构。考试含100题（单选70+多选20+判断10），90分钟需达70分合格，较初级KYCA难度显著提升。持证者可胜任政企信创云架构师等岗位，契合2026年信创规模化落地的人才缺口。备考建议分四阶段：基础巩固（1周）、K8s进阶（2-3周）、安全强化（1周）及模拟冲刺，需重