无序的数据集合
{} 空对象

声明语法

  1. let   对象名(变量名) = {}

对象有属性和方法组成

属性：信息或叫特征（名词）—静态
方法：功能或叫行为（动词）—动态

方法也相当于属性，本质没有区别
🔥对象里面不要有重复的属性，后面的属性会覆盖前面的同名属性

  1. let 对象名 = {
  2.     属性名： 属性值，
  3.     方法名： 函数
  4. }
  6. 别称：键值对
  7. let 对象名 = {
  8.    键名： 键值
  9. }

特点：

  • 属性都是成 对出现的，包括属性名和值，它们之间使用英文 : 冒号分隔
  • 多个属性之间使用英文 , 逗号分隔
  • 属性其实就是依附在对象上的变量（外面叫变量，对象内叫属性）； 所以也是一个可以存任何类型值的容器；
  • 属性名其实是字符串， 全写需加上”” 或 ‘’，一般情况下省略，除非名称遇到特殊符号如空格、中横线等；某种程度上相当于不遵循命名规则

对象，传参，存储 - 图1

属性访问

获得对象里面的属性值
可以使用 . 或 [] 获得对象中属性对应的值

. 属性名（非字符串的属性名）

  1.  let girl = {
  2.       name: "外星人",
  3.       age: 18,
  4.       sex: "女",
  5.       "my-height": "未知",
  6.       run: function () {
  7.         alert("UFO");
  8.       },
  9.       hobby: ['eat', 'sleep', 'run']
  10.     }
  11.     console.log(girl.sex)
  12.     // console.log(girl."sex") 报错
  14.     // 访问对象的一个不存在的属性，返回值为undefined；
  15.     console.log(girl.num)
  17.     // 访问不存在的对象变量报错
  18.     // let boy = "boy" 声明了就undefined
  19.     console.log(boy.num)

[“属性名” ]

[ ]里面是访问字符串，带引号字符串；
不带访问的是变量
访问对象的一个不存在的属性，返回值为undefined；
访问不存在的变量报错；

  1. <script>
  2.     let girl = {
  3.       name: "外星人",
  4.       age: 18,
  5.       sex: "女",
  6.       "my-height": "未知",
  7.       run: function () {
  8.         alert("UFO");
  9.       },
  10.       hobby: ['eat', 'sleep', 'run']
  11.     }
  12.     // console.log('girl: ', girl);
  13.     console.log(girl["name"])
  15.     let age = "age"
  16.     console.log(girl[age])
  18.     // 访问对象的一个不存在的属性，返回值为undefined；
  19.     let eat = "eat"
  20.     console.log(girl[eat])//undefined
  21.     // console.log(girl['eat'])
  23.     let boy = "boy"  //没有定义就报错
  24.     console.log(boy['run'])//undefined
  26.     // 访问不存在的变量报错；
  27.     console.log(girl[ufo]) //报错
  28.     console.log(girl[hobby]) //报错 ，对象girl中的属性名都是字符串，带引号 
  29.   </script>

操作对象

增删改查

查询对象

对象.属性 或者 对象[‘属性’]

对象.方法()

改-重新赋值

对象.属性 =  值
对象.方法 = function() {}

给对象添加新的数据

对象名.新属性 = 数值

对象.新方法 = function() {}

删除

delete 对象名.属性名

  let obj = {a: 1};
   delete obj.a; // 返回 true
   delete obj.c; // 注意：虽然属性名不存在，也会返回true
   所以，不能靠返回值来判断，有没有删除成功； 
   可以自己主动去判断一下 if(obj.a != undefined){}

  let arr = [1];
  删除无法被删除的属性时，才返回 false
  delete arr.length; // false

  如果想删除的属性不存在，也不会报错

代码

let girl = {

      name: 'any',
      sex: '女',
      run: function () {
        alert("打羽毛球")
      }
    }
    // 添加
    girl.hobby = "跑步"
    girl["eat"] = "rice"
    // 修改
    girl.name = "anny"
    //  删除
    delete girl.run

    console.log('girl: ', girl);

遍历对象

for in语法

