JavaScript在校生从入门到ES6实战进阶教程（全天更新汇总）
汇总版目录
- 前言
- 一、Javascript基础语法
-
- 1.JS的调用方式与执行顺序
- 2.变量与运算符
- 3.输入与输出
- 4.判断语句
- 5.循环语句
- 6.对象
- 7.函数
- 9.类
- 10.事件
- 二、Javascipt常用库
-
- 1.JQuery
- 2.setTimeout与setInterval
- 3.requestAnimationFrame
- 4.Map与Set
- 5.LocalStorage
- 6.JSON
- 7.Date日期
- 8.WebSocket网络通信
- 9.window
- 10.Canvas库
- 三、Javascript进阶（重点）
-
- 1.事件流(捕获和冒泡)
- 2.事件委托
- 3.BOM-Window对象
- 4.JS常用的数组方法
- 5.正则表达式
- 6.作用域与作用域链
- 7.JS垃圾回收机制
- 四、JS高阶和ECMAScript（2015-2023）
-
- 1.闭包
- 2.变量和函数提升
- 3.函数参数和es6箭头函数
- 4.解构赋值
- 5.forEach和filter
- 6.构造函数
- 7.原型和原型链（重点）
- 8.深拷贝和浅拷贝
- 9.this和改变this指向的三种方法
- 10.防抖和节流
前言
无序言，本文开门见山，直接讲解
Javascript作为前端三剑客中最重要的一环，它是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
提示：以下是本篇文章正文内容，下面案例可供参考
一、Javascript基础语法
1.JS的调用方式与执行顺序
使用方式:
HTML页面中的任意位置加上标签即可。
常见使用方式有以下几种：
- 直接在
标签内写JS代码。 - 直接引入文件：
。 - 将所需的代码通过
import关键字引入到当前作用域。
例如：
/static/js/index.js文件中的内容为：
let name = "xiaozhuangzzz";
function print() {
console.log("Hello World!");
}
export {
name,
print
}
中的内容为：
<script type="module">
import { name, print } from "/static/js/index.js";
console.log(name);
print();
</script>
执行顺序
1.类似于HTML与CSS，按从上到下的顺序执行；
2.事件驱动执行；
HTML, CSS, JavaScript三者之间的关系
1.CSS控制HTML
2.JavaScript控制HTML与CSS
3.为了方便开发与维护，尽量按照上述顺序写代码。例如：不要在HTML中调用JavaScript中的函数。
2.变量与运算符
let与const
用来声明变量，作用范围为当前作用域。
let用来定义变量；const用来定义常量；
例如：
let s = "zzz, x = 5;
let d = {
name: "xiaozhuang",
age: 19,
}
const n = 100;
变量类型
number：数值变量，例如1,2.5string：字符串，例如"zzz",'xiaozhuang'，单引号与双引号均可。字符串中的每个字符为只读类型。boolean：布尔值，例如true,falseobject：对象，类似于C++中的指针，例如[1, 2, 3]，{name: "yxc", age: 18}，nullundefined：未定义的变量
类似于Python，JavaScript中的变量类型可以动态变化。
运算符
与C++、Python、Java类似，不同点：
**表示乘方
等于与不等于用===和!==
3.输入与输出
输入
- 从HTML与用户的交互中输入信息，例如通过
input、textarea等标签获取用户的键盘输入，通过click、hover等事件获取用户的鼠标输入。 - 通过
Ajax与WebSocket从服务器端获取输入 - 标准输入(以A+B为例)：
let fs = require('fs');
let buf = '';
process.stdin.on('readable', function() {
let chunk = process.stdin.read();
if (chunk) buf += chunk.toString();
});
process.stdin.on('end', function() {
buf.split('\n').forEach(function(line) {
let tokens = line.split(' ').map(function(x) { return parseInt(x); });
if (tokens.length != 2) return;
console.log(tokens.reduce(function(a, b) { return a + b; }));
});
});
输出
- 调试用
console.log，会将信息输出到浏览器控制台 - 改变当前页面的HTML与CSS
- 通过
Ajax与WebSocket将结果返回到服务器
格式化字符串
- 字符串中填入数值：
let name = 'xiaozhuang', age = 19;
let s = `My name is ${name}, I'm ${age} years old.`;
- 定义多行字符串：
let s =
`
标题
段落
/div>`
- 保留两位小数如何输出
let x = 1.234567;
let s = `${x.toFixed(2)}`;
练习
- 输出Hello World。
- 输入两个数，计算两个数的和。
- 输入一个小数，返回向零取整之后的结果。
- 输入a, b, c，输出 (a + b) * c 的值。
- 求反三位数。
- 输出如下的菱形。
*
***
*****
***
*
4.判断语句
第三节习题答案解析3（1，2应该能独立完成吧）：
function main() {
run.addEventListener("click", function () {
let x = parseFloat(input.value);
output.innerHTML = parseInt(x);
});
}
第三节习题答案解析4:
function main() {
run.addEventListener("click", function () {
let [a, b, c] = input.value.split(' ');
a = parseFloat(a), b = parseFloat(b), c = parseFloat(c);
output.innerHTML = (a + b) * c;
});
}
第三节习题答案解析5:
function main() {
run.addEventListener("click", function () {
let s = parseInt(input.value);
let t = '';
t += s % 10;
s = parseInt(s / 10);
t += s % 10;
s = parseInt(s / 10);
t += s;
output.innerHTML = t;
});
}
正文：
JavaScript中的if-else语句与C++、Python、Java中类似。
例如：
let score = 90;
if (score >= 85) {
console.log("A");
} else if (score >= 70) {
console.log("B");
} else if (score >= 60) {
console.log("C");
} else {
console.log("D");
}
JavaScript中的逻辑运算符也与C++、Java中类似：
&&表示与||表示或!表示非
练习
1.输入一个年份，如果是闰年输出yes，否则输出no。
2.输入三个数，输出三个数中的最大值。
<习题解析下节更新>
5.循环语句
第四节习题1：
function main() {
run.addEventListener("click", function () {
let year = input.value;
if(year % 400 === 0 || year % 100 !== 0 && year % 4 === 0){
output.innerHTML = "yes";
} else {
output.innerHTML = "no";
}
});
}
第四节习题2：
function main() {
run.addEventListener("click", function () {
let [a, b, c] = input.value.split(' ');
a = parseInt(a), b = parseInt(b), c = parseInt(c);
output.innerHTML = Math.max(a, b, c);
});
}
JavaScript中的循环语句与C++中类似，也包含for、while、do while循环。
for循环
for (let i = 0; i < 10; i++) {
console.log(i);
}
枚举对象或数组时可以使用：
for-in循环，可以枚举数组中的下标，以及对象中的keyfor-of循环，可以枚举数组中的值，以及对象中的value- –
while循环
let i = 0;
while (i < 10) {
console.log(i);
i++;
}
do while循环
do while语句与while语句非常相似。唯一的区别是，do while语句限制性循环体后检查条件。不管条件的值如何，我们都要至少执行一次循环。
let i = 0;
do {
console.log(i);
i++;
} while (i < 10);
练习
- 求1~100中所有数的立方和。
- 求斐波那契数列的第n项。f(1) = 1, f(2) = 1, f(3) = 2, f(n) = f(n-1) + f(n-2)。
- 打印1~100中的所有质数。
6.对象
第五节课后难题解析3：
for (let i = 2; i <= 100; i++) {
let flag = true;
for (let j = 2; j * j <= i; j++)
if (i % j === 0) {
flag = false;
break;
}
if (flag === true)
console.log(i);
}
英文名称：Object。
类似于C++中的map，由key:value对构成。
value可以是变量、数组、对象、函数等。- 函数定义中的
this用来引用该函数的“拥有者”。
例如：
let person = {
name: "xiaozhuang",
age: 19,
money: 0,
add_money: function (x) {
this.money += x;
}
}
对象属性与函数的调用方式：
person.name、person.add_money()person["name"]、person["add_money"]()
7.函数
函数是用对象来实现的。
函数也跟C++中的函数类似。
定义方式
function add(a, b) {
return a + b;
}
let add = function (a, b) {
return a + b;
}
let add = (a, b) => {
return a + b;
}
返回值
如果未定义返回值，则返回undefined。
9.类
与C++中的Class类似。但是不存在私有成员。
this指向类的实例。
定义
class Point {
constructor(x, y) { // 构造函数
this.x = x; // 成员变量
this.y = y;
this.init();
}
init() {
this.sum = this.x + this.y; // 成员变量可以在任意的成员函数中定义
}
toString() { // 成员函数
return '(' + this.x + ', ' + this.y + ')';
}
}
let p = new Point(3, 4);
console.log(p.toString());
继承
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 这里的super表示父类的构造函数
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}
注意：
super这个关键字，既可以当作函数使用，也可以当作对象使用。
–super作为函数调用时，代表父类的构造函数，且只能用在子类的构造函数之中。
–super作为对象时，指向父类的原型对象。- 在子类的构造函数中，只有调用
super之后，才可以使用this关键字。
- 成员重名时，子类的成员会覆盖父类的成员。类似于
C++中的多态。
静态方法
在成员函数前添加static关键字即可。静态方法不会被类的实例继承，只能通过类来调用。例如：
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
static print_class_name() {
console.log("Point");
}
}
let p = new Point(1, 2);
Point.print_class_name();
p.print_class_name(); // 会报错
静态变量
在ES6中，只能通过class.propname定义和访问。例如
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
Point.cnt++;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
Point.cnt = 0;
let p = new Point(1, 2);
let q = new Point(3, 4);
console.log(Point.cnt);
10.事件
超链接：JS事件详解补充2.0
JavaScript的代码一般通过事件触发。
可以通过addEventListener函数为元素绑定事件的触发函数。
常见的触发函数有：
鼠标:
click：鼠标左键点击dblclick：鼠标左键双击contextmenu：鼠标右键点击mousedown：鼠标按下，包括左键、滚轮、右键event.button：0表示左键，1表示中键，2表示右键mouseup：鼠标弹起，包括左键、滚轮、右键event.button：0表示左键，1表示中键，2表示右键
键盘:
keydown：某个键是否被按住，事件会连续触发event.code：返回按的是哪个键event.altKey、event.ctrlKey、event.shiftKey分别表示是否同时按下了alt、ctrl、shift键。keyup：某个按键是否被释放event常用属性同上keypress：紧跟在keydown事件后触发，只有按下字符键时触发。适用于判定用户输入的字符。event常用属性同上keydown、keyup、keypress的关系类似于鼠标的mousedown、mouseup、click
表单:
focus：聚焦某个元素blur：取消聚焦某个元素change：某个元素的内容发生了改变
窗口:
需要作用到window元素上。
resize：当窗口大小放生变化scroll：滚动指定的元素load：当元素被加载完成
二、Javascipt常用库
1.JQuery
使用方式
- 在
- 按
jQuery官网提示下载
选择器
$(selector)，例如：
$('div');
$('.big-div');
$('div > p')
selector类似于CSS选择器。
事件
$(selector).on(event, func)绑定事件，例如：
$('div').on('click', function (e) {
console.log("click div");
})
$(selector).off(event, fun)删除事件，例如：
$('div').on('click', function (e) {
console.log("click div");
$('div').off('click');
});
当存在多个相同类型的事件触发函数时，可以通过click.name来区分，例如：
$('div').on('click.first', function (e) {
console.log("click div");
$('div').off('click.first');
});
在事件触发的函数中的return false等价于同时执行：
e.stopPropagation()：阻止事件向上传递
e.preventDefault()：阻止事件的默认行为
元素的隐藏、展现
$A.hide()：隐藏，可以添加参数，表示消失时间$A.show()：展现，可以添加参数，表示出现时间$A.fadeOut()：慢慢消失，可以添加参数，表示消失时间$A.fadeIn()：慢慢出现，可以添加参数，表示出现时间
元素的添加、删除
$('Hello World')
：构造一个jQuery对象
$A.append($B)：将 B 添加到 B添加到 B添加到A的末尾$A.prepend($B)：将 B 添加到 B添加到 B添加到A的开头$A.remove()：删除元素$A$A.empty()：清空元素$A的所有儿子
对类的操作
$A.addClass(class_name)：添加某个类
$A.removeClass(class_name)：删除某个类
$A.hasClass(class_name)：判断某个类是否存在
对CSS的操作
$("div").css("background-color")：获取某个CSS的属性
$("div").css("background-color","yellow")：设置某个CSS的属性
同时设置多个CSS的属性：
$('div').css({
width: "200px",
height: "200px",
"background-color": "orange",
});
对标签属性的操作
$('div').attr('id')：获取属性
$('div').attr('id', 'ID')：设置属性
对HTML内容、文本的操作
不需要背每个标签该用哪种，用到的时候Google或者百度即可。
$A.html()：获取、修改HTML内容
$A.text()：获取、修改文本信息
$A.val()：获取、修改文本的值
查找
$(selector).parent(filter)：查找父元素
$(selector).parents(filter)：查找所有祖先元素
$(selector).children(filter)：在所有子元素中查找
$(selector).find(filter)：在所有后代元素中查找
ajax
GET方法：
$.ajax({
url: url,
type: "GET",
data: {
},
dataType: "json",
success: function (resp) {
},
});
POST方法：
$.ajax({
url: url,
type: "POST",
data: {
},
dataType: "json",
success: function (resp) {
},
});
2.setTimeout与setInterval
setTimeout(func, delay)
delay毫秒后，执行函数func()
clearTimeout()
关闭定时器，例如：
let timeout_id = setTimeout(() => {
console.log("Hello World!")
}, 2000); // 2秒后在控制台输出"Hello World"
clearTimeout(timeout_id); // 清除定时器
setInterval(func, delay)
每隔delay毫秒，执行一次函数func()。
第一次在第delay毫秒后执行。
clearInterval()
关闭周期执行的函数，例如：
let interval_id = setInterval(() => {
console.log("Hello World!")
}, 2000); // 每隔2秒，输出一次"Hello World"
clearInterval(interval_id); // 清除周期执行的函数
3.requestAnimationFrame
requestAnimationFrame(func)
该函数会在下次浏览器刷新页面之前执行一次，通常会用递归写法使其每秒执行60次func函数。调用时会传入一个参数，表示函数执行的时间戳，单位为毫秒。
例如：
let step = (timestamp) => { // 每帧将div的宽度增加1像素
let div = document.querySelector('div');
div.style.width = div.clientWidth + 1 + 'px';
requestAnimationFrame(step);
};
requestAnimationFrame(step);
与setTimeout和setInterval的区别：
requestAnimationFrame渲染动画的效果更好，性能更佳。 该函数可以保证每两次调用之间的时间间隔相同，但setTimeout与setInterval不能保证这点。setTmeout两次调用之间的间隔包含回调函数的执行时间；setInterval只能保证按固定时间间隔将回调函数压入栈中，但具体的执行时间间隔仍然受回调函数的执行时间影响。- 当页面在后台时，因为页面不再渲染，因此
requestAnimationFrame不再执行。但setTimeout与setInterval函数会继续执行。
4.Map与Set
Map
Map 对象保存键值对。
- 用
for...of或者forEach可以按插入顺序遍历。
- 键值可以为任意值，包括函数、对象或任意基本类型。
常用API：
set(key, value)：插入键值对，如果key已存在，则会覆盖原有的valueget(key)：查找关键字，如果不存在，返回undefinedsize：返回键值对数量has(key)：返回是否包含关键字keydelete(key)：删除关键字keyclear()：删除所有元素
5.LocalStorage
可以在用户的浏览器上存储键值对。
常用API：
setItem(key, value)：插入getItem(key)：查找removeItem(key)：删除clear()：清空
6.JSON
JSON对象用于序列化对象、数组、数值、字符串、布尔值和null。
常用API：
JSON.parse()：将json字符串解析成js对象JSON.stringify()：将js对象转化为json字符串
7.Date日期
返回值为整数的API，数值为1970-1-1 00:00:00 UTC（世界标准时间）到某个时刻所经过的毫秒数：
Date.now()：返回现在时刻。Date.parse("2022-04-15T15:30:00.000+08:00")：返回北京时间2022年4月15日
15:30:00的时刻。
与Date对象的实例相关的API：
new Date()：返回现在时刻。new Date("2022-04-15T15:30:00.000+08:00")：返回北京时间2022年4月15日
15:30:00的时刻。两个Date对象实例的差值为毫秒数getDay()：返回星期，0表示星期日，1-6表示星期一至星期六getDate()：返回日，数值为1-31getMonth()：返回月，数值为0-11getFullYear()：返回年份getHours()：返回小时getMinutes()：返回分钟getSeconds()：返回秒getMilliseconds()：返回毫秒
8.WebSocket网络通信
与服务器建立全双工连接。
常用API：
new WebSocket('ws://localhost:8080');：建立ws连接。send()：向服务器端发送一个字符串。一般用JSON将传入的对象序列化为字符串。onopen：类似于onclick，当连接建立时触发。onmessage：当从服务器端接收到消息时触发。close()：关闭连接。onclose：当连接关闭后触发。
9.window
window.open("https://www.acwing.com"):在新标签栏中打开页面location.reload():刷新页面location.href = "https://www.acwing.com"：在当前标签栏中打开页面
10.Canvas库
Canvas教程
三、Javascript进阶（重点）
1.事件流(捕获和冒泡)
事件流是对事件执行过程的描述，了解事件的执行过程有助于加深对事件的理解，提升开发实践中对事件运用的灵活度。
如上图所示，任意事件被触发时总会经历两个阶段：【捕获阶段】和【冒泡阶段】。
简言之，捕获阶段是【从父到子】的传导过程，冒泡阶段是【从子向父】的传导过程。
捕获和冒泡:
<body>
<h3>事件流</h3>
<p>事件流是事件在执行时的底层机制，主要体现在父子盒子之间事件的执行上。</p>
<div class="outer">
<div class="inner">
<div class="child"></div>
</div>
</div>
<script>
// 获取嵌套的3个节点
const outer = document.querySelector('.outer');
const inner = document.querySelector('.inner');
const child = document.querySelector('.child');
// html 元素添加事件
document.documentElement.addEventListener('click', function () {
console.log('html...')
})
// body 元素添加事件
document.body.addEventListener('click', function () {
console.log('body...')
})
// 外层的盒子添加事件
outer.addEventListener('click', function () {
console.log('outer...')
})
// 中间的盒子添加事件
outer.addEventListener('click', function () {
console.log('inner...')
})
// 内层的盒子添加事件
outer.addEventListener('click', function () {
console.log('child...')
})
</script>
</body>
执行上述代码后发现，当单击事件触发时，其祖先元素的单击事件也【相继触发】，这是为什么呢？
结合事件流的特征，我们知道当某个元素的事件被触发时，事件总是会先经过其祖先才能到达当前元素，然后再由当前元素向祖先传递，事件在流动的过程中遇到相同的事件便会被触发。
再来关注一个细节就是事件相继触发的【执行顺序】，事件的执行顺序是可控制的，即可以在捕获阶段被执行，也可以在冒泡阶段被执行。
如果事件是在冒泡阶段执行的，我们称为冒泡模式，它会先执行子盒子事件再去执行父盒子事件，默认是冒泡模式。
如果事件是在捕获阶段执行的，我们称为捕获模式，它会先执行父盒子事件再去执行子盒子事件。
<body>
<h3>事件流</h3>
<p>事件流是事件在执行时的底层机制，主要体现在父子盒子之间事件的执行上。</p>
<div class="outer">
<div class="inner"></div>
</div>
<script>
// 获取嵌套的3个节点
const outer = document.querySelector('.outer')
const inner = document.querySelector('.inner')
// 外层的盒子
outer.addEventListener('click', function () {
console.log('outer...')
}, true) // true 表示在捕获阶段执行事件
// 中间的盒子
outer.addEventListener('click', function () {
console.log('inner...')
}, true)
</script>
</body>
结论：
addEventListener 第3个参数决定了事件是在捕获阶段触发还是在冒泡阶段触发addEventListener 第3个参数为 true 表示捕获阶段触发，false 表示冒泡阶段触发，默认值为 false- 事件流只会在父子元素具有
相同事件类型时才会产生影响
- 绝大部分场景都采用默认的
冒泡模式（其中一个原因是早期 IE 不支持捕获）
阻止冒泡:
<body>
<h3>阻止冒泡</h3>
<p>阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。</p>
<div class="outer">
<div class="inner">
<div class="child"></div>
</div>
</div>
<script>
// 获取嵌套的3个节点
const outer = document.querySelector('.outer')
const inner = document.querySelector('.inner')
const child = document.querySelector('.child')
// 外层的盒子
outer.addEventListener('click', function () {
console.log('outer...')
})
// 中间的盒子
inner.addEventListener('click', function (ev) {
console.log('inner...')
// 阻止事件冒泡
ev.stopPropagation()
})
// 内层的盒子
child.addEventListener('click', function (ev) {
console.log('child...')
// 借助事件对象，阻止事件向上冒泡
ev.stopPropagation()
})
</script>
</body>
2.事件委托
事件委托是利用事件流的特征解决一些现实开发需求的知识技巧，主要的作用是提升程序效率。
大量的事件监听是比较耗费性能的，如下代码所示:
<script>
// 假设页面中有 10000 个 button 元素
const buttons = document.querySelectorAll('table button');
for(let i = 0; i <= buttons.length; i++) {
// 为 10000 个 button 元素添加了事件
buttons.addEventListener('click', function () {
// 省略具体执行逻辑...
})
}
</script>
利用事件流的特征，可以对上述的代码进行优化，事件的的冒泡模式总是会将事件流向其父元素的，如果父元素监听了相同的事件类型，那么父元素的事件就会被触发并执行，正是利用这一特征对上述代码进行优化，如下代码所示：
<script>
// 假设页面中有 10000 个 button 元素
let buttons = document.querySelectorAll('table button');
// 假设上述的 10000 个 buttom 元素共同的祖先元素是 table
let parents = document.querySelector('table');
parents.addEventListener('click', function () {
console.log('点击任意子元素都会触发事件...');
})
</script>
事件对象中的属性 target 或 srcElement属性表示真正触发事件的元素，它是一个元素类型的节点。
<script>
// 假设页面中有 10000 个 button 元素
const buttons = document.querySelectorAll('table button')
// 假设上述的 10000 个 buttom 元素共同的祖先元素是 table
const parents = document.querySelector('table')
parents.addEventListener('click', function (ev) {
// console.log(ev.target);
// 只有 button 元素才会真正去执行逻辑
if(ev.target.tagName === 'BUTTON') {
// 执行的逻辑
}
})
</script>
优化过的代码只对祖先元素添加事件监听，相比对 10000 个元素添加事件监听执行效率要高许多！！！
3.BOM-Window对象
BOM (Browser Object Model ) 是浏览器对象模型
- window对象是一个
全局对象，也可以说是JavaScript中的顶级对象
- 像
document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的
- 所有通过
var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
- window对象下的属性和方法调用的时候
可以省略window
location对象 :
location (地址)它拆分并保存了 URL 地址的各个组成部分， 它是一个对象
属性/方法
说明
href
属性，获取完整的 URL 地址，赋值时用于地址的跳转
search
属性，获取地址中携带的参数，符号 ？后面部分
hash
属性，获取地址中的啥希值，符号 # 后面部分
reload()
方法，用来刷新当前页面，传入参数 true 时表示强制刷新
<body>
<form>
<input type="text" name="search"> <button>搜索</button>
</form>
<a href="#/music">音乐</a>
<a href="#/download">下载</a>
<button class="reload">刷新页面</button>
<script>
// location 对象
// 1. href属性 （重点） 得到完整地址，赋值则是跳转到新地址
console.log(location.href)
// location.href = 'http://www.itcast.cn'
// 2. search属性 得到 ? 后面的地址
console.log(location.search) // ?search=笔记本
// 3. hash属性 得到 # 后面的地址
console.log(location.hash)
// 4. reload 方法 刷新页面
const btn = document.querySelector('.reload')
btn.addEventListener('click', function () {
// location.reload() // 页面刷新
location.reload(true) // 强制页面刷新 ctrl+f5
})
</script>
</body>
navigator对象:
navigator是对象，该对象下记录了浏览器自身的相关信息
常用属性和方法：
- 通过
userAgent检测浏览器的版本及平台
// 检测 userAgent（浏览器信息）
(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone，则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn'
}})();
histroy对象:
history(历史)是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退等
使用场景
history对象一般在实际开发中比较少用，但是会在一些OA 办公系统中见到。
常见方法：
<body>
<button class="back">←后退</button>
<button class="forward">前进→</button>
<script>
// histroy对象
// 1.前进
const forward = document.querySelector('.forward')
forward.addEventListener('click', function () {
// history.forward()
history.go(1)
})
// 2.后退
const back = document.querySelector('.back')
back.addEventListener('click', function () {
// history.back()
history.go(-1)
})
</script>
</body>
4.本地存储(重要)
好处：
- 1、页面刷新或者关闭不丢失数据，实现数据持久化
- 2、容量较大，
sessionStorage和 localStorage约 5M 左右
localStorage（重点）:
-
作用: 数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失
-
特性: 以键值对的形式存储，并且存储的是字符串， 省略了window
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>本地存储-localstoragetitle>
head>
<body>
<script>
// 本地存储 - localstorage 存储的是字符串
// 1. 存储
localStorage.setItem('age', 18)
// 2. 获取
console.log(typeof localStorage.getItem('age'))
// 3. 删除
localStorage.removeItem('age')
script>
body>
html>
sessionStorage（了解）
特性：
- 用法跟
localStorage基本相同
- 区别是：当页面浏览器被关闭时，存储在
sessionStorage的数据会被清除
存储：sessionStorage.setItem(key,value)
获取：sessionStorage.getItem(key)
删除：sessionStorage.removeItem(key)
localStorage 存储复杂数据类型
问题： 本地只能存储字符串,无法存储复杂数据类型.
解决： 需要将复杂数据类型转换成 JSON字符串,在存储到本地
语法： JSON.stringify(复杂数据类型)
JSON字符串：
- 首先是1个字符串
- 属性名使用
双引号引起来，不能单引号
- 属性值如果是
字符串型也必须双引号
<body>
<script>
// 本地存储复杂数据类型
const goods = {
name: '小米',
price: 1999
}
// localStorage.setItem('goods', goods)
// console.log(localStorage.getItem('goods'))
// 1. 把对象转换为JSON字符串 JSON.stringify
localStorage.setItem('goods', JSON.stringify(goods))
// console.log(typeof localStorage.getItem('goods'))
script>
body>
问题： 因为本地存储里面取出来的是字符串，不是对象，无法直接使用
解决： 把取出来的字符串转换为对象
语法： JSON.parse(JSON字符串)
<body>
<script>
// 本地存储复杂数据类型
const goods = {
name: '小米',
price: 1999
}
// localStorage.setItem('goods', goods)
// console.log(localStorage.getItem('goods'))
// 1. 把对象转换为JSON字符串 JSON.stringify
localStorage.setItem('goods', JSON.stringify(goods))
// console.log(typeof localStorage.getItem('goods'))
// 2. 把JSON字符串转换为对象 JSON.parse
console.log(JSON.parse(localStorage.getItem('goods')))
script>
body>
4.JS常用的数组方法
map 使用场景：
map可以遍历数组处理数据，并且返回新的数组
语法：
<body>
<script>
const arr = ['red', 'blue', 'pink']
// 1. 数组 map方法 处理数据并且 返回一个数组
const newArr = arr.map(function (item, index) {
// console.log(item) // 数组元素
// console.log(index) // 索引号
return item + '颜色'
})
console.log(newArr)
script>
body>
数组join方法:
作用： join()方法用于把数组中的所有元素转换一个字符串
语法：
<body>
<script>
const arr = ['red', 'blue', 'pink']
// 1. 数组 map方法 处理数据并且 返回一个数组
const newArr = arr.map(function (ele, index) {
// console.log(ele) // 数组元素
// console.log(index) // 索引号
return ele + '颜色'
})
console.log(newArr)
// 2. 数组join方法 把数组转换为字符串
// 小括号为空则逗号分割
console.log(newArr.join()) // red颜色,blue颜色,pink颜色
// 小括号是空字符串，则元素之间没有分隔符
console.log(newArr.join('')) //red颜色blue颜色pink颜色
console.log(newArr.join('|')) //red颜色|blue颜色|pink颜色
script>
body>
5.正则表达式
正则表达式（Regular Expression）是一种字符串匹配的模式（规则）
使用场景：
- 例如
验证表单：手机号表单要求用户只能输入11位的数字 (匹配)
- 过滤掉页面内容中的一些
敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等
正则基本使用:
-
定义规则
const reg = /表达式/
- 其中
/ /是正则表达式字面量
- 正则表达式也是
对象
-
使用正则
test()方法 用来查看正则表达式与指定的字符串是否匹配- 如果正则表达式与指定的字符串匹配 ，返回
true，否则false
<body>
<script>
// 正则表达式的基本使用
const str = 'web前端开发'
// 1. 定义规则
const reg = /web/
// 2. 使用正则 test()
console.log(reg.test(str)) // true 如果符合规则匹配上则返回true
console.log(reg.test('java开发')) // false 如果不符合规则匹配上则返回 false
script>
body>
元字符:
- 普通字符:
- 大多数的字符仅能够描述它们本身，这些字符称作
普通字符，例如所有的字母和数字。
- 普通字符只能够
匹配字符串中与它们相同的字符。
- 比如，规定用户只能输入英文26个英文字母，普通字符的话 /[abcdefghijklmnopqrstuvwxyz]/
- 元字符(特殊字符）
- 是一些具有特殊含义的字符，可以极大
提高了灵活性和强大的匹配功能。
- 比如，规定用户只能输入英文26个英文字母，换成元字符写法：
/[a-z]/
边界符:
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
如果^ 和 $在一起，表示必须是精确匹配
<body>
<script>
// 元字符之边界符
// 1. 匹配开头的位置 ^
const reg = /^web/
console.log(reg.test('web前端')) // true
console.log(reg.test('前端web')) // false
console.log(reg.test('前端web学习')) // false
console.log(reg.test('we')) // false
// 2. 匹配结束的位置 $
const reg1 = /web$/
console.log(reg1.test('web前端')) // false
console.log(reg1.test('前端web')) // true
console.log(reg1.test('前端web学习')) // false
console.log(reg1.test('we')) // false
// 3. 精确匹配 ^ $
const reg2 = /^web$/
console.log(reg2.test('web前端')) // false
console.log(reg2.test('前端web')) // false
console.log(reg2.test('前端web学习')) // false
console.log(reg2.test('we')) // false
console.log(reg2.test('web')) // true
console.log(reg2.test('webweb')) // flase
script>
body>
量词:
量词用来设定某个模式重复次数
注意： 逗号左右两侧千万不要出现空格
<body>
<script>
// 元字符之量词
// 1. * 重复次数 >= 0 次
const reg1 = /^w*$/
console.log(reg1.test('')) // true
console.log(reg1.test('w')) // true
console.log(reg1.test('ww')) // true
console.log('-----------------------')
// 2. + 重复次数 >= 1 次
const reg2 = /^w+$/
console.log(reg2.test('')) // false
console.log(reg2.test('w')) // true
console.log(reg2.test('ww')) // true
console.log('-----------------------')
// 3. ? 重复次数 0 || 1
const reg3 = /^w?$/
console.log(reg3.test('')) // true
console.log(reg3.test('w')) // true
console.log(reg3.test('ww')) // false
console.log('-----------------------')
// 4. {n} 重复 n 次
const reg4 = /^w{3}$/
console.log(reg4.test('')) // false
console.log(reg4.test('w')) // flase
console.log(reg4.test('ww')) // false
console.log(reg4.test('www')) // true
console.log(reg4.test('wwww')) // false
console.log('-----------------------')
// 5. {n,} 重复次数 >= n
const reg5 = /^w{2,}$/
console.log(reg5.test('')) // false
console.log(reg5.test('w')) // false
console.log(reg5.test('ww')) // true
console.log(reg5.test('www')) // true
console.log('-----------------------')
// 6. {n,m} n =< 重复次数 <= m
const reg6 = /^w{2,4}$/
console.log(reg6.test('w')) // false
console.log(reg6.test('ww')) // true
console.log(reg6.test('www')) // true
console.log(reg6.test('wwww')) // true
console.log(reg6.test('wwwww')) // false
// 7. 注意事项： 逗号两侧千万不要加空格否则会匹配失败
script>
范围:
表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围
<body>
<script>
// 元字符之范围 []
// 1. [abc] 匹配包含的单个字符， 多选1
const reg1 = /^[abc]$/
console.log(reg1.test('a')) // true
console.log(reg1.test('b')) // true
console.log(reg1.test('c')) // true
console.log(reg1.test('d')) // false
console.log(reg1.test('ab')) // false
// 2. [a-z] 连字符 单个
const reg2 = /^[a-z]$/
console.log(reg2.test('a')) // true
console.log(reg2.test('p')) // true
console.log(reg2.test('0')) // false
console.log(reg2.test('A')) // false
// 想要包含小写字母，大写字母 ，数字
const reg3 = /^[a-zA-Z0-9]$/
console.log(reg3.test('B')) // true
console.log(reg3.test('b')) // true
console.log(reg3.test(9)) // true
console.log(reg3.test(',')) // flase
// 用户名可以输入英文字母，数字，可以加下划线，要求 6~16位
const reg4 = /^[a-zA-Z0-9_]{6,16}$/
console.log(reg4.test('abcd1')) // false
console.log(reg4.test('abcd12')) // true
console.log(reg4.test('ABcd12')) // true
console.log(reg4.test('ABcd12_')) // true
// 3. [^a-z] 取反符
const reg5 = /^[^a-z]$/
console.log(reg5.test('a')) // false
console.log(reg5.test('A')) // true
console.log(reg5.test(8)) // true
script>
body>
字符类:
某些常见模式的简写方式，区分字母和数字
替换和修饰符
replace替换方法，可以完成字符的替换
<body>
<script>
// 替换和修饰符
const str = '欢迎大家学习前端，相信大家一定能学好前端，都成为前端大神'
// 1. 替换 replace 需求：把前端替换为 web
// 1.1 replace 返回值是替换完毕的字符串
// const strEnd = str.replace(/前端/, 'web') 只能替换一个
script>
body>
修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
i 是单词 ignore 的缩写，正则匹配时字母``不区分大小写```g 是单词 global 的缩写，匹配所有满足正则表达式的结果(全局)
<body>
<script>
// 替换和修饰符
const str = '欢迎大家学习前端，相信大家一定能学好前端，都成为前端大神'
// 1. 替换 replace 需求：把前端替换为 web
// 1.1 replace 返回值是替换完毕的字符串
// const strEnd = str.replace(/前端/, 'web') 只能替换一个
// 2. 修饰符 g 全部替换
const strEnd = str.replace(/前端/g, 'web')
console.log(strEnd)
script>
body>
6.作用域与作用域链
作用域
了解作用域对程序执行的影响及作用域链的查找机制，使用闭包函数创建隔离作用域避免全局变量污染。
作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问，作用域分为全局作用域和局部作用域。
局部作用域:
局部作用域分为函数作用域和块作用域。
函数作用域:
在函数内部声明的变量只能在函数内部被访问，外部无法直接访问。
<script>
// 声明 counter 函数
function counter(x, y) {
// 函数内部声明的变量
const s = x + y
console.log(s) // 18
}
// 设用 counter 函数
counter(10, 8)
// 访问变量 s
console.log(s)// 报错
script>
总结：
- 函数内部声明的变量，在函数外部无法被访问
- 函数的参数也是函数内部的
局部变量
- 不同函数内部声明的变量无法互相访问
- 函数执行完毕后，函数内部的变量
实际被清空了
块作用域:
在 JavaScript 中使用 {} 包裹的代码称为代码块，代码块内部声明的变量外部将【有可能】无法被访问。
<script>
{
// age 只能在该代码块中被访问
let age = 18;
console.log(age); // 正常
}
// 超出了 age 的作用域
console.log(age) // 报错
let flag = true;
if(flag) {
// str 只能在该代码块中被访问
let str = 'hello world!'
console.log(str); // 正常
}
// 超出了 age 的作用域
console.log(str); // 报错
for(let t = 1; t <= 6; t++) {
// t 只能在该代码块中被访问
console.log(t); // 正常
}
// 超出了 t 的作用域
console.log(t); // 报错
script>
JavaScript 中除了变量外还有常量，常量与变量本质的区别是【常量必须要有值且不允许被重新赋值】，常量值为对象时其属性和方法允许重新赋值。
<script>
// 必须要有值
const version = '1.0.0';
// 不能重新赋值
// version = '1.0.1';
// 常量值为对象类型
const user = {
name: '小明',
age: 18
}
// 不能重新赋值
user = {};
// 属性和方法允许被修改
user.name = '小小明';
user.gender = '男';
script>
总结：
let 声明的变量会产生块作用域，var 不会产生块作用域const 声明的常量也会产生块作用域- 不同代码块之间的变量无法互相访问
- 推荐使用
let 或 const
注：开发中 let 和 const 经常不加区分的使用，如果担心某个值会不小心被修改时，则只能使用 const 声明成常量。
全局作用域：