JavaScript基础

原创于 2025-10-07 11:04:30 发布 · 899 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

JavaScript 基础

介绍

一、JavaScript 是什么

1.是什么？

是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

2.作用（做什么？）

网页特效 (监听用户的一些行为让网页作出对应的反馈)
表单验证 (针对表单数据的合法性进行判断)
数据交互 (获取后台的数据, 渲染到前端)
服务端编程 (node.js)

3.组成有什么？

ECMAScript:规定了js基础语法核心知识。
- 比如：变量、分支语句、循环语句、对象等等
Web APIs :
- DOM
  - 操作文档，比如对页面元素进行移动、大小、添加删除等操作
- BOM
  - 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等

权威网站： MDN

二、书写位置

1.内部js

直接写在html文件里，用script标签包住

规范：script标签写在</body>上面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        alert("hello world");
    </script>
</body>
</html>

我们将 <script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略

2.外部 JavaScript

代码写在以.js结尾的文件里

语法：通过script标签，引入到html页面中。

script标签中间无需写代码，否则会被忽略！

外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./test.js"></script>
</body>
</html>

3.内联 JavaScript

代码写在标签内部语法：多一句没有，少一句不行，用最短时间，教会最实用的技术！

后面vue框架会用这种模式

小练习：

请用内部和外部两种形式分别实现页面弹出：“我爱学习我爱实践我要成功”

三、注释

单行注释

使用 // 注释单行代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 注释</title>
</head>
<body>
  
  <script>
    // 这种是单行注释的语法
    // 一次只能注释一行
    // 可以重复注释
    document.write('我爱学习学习前端技术！');
  </script>
</body>
</html>

多行注释

使用 /* */ 注释多行代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 注释</title>
</head>
<body>
  
  <script>
    /* 这种的是多行注释的语法 */
    /*
        更常见的多行注释是这种写法
        在些可以任意换行
        多少行都可以
      */
    document.write('我爱学习前端技术！')
  </script>
</body>
</html>

注：编辑器中单行注释的快捷键为 ctrl + /

多行注释快捷键：shift+alt+a

四、结束符

在 JavaScript 中 ; 代表一段代码的结束，多数情况下可以省略 ; 使用回车（enter）替代。

五、输入输出语法

什么是语法：

人和计算机打交道的规则约定
我们要按照这个规则去写
比如：你今天学习了吗？
我们程序员需要操控计算机，要计算机能看懂

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。

输出

JavaScript 可以接收用户的输入，然后再将输入的结果输出：

alert()、document.wirte()

以数字为例，向 alert() 或 document.write()输入任意数字，他都会以弹窗形式展示（输出）给用户。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 页面弹出警示对话框
        alert("hello world");
        // 向页面中输入内容
        document.write("<h1>我喜欢美女</h1>");
        // 打印到控制台
        console.log("怎么样呢？");
    </script>
</body>
</html>

输入

向 prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 输入语句
        prompt("请输入你的姓名：")
    </script>
</body>
</html>

小练习：

浏览器中弹出对话框：

1.你好 JS~

2.页面中打印输出： JavaScript 我来了!

3.页面控制台输出：它会魔法吧~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        alert('你好JS~');
        document.write('JavaScript 我来了!');
        console.log('它会魔法吧~');
    </script>
</body>
</html>

六、字面量

在计算机科学中，字面量是在计算机中描述事/物的

比如：

工资为10000，此时10000就是数字字面量
‘学生要好好学习’就是字符串字面量
[] 就是数组字面量
{} 就是对象字面量

七、变量

1.是什么

白话：变量就是一个装东西的盒子
通俗：变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆。

变量是容器而不是数据

2.变量基本使用

2.1 声明变量

要想使用变量，首先需要创建变量（也称为声明变量或者定义变量）

声明变量有两部分构成：声明关键字、变量名（标识）
let 即关键字 (let: 允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义）变量的词语

2.2 变量赋值

定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。

简单点，也可以声明变量的时候直接完成赋值操作,这种操作也称为变量初始化。

小练习：

声明两个变量，一个是姓名（username)为蜡笔小新，年龄（age)为8岁，并在控制台依次打印

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let username = '蜡笔小新';
        let age = 8;
        console.log(username, age);
    </script>
</body>
</html>

3. 更新变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它。

let age = 10;
// 变量里面的数据发生变化更改为20
age = 20;

4.声明多个变量

let age = 8,username = '蜡笔小新';

看上去代码长度更短，但并不推荐这样。为了更好的可读性，请一行只声明一个变量。

小练习

1.浏览器中弹出对话框：请输入姓名，

页面中输出：刚才输入的姓名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let username = prompt("请输入用户名");
        document.write("用户名是：" + username);
    </script>
</body>
</html>

2.交换变量值

有2个变量： num1 里面放的是 10， num2 里面放的是20

最后变为 num1 里面放的是 20 ， num2 里面放的是 10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 交换两个变量的值
        let num1 = 10;
        let num2 = 20;
        // 1. 定义一个临时变量
        let temp = num1;
        // 2. 把第一个变量的值赋给临时变量
        num1 = num2;
        // 3. 把第二个变量的值赋给第一个变量
        num2 = temp;
        // 4. 把临时变量的值赋给第二个变量
        console.log(num1,num2);

    </script>