for(let key in obj){
         // key不是固定写的，是个变量，可以自定义
         // 它是个字符串类型
        console.log(key); //打印属性名

        consloe.log(obj[key]) //打印属性值

         console.log(girl.key)//undefined,key是字符串类型，.后面是非字符串属性名，所以找不到没有属性
      // }

🔥🔥🔥 k 是获得对象的属性名， 对象名[k] 是获得 属性值
一般不用这种方式遍历数组、主要是用来遍历对象；
因为for in本质上是无序遍历；而数组是有序的

代码理解

对象，传参，存储 - 图2

<!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="./style.css" />
  <style></style>
</head>
<body>
  <!-- 
      1. 浏览器刚拿到 html文件的时候； 开始从上到下，去解析html文件
      2. 浏览器解析html的过程：其实就是在构建 文档流
      3. 遇到script之前， 已经在 文档流里面，存储了 前一部分html代码
      4. 遇到script，会阻塞文档解析； 开始执行js
      5. js代码里面，使用 document.write(), 向 文档流里，继续输入html代码
      6. 现在要做的：  遍历 datas数组， 生成 所有  li 标签
      7. js执行完毕， 继续解析 html代码； 最后会构成一个完整的 文档流；
      8. 浏览器根据完整的 文档流，去渲染页面；
     -->
  <div class="box w">
    <div class="box-hd">
      <h3>精品推荐</h3>
      <a href="#">查看全部</a>
    </div>
    <div class="box-bd">
      <ul class="clearfix">
        <!-- 示例结构 -->

        <!-- 🎯 注意 script 书写位置 -->
        <script>
          // 1. 准备数组数据
          //    后端返回给我们的
          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: "Android APP 实战项目演练",
              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,
            },
          ];
          // 2. 数组遍历，获取到所有的 对象数据
          for (let i = 0; i < data.length; i++) {
            let item = data[i];
            // 3. 根据对象数据，向 文档流里面： 输入 html字符串
              //document.write能解析表单，但不常用
            document.write(`
            <li>
            <img src="${item.src}" alt="" />
            <h4>${item.title}</h4>
            <div class="info">
              <span>高级</span> • <span>${item.num}</span>人在学习
            </div>
            </li>
                 `);
          }
        </script>
      </ul>
    </div>
  </div>
</body>
</html>

内置对象

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

Math对象

方法：

Math.random()：生成0-1之间的随机数（包含0不包括1）[0-1)

Math.ceil()：向上取整

Math.floor()：向下取整

Math.max()：找最大数

Math.min()：找最小数

Math.pow()：幂运算

Math.abs()：绝对值

存储方式

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

值类型：

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

引用类型：

复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型
通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、function、Date等

堆栈空间分配：

1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；
简单数据类型存放到栈（变量）里面

对象，传参，存储 - 图3

2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
引用数据类型存放到堆里面，真正的对象实例存放在堆空间中
对象，传参，存储 - 图4

代码分析

对象，传参，存储 - 图5
obj2被obj1赋予相同地址，下一步新建对象后，开辟新空间地址，替换掉原来的地址；

暂时性死区

 let a = 20
        function foo() {
            debugger
             console.log(a) //报错，未声明定义访问
            let a = 10
            ++a
            console.log(a)
        }
        foo()
 // 暂时性死区
// 当发现let 时 ,只看大括号内的代码即可，从这块代码从上往下分析，别    代码区不管
// 就近原则

个人拓展：

数据结构中的栈（线性表）

后进先出，插入和删除数据只能从表尾删除
内存申请中的栈
由操作系统自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈
作用：暂时存储数据的地方，用来在函数调用的时候存储断点

队列：（线性表）

先进先出，插入数据从表尾删除；删除数据只能删除第一个
处理排队问题

栈和队列中的数据操作，都是从表的“ 端点 ”操作

堆：

先进后出，只允许在栈顶插入和删除元素。
栈顶是低位，栈底是高位。栈中没有元素时称为空栈
内存申请中的堆
堆是在程序运行时，而不是在程序编译时，申请的某个大小的内存空间。即动态分配的内存，对其访问和对一般内存的访问没有区别。堆是应用程序在运行的时候请求操作系统分配给自己的内存，一般是申请/给予的过程，一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收