JavaScript 基础
JavaScript
01、JavaScript 概述
一、hello world
学习所有编程语言编写第一个程序的时候，都习惯性地编写 "hello world" 程序，学习 JavaScript 也是一样。作为我们编写的第一个 JavaScript 程序，我们将代码写在 html 这个文档中，body 标签里写想要的效果代码，JavaScript 放在 <script></script> 这个标签里。
代码如下所示：
<!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>
alert("hello world")
</script>
</body>
</html>
在上面的代码中，我们使用了一个 alert 方法，使用 alert 可以在浏览器的弹出框中输出括号内的内容即可。
二、控制台
chrome 浏览器的调试工具（F12），此前一直使用的是调试工具中的 elements 选项，可以查看元素的 html 和 css。从本章开始，我们使用 chrome 浏览器中的 console 选项，他是 JavaScript 的控制台工具，我们可以在其中输出 JavaScript 程序，也可以在其中看到程序运行结果。例如我们在网页中编写如下代码：
<!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("hello world")
</script>
</body>
</html>
用浏览器打开网页，可以看到控制台中会输出 hello world。
三、课后练习
- 打开网页在浏览器中弹出
"hello JavaScript"。
alert("hello JavaScript")
- 打开
chrome浏览器的控制台，在控制台中输出"hello JavaScript"。
console.log("hello JavaScript")
02、变量与数据类型
一、变量的基本概念
变量可以理解为是一个存储数据的容器。
代码如下所示:
var n = 100
var s = "hello world"
如代码所示，我们可以通过 var声明一个变量，var 后面的英文字母就是变量名，变量名是自定义的，在一定的规则下我们可以随意命名。
= 在编程语言中不是等于的意思，而是赋值的意思，也就是把 = 右侧的数据赋值给左侧的变量；简单的说，就是把 = 右侧的值装到左侧的容器里。
每行结尾的分号并不是必须写的，但是为了代码更加规范，我们要求每行代码的结尾都不要写分号。
二、变量的命名规范
代码如下所示:
var age = 17
var num1 = 198
var num2 = 200
var price = 25.6
var _name = "小明"
var $fruit = "苹果"
var firstName = "Lily"
var message = "I love javascript"
- 变量名要见名知意
- 变量名可以是字母、下划线
_、$，还有数字；但是不能以数字开头 - 小写字母开头，多个单词，第二个单词首字母大写（驼峰命名）
- 不可以与关键字、保留字重复
三、数据类型
JavaScript 有六种数据类型，如下表所示：
| 类型名称 | 值 | 说明 |
|---|---|---|
| 数值 | 100；3.14 | 不管是整数还是小数，都是数值型。 |
| 字符串 | "hello"；"100" | 双引号或单引号中的值是字符串。 |
| 布尔 | true；false | 布尔值只有两个值，代表真和假。 |
| 空 | null | 空值只有null |
| 未定义 | undefined | 未定义值只有undefined |
| 对象 | {} | 待定 |
四、四则运算
在四则运算中，需要特别注意的，乘法在代码中用的是*，除法在代码中用的是 /。
var num1 = 10
var num2 = 20
var result1 = num1 + num2
var result2 = num1 - num2
var result3 = num1 * num2
var result4 = num1 / num2
console.log(result1) // 30
console.log(result2) // -10
console.log(result3) // 200
console.log(result4) // 0.5
五、字符串链接
又用到了 + 运算符，但是和之前不同，之前 + 左右两边是数值，可以通过 + 计算数值的结果，这个例子 + 两边是字符串，那么将会将两个字符串连接，然后赋值给str3,
代码如下所示：
var num1 = 1
var num2 = 2
var str = "rnny"
var result = num1 + num2 + str
console.log(result) // 3rnny
六、课后练习
- 连接字符串
var n1 = 10, n2 = 20
var result = "" + n1 + n2
console.log(result) // 1020
03、表达式与运算符
一、表达式概述
字面量
说表达式之前，我们先说说一个基本概念 字面量。
在上一节，赋值符号 = 右边某种数据类型的值，就是字面量，例如字符串 "hello world"，或是数字 100 。都是字面量。
表达式
上一节我们接触过 +-*/ 四个运算符，那么通过①运算符将②变量、③字面量组合起来，就是表达式。
每一个表达式都有一个固定返回值（表达式的结果）❗，例如下面的程序：
"hello" + "world" // "helloworld"
100 + 200 // 300
二、运算符
算数运算符
| 运算符 | 描述 | 示例 | 结果 |
|---|---|---|---|
| + | 加法 | 20 + 10 | 7 |
| - | 减法 | 20 - 10 | 10 |
| * | 乘法 | 20 * 10 | 200 |
| / | 除法（含小数部分，非整除） | 10 / 20 | 0.5 |
| % | 取余 | 11 % 2 | 1 |
| ++ | 自增1 | ++7 | 8 |
| -- | 自减 | --7 | 6 |
自增运算符和自减运算符可以像上面的例子，写在变量的前面，也可写在变量的后面，写在前后意义不同
var num1 = 10
var num2 = 10
console.log(num1++) // 输出10
console.log(++num2) // 输出11
说明：自增和自减运算符如果写在变量后面，那么表达式的返回值是变量本身，然后变量自增或自减；运算符写在变量前面，那么变大时的返回值直接就是变量自增或自减后的结果。
比较运算符
比较运算符的返回值是布尔值
| 运算符 | 描述 | 示例 | 结果 |
|---|---|---|---|
| > | 大于 | 20 > 10 | true |
| < | 小于 | 20 < 10 | false |
| >= | 大于等于 | 20 >= 10 | true |
| <= | 小于等于 | 20 <= 10 | false |
| == | 等于（不比较类型【会进行类型转换】，性能损失） | 20 == "20" | true |
| != | 不等（不比较类型【会进行类型转换】，性能损失） | 20 != 10 | false |
| === | 恒等于（最佳实践，比较类型） | 20 === "20" | false |
| !== | 非等于（最佳实践，比较类型） | 20 !== "20" | true |
逻辑运运算符
| 运算符 | 描述 | 示例 | 结果 |
|---|---|---|---|
| && | 逻辑与 | true && false | false |
| || | 逻辑或 | true || false | true |
| ! | 逻辑非 | !true | false |
赋值运算符
下面我们以，x = 10 y = 20 ，来解释一下下面的运算符。
| 运算符 | 描述 | 示例 | 等同于 |
|---|---|---|---|
| = | 赋值 | x = 10 | 无 |
| += | 加并赋值 | x += y | x = x + y |
| -= | 减并赋值 | x -= y | x = x - y |
| *= | 乘并赋值 | x *= y | x = x * y |
| /= | 除并赋值 | x /= y | x = x / y |
在上述运算符中，+= 是非常常用的。
三、课后练习
熟练时使用本节中讲解的运算符。
04、条件语句
一、概述
语句执行流程有三种：顺序执行、条件执行、循环执行。
条件语句表示的就是按照条件判断执行哪些代码（或不执行哪些代码）。
例如：我们登录一个软件，输入用户名和密码的时候，输入正确则登录成功，输入错误，会弹出相关提示，这就是一个典型的分支语句（在实际开发中，这个功能或设计多个分支语句）。
二、if语句
if 语句是最基本的条件控制语句，它让 JavaScript 程序可以选择执行顺序，我们可以通过一个布尔值来控制一行语句是否执行，if 语句有多种形式。
示例代码如下：
if (true) {
console.log("执行代码")
}
在上面的代码中，if 括号内的值如果是 true，则执行第二行代码，如果是 false，则不执行第二行代码。
① if 后面的括号内一般不会直接写一个布尔值，而是写一个表达式。
② 大多数情况，我们需要执行多行代码，那么我们需要在 if 后面加上一对花括号，并且，为了让代码块更直观，我们在以后的代码中，都会写 if 后面的花括号。
③ 通过 if...else... 语句实现：在两个代码块中，选择一个来执行。
示例代码如下:
var num1 = 10
var num2 = 20
if (num1 < num2) {
//num1如果小于num2,表达式为true，输出if语句后的代码；num1如果大于num2,表达式为false,输出else语句后的内容
console.log("num1小于num2")
} else {
console.log("num1大于num2")
}
④ if...else... 语句可以判断两种情况下，需要执行哪些代码；如果需要判断的条件是三种情况，我们可以使用 if...else if... 语句
示例代码如下:
var num1 = 20
var num2 = 20
if (num1 < num2) {
console.log("num1小于num2")
} else if (num1 > num2) {
console.log("num1大于num2")
} else if (num1 === num2) {
console.log("num1等于num2")
}
我们可以通过修改num1和num2的值来判断输出哪一行语句。
通过控制运算符来实现数学运算（计算器的雏形）
var num1 = 10
var num2 = 20
var sign = "/" // 通过修改操作符，输出不同的结果
var result = 0 // result 用来存储计算的结果，现在设置一个初始值0
if (sign === "+") {
result = num1 + num2
console.log(result)
} else if (sign === "-") {
result = num1 - num2
console.log(result)
} else if (sign === "*") {
result = num1 * num2
console.log(result)
} else if (sign === "/") {
result = num1 / num2
console.log(result)
} else {
console.log("请输入正确的运算符")
}
三、switch语句
if 语句在程序执行的过程中创建一条分支，并且可以使用 if...else if... 语句来处理多条分支，然而当所有的分支都依赖于同一个表达式的值时，重复计算多条 if 语句中的条件是非常浪费时间的做法，switch 语句正合适处理这种情况
实现通过控制运算符来实现数学运算
var num1 = 10
var num2 = 20
var operator = " / "
switch (operator) {
case " + ":
console.log("num1+num2=" + (num1 + num2))
break
case " - ":
console.log("num1-num2=" + (num1 - num2))
break
case " * ":
console.log("num1*num2=" + (num1 * num2))
break
case " / ":
console.log("num1/num2=" + (num1 / num2))
break
default:
console.log("请输入正确的运算符")
break
}
四、条件运算符
如果是简单的判断，我们可以使用条件运算符
表达式?第一个值:第二个值
如果表达式为 true，表达式的返回值是第一个值；如果表达式为false，那么表达式的返回值是第二个值。（一真大师）
示例代码如下所示：
var num1 = 10
var num2 = 20
var result = num1 > num2 ? 100 : 200
//如果num1大于num2，条件表达式的值为100，若num1小于等于num2时，条件表达式的值为200；
console.log(result)
五、课后练习
1.通过运算符列出10与20的加减乘除算法
var num1 = 10
var num2 = 20
var operator = "/"
var result = 0
switch (operator) {
case "+":
result = num1 + num2
break
case "-":
result = num1 - num2
break
case "*":
result = num1 * num2
break
case "/":
result = num1 / num2
break
default:
console.log("操作符输入有误！")
break
}
console.log(result)
05、循环语句
条件语句的代码可以被想象成是一条条分支的路径；而循环语句的代码则是程序路径的一个回路，可以让一部分代码重复执行。
JavaScript 中的循环语句有 for 语句和 while 语句。
一、for语句
for 语句的语法如下：
for (初始值; 布尔值; 计数器){
//语句块
}
在 for 语句中，如果布尔值是 true，就会一直执行语句块中的内容，为了防止死循环，需要有一个计数器，当数值达到指定值，布尔值就会变成 false，循环便停止了，下面的示例代码使用 for 循环输出 0~9 九个数字
示例代码如下：
for (var i = 0; i < 10; i++) {
// i的初始值是0
// 判断i是否小于10，如果小于10则执行花括号中的代码
// 每次执行完花括号中的代码后，i的值加1
console.log(i)
}
通过上面的例子我们进一步理解了 for 语句的用法，下面我们来做一个联系，利用 for 循环语句输出 100 以内所有正整数的加和。
示例代码如下：
// sum用来存储循环过程中正整数的加和
var sum = 0
for (var i = 1; i <= 100; i++) {
sum += i
}
console.log(sum) // 5050
二、while语句
while 语句语法如下所示：
while(loop){
// loop 为 true，循环执行
}
当 loop 为 true 的时候，花括号中的内容会循环执行。为了防止死循环，需要在循环的过程实现类似 for 计数器的功能，让循环在有限的次数内定制。
下面我们使用 while 语句输出 0~9 是个数字：
var n = 0
while (n < 10) {
console.log(n)
n++
}
在每次循环的过程中都会让 n 的值加 1，这样当 n 的值等于 10，循环便停止。
下面我来使用 while 语句输出 100 以内所有正整数的加和：
var sum = 0, n = 1
while (n <= 100) {
sum += n
n++
}
console.log(sum) // 5050
console.log(n) // 101
三、continue
continue 可以结束本次循环，直接进入到下一次循环，例如我们用 for 循环语句来实现输出 0 ~ 5,7 ~ 9 九个数字（跳过 6）
示例代码如下：
for (var i = 0; i < 10; i++) {
if (i === 6) { // 注意：这里使用 "==="，而非 "=="
continue
}
console.log(i)
}
上面的代码通过判断，实现当i的值为 6 的时候，跳过本次循环，直接接入下一次循环。
下面我们使用 continue 来实现计算 100 以内所有不能被 7 整除的正整数加和：
var sum = 0
for (var i = 1; i <= 100; i++) {
if (i % 7 === 0) {
continue
}
sum += i
}
console.log(sum)
四、break
在学 switch 语句中，我们已经接触到了 break，它可以让分支语句在结束一个 case 之后，跳出 switch 语句，break 同样可以用在循环语句当中，当代码执行到 break 时，直接结束循环
示例代码如下：
for(var i = 0;i<10;i++){
if(i===6){
break;
}
console.log(i)
}
如上面的代码所示，当控制带输出 5 之后，循环结束。
五、课后练习
-
分别用
for和while语句在控制台输出100以内（包括100）所有正整数的加和。// for var sum = 0 for (var i = 1; i <= 100; i++) { sum += i } console.log(sum) // 5050// while var sum = 0, i = 1 while (i <= 100) { sum += i i++ } console.log(sum) // 5050 -
分别用
for和while语句在控制台输出100以内（包括100）所有偶数的加和。// for var sumOfEven = 0 for (var i = 1; i <= 100; i++) { if (i % 2 === 0) { sumOfEven += i } } console.log(sumOfEven) // 2550// while var sumOfEven = 0, i = 1 while (i <= 100) { if (i % 2 === 0) { sumOfEven += i } i++ } console.log(sumOfEven) // 2550
06、函数基础
一、函数的基本概念
函数是一个可执行的语句块，定义的时候不执行，调用的时候执行，使用 函数名() 的形式可以调用函数。
语法如下所示：
function fun() { //定义函数,函数名为fun
//函数体
}
fun() //调用函数
编写第一个最简单的函数，当这个函数执行的时候会在控制台输出 "hello function"。示例代码如下：
function fun() {
console.log("hello function")
}
fun()
在上面的代码中我们定义了一个函数，并调用了一次，这样就会在控制台输出一次 "hello function"。我们在编程的过程中，很多代码是需要多次使用的，我们可以把它们写在一个函数中，这样我们每次希望执行这些代码的时候，只需要调用这个函数，而不是复制-粘贴多次代码。
二、参数
① 演示函数如何传递参数：
function fun(str) {
console.log("hello" + str)
}
fun("world") // helloworld
在定义函数的括号中，我们添加了一个参数 str，这个参数叫做形参。它在函数内部像一个变量一样。但是在函数调用之前他是没有值的。
当调用函数的时候，调用函数的括号中我们也添加了一个参数 "world"，这个参数叫做实参，他可以是任意数据类型的值。
函数被调用后，形参 str 被赋予了实参 "world" 的值，然后执行 console.log 便会在控制台输出 "helloworld"。
② 函数可以传递多个参数，用逗号间隔：
function sum(num1, num2) {
console.log(num1 + num2)
}
sum(10, 20) // 30
当我们调用函数的时候，实参和形参是一一对应的，10 对应的是 num1，20 对应的是 num2，函数执行后会在控制台输出 10 和 20 的加和。
编写一个函数，它有一个正整数参数 n，当我们调用函数时，函数会输出包括 n 在内，1 ~ n 所有正整数的加和：
function computed(n) {
var sum = 0
for (var i = 1; i <= n; i++) {
sum += i
}
console.log(sum)
}
computed(100) // 5050
computed(10) // 55
通过一个函数规定了一种计算方式，我们使用函数的只要输入一个值，函数就会计算出一个准确的结果。
三、返回值
在实际开发中，很多情况我们要的不是在控制台输出得到的结果，而单纯的只是为了获取这个值，那么我们就需要用到函数的返回值。
在函数中，我们可以通过 return 关键字指定一个返回值，函数有了 return，当函数被调用的时候就可以把调用的结果赋值给另一个变量了。
示例代码如下：
function fun1() {
}
function fun2() {
return "hello fun"
}
var str1 = fun1()
var str2 = fun2()
console.log(str1) //输出undefined
console.log(str2) //输出"hello fun"
在上面的例子中，函数 fun1 没有返回值，所有将 fun1 调用的结果赋值给 str1，str1 的值为 undefined，函数 fun2 有返回值，返回值是 "hello fun"，所以当 fun2 被调用后，将函数运行的结果赋值给 str2，str2 的值就是 "hello fun"
编写一个函数，让函数来计算四则运算的结果：
function computed(num1, num2, operator) {
var result = 0
switch (operator) {
case "+":
result = num1 + num2
break
case "-":
result = num1 - num2
break
case "*":
result = num1 * num2
break
case "/":
result = num1 / num2
break
default:
console.log("请输入真确的操作符")
break
}
return result
}
console.log(computed(5, 2, "/"))
四、函数表达式
var functionName = function (arg) {
//函数体
}
这种形式看起来好像是常规的变量赋值语句，即创建一个函数并将它赋值给变量 functionName。这种情况下创建的函数叫做匿名函数。因为 function 关键字后面没有标识符。
函数表达式与其他表达式一样，在使用之前必须先赋值；如下面代码就会导致错误；
helloworld() //错误，还未赋值，函数不存在
var helloworld = function () {
console.log("hello world")
}
有了函数表达式，我们就可以给函数表达式赋值了；如下面代码：
var helloworld; //声明
if (condition) { //条件
helloworld = function () { //赋值
console.log("hello world")
}
}
else {
helloworld = function () { //赋值
console.log("你好，世界")
}
}
五、函数声明提升
func()
function func() {
}
上例不会报错，正是因为 “函数声明提升”，即将函数声明提升（整体）到作用域顶部（注意是函数声明，不包括函数表达式），实际提升后结果同下：
// 函数声明提升
function func() {
}
func()
六、作用域
在 JavaScript 中，对象和函数同样也是变量。
在 JavaScript 中，作用域为可访问变量，对象，函数的集合。
JavaScript 函数作用域：作用域在函数内修改。
局部作用域
- 变量在函数内声明，变量为局部作用域。
- 局部变量：只能在函数内部访问。
// 此处不能调用 carName 变量
function myFunction() {
var carName = "Volvo"
// 函数内可调用 carName 变量
}
- 因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。
- 局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。
全局变量
- 变量在函数外定义，即为全局变量。
- 全局变量有 全局作用域：网页中所有脚本和函数均可使用。
var carName = " Volvo"
// 此处可调用 carName 变量
function myFunction() {
// 函数内可调用 carName 变量
}
- 如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
- 以下实例中
carName在函数内，但是为全局变量。
// 此处可调用 carName 变量
function myFunction() {
carName = "Volvo"
// 此处可调用 carName 变量
}
七、课后练习
-
定义一个函数，参数为
x，返回值为1至x（包括x）之间所有正整数的加和。function sum(x) { var result = 0 while(x > 0) { result += x x-- } return result } console.log(sum(100)) // 5050 -
定义一个函数 参数为
x，返回值为1至x（包括x）之间所有奇数的加和。var sumOfOdd = function (x) { var result = 0 while(x > 0) { if (x % 2 === 1) { result += x } x-- } return result } console.log(sumOfOdd(100)) // 2500
07、对象
一、对象的基本概念
在现实生活中，所有东西都可以看成对象，比如一台电脑，一个房子，一只猫，一个人，对象有他自己的属性，比如电脑有颜色，房子有尺寸，猫和人都有年龄。
在 JavaScript 中，对象是属性的集合，它也是一种数据类型。
二、自定义对象
① 通过一对花括号 {} 来创建一个对象：
var obj = {}
② 在花括号中，可以为对象定义属性：
下面我们来写一个猫的对象：
// 定义一个对象cat,它有两个属性，name和age
var cat = {
name: "喵喵",
age: 2
}
// 有两种方法可以获取到对象的属性值：1、对象名.属性名【推荐】；2、对象名["属性名"]
console.log(cat.name)
console.log(cat["age"])
三、方法
对象的属性值可以是任何数据类型，甚至可以是函数。
如果对象的属性值是函数，那么这个属性为这个对象的方法。
示例代码如下：
var cat = {
name: "喵喵",
age: 2,
sayName: function () {
console.log("我是喵喵")
}
}
cat.sayName()
上面的代码可以在控制台输出 "我是喵喵"，其中 sayName 是 cat 的方法。
方法简写
var cat = {
name: "喵喵",
age: 2,
sayName() {
console.log("我是喵喵")
}
}
cat.sayName()
四、this关键字
在对象的方法中使用 this，可以指向这个对象本身。
示例代码如下：
var cat = {
name: "喵喵",
age: 2,
sayAge() {
// console.log("name=" + age) // age is not defined
console.log("this.name=" + this.age)
}
}
cat.sayAge() // 2
cat.age = 5
console.log(cat.age) // 5
cat.sayAge() // 5
五、方法传参
给对象的方法传递参数和给函数传递参数是一样的。
示例代码如下：
var cat = {
name: "喵喵",
age: 2,
sayAge() {
console.log("this.name=" + this.age)
},
count: function (num1, num2) {
return num1 + num2
}
}
console.log(cat.count(1, 1))
在之前代码的基础上，有添加了一个 count 方法可以让猫可以计算两个数的加和，只要传入实参，猫就能计算结果。
六、对象展开运算符
Spread：展开
let xiaoMing = {
name: "小明",
age: 2
}
let superXiaoMing = {
weight: "1000kg",
fly: true
}
// 合并对象
let superHero = {
...xiaoMing,
...superXiaoMing
}
console.log(superHero)
七、课后练习
定义一个对象 dog，实现功能如下：
- 具有一个
name属性名为Doggy。 - 具有一个
number属性，初始值为0。 - 具有一个
counting（数数）方法，每次执行方法时，number属性会增加1。
var dog = {
name: "Doggy",
number: 0,
counting() {
this.number++
}
}
console.log(dog.number) // 0
dog.counting()
dog.counting()
console.log(dog.number) // 2
08、数组
一、数组的基本概念
① 数组是一个特殊的对象，对象的概念是属性的集合，而数组是元素的有序集合。
② 通过一个中括号[] 来定义一个数组。
示例代码如下:
var numList = [1, 3, 5, 7, 9]
③ 通过数组的变量名配合中括号来获取数组的元素
var numlist = [1, 3, 5, 7, 9]
// 获取数组元素：数组[index]
console.log(numlist[0]) //输出数组的第一个元素
console.log(numlist[4]) //输出数组的第五个元素
中括号中的数字叫做数组的下标。通过下标获取数组的元素，要注意的是下标是从 0 开始的。
④ 数组是特殊的对象，它有自己的属性和方法，其中最常用的属性就是 length，它代表数组中元素的个数。
var numlist = [1, 3, 5, 7, 9]
console.log(numlist.length) // 5
⑤ 数组中的元素可以是任意类型的，但是一般将数组中的元素设置成相同数据类型。
下面是一个字符串类型的数组,我们通过下标分别输出数组的所有元素。
示例代码如下:
var friends = ["小明", "小亮", "小红"]
console.log(friends[0]) // 小明
console.log(friends[1]) // 小亮
console.log(friends[2]) // 小红
console.log(friends.length) // 长度为3
二、遍历数组
数组中的元素可能很多，元素的个数也可能发生变化，所以需要输出数组所有元素的时候，手动用下标输出每一个值。
这需要一种更自动的方法来查询数组中的每一个元素，这就是遍历数组。
数组：
var friends = ["小明", "小亮", "小红", "张三", "李四", "王五"]
使用 for 循环来遍历数组：
for (var i = 0; i < friends.length; i++) {
console.log(friends[i]) //输出数组中的所有元素
}
使用 for...in... 语句遍历数组：【索引】
for (var index in friends) {
console.log(friends[index])
}
使用 for...of... 语句遍历数组：【具体元素】
for (var item of friends) {
console.log(item)
}
使用 map 语句遍历数组：
friends.map((item, index) => {
console.log(item)
})
friends.map(function (item, index) {
console.log(friends[index])
})
三、数组的常用方法
map方法
map() 函数通过调用用户提供的回调函数创建一个新数组。该函数访问调用数组中的每个元素。
可以将 map() 方法视为经过一个循环并在回调函数中编写语句以构造一个新数组。
示例代码如下：
var list = ["a", "b", "c", "d", "e"]
list.map(function (value, index) {
console.log(value)
})
push方法
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
示例代码如下:
var list = ["a", "b", "c", "d", "e"]
list.push("f")
console.log(list)
join方法
join() 方法用于把数组中的所有元素组成一个字符串。
示例代码如下：
var list = ["a", "b", "c"]
var str = list.join()
console.log(str) // a,b,c
var str2 = list.join("")
console.log(str2) // abc
filter方法
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
示例代码如下：
const list = [1, 2, 3].filter(v => {
console.log(v) // 1，2，3
return v > 1
})
console.log(list) // [2,3]
find方法
find() 方法返回数组中第一个满足回调函数测试的第一个元素的值。否则返回 undefined
示例代码如下:
const arr1 = [1, 2, 3, 4, 6, 9]
let found = arr1.find(e => e > 5)
console.log(found) // 6
五、课后练习
-
找到数组
[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]中的奇数加和并放到一个新数组中。var list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] var listOfOdd = list.filter(v => v % 2 === 1).reduce((pre, cur) => pre + cur) console.log([listOfOdd]) -
找出数组
[4,6,1,2,3,7,5]中最大值的索引。var list = [4, 6, 1, 2, 3, 7, 5] var maxIndex = 0 list.map((value, index) => { if (value > list[maxIndex]) { maxIndex = index } }) console.log(maxIndex)
第9节：内置对象
一、内置对象概述
javascript 为我们提供了很多内置对象，这些内置对象为我们提供了很多语言的基本功能。
数组就是 JavaScript 的内置对象，除了数组我们还应该了解的内置对象有：Math、Date、RegExp。
说明： document 对象是 DOM 提供的对象，不属于 JavaScript 内置对象。window 对象是 BOM 中的对象，同样不属于JavaScript 内置对象。
二、Math
Math 对象不像数组那样需要我们手动去创建，在 JavaScript 程序中直接写 Math 代表的就是 Math 对象。
可以通过 Math 对象直接获取圆周率
var pi = Math.PI
console.log(pi)
Math 对象提供了很多方法来简化数学运算：
var pi = Math.PI
var floor = Math.floor(pi) // 向下取整
var ceil = Math.ceil(pi) // 向上取整
var round = Math.round(pi) // 四舍五入
var abs = Math.abs(-pi) // 获取绝对值
var random = Math.random() // 获取 [0, 1) 之间的随机数，前闭后开
console.log(pi) // 3.141592653589793
console.log(floor) // 3
console.log(ceil) // 4
console.log(round) // 3
console.log(abs) // 3.141592653589793
console.log(random) // 0.44673773990565024
在 Math 对象的方法中，floor 和 random 两个方法比较常用，可以通过这两个方法获取我们想要的随机数范围。
例如想要 1 ~ 10 的随机数，代码如下：
var number = Math.floor(Math.random() * 10 + 1)
console.log(number)
实现一个猜数字的游戏，JavaScript 随机生成一个 1 ~ 100 之间的数字，通过文本输入框输入我们所猜的数字，猜的数字不管是大于结果，还是小于结果，还是等于结果，都会有相应的提示
代码如下：
<input type="text" id="number">
<button id="guess">猜数字</button>
<script>
var target = Math.floor(Math.random() * 100 + 1) //生成1~100的随机数。
var btn = document.querySelector("#guess")
var number = document.querySelector("#number")
console.log(target)
btn.onclick = function () {
var value = Number(number.value)
if (value > target) {
alert("大于结果")
} else if (value < target) {
alert("小于结果")
} else if (value === target) {
alert("回答正确")
}
}
</script>
三、Date
Date 对象是 JavaScript 用于处理日期和时间的对象，可以通过 Date 对象获取当前的时间，需要说明的是 Date 对象获取的时间是本机的时间。
var dateNow = new Date()
var year = dateNow.getFullYear() // 获取年，不能用 getYear() 方法，此方法已经被废弃
var month = dateNow.getMonth() // 获取月份 从 0 开始，一月份返回的值是 0
var date = dateNow.getDate() // 获取日期
var hours = dateNow.getHours() // 获取小时
var minutes = dateNow.getMinutes() // 获取分钟
var seconds = dateNow.getSeconds() // 获取秒
var day = dateNow.getDay() // 获取星期
console.log("year=" + year)
console.log("month=" + month)
console.log("date=" + date)
console.log("hours=" + hours)
console.log("minutes=" + minutes)
console.log("seconds=" + seconds)
console.log("day=" + day)
可以通过 JavaScript 将当前的时间显示在网页上
<h1></h1>
<script>
var h1 = document.querySelector("h1")
var dateNow = new Date()
var hours = dateNow.getHours()
var minutes = dateNow.getMinutes()
var seconds = dateNow.getSeconds()
var strTimeNow = hours + ":" + minutes + ":" + seconds
h1.innerHTML = strTimeNow
</script>
上面的例子我们成功将当前的日期显示在 h1 标签中，但是我们显示的时间是获取的那个时间点，显示的时间是静止不动的，可以通过计时器方法让我们显示的时间与实际时间同步。
<h1></h1>
<script>
var h1 = document.querySelector("h1")
function getTime() {
var dateNow = new Date()
var hours = dateNow.getHours()
var minutes = dateNow.getMinutes()
var seconds = dateNow.getSeconds()
var strTimeNow = hours + ":" + minutes + ":" + seconds
h1.innerHTML = strTimeNow
}
getTime()
setInterval(getTime, 1000)
</script>
将过去时间的代码放到了一个函数中，然后通过计时器方法每秒执行一次这个函数，这样我们显示出来的日期就想电子钟一样每秒与真实事件同步一次。
还可以通过参数创建一个指定时间的日期对象：
var dateNow = new Date("2017-5-1 17:30:20") //创建指定日期和时间的对象
var year = dateNow.getFullYear()
var month = dateNow.getMonth()
var date = dateNow.getDate()
var hours = dateNow.getHours()
var minutes = dateNow.getMinutes()
var seconds = dateNow.getSeconds()
var day = dateNow.getDay()
console.log("year=" + year)
console.log("month=" + month)
console.log("date=" + date)
console.log("hours=" + hours)
console.log("minutes=" + minutes)
console.log("seconds=" + seconds)
console.log("day=" + day)
在编写程序的时候，有的时候会希望获取一个唯一的时间点，我们可以使用 getTime 方法获得。
示例代码如下
var dateTarget = new Date("2017-5-1 17:30:20")
var dateNow = new Date()
var target = dateTarget.getTime()
var now = dateNow.getTime()
console.log(target)
console.log(now)
通过 getTime 方法可以获取时间戳，时间戳是指格林威治时间 1970 年 01 月 01 日 00 时 00 分 00 秒（北京时间 1970 年 01 月 01 日 08 时 00 分 00 秒）起至现在的总毫秒数，可以用时间戳表示一个不会重复的时间点。
课后练习
制作一个倒计时的功能，要求如下：
-
计算距离指定日期还有多少天，多少小时，多少分钟，多少秒。
-
在控制台输出这个时间。
<input type="text" id="inputTime" value="2024">
<div id="showBox"></div>
<input type="button" id="reverseBtn" value="倒计时">
<script>
var inputTime = document.querySelector("#inputTime")
reverseBtn.onclick = function () {
computed()
setInterval(t, 1000)
}
function computed() {
var nowDate = new Date()
var inputDate = new Date(inputTime.value)
var deltaTime = (inputDate - nowDate) / 1000
// 计算天数并给其赋值
var d = Math.floor(deltaTime / 3600 / 24)
// 计算小时并给其赋值
var h = Math.floor(deltaTime / 3600 % 24)
// 计算分钟并给其赋值
var m = Math.floor(deltaTime / 60 % 60)
// 计算秒数并给其赋值
var s = Math.floor(deltaTime % 60)
var timer01 = '距离' + inputDate.getFullYear() + '年' + (inputDate.getMonth() + 1) + '月' + inputDate.getDay() + '日还有' + d + '天' + h + '小时' + m + '分' + s + '秒'
document.getElementById('showBox').innerText = timer01
}
</script>
第10节：正则表达式
一、正则表达式概述
正则表达式用于匹配字符串，例如想验证某一个字符串是否为邮箱格式，可以使用正则表达式判断。
又希望转换一篇文章中的所有英文字母，可以使用正则表达式；又想截取一片文章中的某些内容，也可以使用正则表达式。
正则表达式对象 RegExp 是 JavaScript 中的内置对象，可以像创建数组一样创建它。
var arr = new Array() // 创建数组
var reg = new RegExp() // 创建正则表达式
在开发中，一般用简写的方法创建正则表达式，同样和数组比较，代码如下
var arr = [1, 2, 3] // 创建数组
var reg = /123/ // 创建正则表达式
二、正则表达式语法
正则表达式可以用来匹配字符串，可以把正则表达式看做是一种规则，如果字符串中的内容符合这种规则，就会匹配，如果不符合这个规则，就不会匹配。
var reg = /123/ // 创建了一个正则表达式，这个正则表达式可以匹配字符串"123"
var str = "123" // 创建字符串 "123"
// test 方法可以测试字符串是否成功匹配，匹配返回 true，不匹配返回 false
console.log(reg.test(str))
可以看到程序在控制台输出了 true，因为 reg 定义的时候就是为了匹配字符串 123 的。
再来看下面的例子
var reg = /123/
var str = "012345"
console.log(reg.test(str)) // 仍然返回true
将字符串改成了 "12345"，返回结果仍然返回 true，这是因为定义的正则表达式可以匹配任何包含 "123" 的字符串，为了证实这个说法，可以使用 exec 方法来输出匹配的内容
var reg = /123/
var str = "012345"
// exec 方法返回一个数组，数组中包含匹配的内容，如果未匹配，返回 null
console.log(reg.exec(str))
这段代码在控制台输出了一个数组，数组的第一个元素是匹配的内容，大家可以看到匹配的内容是 "123"，数组还带有两个属性，index 表示从字符串中第几个字母开始匹配，input 表示匹配的字符串的值。
有的时候，希望写的正则表达式只能匹配 "123"，如果是字符串包含 "123" 也不匹配，如果希望这样的话，需要改进我们的正则表达式
// ^表示开头，$ 表示结尾，两个符号之间是匹配的内容
var reg = /^123$/
var str = "012345"
console.log(reg.exec(str)) // null
这样就可以只能匹配字符串 "123"，但是如果正则表达式是直接把要匹配的内容写在正则表达式里，那意义也不是很大，接下来用正则表达式强大的语法来匹配各种字符串。
设定匹配范围
正则表达式可以通过[]设定匹配的范围，代码如下
var reg = /[123]/ // 匹配123中的任意一个字符
var str = "02468"
console.log(reg.exec(str))
通过指定范围，正则表达式成功匹配了字符串中的数字 2。
匹配数字
正则表达式可以在匹配范围中定义 [0-9] 来设定匹配数字
var reg = /[0-9]/ // 匹配一位数字
var str = "02468"
console.log(reg.exec(str))
虽然字符串中都是数字，但是一个 [] 只能表示匹配一位数字，所以这里匹配的是 0
匹配字母
正则表达式可以在匹配范围中定义 [a-z] 来设定匹配字母
var reg = /[a-z]/ // 匹配一位字母
var str = "012345abcde"
console.log(reg.exec(str))
与匹配数字类似，上面的正则表达式可以匹配一位字母。
匹配多位
上面的匹配内容匹配的都是一位数字或字母，我们可以通过 + 来指定匹配多位
var reg = /[a-z]+/ // 匹配多位字母
var str = "012345abcde"
console.log(reg.exec(str))
上面的代码表示匹配多位字母，所有 abcde 都成功的被匹配
匹配指定位数
有的时候需要匹配指定位数的字符，可以通过 {}指定匹配的位数
var reg = /[a-z]{3}/ // 匹配3位字母
var str = "012345abcde"
console.log(reg.exec(str))
下面来定义一个正则表达式来匹配一个邮箱格式的字符串，先来确定一下邮箱的格式：
5~12位的数字字母下划线开头- 后面接
@ - 后面接
2 ~ 5位的数字和字母 - 后面接
. - 后面接
com
var reg = /^[a-zA-Z0-9\_]{5,12}\@[a-zA-Z0-9]{2,5}\.com$/
var str = "test123@qq.com" // 邮箱
console.log(reg.exec(str))
很多特殊符号在正则表达式都有特殊含义，为了取消它的特殊含义，需要在特殊符号之前加 \ 将其转义。、
三、表单验证
通过上面的学习，已经对正则表达式有了初步的了解，下面来实现一个表单验证邮箱的功能，验证通过或者不通过，都要在文本框后面输出结果
<input type="text" value="test123@qq.com">
<span></span>
<script>
var input = document.querySelector("input")
var span = document.querySelector("span")
var reg = /^[a-zA-Z0-9\_]{5,12}\@[a-zA-Z0-9]{2,5}\.com$/
input.onblur = function () {
if (reg.test(this.value)) {
span.innerHTML = "验证通过"
} else {
span.innerHTML = "验证失败"
}
}
</script>
四、总结
在实际项目中，我们通常会用插件去实现字符串验证的功能。
课后练习
- 使用正则表达式，完成手机号验证；
<input type="text" value="12345678912">
<span></span>
<script>
var input = document.querySelector("input")
var span = document.querySelector("span")
var reg = /^\d{11}$/
input.onblur = function () {
if (reg.test(this.value)) {
span.innerHTML = "验证通过"
} else {
span.innerHTML = "验证失败"
}
}
</script>