</body>
</html>

5. 变量的本质

内存：计算机中存储数据的地方，相当于一个空间

变量本质：是程序在内存中申请的一块用来存放数据的小空间

6.变量命名规则与规范

1.规则：

不能用关键字
- 关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等
只能用下划线、字母、数字、$组成，且数字不能开头

字母严格区分大小写，如 Age 和 age 是不同的变量

2.规范：

起名要有意义
遵守小驼峰命名法
- 第一个单词首字母小写，后面每个单词首字母大写。例：userName

7.let和var区别

以下是使用 let 时的注意事项：

允许声明和赋值同时进行
不允许重复声明
允许同时声明多个变量并赋值
JavaScript 中内置的一些关键字不能被当做变量名

以下是使用 var 时的注意事项：

1.允许声明和赋值同时进行

2.允许重复声明

3.允许同时声明多个变量并赋值

num = 2;
console.log(num);
var num;

var 可以打印出来num,但是如果是let就不可以

大部分情况使用 let 和 var 区别不大，但是 let 相较 var 更严谨。

8.数组

好处：单个变量里可以传多个数据

1 基本使用

声明语法：

数组是按顺序保存，所以每个数据都有自己的编号
编号从0开始
在数组中，数据的编号也叫索引或下标
数组可以存储任意类型的数据

取值语法：

通过下标取数据
取出来是什么类型的，就根据这种类型特点来访问

let arr = [1,2,3,4,5,6,7,8,9,10]
console.log(arr[5])

打印结果是：6

元素：数组中保存的每个数据都叫数组元素
下标：数组中数据的编号
长度：数组中数据的个数，通过数组的length属性获得

let arr = [1,2,3,4,5,6,7,8,9,10]
console.log(arr.length);

长度为10

9.常量

使用const 声明的变量称为”常量“，当某个变量永远不会改变的时候，就可以使用const来声明，而不是let

常量不允许重新赋值,声明的时候必须赋值（初始化）

小技巧：不需要重新赋值的数据使用const

let 现在实际开发变量声明方式。
var 以前的声明变量的方式，会有很多问题。
const 类似于 let ，但是变量的值无法被修改。

10.数据类型

1 基本数据类型

1.1 number 数字型

JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认

Java是强数据类型例如 int a = 3 必须是整数

数字可以有很多操作，比如，乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）

+：求和
-：求差
*：求积
/：求商
%：取模（取余数）,经常判断某个数字是否被整除

使用多个运算符编写程序时，会按着某种顺序先后执行，我们称为优先级。

JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行。

乘、除、取余优先级相同

加、减优先级相同

乘、除、取余优先级大于加、减

使用 () 可以提升优先级

总结：先乘除后加减，有括号先算括号里面的

小练习：

对话框中输入圆的半径，算出圆的面积并显示到页面

const pi = 3.14;
let r = prompt('请输入圆的半径：');
document.write('圆的面积是：' + pi * r * r);

NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果 NaN 是粘性的。任何对 NaN 的操作都会返回 NaN,包括console.log(NaN == NaN),返回的是false,不会是true

1.2 string 字符串型

