✔️JavaScript基础++

✔️JS基础++

数组

数组：(Array) 是一种数据类型，属于引用数据类型

作用: 在单个变量名下存储多个数据

定义数组

<script>
  // 1. 语法，使用 [] 来定义一个空数组
  // 定义一个空数组，然后赋值给变量 classes
  // let classes = []

  // 2. 定义非空数组
  let classes = ['小明', '小刚', '小红', '小丽', '小米']
</script>

通过 [] 定义数组，数据中可以存放真正的数据，如小明、小刚、小红等这些都是数组中的数据，我们这些数据称为数组单元，数组单元之间使用英文逗号分隔。

访问数组和数组索引

使用数组存放数据并不是最终目的，关键是能够随时的访问到数组中的数据（单元）。其实 JavaScript 为数组中的每一个数据单元都编了号，通过数据单元在数组中的编号便可以轻松访问到数组中的数据单元了。

我们将数据单元在数组中的编号称为索引值，也有人称其为下标。

索引值实际是按着数据单元在数组中的位置依次排列的，注意是从 0 开始的，如下图所示：

观察上图可以数据单元【小明】对应的索引值为【0】，数据单元【小红】对应的索引值为【2】

<script>
  // 数组： 可以单个变量下存储多个数据
  // 1. 声明数组
  let names = ['小明', '小刚', '小红', '小丽', '小米']
  // let names = ['小明', '小刚', true, '小丽', 1]
  console.log(names)
  // 1.1 数组是按照顺序来存储的，每个数据都有自己的编号
  // 1.2 编号是从0开始的， 0 1 2 3... 也称为 索引 或者 下标
  // 1.3 数组里面可以存放任意的数据类型

  // 2. 数组取值  数组名[下标]
  console.log(names[0])  // '小明'
  console.log(names[1])  // '小刚'
  console.log(names[2])  // '小红'
  console.log(names[3])  // '小丽'
  console.log(names[4])  // '小米'
</script>

数组作为数据的集合，它的单元值可以是任意数据类型

<script>
  // 6. 数组单值类型可以是任意数据类型

  // a) 数组单元值的类型为字符类型
  let list = ['HTML', 'CSS', 'JavaScript']
  // b) 数组单元值的类型为数值类型
  let scores = [78, 84, 70, 62, 75]
  // c) 混合多种类型
  let mixin = [true, 1, false, 'hello']
</script>

遍历数组

遍历数组：把数组中每个数据都访问到

数组长度： 数组.length

<script>
  let arr = ['迪丽热巴', '古力娜扎', '佟丽丫丫', '玛尔扎哈', '哈尼克孜']
  // console.log(arr[0])
  // console.log(arr[1])
  // console.log(arr[2])
  // console.log(arr[3])
  // 遍历数组： 把数组里面的数据每个都会访问到
  // for (let i = 0; i < 4; i++) {
  //   // console.log(i)  数组名[索引号]
  //   console.log(arr[i])
  // }

  // 1. 数组的长度 数组.length 
  // console.log(arr.length)  // 4
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
  }
  // 2. 数组里面的数据也称为 数组元素
</script>

操作数组

数组本质是数据集合, 操作数据无非就是 增 删 改 查 语法

查询和修改数组

查询：

​ 语法：数组[索引]

​ 返回值：如果查询不到则返回 undefined

修改：

​ 语法：数组[索引] = 新值

​ 返回值：如果下标不存在，则是新增一个数组元素，并修改了数组长度（尽量避免）

<script>
  // 1. 查询数组元素
  let arr = ['迪丽热巴', '古丽扎娜']
  console.log(arr[0]) //  '迪丽热巴'
  console.log(arr[1]) //  '古丽扎娜'
  console.log(arr[2]) //  undefined

  // 2. 修改数组元素   数组[索引] = 新值
  arr[1] = '佟丽丫丫'
  // console.log(arr)
  arr[3] = '古丽扎娜'  // 如果索引号不存在，则是增加数组元素 （不提倡）
  console.log(arr)
  console.log(arr.length)  // 4 修改了数组长度
</script>

新增

