本文目录:
一、js引入
- ES: ECMAScript语法
- DOM: document对象模型 => 通过js代码与页面文档(出现在body中的所有可视化标签)进行交互
- BOM: borwser对象模型 => 通过js代码与浏览器自带功能进行交互
- 行间式
```
出现在标签中的全局事件属性中
this代表该标签, 可以访问全局属性, 再访问具体操作对象(eg: this.style.color = "red")
```
出现在标签中的全局事件属性中
this代表该标签, 可以访问全局属性, 再访问具体操作对象(eg: this.style.color = "red")
```
- 内联式
```
出现在script脚本标签中
可以通过标签的id唯一标识,在js代码块中操作页面标签
js采用的是小驼峰命名规范, 属于解释性语言(由上至下依次解释执行)
```
出现在script脚本标签中
可以通过标签的id唯一标识,在js代码块中操作页面标签
js采用的是小驼峰命名规范, 属于解释性语言(由上至下依次解释执行)
```
- 外联式
```
通过script标签的src属性链接外部js文件, 链接后, script标签本身内部的js代码块将会被屏蔽
在任何位置都可以使用this对象,当this对象不指向任意一个标签时,代表的是window对象
```
通过script标签的src属性链接外部js文件, 链接后, script标签本身内部的js代码块将会被屏蔽
在任何位置都可以使用this对象,当this对象不指向任意一个标签时,代表的是window对象
```
- js具体出现的位置
```
head标签的底部: 依赖性js库
body标签的底部(body与html结束标签的之间): 功能性js脚本
head标签的底部: 依赖性js库
body标签的底部(body与html结束标签的之间): 功能性js脚本
``
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js引入</title> <!--js出现的第一个位置--> <script> // 一般为 依赖型JS库 </script> </head> <body> <!--脚本:一段功能代码块, 可以嵌套在其他语言中使用, 完成一些额外的功能--> <!--js可以用来书写脚本, js就是脚本语言, 书写在script标签中--> <!--js三个组成部分:ES(ECMAScript)语法 | DOM(document object model) | BOM(browser object model)--> <script> </script> <!--1.行间式--> <!--i) 行间式代码块书写在一个个全局事件名属性中,没有script这样的一个全局属性--> <!--ii) 在某一个标签的某一个事件属性值中,出现的this代表该标签--> <!--iii) 该标签对象this可以访问该标签的任意全局属性(eg:style), 然后再间接访问具体需要操作的对象(style.color)--> <div id="ddd" onmouseover="this.style.color = 'red'" onmouseleave="this.style.color = 'blue'">这是一个拥有行间式js的div</div> <!--2.内联式--> <!--i) 可以通过标签的id(唯一标识),在js代码块中访问到该标签(js的选择器)--> <!--ii) js代码块中语法采用的是小驼峰命名法, 属性的值都是用字符串形式进行赋值--> <!--iii) js属于解释性语言,所有加载顺序会影响执行结构 => 内联式的script标签出现的位置--> <script> ddd.style.backgroundColor = "pink" </script> <!--3.外联式--> <!--i) 通过script标签的src数据链接外部js文件--> <!--ii) 使用外联的script(拥有src属性)标签,会屏蔽掉标签内部的js代码块--> <!--iii) 在js任意地方,均由this对象,this对象不指向任何标签时,指向的是window对象--> <script src="js/01.js"> // 被屏蔽掉的代码块 ddd.style.fontSize = "100px"; </script> </body> <!--js出现的第二个位置--> <script> // 一般为 功能性JS脚本 </script> </html>
二、变量的定义
```js
四种定义变量的方式
语法: 关键词 变量名 = 变量值
num = 10; // 省略关键词, 定义的为全局变量, 在任何位置定义, 在任何位置都可以访问, 但不建议使用
var num = 10; // var关键词, 无块级作用域, 定义在块级作用域中的变量, 外界也可以访问
let num = 20; // let关键词, 有块级作用域, 定义在块级作用域中的变量, 外界无法访问
const NUM = 30; // const关键词,有块级作用域, 定义在块级作用域中的变量, 外界无法访问, 且变量的值不能再被二次修改, 所以为常量
var num = 10; // var关键词, 无块级作用域, 定义在块级作用域中的变量, 外界也可以访问
let num = 20; // let关键词, 有块级作用域, 定义在块级作用域中的变量, 外界无法访问
const NUM = 30; // const关键词,有块级作用域, 定义在块级作用域中的变量, 外界无法访问, 且变量的值不能再被二次修改, 所以为常量
/* 产生块级作用域的方式
{
直接书写
}
if语句可以产生
while语句可以产生
for语句也可以产生
*/
{
直接书写
}
if语句可以产生
while语句可以产生
for语句也可以产生
*/
// 函数可以产生局部作用域, 除了定义在局部作用域中的全局变量(没有关键字的变量声明), 外界可以访问, 其他定义方式, 外界都不可以访问
```
```
```js
// ES5 | ES6
// 是ECMAScript两个语法版本, ES6是ES5之后的一个版本, 但是对ES5向下兼容, ES6中支持ES5语法
```
// ES5 | ES6
// 是ECMAScript两个语法版本, ES6是ES5之后的一个版本, 但是对ES5向下兼容, ES6中支持ES5语法
```
```js
// 命名规范
// 变量命名规范
// 可以由哪些组成: 字母, 数字, _, $, 中文(一般不考虑)
// 可以以什么开头: 字母, _, $, 中文
// 不能出现什么: 关键字, 保留字
// 提倡什么书写规范: 小驼峰, 支持_连接语法
好的 = "真好";
console.log(好的);
```
// 命名规范
// 变量命名规范
// 可以由哪些组成: 字母, 数字, _, $, 中文(一般不考虑)
// 可以以什么开头: 字母, _, $, 中文
// 不能出现什么: 关键字, 保留字
// 提倡什么书写规范: 小驼峰, 支持_连接语法
好的 = "真好";
console.log(好的);
```
<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>变量的定义</title> </head> <body> 变量的定义 </body> <script> // python // 1.以换行标识语句的结束 // 2.以同缩进标识附属关系 // js // 1.以分号(;)标识语句的结束 // 2.以作用域({})标识附属关系 // 定义变量 // py: 变量名 = 变量值 // js: 声明关键词 变量名 = 变量值 console.log(num); // 注: 变量在未定义赋值之前也可以去使用,值为undefined // 定义变量: 在程序运行过程中, 值可以发生改变的量 var num = 10; console.log(num); // 定义常量: 在程序运行过程中, 值不会被改变的量 const NUM = 3.14; // JS中区分大小写 console.log(num, NUM); // NUM是标标准准常量语法, 为只读的值, 不允许修改 // NUM = 3.141592653; </script> <script> // 块级作用域 // 定义变量 // var无块级作用域 { var a = 666; } // let有块级作用域 { let b = 888; console.log(b); } console.log(a); // let定义的变量具有块级作用域, 在块级作用域之外无法访问 // console.log(b); { const c = 999; } // const定义的=常量具有块级作用域, 在块级作用域之外无法访问 // console.log(c); // 在ES6语法下, 定义变量(let)常量(const)都具有块级作用域 // 在ES5语法下, 没有定义常量的概念, 且所有定义变量都不具有块级作用域 </script> <script> // 局部作用域 // ES5语法下, 只有方法(函数)才能产生局部作用域 // ES6语法下, 块级作用域都可以为局部作用域 // 块级作用域的范围 >= 局部作用域范围 /* py def func(): 缩进 */ function func() { var aaa = 10; let bbb = 20; const ccc = 30; // 定义全局变量 // 注: 定义全局变量与重新赋值语法相同, 容易混淆, 不建议使用 ddd = 40; } func() // 执行一下函数, 所有的变量(常量)均产生了 { ddd = 50; } // console.log("aaa>>>:", aaa) // 不能被访问 // console.log("bbb>>>:", bbb) // 不能被访问 // console.log("ccc>>>:", ccc) // 不能被访问 console.log("ddd>>>:", ddd) // 可以访问 </script> <script> // 变量命名规范 // 可以由哪些组成: 字母, 数字, _, $, 中文(一般不考虑) // 可以以什么开头: 字母, _, $, 中文 // 不能出现什么: 关键字, 保留字 // 提倡什么书写规范: 小驼峰, 支持_连接语法 好的 = "真好"; console.log(好的); </script> </html>
三、三种弹出框
```js
// 普通弹出框
// alert("你丫真帅!!!");
// 普通弹出框
// alert("你丫真帅!!!");
// 输入框: 以字符串形式接收用户输入内容
// var info = prompt("请输入内容:");
// console.log(info)
// var info = prompt("请输入内容:");
// console.log(info)
// 确认框: 根据用户选择确认或取消, 得到 true | false 两个布尔结果
// var res = confirm("你是猪吗?");
// console.log(res)
```
// var res = confirm("你是猪吗?");
// console.log(res)
```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三种弹出框</title> </head> <body> 三种弹出框 </body> <script> // 普通弹出框 // alert("你丫真帅!!!"); // 输入框 // var info = prompt("请输入内容:"); // console.log(info) // 确认框 // var res = confirm("你是猪吗?"); // console.log(res) // window为顶级对象, 三种弹出框都是附属于window的 // window.alert(123) </script> </html>
四、调试方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>调试方式</title> </head> <body> 调试方式 </body> <script> var a = 10; var b = a; var c = b; // console.log(a, b, c); // alert(a) // alert(b) // alert(c) // document.write(a, b, c) // debug 断点 </script> </html>
五、数据类型
```js
// 值类型
var a = 10; // Number 10
var a = 'abc'; // String abc
var a = true; // Boolean true
var a = undefined // undefined undefined
// 引用类型
var a = function(){} // function f(){}
var a = {} // Object {}
var a = null // Null null
// 值类型
var a = 10; // Number 10
var a = 'abc'; // String abc
var a = true; // Boolean true
var a = undefined // undefined undefined
// 引用类型
var a = function(){} // function f(){}
var a = {} // Object {}
var a = null // Null null
// 其他Object具体体现
Array | Date | RegExp
```
Array | Date | RegExp
```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基本数据类型</title> </head> <body> 基本数据类型 </body> <script> // 值类型 // 1.number类型 var num = 10; // 类型, 值 console.log(typeof(num), num) // 判断方式 console.log(typeof num == 'number'); num = 3.14; console.log(typeof(num), num); // 2.string类型 var str = '单引号字符串'; console.log(typeof(str), str); str = "双引号字符串"; console.log(typeof(str), str); // 3.boolean类型 var res = true; console.log(typeof(res), res); res = false; console.log(typeof(res), res); // 4.undefined类型 console.log(typeof(abc), abc); var abc = undefined; console.log(typeof(abc), abc); // 引用类型 // 5.function类型 var fn = function (a, b) { return a + b; }; console.log(typeof(fn), fn); // 6.object类型 (类字典方式来使用) var obj = { name: 'egon', age: 78 }; console.log(typeof(obj), obj); console.log(obj instanceof Object); // 其他形式对象 // 7.null类型 var xyz = null; console.log(typeof(xyz), xyz); // object null console.log(xyz instanceof Object); // false => Null类型 // 具体的对象类型 // Array类型 var a = new Array(1, 2, 3, 4, 5); console.log(a, typeof a); // 判断方式 console.log(typeof a == 'object'); console.log(a instanceof Object); console.log(a instanceof Array); // Date类型 var a = new Date(); console.log(a, typeof a); // 判断方式 console.log(typeof a == 'object'); console.log(a instanceof Object); console.log(a instanceof Date); // RegExp类型 var a = new RegExp('a'); a = /[abc]/; console.log(a, typeof a); // 判断方式 console.log(typeof a == 'object'); console.log(a instanceof Object); console.log(a instanceof RegExp) // 使用正则 console.log('abc'.match(a)) </script> </html>
六、数据类型转换
```js
// 1.通过类型声明转换
Number() | String() | Boolean()
// 1.通过类型声明转换
Number() | String() | Boolean()
// 2.方法(函数)
parseInt('10') | parseFloat('3.14')
123..toString()
parseInt('10') | parseFloat('3.14')
123..toString()
// 3.隐式转换
+'10' => 10
'' + 10 => '10'
```
+'10' => 10
'' + 10 => '10'
```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>数据类型转换</title> </head> <body> number | boolean | string 之间相互转换 </body> <script> // 1. number 与 boolean类型 // boolean类型的true就是数字1, false就是数字0 console.log((true + true) * 10 * false) // number 中 0, NaN 可以直接当false来使用, 其他的都可以当true来使用 // 2. string,boolean 转换为 number var a = '10'; // => 10 a = '3.14'; // => 3.14 a = '3.14.15'; // => NaN var b = true; var n1 = Number(a); console.log(n1) var n2 = Number(b); console.log(n2) a = '3.14.15'; // 3.14 a = 'a3.14'; // NaN console.log(parseFloat(a)); a = '3.94.15'; // 3 console.log(parseInt(a)); // 体现弱语言类型 a = '10'; var res = +a; // number 10 console.log(typeof(res), res) // 3.number, string 转换为 boolean // 在分支或循环判断中, 系统会将数字与字符串类型自动转换为布尔类型 // 不在判断中, 如何转换 console.log(Boolean("")); console.log(Boolean(0)); console.log(Boolean(NaN)); console.log(Boolean(null)); console.log(Boolean("1")); console.log(Boolean(-100)); // 4.number, boolean 转换为 string console.log(String(true)); console.log(String(1)); var a = 123; console.log(a.toString()); console.log(123..toString()); console.log(3.14.toString()); var c = 123 + ""; console.log(typeof c, c); // 用例 var z1 = 2 + +"5"; // 7 z1 = 2 + "5"; // "25" // z1 = 2 ++"5"; // 语法错误 ++连在一起是 ++语法(了解) var z2 = "5" - 2; // 3 console.log(z1, z2); // 补充 // NaN与NaN不相等 </script> </html>
七、运算符
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>运算符</title> </head> <body> 运算符 </body> <script> // 算术运算符 // + | - | * | / | % | ++ | -- console.log(5 / 2); // 2.5 // 取整 console.log('%d', 5 / 2); // "2" var num = parseInt(5 / 2); // 2 console.log(num); // 取模(求余) console.log(5 % 2); // 1 // 任何一个自然数对 n 取余, 结果为 [0, n-1] // 自增|自减 ++|-- // ++就是自增1, --就是自减1 var num = 10 console.log(num++); // 10 console.log(++num); // 12 console.log(num); // 12 // ++在变量后(num++), 先将变量的值拿去使用,再自身自增1 // ++再变量前(++num), 先将变量自身自增1, 再将结果拿去使用 // 总结: 不管++在前在后,运算结束后,变量自身值一定自增1 // res = ++num <==> num++; res = num // res = num++ <==> res = num; ++num </script> <script> // 赋值运算符 // = | += | -= | *= | /= | %= var x = 10; // 将10的值赋值给变量x y = x; // 将变量x的值传递给变量y console.log(y); // 10 x += 10; // x = x + 10, 运算方式由右至左, 将x+10的结果重新复制给x console.log(y); // 10, y的值虽然来源于x, 但y值只由自身控制 // x /= 10 == x = x / 10 </script> <script> // 比较运算符, 结果为Boolean类型 // == | === console.log("5" == 5); // true, 只做值比较 console.log("5" === 5); // false, 比较值及类型 // != | !== console.log("5" != 5); // false, 只做值比较 console.log("5" !== 5); // true, 比较值及类型 </script> <script> // 逻辑运算符, 运算结果通常为Boolean(可以不是) // 或 | 与 | 非 <==> || | && | ! // &&(与) var a = 10; var b = 20; var c = "20"; var res = a < b && b == c; // true console.log(res) // 总结&&: 全真为真, 有假则假 // 总结||: 全假则假, 有真则真 // 总结!: 真则假, 假则真 // 逻辑运算符的结果本质上为表达式值 // 表达式: 由数字,变量,运算符组成的合法式子 res = a < b && c; console.log(res); res = (a = 1 || b == c); console.log(res); // 针对 && | || // 疑问: 逻辑运算符结果可能为逻辑运算符之前表达式的值,也可能是之后表达式的值 // 当逻辑运算符出现 短路现象 , 就是之前表达式的值, 否则(正常情形下), 就是之后表达式的值 // &&, 前一个表达式为假时, 整个式子的结果已经确定为假, 后表达式不会被执行, 就是被短路了 var num = 10; res = false && num++; console.log(res, num); // null, 10 res = null && ++num; console.log(res, num); // null, 10 // ||, 前一个表达式为真时, 整个式子的结果已经确定为真, 后表达式不会被执行, 就是被短路了 res = -10 || ++num; console.log(res, num); // -10, 10 // 特殊小技巧 => 类似于if分支来使用 *** /* if a > b: print(a) */ var a = 100; a > b && console.log("大值a:", a); </script> <script> // 三目运算符 // 语法: 条件表达式 ? 表达式1 : 表达式2 var a = 10, b = 20; var res = a < b ? a : b; // 取小值 console.log(res); res = a < b ? b : a; // 取大值 console.log(res); // 类似于if...esle... a < b ? console.log("表达式结果为true") : console.log("表达式结果为false") </script> <script> let abc = 10; // let abc = 20; // 在es6语法下,有变量的重复定义规则, 不允许在同一作用域下,出现变量的重复定义 { let abc = 20; // 可以编译运行通过 } // ES6新增 let [a1, b1, c1] = [1, 2, 3]; // a1=1,b2=2,c3=3 let [a2, ...b2] = [1, 2, 3]; // a2=1,b2=[2,3] let {key: a3} = {key: 10}; // a3=10 let [a4, b4, c4] = 'xyz'; // a4='x',b4='y',c4='z' console.log("end") </script> </html>
八、分支机构
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>分支结构</title> </head> <body> 分支结构 </body> <script> // 程序本质分为三大结构: 顺序结构 | 分支结构 if|switch | 循环结构 for|while|do...while // 根据程序代码执行的方式 划分为 三大结构 // 逻辑运算符 => 类似于 if单分支结构 // 三目运算符 => 类似于 if...else分支结构 /* py 语法 if 条件表达式: 代码块; js 语法 if (表达式) { 代码块 } */ if (1) { var a = 10; let b = 20; console.log("d:%d只能在块级作用域中访问", b); } console.log("a:%d在块级作用域内外都可以访问", a); /* 全语法 if (表达式1) { } else if () { } ... else if () { } else { } */ /* if 与 if直接可以随意嵌套 */ var salary = prompt("请输入所发工资:"); if (salary > 0) { console.log("工资已发, 打算还账!"); salary -= 100000; if (salary > 0 ) { console.log("拯救世界..."); } else if (salary == 0) { console.log("家里蹲, 峡谷见"); } else { console.log("借钱, 填窟窿, 谁来拯救我..."); console.log("借%d元钱", -salary); } } else { console.log("拿我刀来, 允许你跑49m"); } </script> <script> // switch分支 /* 语法 switch (结果为整数|字符串的表达式) { case 值1(值需要和表达式进行类型统一): 代码块; break; ... case 值n: 代码块; break; default: 代码块; } */ // 用例 var num = prompt("请输入一个自然数: "); // 输入接收的默认为字符串类型数据 var num = +num; switch (num) { case "0": console.log("用户输入的是数字0"); break; case "1": console.log("用户输入的是数字1"); break; case 0: console.log("change, 用户输入的是数字0"); break; case 1: console.log("change, 用户输入的是数字1"); break; default: console.log("用户输入的是数字非0和1"); } // default分支, 出现在所有case之下, 当所有case没有匹配上, 走该分支, // 该分支也可以省略, 代表没有未匹配到的动作 // switch()中的表达式结果为 整型 或 字符串, case的值要与其对应 // break作用是结束分支结构(结束所属switch语句), 可以省略 var month = +prompt("请输入月份"); switch (month) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: console.log("%d月天数为31天", month); break; case 4: case 6: case 9: case 11: console.log("%d月天数为30天", month); break; case 2: console.log("%d月天数为28天", month); } </script> </html>
九、循环结构
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>循环结构</title> </head> <body> 循环结构 </body> <script> /* 循环 py while 条件表达式: 代码块; js while (条件表达式) { 代码块; } */ var count = 0; while (count < 5) { console.log("我最棒, 我最帅, 我是天下第一!"); count++; } // for循环 /* for (循环变量定义并初始化①; 循环变量条件表达式②; 循环变量增量③) { 代码块④; } 执行顺序 ① ②④③ ... ②④③ ②, ②④③个数就是循环次数 */ for (var i = 0; i < 5; i++) { console.log("我最棒, 我最帅, 我是天下第一!"); } // 所有for循环可以解决的问题, 都可以由while来解决 // while循环可以解决不明确循环次数的循环需求 // break: 结束当前所属循环体 // continue: 结束本次循环,进入下一次循环 for (var i = 0; i < 5; i++) { if (i == 3) break; console.log(i); // 0, 1, 2 } for (var i = 0; i < 5; i++) { if (i == 3) continue; console.log(i); // 0, 1, 2, 4 } // do...while循环 // 无论条件是否满足, 都需要执行一次循环体 (循环体只是要被执行一次) var num = 0; do { console.log("我最棒, 我最帅, 我是天下第一!"); num++; } while (num < 5); // 当条件满足时, 返回循环体 </script> </html>
十、异常处理
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>异常处理</title> </head> <body> 异常处理 </body> <script> // 了解 let num = 10; try { console.log(num); // try...catch捕获的是runtime时的异常 let num = 20; } catch (e) { console.log(e) // catch为处理异常的分支 } finally { console.log('无论是否出现异常,该分支都会被执行') } </script> <script> console.log(num) </script> </html>
十一、函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>函数</title> </head> <body> 函数 </body> <script> // 什么函数: 具有特定功能的代码块 // 函数与方法: 调用方式的不同 函数通过函数名 | 方法通过调用者.语法调用 // 如何定义函数: /* function 函数名(参数列表) { 函数体; (函数体可以包含函数的返回值) } */ // 函数的调用: 函数名(参数列表) // 函数的调用()一定不可以省略, 参数列表看情况(不管需不需要,均可以传或不传) // 函数的分类: // 无参函数: function fn1() { console.log("无参函数") } fn1(); // 有参函数: function fn2(a, b) { console.log("a,b的和:", a + b) } fn2(10, 20); // 匿名函数: var fn3 = function () { // 匿名函数虽然没有名字, 但会开辟内存空间, 所以当然可以用一个变量来指向这个内存空间 console.log("没有直接定义名字的函数"); }; fn3(); // 系统不好在()()之间添加;作为语句结束,需要添加分号时一定需要手动添加 fn4 = fn3; fn4(); // 匿名函数的自调用 (function () { // 定义一个匿名函数, 至少需要使用一次, 使用一次的方式就叫做 匿名函数的自调用 // 如果匿名函数不存在任何使用, 编译就无法通过 // 匿名函数的自调用: // 1.将整个匿名函数作为一个整体, 用()将其包裹 // 2.并完成函数的调用, 添加 (参数列表) console.log(" 匿名函数的自调用"); })(); // 函数的参数: function func1() { console.log("无参"); } // 均可以调用 func1(); func1(10, 20); function func2(a, b) { console.log(">>>", a + b); } func2() func2(10) func2(10, 20) func2(10, 20, 30) // 默认值参数 function func3(a, b=20, c, d=40) { // 定义在函数声明中的参数为形参 console.log("***", a + b + c + d); } var temp = 1000; func3(10, 100, temp) // 函数调用传入的实际值,或拥有实际值的变量为实参 // 函数的返回值: // js的函数只能返回一个值, 这个值可以为任意类型(如果想返回多个值,将多个值放到数组或对象中) let func4 = () => { // return 1000, 8888, 6666; // 这种情况返回的是最后一个值 return [1000, 8888, 6666]; }; console.log(func4()) // 函数的嵌套(定义 | 调用) </script> <!-- 一个人写的js --> <script> // 为什么要出现匿名函数的自调用 (function () { // 为了生成一个局部作用域 var num = 10; })(); function abc() { var abc = 20; console.log(abc) } </script> <!-- 另一个人写的js --> <script> // console.log(num); abc() </script> <script> // 函数的定义 (function () { // 匿名函数定义并调用 })() // ES5 function fun1() { } var fun2 = function () { }; // ES6 let fun3 = () => { } // 函数的调用 // 函数名(参数列表) </script> <script> // 函数的参数: // 1.实参与形参个数可以不匹配,随意规定 // 2.形参可以设置默认值(并非为py中的关键字参数) // 3.实参对形参进行传值时,完全采用位置匹配(eg:第n个实参一定将值传递给第n个形参) </script> <script> // 函数的返回值: // 1.函数的返回值有return来明确,没有明确,则相当于返回undefined // 2.函数只能返回一个值 // 3.函数的返回值就是函数的执行结果,也就是函数值 </script> </html>