通过单引号（ ''）、双引号（ ""）或反引号( ` ) 包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号

无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
必要时可以使用转义符 \，输出单引号或双引号

字符串拼接： + 运算符可以实现字符串的拼接。

let name1 = "张三";
let name2 = "李四";
console.log(name1 + name2);

打印结果是张三李四

let age = 19;
console.log('我今年' + age + '岁');

打印结果是我今年19岁

模版字符串

语法：

`` (反引号)

在英文输入模式下按键盘的tab键上方那个键（1左边那个键）

内容拼接变量时，用 ${ } 包住变量

let name = prompt('请输入姓名');
let age = prompt('请输入年龄');
document.write(`我叫${name}今年${age}岁`);

boolean 布尔型

表示肯定或否定时在计算机中对应的是布尔类型数据。

它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。

let isCool = true;
document.write(typeof isCool) // 结果为 boolean

undefined 未定义型

未定义是比较特殊的类型，只有一个值 undefined。

只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

 console.log(undefined+1);// NaN

null 空类型

JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

null 和 undefined 区别：

undefined 表示没有赋值
null 表示赋值了，但是内容为空

2 引用数据类型

object 对象

function函数

array数组

11.控制台输出语句和检测数据类型

1 控制台输出语句

console.log();

数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色

2 通过 typeof 关键字检测数据类型

typeof 运算符可以返回被检测的数据类型。

它支持两种语法形式：

作为运算符： typeof x （常用的写法）
函数形式： typeof(x) 换言之，有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法

let num = 10;
console.log(typeof num);// number
let str = 'hello';
console.log(typeof str);//string
let flag = true;
console.log(typeof flag);//boolean
let obj = {};
console.log(typeof obj);//object
let arr = [];
console.log(typeof arr);//object
let n = null;
console.log(typeof n);//object
let a = prompt('请输入一个数字');
console.log(typeof a);// string

13 类型转换

JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

类型转换实际上是把一种数据类型的变量转换成我们需要的数据类型。

1 隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

console.log('蜡笔小新'+ 888);// 蜡笔小新888  888会自动转换为字符串
console.log(2-'2');// 0   自动转换为数字形式
console.log(10 / '5');// 2
console.log(+'111');// 111

规则：

+ 号两边只要有一个是字符串，都会把另外一个转成字符串
除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型
+号作为正号解析可以转换成数字型
任何数据和字符串相加结果都是字符串

2 显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。自己写代码告诉系统该转成什么类型

2.1 转换为数字型

let salary = +prompt("请输入您的工资");
console.log(salary);// 10000数字类型
let num = Number('10000');
console.log(num);// 10000数字类型
let num1 = parseInt('88.8');
console.log(num1);// 88 数字类型   parseInt只保留整数,不会四舍五入
console.log(parseInt('12px'));// 12 只保留数字，且为数字类型
let num2 = parseFloat('88.8');
console.log(num2);// 88.8 数字类型   parseFloat保留小数

小练习：

输入两次数据，并计算结果并打印到页面中

let num1 = prompt("请输入第一个数");
let num2 = prompt("请输入第二个数");
let sum = parseFloat(num1) + parseFloat(num2);
alert(`两数之和为：${sum}`);

2.2 转换为字符型

console.log(typeof String('111'));// string
console.log(typeof toString('2'));// string

综合训练

用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息

<!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>
        h1 {
            text-align: center;
        }
        table{
            margin:0 auto;
            border-collapse: collapse;/*合并相邻边框*/
            text-align: center;
            width: 500px;
            height:50px ;
        }
        th,td{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <h1>订单确认</h1>
    <script>
        let price = parseFloat(prompt("请输入商品价格"));
        let num = Number(prompt("请输入商品数量"));
        let address = prompt("请输入收货地址");
        let total = price * num;
        document.write(`
        <table>
            <tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>总价</th>
                <th>收货地址</th>
            </tr>
            <tr>
                <td>vivox200promini</td>
                <td>${price}元</td>
                <td>${num}个</td>
                <td>${total}元</td>
                <td>${address}</td>
            </tr>
        </table>
        `)

    </script>
</body>
</html>

运算符

1 算术运算符

数字是用来计算的，比如：乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。

算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等

运算符	作用
+	求和
-	求差
*	求积
/	求商
%	取模（取余数），开发中经常用于作为某个数字是否被整除

注意：在计算失败时，显示的结果是 NaN （not a number）

2 赋值运算符

赋值运算符：对变量进行赋值的运算符

= 将等号右边的值赋予给左边, 要求左边必须是一个容器

运算符	作用
+=	加法赋值
-+	减法赋值
*=	乘法赋值
/=	除法赋值
%=	取余赋值

let num = 1;
num += 1;// 相当于num = num+1
console.log(num);// 结果为2

其他赋值运算符同理

3 一元运算符

符号	作用	说明
++	自增	变量自身的值加1，例如: x++
--	自减	变量自身的值减1，例如: x--

++在前和++在后在单独使用时二者并没有差别，而且一般开发中我们都是独立使用
++在后（后缀式）我们会使用更多

注意：

只有变量能够使用自增和自减运算符

++、-- 可以在变量前面也可以在变量后面，比如: x++ 或者 ++x

let i = 1
console.log(i++ + ++i + i)// 1+3+3=7

4 比较运算符

使用场景：比较两个数据大小、是否相等，根据比较结果返回一个布尔值（true / false）

运算符	作用
>	左边是否大于右边
<	左边是否小于右边
>=	左边是否大于或等于右边
<=	左边是否小于或等于右边
===	左右两边是否`类型`和`值`都相等（重点）
==	左右两边`值`是否相等
!=	左右值不相等
!==	左右两边是否不全等

console.log(3=='3');//true
console.log(3==='3');//false
console.log(3>=3);//true
console.log(3!=3);//false
console.log(3!=='3');//true
console.log(3!==3);//false

开发中判断是否相等，强烈推荐 ===

字符串比较，是比较的字符对应的ASCII码

从左往右依次比较

如果第一位一样再比较第二位，以此类推

NaN不等于任何值，包括它本身

涉及到"NaN“ 都是false

尽量不要比较小数，因为小数有精度问题

5 逻辑运算符

使用场景：可以把多个布尔值放到一起运算，最终返回一个布尔值

符号	名称	日常读法	特点	口诀
&&	逻辑与	并且	符号两边有一个假的结果为假	一假则假
\|\|	逻辑或	或者	符号两边有一个真的结果为真	一真则真
!	逻辑非	取反	true变false false变true	真变假，假变真

A	B	A && B	A \|\| B	!A
false	false	false	false	true
false	true	false	true	true
true	false	false	true	false
true	true	true	true	false

6 运算符优先级

逻辑运算符优先级：！> && > ||

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ -- ！
3	算术运算符	先*/%后+-
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先&&后\|\|
7	赋值运算符	=
8	逗号运算符	,

一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高

语句

1 表达式和语句

表达式：是可以被求值的代码，JavaScript 引擎会将其计算出一个结果。例如x=7

语句：是一段可以执行的代码。例如 if语句 for 循环语句等等

表达式和语句的区别

表达式：因为表达式可被求值，所以它可以写在赋值语句的右侧。

表达式
- num = 3 + 4

语句：而语句不一定有值，所以比如 alert() for和break 等语句就不能被用于赋值。

语句
- alert() 弹出对话框 console.log() 控制台打印输出某些情况，也可以把表达式理解为表达式语句，因为它是在计算结果，但不是必须的成分 (例如continue语句 )

2 分支语句

程序三大流程控制语句

以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构
有的时候要根据条件选择执行代码，这种就叫分支结构
某段代码被重复执行，就叫循环结构

分支语句可以根据条件判定真假，来选择性的执行想要的代码

分支语句包含：

if分支语句（重点）
三元运算符
switch语句

单分支

if(条件){
    满足条件时的代码
}

括号内的条件为true时，进入大括号里执行代码
小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
如果大括号只有一个语句，大括号可以省略

双分支

如果有两个条件的时候，可以使用 if else 双分支语句

if (条件表达式){
  // 满足条件要执行的语句
} else {
  // 不满足条件要执行的语句
}

练习：能被4整除但不能被100整除，或者能被400整除的年份是闰年，否则都是平年

let year = Number(prompt("请输入一个数字"));
if(year % 4 === 0 && year %100!==0 || year % 400 === 0){
    alert(`${year}是闰年`);
}else{
    alert(`${year}是平年`);
}

if 多分支语句

使用场景：适合于有多个条件的时候

练习：输入成绩，判断符合哪个阶段

let score = 75;
if(score >= 90){
    console.log("优秀");
}else if(score >= 80){
    console.log("良好");
}else if(score >= 70){
    console.log("中等");
}else if(score >= 60){
    console.log("及格");
}else{
    console.log("不及格");
}

三元运算符（三元表达式）

使用场景：一些简单的双分支，可以使用三元运算符（三元表达式），写起来比 if else双分支更简单

符号：? 与 : 配合使用

语法：

条件 ? 表达式1 ： 表达式2

console.log(5>6 ? true : false);// false

switch语句

使用场景：适合于有多个条件的时候，也属于分支语句，大部分情况下和 if多分支语句功能相同

注意：

switch case语句一般用于等值判断, if适合于区间判断
switchcase一般需要配合break关键字使用没有break会造成case穿透
if 多分支语句开发要比switch更重要，使用也更多

switch(8){
    case 1:
        console.log(1);
        break;
    case 2:
        console.log(2);
        break;
    default:
        console.log(3);
}// 3

if 多分支语句和 switch的区别：

共同点
- 都能实现多分支选择，多选1
- 大部分情况下可以互换
区别：
- switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断(大于，等于某个范围)。
- switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次
- switch 一定要注意必须是 === 全等，一定注意数据类型，同时注意break否则会有穿透效果
- 结论：
  - 当分支比较少时，if…else语句执行效率高。
  - 当分支比较多时，switch语句执行效率高，而且结构更清晰。

小练习：

用户输入2个数字，然后输入 + - * / 任何一个，可以计算结果

let num1 = + prompt("请输入一个数字");
let num2 = + prompt("请输入一个数字");
let sign = prompt("请输入一个运算符(+ - * /)");
switch(sign){
    case "+":
        console.log(num1 + num2);
        break;
    case "-":
        console.log(num1 - num2);
        break;
    case "*":
        console.log(num1 * num2);
        break;
    case "/":
        console.log(num1 / num2);
    default:
        console.log('输入错误');
}

3 循环结构

3.1 断点调试

作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug

浏览器打开调试界面

按F12打开开发者工具
点到源代码一栏（ sources ）
选择代码文件

断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来,打断点后一定要刷新一下

3.2 while 循环

while : 在…. 期间

所以 while循环就是在满足条件期间，重复执行某些代码。

语法：

while (条件表达式) {
    要重复执行的代码// 循环体    
}

循环三要素：

1.初始值（经常用变量）

2.终止条件（没有终止条件，循环一直执行，造成死循环）

3.变量的变化量（一般是自增或者自减）

let i = 1;
while (i<=5){
    console.log(i);
    i++;
}// 1 2 3 4 5

练习：

1.计算从1加到100的总和并输出

let i = 1;
sum = 0;
while(i<=100){
    sum += i;
    i++;
}
console.log(sum);//5050

2.计算1-100之间的所有偶数和

let i = 1;
sum = 0;
while(i<=100){
    // 选择偶数
    if(i%2==0){
        sum += i;
        i++;
    }
}
console.log(sum);// 2550

循环退出

循环结束：

break：退出循环多一句没有，少一句不行，用最短时间，教会最实用的技术！
continue：结束本次循环，继续下次循环

区别：

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue
break 退出整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用

练习：ATM存取款机

let money = 10000;
while(true){
    let re = prompt(`
        请选择ATM操作：
        1.存款
        2.取款
        3.查询余额
        4.退出
    `);
    if(re == 4){
        break;
    };
    switch(re){
        case '1':
            let cunMoney = parseFloat(prompt('请输入存款金额'));
            money += cunMoney;
            alert('存款成功');
            break;
        case '2':
            let quMoney = parseFloat(prompt('请输入取款金额'));
            if(quMoney > money){
                alert('余额不足');
            }else{
                money -= quMoney;
                alert('取款成功');
            }
            break;
        case '3':
            alert(`您的余额为：${money}`);
            break;
        default:
            alert('请输入有效的选项（1-4）');
            break;
    }
}

3.3 for循环语句

for语句的基本使用

1.实现循环的 3 要素

for(起始值; 终止条件; 变化量) {
  // 要重复执行的代码
}

2.变化量和死循环，for 循环和 while 一样，如果不合理设置增量和终止条件，便会产生死循环。

3.跳出和终止循环

continue 结束本次循环，继续下一次循环
break 退出结束整个循环

练习：

1.求1~100内所有偶数和

let sum = 0;
for(let i = 0;i<=100;i++){
    if(i%2 == 0){
        sum += i;
    }
}
console.log(sum)// 2550

2.九九乘法表

<!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>
        div{
            display: inline-block;
            width: 80px;
            height: 30px;
            border: 1px solid rgb(27, 200, 27);
            text-align: center;
            line-height: 30px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <script>
        for(let i =1;i<=9;i++){
            for(let j = 1;j<=i;j++){
                document.write(`<div>${j} x ${i} = ${i*j}</div>`);
            };
            document.write(`<br>`);
        }

    </script>
</body>
</html>

数组

数组：是一种可以按顺序保存数据的数据类型

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

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

['小米', '大米', '红米']
	0     1       2

数组中数据的个数，通过数组的length属性获得

let classes = ['小米', '大米', '红米'];
console.log(classes.length);// 3

用循环把数组中每个元素都访问到,一般会用for循环遍历

let classes = ['小米', '大米', '红米', '黑米', '白米'];
for(let i = 0;i<classes.length;i++){
    console.log(classes[i]);
}

数组求最大最小值

// 求最大值和最小值
var arr = [1,2,3,4,5,6,7,8,9,10];
var max = arr[0];
var min = arr[0];
for(var i = 0; i < arr.length; i++){
    if(arr[i] > max){
        max = arr[i];
    }
    if(arr[i] < min){
        min = arr[i];
    }
}
console.log(max,min);// 10  1

操作数组

数组做为对象数据类型，有 length 属性可以查询数组长度，数组[下标]方式可以查询下标对应的值

let arr = ['迪丽热巴','金晨','王俊凯','王安宇'];
// 修改数组
arr[2] = '周杰伦' ;
console.log(arr)// ['迪丽热巴', '金晨', '周杰伦', '王安宇']

增

1 push

动态向数组的尾部添加一个单元

let arr = ['迪丽热巴','金晨'];
arr.push('杨幂');
console.log(arr);// ['迪丽热巴', '金晨', '杨幂']

2 unshift

动态向数组头部添加一个单元

let arr = ['迪丽热巴','金晨'];
arr.unshift('杨幂');
console.log(arr);// ['杨幂', '迪丽热巴', '金晨']

小练习：选择[4,46,7,24,88,9]中小于10的存放在新数组中

let arr = [4,46,7,24,88,9];
// 声明新的空数组
let arr1 = [];
for(let i = 0; i < arr.length; i++){
    if(arr[i]<10){
        arr1.push(arr[i]);
    }
}
console.log(arr1);// [4, 7, 9]

删

1 pop

删除最后一个单元,不带参数，返回值是删除的元素

let arr = [4,46,7,24,88,9];
arr.pop();
console.log(arr);// [4,46,7,24,88]

2 shift

删除第一个单元,不带参数，返回值是删除的元素

let arr = [4,46,7,24,88,9];
arr.shift();
console.log(arr);// [46, 7, 24, 88, 9]

3 splice

动态删除任意单元,开发很常用，可以删除指定商品

语法：

arr.splice(起始位置,删除几个元素)

let arr = [4,46,7,24,88,9];
arr.splice(2,2);
console.log(arr);// [4, 46, 88, 9]

小练习：

1.实现动态季度数据

<!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>
        .box{
            display: flex;
            width: 800px;
            height:300px;
            margin: 0 auto;
            border-left: 1px solid #12c2f3;
            border-bottom: 1px solid #12c2f3;
            align-items: flex-end;
            justify-content: space-around;
        }
        .box>div{
            display: flex;
            width: 50px;
            background-color: #12c2f3;
            flex-direction: column;
            justify-content: space-between;
        }
        .box div span{
            text-align: center;
            margin-top: -30px;
        }
        .box div h5{
            margin-bottom: -40px;
            width: 70px;
        }
    </style>
</head>
<body>
    <!-- <div class="box">
        <div style="height:100px">
            <span>100</span>
            <h5>第一季度</h5>
        </div>
        <div style="height:134px">
            <span>134</span>
            <h5>第二季度</h5>
        </div>
        <div style="height:199px">
            <span>199</span>
            <h5>第三季度</h5>
        </div>
        <div style="height:266px">
            <span>266</span>
            <h5>第四季度</h5>
        </div>

    </div> -->
    <script>
        let arr = [];
        for(let i = 1; i <= 4; i++){
            arr.push(prompt(`请输入第${i}季度的数据`))
        };
        // 开头
        document.write(`<div class="box">`)
        for(let i = 0; i < arr.length; i++){
            document.write(`
                <div style="height:${arr[i]}px">
                    <span>${arr[i]}</span>
                    <h5>第${i+1}季度</h5>
                </div>
            `)
        }
        // 结尾
        document.write(`</div>`)

    </script>
</body>
</html>

2.实现冒泡排序

let arr = [5,4,3,2,1];
// 5个数据一共需要走四趟
for(let i = 0;i<arr.length-1;i++){
    // 第一趟交换4次，第二趟交换3次，第三趟交换2次，第四趟交换1次
    for(let j = 0;j<arr.length-i-1;j++){
        if(arr[j]<arr[j+1]){
            temp = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = temp;
        }
    }
}
console.log(arr);

或者可以直接用arr.sort();升序排列

sort升序

let arr = [5,4,3,2,1];
arr.sort(function(a,b){
    return a-b
 });
console.log(arr)// [1, 2, 3, 4, 5]

sort 降序

let arr = [1, 2, 3, 4, 5];
arr.sort(function(a,b){
    return b-a
 });
console.log(arr)// [5,4,3,2,1]

函数

function，是被设计为执行特定任务的代码块，函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用

声明（定义）

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

function 函数名(形式参数){
    let result = ''+形式参数
    return result
}// function是声明关键字，result是返回值，let和return部分是函数体

函数体

函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才会被执行。函数的功能代码都要写在函数体当中。

函数名命名规范

和变量命名基本一致
尽量小驼峰式命名法
前缀应该为动词
命名建议：常用动词约定

函数的调用语法

函数名()

声明的函数必须调用才会被真正的执行，使用()调用函数

练习：封装函数，计算1~100的和

function getSum(){
    total = 0;
    for(let i = 1;i<101;i++){
        total += i;
        }
        return total;
}
console.log(getSum());

函数传参

若函数完成功能需要调用者传入数据，那么就需要用有参数的函数

练习：求任意阶段数的累加和

function getSum(start,end){
    total = 0;
    for(let i = start;i<end;i++){
        total += i;
        }
        return total;
}
// 求22~88的累加和
console.log(getSum(22,88));// 3597

声明（定义）函数时的形参没有数量限制，当有多个形参时使用 , 分隔
调用函数传递的实参要与形参的顺序一致

形参和实参

形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）

实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）

形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值

形参：可以看做变量，但是如果一个变量不给值，默认是什么？

undefined 但是如果做用户不输入实参，出现 undefined + undefined 结果是NaN
NaN 我们可以改进成用户不输入实参，可以给形参默认值，可以默认为 0, 这样程序更严谨，可以如下操作：

function getSum(a=0,b=0){
    return a+b;
}
console.log(getSum(1,2))//3
console.log(getSum())//0

返回值

函数的本质是封装（包裹），函数体内的逻辑执行完毕后，函数外部如何获得函数内部的执行结果呢？要想获得函数内部逻辑的执行结果，需要通过 return 这个关键字，将内部执行结果传递到函数外部，这个被传递到外部的结果就是返回值。

在函数体中使用return 关键字能将内部的执行结果交给函数外部使用
函数内部只能出现1 次 return，并且 return 下一行代码不会再被执行，所以return 后面的数据不要换行写
return会立即结束当前函数
函数可以没有return，这种情况默认返回值为 undefined

小练习：1.求任意数组的最大值并返回

function getMax(arr=[]){
    let max=arr[0];
    for(let i=0;i<arr.length;i++){
        if(max<arr[i]){
            max=arr[i]
        }
    }
    return max
}
console.log(getMax([1,6,7,8,9,10]))// 10

2.求任意数组的最大、小值并返回

function getMaxMin(arr=[]){
let max=arr[0];
let min=arr[0];
for(let i=0;i<arr.length;i++){
    // 最大值
    if(max<arr[i]){
        max=arr[i]
    }
    // 最小值
    if(min >arr[i]){
        min=arr[i]
    }
}
return [max,min]
}
let result = getMaxMin([1,6,7,8,9,10])
console.log(`最大值为${result[0]},最小值为${result[1]}`)// 最大值为10,最小值为1

两个相同的函数后面的会覆盖前面的函数

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

如果形参过多会自动填上undefined (了解即可)

如果实参过多那么多余的实参会被忽略 (函数内部有一个arguments,里面装着所有的实参)

函数一旦碰到return就不会在往下执行了函数的结束用return

作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。

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

全局作用域

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

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

局部作用域

作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。

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

如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐

但是有一种情况，函数内部的形参可以看做是局部变量。

let num = 10;// 全局变量
function test(){
    return num;
}
console.log(test());// 10
function aaa(){
    let n = 100;// 局部变量
    return n;
}
console.log(aaa());//100

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

let num = 10;// 全局变量
function test(){
    let num = 20;// 局部变量
    return num;
}
console.log(test());// 20

匿名函数

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

区别：具名函数的调用可以是任意位置，匿名函数只能先声明表达式再使用

// 这是具名函数
声明：function fn() 
{}
调用：fn()

// 这是匿名函数
function()  {}

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

函数表达式

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

立即执行函数

避免全局变量之间的污染

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

无需调用，立即执行，其实本质已经调用了

多个立即执行函数之间用分号隔开

小练习：实现秒数转换为hh时mm分ss秒

let second = +prompt("请输入秒数");
function time(second){
    let h = Math.floor(second / 3600);
    h = h < 10 ? "0" + h : h;
    let m = Math.floor(second % 3600 / 60);
    m = m < 10 ? "0" + m : m;
    let s = Math.floor(second % 60);
    s = s < 10 ? "0" + s : s;
    return `${second}转换后为${h}小时${m}分钟${s}秒`; 
}
document.write(time(second));

逻辑中断

语法：

function fn(x,y){
    x = x || 0//x没值是undefined，则是false，两个false则以最后一个为准
    y = y || 0//y没值是undefined，则是false，两个false则以最后一个为准
    console.log(x+y)
}
fn()// 0

逻辑运算符里的短路

短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行

符号	短路条件
&&	左边为false就短路
\|\|	左边为true就短路

通过左边能得到整个式子的结果，因此没必要再判断右边；无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值

let age = 18;
console.log(false && age++);// false  age++不执行，一假则假
console.log(age);// 18
let age = 18;
console.log(true && age++);// 18  &&两边都是真返回最后的
console.log(age);//19


let age = 18;
console.log(true || age++);//true   ||输出第一个真值
console.log(age);// 18

转换为Boolean型

显示转换：

''、0、undefined、null、false、NaN 转换为布尔值后都是false, 其余则为 true

隐式转换：

有字符串的加法 “” + 1 ，结果是 “1”
减法 - （像大多数数学运算一样）只能用于数字，它会使空字符串 "" 转换为 0
- ''-2 结果为0-2=-2
null 经过数字转换之后会变为 0
- null+3 = 0+3=3
undefined 经过数字转换之后会变为 NaN
- undefined+1 = NaN

对象

什么是对象

对象是 JavaScript 数据类型的一种，对象数据类型可以被理解成是一种无序的数据集合，可以详细描述某个事物。它由属性和方法两部分构成。

1 对象声明语法

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

{} 是对象字面量

2 对象的属性和方法

属性：信息或叫特征（名词）。比如手机颜色、重量等

方法：功能或叫行为（动词）。比如手机玩游戏

属性：

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

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

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

1 属性-查

方法一

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

语法：对象名.属性

let obj = {
    name:'张三',
    age:18,
    sex:'男'
}
console.log(obj.name);//张三

方法二：

对象[‘属性’] 方式，单引号和双引号都可以

let obj = {
    age:18,
    sex:'男',
    'user-name':'张三',
}
console.log(obj['user-name']);// 张三

[]语法里面的值如果不添加引号默认会当成变量解析

2 属性-改

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

let obj = {
    name:'张三',
    age:18,
    sex:'男'
}
// 年龄修改
obj.age = 20;
console.log(obj.age);// 20

3 属性-增

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

let obj = {
    name:'张三',
    age:18,
    sex:'男'
}
obj.address = '中国';
console.log(obj);// {name: '张三', age: 18, sex: '男', address: '中国'}

4 属性-删

语法：delete 对象名.属性

let obj = {
    name:'张三',
    age:18,
    sex:'男'
}
delete obj.sex;
console.log(obj);// {name: '张三', age: 18}

方法：

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

let obj = {
    name:function(){
        console.log('hello,my name is obj');
    }
}
// 对象.方法名()
obj.name();// hello,my name is obj

方法是由方法名和函数两部分构成，它们之间使用 : 分隔
多个属性之间使用英文 , 分隔
方法是依附在对象中的函数
方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

声明对象，并添加了若干方法后，可以使用.调用对象中函数，我称之为方法调用,也可以添加形参和实参

遍历对象

// 在数组中
let arr = [1,2,3,4,5];
for(let i in arr){
    console.log(i);// 打印的是下标0 1 2 3 4
    console.log(arr[i]);// 打印的是值1 2 3 4 5
}

// 在对象中
let obj = {
    name:'张三',
    age:18,
    sex:'男',
}
for (let key in obj){
    console.log(key);// 打印的是键 "name"...
    console.log(obj[key]);// 打印的是值"name" 18...
}

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

小练习：将students的值渲染到表格里

<!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>
        h2{
            text-align: center;
        }
        table {
            width: 600px;
            margin: 0 auto;
            text-align: center;
        }
        table,th,td {
            border: 1px solid blue;
            border-collapse: collapse;
            padding: 10px;
        }
        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>
    <table>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>家乡</th>
        </tr>
        <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++) {
                let student = students[i];
                document.write(`<tr>
                    <td>${i+1}</td>
                    <td>${student.name}</td>
                    <td>${student.age}</td>
                    <td>${student.gender}</td>
                    <td>${student.hometown}</td>
                </tr>`)
            }

        </script>
    </table>

</body>
</html>

内置对象

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

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

内置对象-Math

Math对象是JavaScript提供的一个“数学”对象，提供了一系列做数学运算的方法

console.log(Math.PI);//3.141592653589793

1 random（取数规则：左闭右开）

生成0-1之间的随机数（包含0不包括1）

console.log(Math.random());// 0.5471184098773942

生成0-10之间的随机数

console.log(Math.random()*(10+1));//8.682369697147472
// 可以加floor（向下取整）这样就不会超过十，但是缺点是取的是整数

生成5-10之间的随机整数

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

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

Math.floor(Math.random() * (M - N + 1)) + N

定义一个求任意范围的随机函数

function getRandom(n,m){
    return Math.floor(Math.random()*(m-n+1))+n;
}
console.log(getRandom(1,10));

2 ceil向上取整

console.log(Math.ceil(0.5));// 1

3 floor：向下取整

console.log(Math.floor(0.5));// 0

4 round:四舍五入

console.log(Math.round(0.5));// 1

5 max：找最大数

console.log(Math.max(1,2,3,4,5,6,7,8,9,10));// 10

6 min：找最小数

console.log(Math.min(1,2,3,4,5,6,7,8,9,10));// 1

7 pow：幂运算

console.log(Math.pow(2, 3));// 8

8 abs：绝对值

console.log(Math.abs(-1));// 1

9 sqrt：平方根

console.log(Math.sqrt(8));// 2.8284271247461903

小练习：1.请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中

let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操'] ;
let random = Math.floor(Math.random() * arr.length);
document.write(arr[random]);

2.上题中若要出现的名字不能重复

let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操'] ;
let random = Math.floor(Math.random() * arr.length);
// 出现的数字不能重复
arr.splice(random, 1);
document.write(arr[random]);

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

// 随意生成1-10的数字
function getRandom(n,m){
    return Math.floor(Math.random()*(m-n+1))+n;
}
let random = getRandom(1,10);
console.log(random);
// 需要不断的循环
while(true){
    let num = +prompt("请输入一个1-10的数字");
    if(num > random){
        alert("大了");
    }else if(num < random){
        alert("小了");
    }else{
        alert("对了");
        break;
    }
}

// 若限制次数
// 随意生成1-10的数字
function getRandom(n,m){
    return Math.floor(Math.random()*(m-n+1))+n;
}
let random = getRandom(1,10);
console.log(random);
// 限制次数为三次
for(let i=1;i<=3;i++ ){
    let num = +prompt("请输入一个1-10的数字");
    if(num > random){
        alert("大了");
    }else if(num < random){
        alert("小了");
    }else{
        alert("对了");
        break;
    }
}
if(true){
    alert("游戏结束");
}

4.生成随机颜色函数,该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。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之间的数字

// 随机颜色函数含参数
function randomColor(flag=true){
    let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
    if(flag){
        // true:随机生成16进制颜色
        let color = '#';
        for(let i = 0; i < 6; i++){
            color += arr[parseInt(Math.random() * 16)];
        }
        return color;
    }else{
        // false:随机生成rgb颜色
        r = parseInt(Math.random() * 256);
        g = parseInt(Math.random() * 256);
        b = parseInt(Math.random() * 256);
        return `rgb(${r},${g},${b})`;
    }
}
console.log(randomColor(false));

5.综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./test.css">
</head>
<body>
    <div class="box">
        <div class="header">
            <h2>精品推荐</h2>
            <a href="#">查看全部</a>
        </div>
        <div class="content">
            <ul class="clearfix">
                <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: '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
                                    },
                                ];
                    for(let i=0;i<=data.length;i++){
                        document.write(`
                            <li>
                                <a href="#">
                                    <img src="${data[i].src}" alt="" 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>

*{
    padding: 0;
    margin:0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
body {
    background-color: #f3f5f7;
}
.box{
    margin-top: 30px;
    width:1200px;;
    margin:auto;
}
.header{
    height: 40px;
    padding: 20px;
}
.header h2{
    float:left;
}
.header a{
    float: right;
}
.content{
    padding: 20px;
}
.content ul{
    width: 1200px;
}
.content ul li{
    position: relative;
    float:left;
    background-color: #fff;
    margin-right: 15px;
    margin-bottom: 10px;
    width: 220px;
    height: 250px;
    border-radius: 10px;
    transition: all .2s;
}
.content ul li:hover {
    top: -8px;
    box-shadow: 0 15px 30px rgba(0, 0, 0 , 0.5);
}
.content ul li a {
    display: block;
}
.content ul li img {
    width: 100%;
    border-radius: 10px;
}
.content ul li h4 {
    margin: 10px 20px 10px 20px;
    font-size: 15px;
    color: #050505;
    font-weight: 400;
}
.content .info {
    margin: 0 20px 0 20px;
    font-size: 12px;
    color: #999;
}
.content .info span {
    color: #ff7c2d;
}

拓展

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

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

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

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型 string ，number，boolean，undefined，null
引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

堆栈空间分配

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

2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收；引用数据类型存放到堆里面

简单类型的内存分配

值类型（简单数据类型）： string ，number，boolean，undefined，null l 值类型变量的数据直接存放在变量（栈空间）中

复杂类型的内存分配

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

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

<script>
    //简单数据类型
    let num = 1;
    let num2 = num;
    num2 = 2;
    console.log(num); //1
    console.log(num2); //2

    //复杂数据类型
    let obj = {name: '张三'};
    let obj2 = obj;
    obj2.name = '李四';
    console.log(obj.name); //李四
    console.log(obj2.name); //李四

</script>