// 数组新增元素
// 1. 可以向数组的末尾新增1个或者多个数组元素 数组.push(元素1...元素n)
let arr = ['迪丽热巴']
// console.log(arr.push('佟丽丫丫'))  // 返回的是新数组的长度 2
// arr.push('佟丽丫丫', '古丽扎娜')
// console.log(arr)  // 修改原数组

// 2. 可以向数组的开头增加1个或者多个数组元素 数组.unshift(元素1,...元素n)
// console.log(arr.unshift('佟丽丫丫'))  // 返回的是新数组的长度 2
arr.unshift('佟丽丫丫', '古丽扎娜')
console.log(arr) // 修改原数组

删除

<script>
  // 删除元素
  // 1. 删除数组中的最后一个元素  数组.pop()  修改原数组
  let arr = ['red', 'green']
// arr.pop()
// console.log(arr.pop())  // 返回的是被删除的元素
// console.log(arr)

// 2. 删除数组中的第一个元素 数组.shift() 修改原数组的
arr.shift()
// console.log(arr.shift())  // 返回的是被删除的元素
console.log(arr)
</script>

数组 splice方法

数组.splice() 方法 可以添加也可以删除数组元素

说明：可以从指定位置删除或者增加的数组元素，注意它修改原数组

splice(start,deleteCount, item1, item2…)

1. start 起始位置:

   • 指定修改的开始位置（从0计数）

2. deleteCount 删除个数:

   • 表示要移除的数组元素的个数

   • 可选的。如果省略则默认从指定的起始位置删除到最后

3. item1, item2…

   • 新增的元素

<script>
  // splice 删除和增加数组元素
  let arr = ['迪丽热巴', '古力娜扎', '佟丽丫丫', '玛尔扎哈']
// 1. splice 删除  数组.splice(起始位置, 删除几个)
// arr.splice(1, 1) // 记住起始位置是索引号，从0 开始数
// arr.splice(1) // 如果第二个参数（删除几个）省略了，则默认删除到最后
// console.log(arr)

// 2. splice 增加  数组.splice(起始位置, 删除几个, 新增元素1,...新增元素n)
arr.splice(1, 0, '刘德华', 'pink老师')
// 2.1 注意如果是新增，则起始位置是目标位置的索引号， 删除几个（第二个参数）不能省略我们写为 0， 后面写新增的元素
console.log(arr)

// 3. splice 不是替换pop shift  unshift push.  arr.splice(0, 1)
// 开头结尾找前面 pop shift  unshift push
// splice管中间
</script>

数组排序

数组. sort() 方法可以排序

语法：

<script>
    // 数组排序  数组.sort()  修改原数组
    let arr = [88, 78, 100, 34, 99]
    // arr.sort()
    // console.log(arr)  // [100, 34, 78, 88, 99]

    // 1. 升序排序
    // arr.sort(function (a, b) {
    //   return a - b
    // })
    // console.log(arr)  // [34, 78, 88, 99, 100]

    // 2. 降序排序
    arr.sort(function (a, b) {
      return b - a
    })
    console.log(arr)  //  [100, 99, 88, 78, 34]

    // 3. 获取数组最大值和最小值
    document.write(`数组的最大值：${arr[0]}`)
    document.write(`数组的最小值：${arr[arr.length - 1]}`)
  </script>

选择排序（了解）

选择排序原理：（了解）

就是从第一个数开始，与后面所有的数相比较，找出最小（最大）的数，放在第一个位置

以此类推，每一轮确定一个相对于这一轮最小（最大）的数

算法可视化网站地址： https://visualgo.net/zh/sorting

核心：利用循环嵌套比较，根据索引号来交换变量

①：外层循环是一共进行几轮相比较，通过观察，一共进行数组长度-1 次比较

• for (let i = 0; i < arr.length - 1; i++)
• 把 i作为最小值起始索引 minIndex

②：里层循环是每一轮的比较来查找最小值

• 里层循环起始值是 i + 1 个元素开始查找
• for (let j = i + 1; j < arr.length; j++)
• 进行比较的时候，发现最小的数组元素，把当前元素索引号给 minIndex

③：如果 minIndex 和 i 位置不一致，则交换变量

<script>
  // 选择排序算法
  let arr = [4, 2, 5, 1, 3]
