欢迎 👍点赞 ➕关注 ❤️收藏 💬评论
目录
[编辑 🍑变量声明](#编辑 🍑变量声明)
[🍍使用new Object创建对象](#🍍使用new Object创建对象)
💡一、什么是JavaScript？
定义
JavaScript（简称JS），是一个脚本语言，高级编程语言。主要用于为网页添加交互性和动态功能，是前端开发的核心技术之一（与HTML和CSS并称网页三要素）。
JavaScript、HTML和CSS之间的关系
HTML：负责网页结构，相当于网页的"骨架"。
CSS：负责网页的样式。相当于网页的"外观。
JavaScript：负责网页的交互逻辑，相当于网页的"行为"。
JavaScript和Java之间的关系
JavaScript和Java虽然名字相似，当本质上是两门独立的语言，更多是历史营销原因。就像"雷锋"和"雷峰塔"，"老婆"和"老婆饼"一样，没有直接关联。
💡二、JavaScript的使用
🍑引入方式
行内样式：直接嵌入到html元素内部
html
<script>alert("hello")</script>
外部样式：定义<script>标签，用src引入外部js文件
html
<script src="hello.js"></script>
//hello.js文件
alert("hello");
内部样式：定义<script>标签，写到script标签中
html
<input type="button" value="点击一下" onclick="alert('hello')">
🍑基础语法
这里先说一下JavaScript常用的控制台信息输出工具console.log
html
<script>
console.log(1.02);
</script>- 在浏览器中点击快捷键F12，显示下面该页面，点击到Console，会显示输出信息
🍑变量声明
- var：早期声明变量，作用域在该语句的函数内，也就是在所在函数内都可以访问，用的不多；
- let：新增的声明变量， 作用域在语句所在的代码块，在{}都可以访问；
- const：声明常量，声明后不能修改，否则会报错。
html
<script>
var age1=11;
console.log(age1);
let age2=12;
console.log(age2);
const age3=13;
// age3=13; 常量声明，修改报错
console.log(age3);
</script>
- JavaScript事故一门动态弱性语言，变量可以存放不同类型的值，随着程序的运行，类型也会改变
html
<script>
var age1=11;
age1="abc"
console.log(age1);
let age2=12;
age2=true;
console.log(age2);
const age3=13;
console.log(age3);
</script>
- +：当使用
+运算符对不同类型的值进行拼接时，会自动将非字符串类型转换为字符串
html
<script>
let age1=123+"h";
console.log(age1);
let age2="123"+"你好";
console.log(age2);
let age3="123"+true;
console.log(age3);
</script>
🍑运算符
|---------|------------------------------|
| 运算符类型 | 运算符 |
| 算术运算符 | +，-，*，/,% |
| 自增自减运算符 | ++,-- |
| 赋值运算符 | ==,+=,-=,*=,/=,%= |
| 比较运算符 | <,>,<=,>=,!=,!==,==,=== |
| 逻辑运算符 | &&,||,! |
| 位运算符 | &,|,^,~ |
| 移位运算符 | <<,>>,>>> |
| 三元运算符 | 条件表达式？true_value:false_value |
大体都与Java相同，个别不同
- ==与===的不同
- ==：会尝试进行隐式类型转换，也就是，把不同可惜的值转换为相同类型后再进行比较
- ===：不进行隐式类型转换。
- 想严格比较（类型+值都相同）->用===；
- 想宽松比较（允许；类型转换）->用==（尽量少用）
html
<script>
//==:会尝试进行隐式类型转换，把不同的值转换为相同类型在进行比较
console.log(1=="1");//true
console.log(true=="1");//true
console.log(true==1);//true
console.log("=========");
//===：不会进行隐式类型转换，直接比较
console.log(1==="1");//false
console.log(true==="1");//false
console.log(true===1);//false
</script>
- ！=与！==也是同理，！=可以进行类型转换，而！==不可以
💡三、数据类型
js的数据类型分为：基本类型和引用类型
typeof：用于返回操作数的数据类型。
🍓基本类型
|-----------|-----------------------------------------------------|
| 基本类型 | 描述 |
| Number | 数字，用于表示整数和浮点数 |
| String | 字符串类型，需要用引号，单引号双引号都可以 |
| Bollean | 布尔类型，只有两个取值，true（表示真），false（表示假），常用语逻辑判断 |
| Undefined | 表示变量未初始化，变量的值就是undefined，或者访问对象不存在属性是，也会返回undefined |
html
<script>
//基本类型
//number
console.log(typeof(11));
//String
console.log(typeof("hello"));
//true
console.log(typeof(true));
//Undefined
let a;
console.log(a);
//null
console.log(typeof(null));
</script>
- null：返回的类型是object，这个早期JavaScript设计的一个历史遗留问题。虽然null表示空值，当从检测类型角度来看，需要特殊处理。
🍓引用类型
数组
🍒数组的创建
html
<script>
//方法一：使用new关键字
let a1=new Array(1,"hell0",null);
//方法二：使用字面量创建
let a2=[];
a2=[1,"1",4];
let a3=[1,2,3];
</script>- js的数组可以不用统一类型
🍒数组的操作
🍉1.数组的查找
html
<script>
let a=[1,3,5,7];
console.log(a[0]);//1
console.log(a[1]);//3
console.log(a[2]);//5
console.log(a[100]);//undefined
</script>- 元素不存在查找结果为undefined；
🍉2.数组的遍历
方式一：传统for循环
html
<script>
a1=[1,"1",4];
//方式一：
for(let i=0;i<a1.length;i++){
console.log(a1[i]);
}
</script>方式二：for...of循环（值遍历）
html
<script>
//方式二：
for (const element of a1) {
console.log(element);
}
</script>- element是当前遍历到的元素的值，变量名可自定义
- of关键字用于遍历数组的值
方式三 ：foreach遍历
html
<script>
console.log(element);
}
//方式三：
a1.forEach(element => {
console.log(element);
});
</script>- foreach是数组的内置方法，接收一个回调函数作为参数
🍉3.数组的增添
html
<script>
//添加元素
let a=[1,2,3];
a[4]=100;
a[100]=1;
console.log(a[4]);
console.log(a[100]);
console.log(a);
</script> 
- 稀疏数组：数组索引不连续，存在未显示赋值的空槽（不占实际内存，遍历会跳过）；
- 动态长度：数组长度有最大索引决定；
🍉4.数组的删除
html
<script>
//删除元素
let a=[1,2,3];
//删除前
console.log(a[1]);
//删除从下标一开始的两个数据
a.splice(1,2);
//删除后
console.log(a);
</script> 
- splice（起始索引，删除数量，插入元素1，插入元素2...） ；
- 如果访问不存在的元素，记过为undefined。
🍉5.数组的修改
html
<script>
//修改元素
let a=[1,2,3];
//修改前
console.log(a[0]);
a[0]=100;
//修改后
console.log(a[0]);
</script>
💡四、函数
语法格式
html
<script>
//函数格式
function 函数名（参数1，参数2...）{
//函数体
return 结果//（可选，返回值）
}
//函数调用（无返回值）
函数名（实参列表）;
//函数调用（无返回值）
返回值=函数名（实参列表）;
</script>示例：
html
<script>
function add(a,b){
return a+b;
}
//两个参数
let d=add(15,20);//35
console.log(d);
//三个参数（多出一个参数）
let f=add(15,20,10);
console.log(f);//35
//一个参数（少一个参数）
let h=add(15);
console.log(h);//NaN
</script>
- 当函数定义了n个参数。调用是传了m个参数（m>n）,JavaScript不会报错，会忽略多于参数，只计算前n个参数；
- 当函数定义了n个参数。调用是传了m个参数（m<n）,JavaScript不会报错，多于参数会被赋值为undefined，在上述示例中，也就成了15+undefined，结果是NaN（Not a Number ,非数字）。
匿名函数
语法格式
html
<script>
let 变量名=function(参数名1，参数名2....){
函数体);
}
//调用
函数名(参数1，参数2...)
</script>示例：
html
<script>
let c=function(a,b){
console.log(a+b);
}
c(1,2);
</script>
- 需要调用调用变量名，才能触发函数。
💡五、对象
在JavaScript中，对象是一种复合数据类型，用于存储键值对形式的数据，并且可以包含函数（方法）。
🍐对象的创建
🍍字面量创建（常用）：{}
javascript
<script>
let student={
id:12333,
name:"张三",
age:12
}
</script>- 键值对之间使用逗号分割；
- 键和值使用冒号分割 。
🍍使用new Object创建对象
语法：
html
<script>
let 对象名=new Object();
对象名.属性=值;
....
</script>示例：
html
<script>
let student=new Object();
student.id=2;
student.name="张三";
student.age=12;
</script>🍐构造函数对象
语法格式
html
<script>
function 构找函数名(参数1，参数2...){
this.属性=值;
this.name=name;
this.方法=function(){
函数体
}
}
let a=new 够着函数名(参数...);
</script>示例
html
<script>
function Student(id,name,gender){
this.id=id;
this.name=name;
this.age=age;
this.say=function(){
console.log("say");
}
}
let a=new Student(1,"zhangsan",11);
</script>- 构造函数不需要return
🍐对象的属性操作
访问
html
<script>
let student={
id:12333,
name:"张三",
age:12,
say:function(){
console.log("hello");
}
}
//访问操作
//方法1：
console.log(student.name);
//方法二：
console.log(student["name"]);
//添加
student.classid=1;
//修改
student.age=24;
//删除
delete student.age;
</script>- 使用[]访问属性，需要加上引号。