JavaScript笔记
1、什么是JavaScript
2、快速入门
1、内部标签
<script>
//写JavaScript代码
</script>
2、外部标签
abs.js
alert('Hello,World!')
text.html
<script src="abs.js"></script>
练习代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 在 script 标签内写JavaScript代码 -->
<!-- <script>-->
<!-- alert('Hello,world!');-->
<!-- </script>-->
<!-- 外部引入-->
<!-- 注意：script标签必须要成对出现-->
<!-- 不用显示定义type，也默认就是JavaScript-->
<script type="text/javascript" src="我的第一个js文件.js"></script>
</head>
<body>
</body>
</html>
我的第一个js文件.js
alert('Hello,World!')
2.2、基本语法入门·
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 1.定义变量 变量类型 变量名 = 变量值;
var score = 71;
// alert(score);
// 2. 条件控制
if (score>60 && score<70){
alert("60~70");
}else if (score>70 && score<80){
alert("70~80");
}else{
alert("other");
}
console.log(score); // 在浏览器的控制台打印变量！
/*
* 多行注释
* */
</script>
</head>
<body>
</body>
</html>
浏览器必备调试须知：
elements
Control
Source
Network
Application
2.3、数据类型
数值，文本，图形，音频，视频……
变量
var 王者荣耀="倔强青铜";
number
js不区分小数和整数，Number
123 //整数123
123.1 //浮点数123.1
1.123e3 //科学计数法
-99 //复数
NaN // not a number
Infinity //表示无限大数字
字符串
'abc' "abc"
布尔值
true,false
逻辑运算
&& 两个都为真，结果为真
|| 一个为真，结果为真
！ 真即假，假即真
比较运算符
=
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果true）
这是一个JS的缺陷，坚持不要使用 == 比较
须知：
- NaN===NaNcy，这个与所有的数值都不相等，包括自己
- 只能通过 isNaN(NaN) 来判断这个数是否是 NaN
浮点数问题：
console.log((1/3) === (1-2/3))
// 推荐用以下方法判断两个小数是否相等
console.log(math.abs(1/3-(1-2/3))<0.00000001)
尽量避免使用浮点数进行运算，存在精度问题！
null 和 undefined
- null 空
- undefined 未定义
数组
Java的数值必须是相同类型的对象，JS中不需要这样！
// 保证代码的可读性，尽量使用[]
var arr = [1,2,3,'hello',"worild",null,true];
new Array(1,2,3,"hello",null,true)
取数组下标：如果越界了，就会undefined
对象
对象是大括号，数组是中括号！！
每个属性之间使用逗号隔开，最后一个不需要添加
// Person person = new Person(1,2,3,4,5);
var person = {
name: "qingjiang",
age: 3,
tags: ['js','java','web']
}
取对象的值
person.name
person.age
person.tags[0]
person.tags[1]
person.tags[2]
2.4、严格检查格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提：IDEA 需要设置支持ES6语法
‘use strict’; 严格检查模式，预防 JavaScript 的随意性导致产生一些问题
必须写在 JavaScript 的第一行！！！
局部变量建议都使用 let 去定义~
-->
<script>
'use strict';
// 全局变量
// i = 1;
// 局部变量
let i = 12;
// a = 13;
// ES6 let
</script>
</head>
<body>
</body>
</html>
3、数据类型
3.1、字符串
- 正常字符串我们使用单引号，或者双引号包裹
- 注意转义字符 \
\'
\n
\t
\u4e2d \u#### Unicode字符
\x41 ASC11字符
3、多行字符串编写
// Tab 上面 ESC键下面
var msg =
`hello
world
你好
世界！
`
4、模板字符串
'use strict';
let name = "qingjiang";
let age = 3;
let msg = `你好呀，${name},my age is ${age}`;
5、字符串长度
console.log(str.length)
6、字符串的可比性，不可变
student[0] = 1;
console.log(student[0])
s
console.log(student)
student
7、大小写转换
// 注意这里是方法，不是属性
student.toUpperCase() // 把值转换成大写
student.toLowerCase() // 把值转换成小写
8、student.indexOf('t') 获取索引位置。
9、student.substring()
[)
student.substring(1) // 从第一个开始字符串截取到最后一个字符串
student.substring(1,3) // [1,3) 前包后不包
3.2、数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5,6]; // 通过下标取值和赋值
arr[0];
arr[0] = 1;
1、长度
arr.length
注意：给arr.length赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失
2、indexOf，通过元素获取下标索引
arr.indexOf(2)
1
3、slice() 截取Array的一部分，返回一个新数组，类似于String中的substring
4、push(), pop() 尾部
push: 压入到尾部
pop: 弹出尾部的一个元素
5、unshift(), shift() 头部
unshift(): 压入到头部
shift(): 弹出头部的一个元素
6、排序 sort()
['B', 'C', 'A']
arr.sort()
['A', 'B', 'C']
7、元素反转 reverse()
['B', 'C', 'A']
arr.sort()
['A', 'B', 'C']
arr.reverse();
['C', 'B', 'A']
8、concat() 拼接
arr = ["B","C","A"]
(3) ['B', 'C', 'A']
arr.sort()
(3) ['A', 'B', 'C']
arr.reverse();
(3) ['C', 'B', 'A']
arr.concat([1,2,3])
(6) ['C', 'B', 'A', 1, 2, 3]
注意：concat() 并没有修改数组，只会返回一个新的数组
9、连接符 join()
打印拼接数组，设置连接符。
arr.join("-")
'C-B-A'
10、多维数组
arr = [[1,2],[3,4],['5','6']]
arr[0][1]
2
arr[2][1]
'5'
数组：存储数据（如何存，如何取，方法都可以自己实现）
3.3、对象
若干个键值对
var 对象名 = {
属性名: 属性值，
属性名: 属性值，
属性名: 属性值
……
}
// 定义了一个person对象，它有四个属性！
var person = {
name: "kuangsheng",
age: 3,
email: "232243233@qq.com",
score: 0
}
JS中对象，{……}表示一个对象，键值对描述属性 xxxx: xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！。
JavaScript中的所有的键都是字符串，值是任意对象！
1、对象赋值
person.name = "qiangjiang"
'qiangjiang'
person.name
'qiangjiang'
2、使用一个不存在的对象属性，不会报错！ undefined
person.haha
undefined
3、动态的删减属性，通过 delete 删除对象的属性
delete person.name;
true
person
{age: 3, email: '232243233@qq.com', score: 0}
4、动态的添加，直接给新的属性添加值即可
person.hah = "hah"
'hah'
person
{age: 3, email: '232243233@qq.com', score: 0, hah: 'hah'}
5、判断属性值是否在这个对象中！ xxx in xxx；
'age' in person
true
// 继承
'tostring' in person
false
6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
person.hasOwnProperty('tostring')
false
person.hasOwnProperty('age')
true
3.4、流程控制
if 判断
'use strict';
var age = 3;
if (age<3){
alert("haha");
}else if (age<5){
alert("kuwa~");
}else {
alert("kuwa~");
}
while 循环，避免程序死循环
'use strict';
let age = 0;
while(age<100){
age = age + 1;
console.log(age);
}
do{
let age = 0;
age = age + 1;
console.log(age)
}while{age<100};
for 循环
'use strict';
let age = 0;
for ( let i = 0; i < 100; i++) {
console.log(i);
}
forEach 循环:(5.1引入的)
'use strict';
let age = [12,3,34,23,24,45,13,141,54];
// 函数
age.forEach(function (value) {
console.log(value);
})
for……in
'use strict';
let age = [12,3,34,23,24,45,13,141,54];
for(var num in age){
if (age.hasOwnProperty(num)){
console.log("存在");
console.log(age[num]);
}
}
3.5、Map和Set
ES6的新特性
Map和Set:
'use strict';
// 学生成绩，学生姓名
let map = new Map([['tom',100],['jack',99],['monkey',98]]);
let name = map.get('tom'); // 通过key获取value
map.set('admin',97); // 新增或修改
map.delete('tom'); // 删除
// Set:无序不重复的集合
var set = new Set([3,1,1,1,1,1]); // set 可以去重
set.add(2); // 添加
set.delete(3); // 删除
console.log(set.has(2)); // 检查是否包含这个元素
console.log(set);
console.log(name)
3.6、iterator
作业：使用 iterator 来遍历迭代我们Map，Set !
'use strict';
// 学生成绩，学生姓名
let map = new Map([['tom',100],['jack',99],['monkey',98]]);
let name = map.get('tom'); // 通过key获取value
map.set('admin',97); // 新增或修改
map.delete('tom'); // 删除
var set = new Set([3,1,1,1,1,1]); // set 可以去重
set.add(2); // 添加
set.delete(3); // 删除
console.log(set.has(2)); // 检查是否包含这个元素
console.log(set);
console.log(name);
var arr = [3,4,5];
// 打印下标
for (var i in arr) {
console.log(i);
}
// 打印具体的值
for (var x of arr){
console.log(x);
}
// for of 可以遍历Map和Set
for (var a of map){
console.log(a);
}
// arr 新增元素后，用for in遍历下标有bug
arr.name = 321;
for (let b in arr){
console.log(b);
}
4、函数及面向对象
4.1、函数定义
绝对值函数
定义方式一：
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦执行到 return 代表函数结束，返回结果！
如果没有执行 return ，函数执行完也会返回结果，结果就是undefined
定义方式二：
var abs = function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
function(x){....} 这是一个匿名函数。但是可以把结果赋值给abs,，通过abs就可以调用函数！
方式一和方式二等价！
调用函数
abs(10) // 10
abs(-10) // 10
参数问题：JavaScript 可以传任意个参数，也可以不传递参数！
参数传进来是否存在的问题？
假设不存在参数，如何规避？
'use strict'
// function abs(x){
// if (x>=0){
// return x;
// }else{
// return -x;
// }
// }
var abs = function (x){
// 手动抛出异常来判断
if (typeof x!== 'number'){
throw 'Not a Number';
}
if (x>=0){
return x;
}else{
return -x;
}
}
arguments
arguments是一个JS免费赠送的一个关键字
代表传递进来的所有参数，是一个数组 ！
'use strict'
function abs(x){
console.log("x=>"+x);
for (var i = 0;i<arguments.length;i++){
console.log(arguments[i]);
}
if (x>=0){
return x;
}else{
return -x;
}
}
问题：arguments 包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数~
rest
以前：
if (arguments.length>2){
for (var i=0;i<arguments.length;i++){
//.....
}
}
ES6引入的新特性，获取除了已经定义的参数之外的所有参数~
function aaa(a,b,...rest){
console.log('a=>'+a);
console.log('b=>'+b);
console.log(rest);
}
rest 参数只能写在最后面，必须用 ... 标识。
4.2、变量作用域
在JavaScript中，var 定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用~ （非要实现的话，可以研究下闭包）
function bbb(){
var x = 1;
x = x + 1;
}
x = x + 2; // Uncaught ReferenceError: x is not defined
如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
function bbb(){
var x = 1;
x = x + 1;
}
function bbb1(){
var x = 1;
x = x + 1;
}
// 内部函数可以访问外部函数的成员，反之则不行
function bbb(){
var x = 1;
function bbb1(){
var y = x + 1;
}
var z = y + 1; // Uncaught ReferenceError: y is not defined
}
假设， 内部函数变量和外部函数的变量，重名 ！
function ccc(){
var x = 1;
function ccc2(){
var x = 'a';
console.log('inner'+x);
}
console.log('outer'+x);
ccc2();
}
ccc();
假设在 JavaScript 中函数查找变量从自身函数开始，由 内 向 外 查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
提升变量的作用域
function aaa(){
var x = "x" + y;
console.log(x);
var y = 'y';
}
结果： xundefined
说明：JavaScript执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；
function aaa(){
var y;
var x = "x" + y;
console.log(x);
y = 'y';
}
这个是在JavaScript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护；
function aaa2(){
var x = 1,
y = x + 1,
z,i,a; //undefined
// 之后随意用
}
全局函数
//全局变量
x = 1;
function f(){
console.log(x);
}
f();
console.log(x);
全局对象 window
var x = 'xxx';
alert(x);
alert(window.x); // 默认所有的全局变量，都会自动绑定在 window 对象下
alert() 这个函数本身也是一个window变量；
var x = 'xxx';
window.alert(x);
var old_alert = window.alert;
// old_alert(x);
window.alert = function (){
};
// 发现 alert() 失效了
window.alert(123);
// 恢复
window.alert = old_alert;
window.alert(456);
JavaScript 实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError
规范
由于我们所有的全局变量都会绑定到我们的window上。如果不同的 js 文件，使用了相同的全局变量，冲突 --> 如何能够减少冲突？
// 唯一全局变量
var GlobalApp = {};
// 定义全局变量
GlobalApp.name = 'globalApp';
GlobalApp.add = function (a,b){
return a + b;
}
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~
jQuery
局部作用域 let
function aaa(){
for (var i = 0;i < 100;i++){
console.log(i);
}
console.log(i+1); // 问题？ i 出了这个作用还可以使用！
}
aaa();
ES6 let 关键字，解决局部作用域冲突问题！
function aaa(){
for (let i = 0;i < 100;i++){
console.log(i);
}
console.log(i+1); // Uncaught ReferenceError: i is not defined
}
aaa();
建议大家都是用 let 去定义局部变量；
常量 const
在ES6之前，怎么定义常量：只有用全部大写字母大写字母命名的变量就是常量；
var PI = '3.14';
console.log(PI);
PI = '21333'; // 可以被改变这个值
console.log(PI);
在 ES6 引入了常量关键字 const
const PI = '3.14'; // 只读变量
console.log(PI);
PI = '21333'; // TypeError: Assignment to constant variable
console.log(PI);
4.3、方法
4.3、闭包
4.4、箭头函数
4.5、创建对象
4.6、class继承（新特性）
4.7、原型链继承 (难)
5、常用对象
5.1、Date
5.2、JSON
6、操作Dom元素
6.1、插入Dom
6.2、更新Dom
6.3、删除Dom
7、操作Bom元素
7.1、window
7.2、navigator
7.3、screen
7.4、location
7.5、Document
7.6、History
7.7、操作表单
html基础验证
7.8、操作文件
可以看廖雪峰的视频
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~