// 1  [1, 2, 5, 4, 3]
// 2  [1, 2, 5, 4, 3]
// 3  [1, 2, 3, 4, 5]
// 4  [1, 2, 3, 4, 5]
// 1. 外层循环控制是几轮能够比较出来
for (let i = 0; i < arr.length - 1; i++) {
  // 最小值的索引号
  let minIndex = i

  // 2. 里层循环来查找最小值，并且记录最小值的索引号
  for (let j = i + 1; j < arr.length; j++) {
    if (arr[j] < arr[minIndex]) {
      minIndex = j
    }
  }

  // 3. 交换变量  
  if (minIndex !== i) {
    let temp = arr[minIndex]
    arr[minIndex] = arr[i]
    arr[i] = temp
  }
}
console.log(arr)

函数

函数认识

函数是可以被重复使用的代码块。

作用：函数可以把具有相同或相似逻辑的代码 “包裹” 起来，这么做的优势是有利于代码复用。

声明（定义）函数

声明（定义）一个完整函数包括关键字、函数名、形式参数、函数体、返回值五个部分

利用 function 定义函数（声明函数）

语法：

// 函数： 是可以被重复使用的代码块，作用是有利于代码复用
// 1. 声明（定义）了最简单的函数，既没有形式参数，也没有返回值
function sayHi() {
console.log('嗨~')
}

注意：

1. 函数名命名跟变量一致，采用 小驼峰 命名法

2. 函数名经常采用动词

调用

声明（定义）函数必须调用才会真正被执行，使用 ( ) 调用函数。

// 声明（定义）了最简单的函数，既没有形式参数，也没有返回值
function sayHi() {
  console.log('嗨~')
}
// 函数调用，这些函数体内的代码逻辑会被执行
// 函数名()
sayHi()
// 可以重复被调用，多少次都可以
sayHi()

注：函数名的命名规则与变量是一致的，并且尽量保证函数名的语义。

语法

function sum(参数1, 参数2...) {
    return 结果
}
console.log(sum(1, 2))  // 输出函数返回的结果

说明：

1. 函数参数，如果有多个则用逗号分隔，用于接受传递过来的数据
2. return 关键字可以把结果返回给调用者

函数参数

通过向函数传递参数，可以让函数更加灵活多变

形参：声明函数时小括号里的叫形参（形式上的参数）

实参：调用函数时小括号里的叫实参（实际上的参数）

执行过程：会把实参的数据传递给形参，从而提供给函数内部使用，我们可以把形参理解为变量

// 函数的参数  形参和实参个数不匹配

// 1. 形参个数过多， 会自动补充 undefined 
function sum(x, y) {  // 形参 
return x + y
}
console.log(sum(1, 2))  // 实参   3
console.log(sum(1))  // 实参  NaN  x = 1  y 没有给值默认值是 undefined
//  1 + undefined  = NaN

// 2. 实参个数过多，则多余的实参会被忽略
console.log(sum(1, 2, 3)) // 实参 3

// 3. 开发中提倡要保证实参和形参个数统一

在JavaScript中，实参的个数和形参的个数可以不一致

• 如果形参过多，会自动填上 undefined
• 如果实参过多，那么多余的实参会被忽略

逻辑中断

逻辑中断：存在于逻辑运算符 && 和 || 中，左边如果满足一定条件会中断代码执行，也称为逻辑短路

false && anything // 逻辑与 左边 false 则中断，如果左边为true，则返回右边代码的值

true || anything // 逻辑或 左边 true 则中断，如果左边为false，则返回右边代码的值

// 逻辑中断   && ||

// 1. 逻辑与中断：如果左边为假，则中断，如果左边为真，则返回右边的值
console.log(false && 1 + 2)  // false
console.log(0 && 1 + 2)  // 0
console.log('' && 1 + 2)  // ''
console.log(undefined && 1 + 2)  // undefined
console.log(true && 1 + 2)  // 3 此处不会发生逻辑中断
console.log(1 && 1 + 2)  // 3 此处不会发生逻辑中断

// 2. 逻辑或中断，如果左侧为真，则中断，如果左侧为假，则返回右边的值
console.log(true || 1 + 2) // true  发生了中断
console.log(1 || 1 + 2) // 1  发生了中断
console.log(false || 1 + 2) // 3 此处不会发生逻辑中断

