⛺️ 欢迎大家拜访我的:个人博客
⛽️ 前端加油站之【JavaScript】⛽️
内容 | 地址 |
---|---|
(一)JS 基础篇—基础知识总结 | ⛳️ 【快来点点我 ~】 |
(二)JS 基础篇—函数与作用域 | ⛳️ 【快来点点我 ~】 |
(三)JS 基础篇—对象与内置对象 | ⛳️ 【客官别急,马上更新 ~】 |
(四)JS 进阶篇—DOM文档对象模型 | ⛳️ 【客官别急,马上更新 ~】 |
(五)JS 进阶篇—BOM浏览器对象模型 | ⛳️ 【客官别急,马上更新 ~】 |
(六)JS 高级篇—面向对象编程 | ⛳️ 【客官别急,马上更新 ~】 |
(七)JS 高级篇—ES6学习 | ⛳️ 【客官别急,马上更新 ~】 |
思维导图 ⏳
1. 函数 ✂️
1.1 初识函数
函数:就是封装了一段可被重复调用执行的代码块,通过此代码块可以实现大量代码的重复使用
函数一般是用来实现某一种重复使用的功能,在需要该功能的时候,直接调用函数就可以了,而不需要重复地编写一大堆重复的代码。并且在需要修改该函数功能的时候,也只需要修改和维护这一个函数就行,而不会影响其他代码
函数一般是在两种情况下使用:
- 一种是实现 重复使用的功能
- 一种是实现 特定的功能
1.2 函数的声明及调用
在 JavaScript 中,如果我们想要使用函数,一般只需要简单的2步
即:声明函数 和 调用函数
1.2.1 声明函数的方法 🔥
✍ 语法:
function 函数名(参数1 , 参数2 ,..., 参数n){
//函数体代码
}
✒️ 说明:
1️⃣ 每一个函数,就是独立的语句块(看成一个整体)
函数是一个用大括号
{}
括起来的、可重复使用的、具有特定功能的语句块。像 if、while、do…while、for 等语句中也有{}
括起来的语句块。对于语句块来说,我们都是把它当成整体来处理的
2️⃣ function 是声明函数的关键字,必须小写
函数跟变量是非常相似的,变量用var来定义,而函数用function来定义。变量需要取一个变量名,而函数也需要取一个函数名
3️⃣ 函数名不要随便取,尽量取有意义的英文名
函数的命名要让人一看就知道这个函数是干什么的,由于函数一般是为了实现某个功能才定义的, 所以通常我们将函数名命名为动词
4️⃣ 函数的参数个数要根据实际需求书写
函数的参数,是可以省略的(即不写),当然也可以是1个、2个或n个。如果是多个参数,则参数之间用英文逗号
,
隔开。此外,函数参数的个数,一般取决于你实际开发的需要
1.2.2 调用函数的方法 🔥
✍ 语法:
// 1. 无参数调用
函数名(); //通过调用函数名来执行函数体代码
// 2. 带参数调用
函数名(参数1 , 参数2 ,..., 参数n);
✒️ 说明:
- 调用的时候千万不要忘记添加小括号
- 口诀:函数不调用,自己不执行
- 声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码
① 直接调用
直接调用,是常见的函数调用方式,一般用于“没有返回值的函数”
⏰ 案例:
//定义函数
function getMes(){
document.write("听说泰国人很大方,一见面就说:刷我滴卡。");
}
//调用函数
getMes();
② 在表达式中调用
在表达式中调用,一般用于“有返回值的函数”,然后 函数的返回值会参与表达式的计算
⏰ 案例:
//定义函数
function addSum(a, b) {
var sum = a + b;
return sum;
}
//调用函数
var n = addSum(1, 2) + 100;
document.write(n); // 103
③ 在超链接中调用
在超链接中调用,指的是在 a 元素的 href 属性中使用 “javascript:函数名” 的形式来调用函数。当用户点击超链接时,就会调用该函数
✍ 语法:
<a href="javascript:函数名"></a>
⏰ 案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function expressMes()
{
alert("她:我爱张张\n我:oh~my,= =?!");
}
</script>
</head>
<body>
<a href="javascript:expressMes()">表白对话</a>
</body>
</html>
④ 在事件中调用
JavaScript 是基于事件的一门语言,像鼠标移动是一个事件、鼠标单击也是一个事件,类似的事件很多。当一个事件产生的时候,我们就可以调用某个函数来针对这个事件作出响应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function alertMes()
{
alert("冰冰冰,甜甜甜,好次好次~");
}
</script>
</head>
<body>
<input type="button" onclick="alertMes()" value="提交" />
</body>
</html>
1.2.3 函数的两种声明方式
① 命名函数 🔥
命名函数也叫自定义函数,是利用函数关键字 function 自定义函数方式
✍ 语法:
// 声明定义方式
function fn() {...}
// 调用
fn();
✒️ 说明:
- 因为有名字,所以也被称为命名函数
- 调用函数的代码既可以放到声明函数的前面,也可以放在声明函数的后面
② 匿名函数 🔥
✍ 语法:
// 这是函数表达式写法,匿名函数后面跟分号结束
var fn = function(){...};
// 调用的方式,函数调用必须写到函数体下面
fn();
✒️ 说明:
- 因为函数没有名字,所以也称为匿名函数
- 这个fn 里面存储的是一个函数
- 函数调用的代码必须写到函数体后面
1.3 函数的参数
参数是在在函数内部某些值不能固定,我们可以通过参数在调用函数时传递不同的值进去
1.3.1 形参和实参 🔥🔥
在声明函数时,可以在函数名称后面的小括号中添加一些参数,这些参数被称为形参,而在调用该函数时,同样也需要传递相应的参数,这些参数被称为实参
✍ 语法:
// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数,用逗号分隔
// 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);
✒️ 说明:
- 形参:形式上的参数。函数定义的时候传递的参数,当前并不知道是什么内容
- 实参:实际上的参数。函数调用的时候,传递的参数,实参是传递给形参的
⏰ 案例:
// 利用函数求任意两个数的和
// 声明函数
function getSum(num1,num2){
console.log(num1+num2)
}
// 调用函数
getSum(1,3) // 4
getSum(6,5) // 11
⚠️ 注意:
- 函数调用的时候实参值是传递给形参的
- 形参简单理解为:不用声明的变量
- 实参和形参的多个参数之间用逗号
,
分隔,
1.3.2 形参实参不匹配 🔥
参数个数 | 说明 |
---|---|
实参个数 == 形参个数 | 输出正确结果 |
实参个数 > 形参个数 | 只取到形参个数的实参数 |
实参个数 < 形参个数 | 多的形参定义为undefined,结果为NaN |
⏰ 案例:
// 求数值相加和
function sum(num1, num2) {
console.log(num1 + num2);
}
sum(100, 200); // 300,形参和实参个数相等,输出正确结果
sum(100, 400, 500, 700); // 500,实参个数多于形参,只取到形参的个数
sum(200); // 实参个数少于形参,多的形参定义为 undefined,结果为NaN
⚠️ 注意:
- 函数可以带参数也可以不带参数
- 声明函数的时候,函数名括号里面的是形参,形参的默认值为 underfind
- 调用函数的时候,函数名括号里面的是实参
- 多个参数中间用逗号分隔
- 形参的个数可以和实参个数不匹配,但是结果不可预计,我们尽量要匹配
1.4 函数的返回值
在JavaScript中,函数可以分两种:一种是“没有返回值的函数”;另外一种就是“有返回值的函数”
无论是哪一种函数,都必须使用 function 来定义
1.4.1 没有返回值的函数
没有返回值的函数,指的是函数执行完就算了,不会返回任何值
✍ 语法:
function 函数名(参数1 , 参数2 ,..., 参数n)
{
……
}
1.4.2 有返回值的函数
有返回值的函数,指的是函数执行完了之后,会通过 return 返回一个值,这个返回值可以供我们使用
① return 语句介绍
我们有时希望函数将值返回给调用者,此时通过使用 return 语句就可以实现
✍ 语法:
// 声明函数
function 函数名() {
...
return 需要返回的值;
}
// 调用函数
函数名(); // 此时调用函数就可以得到函数体内return 后面的值
- 在使用 return 语句时,函数会停止执行,并返回指定的值
- 如果函数没有 return ,返回的值是 undefined
② return 终止函数执行 🔥
return 有终止函数的作用
即: return 语句之后的代码不会再被执行
⏰ 案例:
function add(num1,num2){
//函数体
return num1 + num2; // 注意:return 后的代码不执行
alert('我不会被执行,因为前面有 return');
}
var resNum = add(21, 6); // 调用函数,传入两个实参,并通过 resNum 接收函数返回值
alert(resNum); // 27
③ return 多个返回值情况 🔥
- return 语句只能返回一个值
- 如果用逗号隔开多个返回值,则只会返回最后一个返回值
⏰ 案例:
function add(num1,num2){
//函数体
return num1,num2;
}
var resNum = add(21,6); // 调用函数,传入两个实参,并通过 resNum 接收函数返回值
alert(resNum); // 6
④ break、continue、return 的区别
break
: 结束当前循环体(如 for、while)continue
:跳出本次循环,继续执行下次循环(如for、while)return
:不仅可以退出循环,还能够返回 return 语句中的值,同时还可以结束当前的函数体内的代码
1.5 arguments 内置参数传参 🔥🔥
在 JavaScript 中,arguments 是当前函数的一个内置对象。实际上所有函数都内置了一个 arguments 对象,arguments 对象中存储了传递的所有实参。
作用:当我们不确定有多少个参数传递的时候,可以用 arguments 来获取
- arguments 存放的是传递过来的实参
- arguments 展示形式是一个伪数组,因此可以进行遍历
伪数组具有以下特点:
- 具有数组 length 属性
- 可按数组索引方式储存读取及遍历数据
- 不具有数组的
push()
,pop()
等方法
⏰ 案例:
// 函数声明
function fn() {
console.log(arguments); //里面存储了所有传递过来的实参
console.log(arrguments.length); // 3
console.log(arrguments[2]); // 3
}
// 函数调用
fn(1,2,3);
⏰ 案例:
// 利用函数求任意个数的最大值
function maxValue() {
var max = arguments[0];
for (var i = 0; i < arguments.length; i++) {
if (max < arguments[i]) {
max = arguments[i];
}
}
return max;
}
console.log(maxValue(2, 4, 5, 9)); // 9
console.log(maxValue(12, 4, 9)); // 12
1.6 嵌套函数 🔥
嵌套函数:就是在一个函数的内部定义另外一个函数。不过 在内部定义的函数只能在内部调用,如果在外部调用,就会出错
⏰ 案例:
function foo() {
var x = 1;
function bar() {
var y = x + 1;
console.log(y); // 2
}
bar();
console.log(x); // 1
}
foo();
⏰ 案例:
// 嵌套函数用于“阶乘”
<script>
//定义阶乘函数
function func(a) {
//嵌套函数定义,计算平方值的函数
function multi(x) {
return x * x;
}
var m = 1;
for(var i = 1; i <= multi(a); i++) {
m = m * i;
}
return m;
}
//调用函数
var sum =func(2) + func(3);
document.write(sum); // 362904
</script>
1.7 函数封装及调用
函数的封装是 把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口
我们以上的所有例子都是封装一个能实现某一功能的函数,然后再在具体案例中进行函数调用从而处理问题
⏰ 案例:
// 封装函数:实现验证是否为闰年功能
function isLeapYear(year) {
//判断闰年的条件
if ((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0)) {
return year + "年是闰年";
} else {
return year + "年不是闰年";
}
}
// 调用函数
document.write(isLeapYear(2017)); // 2017不是闰年
</script>
⏰ 案例:
// 封装函数:实现翻转任意一个数组功能
function reverse(arr) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
}
// 调用函数
var arr1 = reverse([1, 3, 4, 6, 9]);
console.log(arr1);
⏰ 案例:
// 封装函数:实现对数组进行冒泡排序功能
function sort(arr) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j+1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
// 调用函数
⏰ 案例:
// 封装函数:用户输入年份,输出当前年份2月份的天数;
// 如果是闰年,则2月份是 29天;如果是平年,则2月份是 28天
function backDay() {
var year = prompt('请您输入年份:');
if (isRun(year)) { // 调用函数需要加小括号
alert('你输入的' + year + '是闰年,2月份有29天');
} else {
alert('您输入的' + year + '不是闰年,2月份有28天');
}
}
// 调用函数
backDay();
// 封装函数:实现判断是否是闰年的功能
function isRun(year) {
var flag = false;
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
flag = true;
}
return flag;
}
1.8 内置函数及使用 🔥
在JavaScript中,函数还可以分为“自定义函数”和“内置函数”
- 自定义函数:指的是需要我们自己定义的函数,前面学的就是自定义函数
- 内置函数:指的是JavaScript内部已经定义好的函数,也就是说我们不需要自己写函数体代码,直接调用就行了
常用内置函数一览
内置函数 | 作用 |
---|---|
parseInt() | 提取字符串中的数字,只限提取整数 |
parseFloat() | 提取字符串中的数字,可以提取小数 |
isFinite() | 判断某一个数是否是一个有限数值 |
isNaN() | 判断一个数是否是NaN值 |
escape() | 对字符串进行编码 |
unescape() | 对字符串进行解码 |
eval() | 把一个字符串当做一个表达式一样去执行 |
2. 作用域 ✂️
作用域:即变量(变量名,函数名)可生效的范围
作用域的作用:使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突
2.1 作用域分类
JavaScript (ES6前) 中的作用域有两种:
- 全局作用域
- 局部作用域(函数作用域)
2.1.1 全局作用域 🔥
全局作用域是最大的作用域,包含了局部作用域。在全局作用域中定义的变量可以在任何地方使用
网页打开的时候,浏览器会自动给我们生成一个全局作用域 window,这个作用域会一直存在,直到页面关闭才会销毁
⏰ 案例:
//下面两个变量都是存在全局作用域下面的,都是可以在任意地方使用的
var num1 = 100;
var num2 = 200;
2.1.2 局部作用域 🔥
局部作用域就是在全局作用域下面,开辟出来的一个相对小一些的作用域。在局部作用域中定义的变量只能在这个局部作用域内部使用
- 在 js 中只有函数能生成一个局部作用域,别的不行
- 每一个函数,都是一个局部作用域
⏰ 案例:
// 这个 num 是一个全局作用域下的变量 在任何地方都可以使用
var num = 100;
function fn(){
//下面这个变量就是一个 fn 局部作用域内部的变量
//只能在 fn 函数内部使用
var num2 = 200;
}
fn();
2.1.3 JS 无块级作用域 🔥🔥
1️⃣ 块级作用域由 {}
包括,在其他编程语言中(如 java、c#等),在 if 语句、循环语句中创建的变量,仅仅只能在本 if 语句、本循环语句中使用,如下面的Java代码:
if(true){
int num = 123;
System.out.println(num); // 123
}
System.out.println(num); // 报错
2️⃣ JS 中没有块级作用域(在ES6之前)
if(true){
int num = 123;
System.out.println(num); // 123
}
System.out.println(num); // 123
2.2 变量的作用域
在JavaScript中,根据作用域的不同,变量可以分为两种:全局变量 和 局部变量
2.2.1 全局变量作用域
在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)
- 全局变量在代码的任何位置都可以使用
- 在全局作用域下 var 声明的变量 是全局变量
- 特殊情况下,在函数内不使用 var 声明的变量也是全局变量(不建议使用)
2.2.2 局部变量作用域
- 在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量)
- 局部变量只能在该函数内部使用
- 在函数内部 var 声明的变量是局部变量
- 函数的形参实际上就是局部变量
⚠️ 注意:
- 全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存
- 局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间
2.3 作用域链 🔥🔥
只要是代码,就至少有一个作用域,写在函数内部的叫局部作用域,如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链
作用域链: 内部函数访问外部函数的变量,采取的是链式查找的方式来决定取哪个值,这种结构我们称为作用域链表
⏰ 案例:
var num = 10;
funtion fn() { // 外部函数
var num = 20;
function fun() { // 内部函数
console.log(num); // 20 ,一级一级访问
}
}
⚠️ 注意:
采取 就近原则 的方式来查找变量最终的值
3. 预解析 ✂️
JavaScript 代码是由浏览器中的 JS解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步:预解析和代码执行
1️⃣ 预解析:JS引擎会把 JavaScript 代码里面所有的 var变量定义 还有 function函数 提升到当前作用域的最前面
2️⃣ 代码执行:从上到下执行JS语句
学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined,为什么在函数声明之前就可以调用函数
3.1 函数参数预解析 🔥
function fn(b) {
function b() {
}
b();
}
fn(200);
// 实际解析过程
function fn(b){
// 预解析先声明参数var b,并赋值,在声明函数b
var b = 200;
b();
function b(){}
b();
}
fn(200);
3.2 函数声明预解析 🔥🔥
函数提升: 函数的声明会被提升到当前作用域的最上面,但是不会调用函数
⏰ 案例:
fn(); // 11
function fn() {
console.log('11');
}
//相当于执行了以下代码
function fn() {
console.log('11');
}
fn(); // 11
3.3 变量声明预解析 🔥🔥
变量预解析也叫做 变量提升、函数提升
变量提升: 变量的声明会被提升到当前作用域的最上面,变量的赋值不会提升
⏰ 案例:
console.log(num); // underfind
var num = 10;
//相当于执行了以下代码
var num; // 变量声明提升到当前作用域最上面
console.log(num); // underfind
num = 10; // 变量的赋值不会提升
⚠️ 注意:
1️⃣ 赋值式函数:var fn = function(){}
,按照 var 的规则进行解析
fn(); // 报错
var fn = function fn(){
console.log("我是fn函数");
}
// 在预解析,只是告诉浏览器,fn 这个名字可以使用,但是没有赋值
var fn;
fn() // 报错
fn = function fn(){
console.log("我是fn函数");
}
fn();
2️⃣ let
或者const
声明的变量,仍然会提前被收集到变量对象中,但和var不同的是,let
或者const
定义的变量,不会在这个时候给他赋值 underfind
console.log(num); // undefind
console.log(a); // 报错
let a = 10;
var num = 100;
3.4 预解析常见问题
3.4.1 函数表达式声明调用问题 🔥
对于函数表达式声明调用需要记住:函数表达式调用必须写在函数声明的下面
⏰ 案例:
// 匿名函数(函数表达式方式): 若我们把函数调用放在函数声明上面
fn();
var fn = function() {
console.log('22'); // 报错
}
//相当于执行了以下代码
var fn;
fn(); //fn没赋值,没这个,报错
var fn = function() {
console.log('22'); //报错
}
3.4.2 预解析时形参与变量重名问题 🔥
函数执行的时候,会进行形参赋值,函数执行的时候,会进行预解析,一旦函数的形参和定义的私有变量重名,是先预解析还是先形参赋值?
当函数和变量重名的时候,在预解析阶段以函数为准
⏰ 案例:
var a = 100;
function fn(b){
function b(){
}
b();
}
fn(200);
如果预解析在前面,形参在后面
这个 fn 函数执行的时候,先把 b 解析成为一个 函数
然后再给 b 赋值为 200 ,那么就会报错了
如果预解析在后面,形参在前面
这个 fn 函数执行的时候,先把 b 赋值为一个 200
然后预解析的时候,把 b 赋值为 函数,就不会报错
⚠️ 注意:
在函数执行的时候,先进行形参赋值,再进行预解析
3.4.3 带 if 条件语句的预解析问题 🔥
if 条件不管成不成立,里面的代码都会进行预解析
⏰ 案例:
// 你以为的答案:
console.log(num); // undefined
if(false){
var num = 100;
}
console.log(num); // 100
// 实际上的结果:
console.log(num); // undefined
if(false){
var num = 100;
}
console.log(num); // undefined
// 相当于:
console.log(num); // undefined
if(false){
var num;
num = 100;
}
console.log(num); // undefined
3.4.4 return 语句的预解析问题 🔥
return 后面的代码虽然不执行,但是也会进行预解析
⏰ 案例:
function fn(){
var num = 100;
console.log(num); // 100
console.log(n); // undefined
return;
var n = 200;
}
fn();
// 上面代码相当于:
function fn(){
var num;
var n;
num = 100;
console.log(num); // 100
console.log(n); // undefined
return;
n = 200;
}
fn();
3.5 预解析练习
⏰ 案例:
var num = 10;
fun();
function fun() {
console.log(num); // undefined
var num = 20;
}
// 上述代码相当于:
var num;
function fun() {
var num;
console.log(num); // undefined
num = 20;
}
num = 10;
fun();
// 最终结果是 undefined
⏰ 案例:
var num = 10;
function fn(){
console.log(num); // undefined
var num = 20;
console.log(num); // 20
}
fn();
// 上述代码相当于:
var num;
function fn(){
var num;
console.log(num); // undefined
var num = 20;
console.log(num); // 20
}
num = 10;
fn();
// 最终结果是 undefined 20
⏰ 案例:
var a = 18;
f1();
function f1() {
var b = 9;
console.log(a); // undefined
console.log(b); // 9
var a = '123';
}
// 上述代码相当于:
var a;
function f1() {
var b;
var a
b = 9;
console.log(a); // undefined
console.log(b); // 9
a = '123';
}
a = 18;
f1();
// 最终结果是 undefined 9
⏰ 案例:
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
var a = b = c = 9;
// 相当于 var a = 9; b = 9;c = 9; b和c的前面没有var声明,当全局变量看
// 也可以集体声明 var a = 9,b = 9,c = 9;
console.log(a);
console.log(b);
console.log(c);
}
// 上述代码相当于:
function f1() {
var a;
a = b = c = 9;
console.log(a); // 9
console.log(b); // 9
console.log(c); // 9
}
f1();
console.log(c); // 9
console.log(b); // 9
console.log(a); // 报错 a是局部变量