// 3. 使用场景
// function sum(x, y) {
//   return x + y
// }
// console.log(sum(1, 2)) // 3
// console.log(sum()) // NaN

function sum(x, y) {   // x = undefined
  //  x = undefined || 0
  // x = 1 || 0
  x = x || 0
  y = y || 0
  return x + y
}
console.log(sum())  // 0
console.log(sum(1, 2)) // 3

函数默认参数

可以给形参设置默认值

注： 这个吗，这个默认值只会在缺少实参传递或者实参是 undefined 才会被执行

默认参数和逻辑中断使用场景区别：

1. 默认参数主要处理函数形参（处理参数要比逻辑中断更简单）
2. 逻辑中断除了参数还可以处理更多的需求

<script>
  // 默认参数: 给形参一个默认值
  // 1. 默认参数里面的值执行：
  // 1.1 没有实参传递过来 x = 0 
  // 1.2 有实参传递但是传递的是undefined  x = 0
  function sum(x = 0, y = 0) {
    return x + y
  }
  console.log(sum()) // 0
  console.log(sum(undefined, undefined))  // 0
  console.log(sum(1, 2))  // 3

  // 2. 默认参数和逻辑中断使用场景的区别：
  // 2.1 默认参数主要针对的是形参
  // 2.2 逻辑中断除了处理参数之外，还可以做更多
</script>

函数返回值

函数的本质是封装(包裹),函数体内的逻辑执行完毕后,函数外部如何获得函数内部的执行结果呢?

要想获得函数内部逻辑的执行结果,需要通过 return 关键字,将内部执行结果传递给函数外部,这个被传递到外部的结果就是返回值。

返回值：把处理结果返回给调用者

 // 函数返回值细节
    // 1. return 结束函数，return 后面的代码不会执行了， break退出循环或者switch
    // function sum(x, y) {
    //   return x + y
    //   console.log('我不会执行')
    // }
    // console.log(sum(1, 3))

    // 2. return 和被返回的结果不要换行
    // function sum(x, y) {
    //   return
    //   x + y
    // }
    // console.log(sum(1, 3))

    // 3. 如果函数没有return 则默认返回的是 undefined
    function fn() {

    }
    console.log(fn())  // undefined

总结：

• return 会立即结束当前函数，所以后面代码不会再被执行
• 在 return 关键字和被返回的表达式之间不允许使用换行符，否则内部执行相当于会自动补充分号
• 函数可以没有 return ，这种情况函数默认返回值为 undefined

作用域

作用域（scope）：变量或者值在代码中可用性的范围

作用：作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

全局作用域

作用于所有代码执行的环境（整个 script 标签内部）或者一个独立的 js 文件

处于全局作用域内的变量，称为全局变量

局部作用域

1. 函数作用域。作用于函数内的代码环境
2. 块级作用域。{} 大括号内部

处于局部作用域内的变量称为局部变量

注:

• 如果函数内部,变量没有声明,直接赋值，也当全局变量看，但是强烈不推荐
• 但是有一种情况，函数内部的形参可以看作是局部变量

变量的访问原则

访问原则：在能够访问到的情况下先局部，局部没有再找全局，总结：就近原则

匿名函数

函数可以分为具名函数和匿名函数

匿名函数：没有名字的函数，无法直接使用

函数表达式

将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们将这个称为函数表达式

//声明
let fn = function(){
    console.log('函数表达式')
}
//调用
fn()

总结：

• 其实函数也是一种数据类型
• 函数表达式必须先定义，后使用
• 函数的形参和实参使用跟具名函数一致

立即执行函数

IIFE (立即执行函数表达式) (Immediately Invoked Function Expression)

场景介绍: 避免全局变量之间的污染

**注意：**多个立即执行函数要用 ; 隔开，要不然会报错

(function(){ xxx  })();
(function(){xxxx}());

练一下吧

需求：用户输入秒数，可以自动转换为时分秒

分析：

①：用户弹窗输入 总秒数

②：封装函数 getTime, 计算时分秒，注意：里面包含数字补0

③：打印输出

计算公式：计算时分秒

小时： h = parseInt(总秒数 / 60 / 60 %24)

分钟： m = parseInt(总秒数 / 60 % 60 )

秒数: s = parseInt(总秒数 % 60)

完整代码：

<!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>综合案例-转换时间案例</title>
  <style>
    .box {
      position: relative;
      width: 190px;
      height: 260px;
      color: #fff;
      background: #e83632 url(./images/bg.png) 50%/contain no-repeat;
    }

    .title {
      width: 100%;
      text-align: center;
      font-size: 30px;
      font-weight: 700;
      padding-top: 31px;
    }

    .count {
      margin-top: 90px;
      font-size: 14px;
      text-align: center;
    }

    .timer {
      margin-left: auto;
      margin-right: auto;
      width: 130px;
      height: 30px;
      margin-top: 10px;
      display: block;
    }

    .timer span {
      position: relative;
      float: left;
      width: 30px;
      height: 30px;
      text-align: center;
      background-color: #2f3430;
      margin-right: 20px;
      color: white;
      font-size: 20px;
    }

    .timer span:nth-child(-n+2)::after {
      content: ":";
      display: block;
      position: absolute;
      right: -20px;
      font-weight: bolder;
      font-size: 18px;
      width: 20px;
      height: 100%;
      top: 0;
    }

    .timer span:last-child {
      margin-right: 0;
    }
  </style>
</head>

<body>
  <!-- <div class="box">
    <div class="title">计算时间</div>
    <div>
      <div class="count">转换为时分秒</div>
      <div class="timer">
        <span class="hour">01</span>
        <span class="minute">22</span>
        <span class="second">58</span>
      </div>
    </div>
  </div> -->

  <script>
    // 转换时分秒案例 
    // 计算公式：计算时分秒
    // 小时：  h = parseInt(总秒数 / 60 / 60 % 24)
    // 分钟：  m = parseInt(总秒数 / 60 % 60)
    // 秒数:   s = parseInt(总秒数 % 60) 

    // 1. 用户输入总的秒数
    let totalSeconds = +prompt('请您输入总的秒数:')

    // 2. 封装函数 getTime，把总的秒数转换为时分秒，注意记得数字补0 哦
    function getTime(t = 0) {
      // 转换小时
      let h = parseInt(t / 60 / 60 % 24)
      // 转换分钟
      let m = parseInt(t / 60 % 60)
      // 转换秒数
      let s = parseInt(t % 60)
      // 数字补0
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      console.log(h, m, s)
      return `
        <span class="hour">${h}</span>
        <span class="minute">${m}</span>
        <span class="second">${s}</span>
      `
    }
    let str = getTime(totalSeconds) // 实参
    console.log(str)
    // 3. 页面打印输出
    document.write(`
       <div class="box">
        <div class="title">计算时间</div>
        <div>
          <div class="count">转换为时分秒</div>
          <div class="timer">
            ${str}
          </div>
        </div>
      </div>
    `)
  </script>
</body>

</html>

在能够访问到的情况下 先局部 局部没有在找全局

对象

对象（Object）：JavaScript 里的一种数据类型（引用类型），也是用于存储数据的

好处：可以用来详细的描述某个事务，使用 键值对 形式存储语义更明了

特点：对象数据是无序的，数组有序的

对象基本

对象有属性和方法组成

对象属性

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

1. 属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔

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

3. 属性就是依据在对象上的变量（对象外是变量，对象内是属性）

定义对象属性

//对象也是一种数据类型，保存数据同时可以更直观的描述事物
//定义对象属性
let girl = {
    sex:'女'，
    age:18,
    uname:'小红',
    weight:50
}

访问对象属性

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

//对象也是一种数据类型，保存数据同时可以更直观的描述事物
//定义对象属性
let girl = {
    sex:'女'，
    age:18,
    uname:'小红',
    weight:50
}
//访问对象属性    对象.属性
console.log(girl.age) //18

对象方法

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

方法是由方法名和函数两部分构成，它们之间使用 : 分隔

多个属性之间使用英文 , 分隔

方法是依附在对象中的函数（对象外是函数、对象内是方法）

定义对象方法

// let fn = function() {}
// 对象方法
// 1. 定义对象方法
let pig = {
  uname: '佩奇',
  sing: function () {
    console.log('唱歌')
  },
  dance: function () {
    console.log('跳舞')
  }
}
console.log(pig)

调用对象方法

声明对象，并添加了若干方法后，可以使用，调用对象中函数，称之为方法调用

// let fn = function() {}
// 对象方法
// 1. 定义对象方法
let pig = {
  uname: '佩奇',
  sing: function () {
    console.log('唱歌')
  },
  dance: function () {
    console.log('跳舞')
  },
  sum: function (x, y) {  // 2
    // console.log(x + y)
    return x + y
  }
}
console.log(pig)

// 2. 调用对象方法
pig.sing() // 唱歌
pig.dance()  // 跳舞

// 3. 方法可以传递参数也可以有返回值，跟函数使用基本类似
let re = pig.sum(1, 2) // 1 实参
console.log(re)

注：无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的

操作对象

对象本质是无序的数据集合，操作对象数据无非就是 增、删、改、差

·

  // 操作对象：对数据 查、增、改、删
  let pig = {
    uname: '佩奇',
    sing: function () {
      console.log('唱歌')
    }
  }

// 1. 查： 对象.属性 对象.方法
console.log(pig.uname)  // 得到属性值
pig.sing()

// 2. 增：对象.新属性 = 新值   对象.新方法 = function(){}
pig.age = 4
pig.dance = function () {
  console.log('跳舞')
}
console.log(pig)

// 3. 改：对象.属性 = 新值  对象.方法 = 新匿名函数
pig.uname = '小猪佩奇'
pig.sing = function () {
  console.log('哼哼哼！！')
}
console.log(pig)

// 4. 删： 了解，因为我们很少对对象里面的数据做删除操作  delete
delete pig.age
delete pig.dance
console.log(pig)

查找属性的另外写法

对于多词属性比如中横线分隔的属性，点操作就不能用了

可以采取：对象[‘属性’] 方法，单引号和双引号都阔以，当然也可以用于其他正常属性

// 查询属性的另外写法  对象['属性'] 这个属性必须加引号
let pig = {
    'pig-name': '佩奇',
    age: 4
  }
// console.log(pig.pig - name)  // NaN
console.log(pig['pig-name']) // 佩奇
console.log(pig['age']) // 4    === pig.age 

总结：多词属性或者需要解析变量的时候使用 [ ] 语法，其余的直接使用点语法

遍历对象

for 遍历对象的问题：

• 对象没有长度length，而且是无序的

所以我们要利用 for in 遍历对象

语法:

for (let 变量 in 对象) {
  console.log(变量) // 属性名
  console.log(对象[变量]) // 属性值
}

1. for in语法中的 k 是一个变量, 在循环的过程中依次代表对象的属性名
2. 由于 k 是变量, 所以必须使用 [ ] 语法解析
3. 一定记住： k 是获得对象的属性名， 对象名[k] 是获得 属性值
4. 一般不用这种方式遍历数组、主要是用来遍历对象

// 遍历对象
let pig = {
  sex: '女',
  age: 4,
  uname: '佩奇',
  weight: 12.6,
}

// for (let key in pig) {
//   console.log(key)  // key 是属性  
//   console.log(pig[key]) // 对象[变量] 是值
// }

for (let key in pig) {
  console.log(key)  // key 是属性   对象.属性
  // console.log(pig.key)   // pig.key  undefined  因为key是个变量不是属性
  // key  'sex'  'age'    对象[key]  对象['sex']  对象['age']
  console.log(pig[key])
}


// 注意：数组遍历用传统for， for in 主要用来遍历对象
let arr = ['red', 'green', 'pink']
for (let k in arr) {
  console.log(k)// 得到字符串类型的索引号
}

for … in … 循环出的是key

for … of … 循环出的是 value （ES6 新引入的特性）

内置对象

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

回想一下我们曾经使用过的 console.log，console其实就是 JavaScript 中内置的对象，该对象中存在一个方法叫 log，然后调用 log 这个方法，即 console.log()

除了 console 对象外，JavaScritp 还有其它的内置的对象

Math

Math 是 JavaScript 中内置的对象，称为数学对象，这个对象下即包含了属性，也包含了许多的方法。

属性/方法	作用	说明
PI	圆周率	Math.PI 属性，返回圆周率
max	找最大值	Math.max(8, 3, 1) 方法，返回 8
min	找最小值	Math.min(8, 3, 1) 方法，返回 1
abs	绝对值	Math.abs(-1) 方法，返回 1
ceil	向上取整	Math.ceil(3.1) 方法，返回 4
floor	向下取整	Math.floor(3.8) 方法，返回 3
round	四舍五入取整	Math.round(3.8) 方法，返回 4， 遇到.5则舍入到相邻的在正无穷（+∞）方向上的整数

// 内置对象Math 
// 1. PI 属性 圆周率
console.log(Math.PI)

// 2. max  方法 找最大值
console.log(Math.max(8, 4, 2)) // 8

// 3. min  方法 找最小值
console.log(Math.min(8, 4, 2)) // 2

// 4. abs 方法 取绝对值 
console.log(Math.abs(-1))  // 1

// 5. ceil 方法 向上取整   ceil 天花板   往大了取
console.log(Math.ceil(1.1)) // 2
console.log(Math.ceil(1.5)) // 2
console.log(Math.ceil(1.8)) // 2
console.log(Math.ceil(-1.1)) //  -1
console.log(Math.ceil(-1.5)) //  -1
console.log(Math.ceil(-1.8)) //  -1

// 6. floor 方法 向下取整  floor 地板  往小了取
console.log(Math.floor(1.1)) // 1
console.log(Math.floor(1.5)) // 1
console.log(Math.floor(1.8)) // 1
console.log(Math.floor(-1.1)) //  -2
console.log(Math.floor(-1.5)) //  -2
console.log(Math.floor(-1.8)) //  -2

// 7. round 方法 四舍五入取整 
console.log(Math.round(1.1)) // 1
console.log(Math.round(1.5)) // 2
console.log(Math.round(1.8)) // 2
console.log(Math.round(-1.1)) // -1
console.log(Math.round(-1.8)) // -2
console.log(Math.round(-1.5)) // -1

数学对象提供了比较多的方法，这里不要求强记，通过演示数学对象的使用，加深对对象的理解。

随机数random

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

如何生成0-10的随机整数呢？

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

如何生成5-15的随机整数？

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

如何生成N-M之间的随机整数

Math.floor(Math.random() * (M - N + 1)) + N
Math.floor(Math.random() * (差值 + 1)) + 最小值

// 1. Math随机数  Math.random() 
// 1.1 随机的小数 0 ~1 之间
// 1.2 能取到0，但是取不到1 [0, 1)
// console.log(Math.random())

// 2. 取 0 ~ 10 之间的一个随机整数
// Math.random() * (10 + 1)
// (0 ~ 0.99999) * 11
// 0 ~ 10.99999
// Math.floor(Math.random() * (10 + 1))
// console.log(Math.floor(Math.random() * (10 + 1)))

// 3. 取 5 ~ 15 之间的一个随机整数
// Math.floor(Math.random() * (10 + 1))  0 ~ 10 
// Math.floor(Math.random() * (10 + 1)) + 5  5 ~ 15 
// console.log(Math.floor(Math.random() * (10 + 1)) + 5)

// 4. 取 n ~ m 之间的一个随机整数  4 ~ 12 
// Math.floor(Math.random() * (差值 + 1)) + 最小值
console.log(Math.floor(Math.random() * (8 + 1)) + 4)

数据存储

内存中堆栈空间分配区别

栈: 优点访问速度快，基本数据类型存放到栈里面

**堆:**优点存储容量大，引用数据类型存放到堆里面

变量声明

建议： const 优先，尽量使用const，原因是：

• 很多变量声明的时候明确不会被更改了，为了安全性，那为什么不用 const 呢？
• 实际开发中也是，比如 React、Vue，基本 const 声明

总结：

有了变量先给const，如果发现它后面是要被修改的，再改为let

专业术语

术语	解释	举例
关键字	在JavaScript中有特殊意义的词汇	let、var、function、if、else、switch、case、break
保留字	在目前的JavaScript中没意义，但未来可能会具有特殊意义的词汇	int、short、long、char
标识（标识符）	变量名、函数名的另一种叫法	无
表达式	可以被求值的代码，一般配合运算符出现	10 + 3、age >= 18
语句	一段可执行的代码	if () for()

vx💌VueMaker

​