网站导航
> 技术文档 > JavaScript

JavaScript

网友: 技术文档 2025-09-02 19:02:40

个人主页：♡喜欢做梦

欢迎  👍点赞  ➕关注  ❤️收藏  💬评论

目录

💡一、什么是JavaScript？

💡二、JavaScript的使用

🍑引入方式

🍑基础语法

​编辑 🍑变量声明

🍑运算符

💡三、数据类型

🍓基本类型

🍓引用类型

数组

🍒数组的创建

🍒数组的操作 

🍉1.数组的查找

🍉2.数组的遍历

🍉3.数组的增添

🍉4.数组的删除

🍉5.数组的修改

💡四、函数

匿名函数

💡五、对象

🍐对象的创建

🍍字面量创建（常用）：{}

🍍使用new Object创建对象

🍐构造函数对象

🍐对象的属性操作

💡一、什么是JavaScript？

定义

JavaScript（简称JS），是一个脚本语言，高级编程语言。主要用于为网页添加交互性和动态功能，是前端开发的核心技术之一（与HTML和CSS并称网页三要素）。

JavaScript、HTML和CSS之间的关系

HTML：负责网页结构，相当于网页的“骨架”。

CSS：负责网页的样式。相当于网页的“外观。

JavaScript：负责网页的交互逻辑，相当于网页的“行为”。

JavaScript和Java之间的关系

JavaScript和Java虽然名字相似，当本质上是两门独立的语言，更多是历史营销原因。就像“雷锋”和“雷峰塔”，“老婆”和“老婆饼”一样，没有直接关联。

💡二、JavaScript的使用

🍑引入方式

行内样式：直接嵌入到html元素内部

 alert(\"hello\")

外部样式：定义标签，用src引入外部js文件

//hello.js文件alert(\"hello\");

内部样式：定义标签，写到script标签中 

 

🍑基础语法

这里先说一下JavaScript常用的控制台信息输出工具console.log

  console.log(1.02);
  • 在浏览器中点击快捷键F12，显示下面该页面，点击到Console，会显示输出信息 

 🍑变量声明

  • var：早期声明变量，作用域在该语句的函数内，也就是在所在函数内都可以访问，用的不多；
  • let：新增的声明变量， 作用域在语句所在的代码块，在{}都可以访问；
  • const：声明常量，声明后不能修改，否则会报错。
  var age1=11; console.log(age1); let age2=12; console.log(age2); const age3=13; // age3=13; 常量声明，修改报错 console.log(age3);

  • JavaScript事故一门动态弱性语言，变量可以存放不同类型的值，随着程序的运行，类型也会改变 
  var age1=11; age1=\"abc\" console.log(age1); let age2=12; age2=true; console.log(age2); const age3=13; console.log(age3);

  •  +：当使用 + 运算符对不同类型的值进行拼接时，会自动将非字符串类型转换为字符串
  let age1=123+\"h\"; console.log(age1); let age2=\"123\"+\"你好\"; console.log(age2); let age3=\"123\"+true; console.log(age3);

🍑运算符

运算符类型 运算符 算术运算符 +，-，*，/,% 自增自减运算符 ++,-- 赋值运算符 ==,+=,-=,*=,/=,%= 比较运算符 ,=,!=,!==,==,=== 逻辑运算符 &&,||,! 位运算符 &,|,^,~ 移位运算符 <>,>>> 三元运算符 条件表达式？true_value:false_value

大体都与Java相同，个别不同 

  • ==与===的不同
    • ==：会尝试进行隐式类型转换，也就是，把不同可惜的值转换为相同类型后再进行比较
    • ===：不进行隐式类型转换。
      • 想严格比较（类型+值都相同）->用===；
      • 想宽松比较（允许；类型转换）->用==（尽量少用）
  //==:会尝试进行隐式类型转换，把不同的值转换为相同类型在进行比较 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

 

  • ！=与！==也是同理，！=可以进行类型转换，而！==不可以 

💡三、数据类型

js的数据类型分为：基本类型和引用类型

typeof：用于返回操作数的数据类型。

🍓基本类型

基本类型 描述 Number 数字，用于表示整数和浮点数 String 字符串类型，需要用引号，单引号双引号都可以 Bollean 布尔类型，只有两个取值，true（表示真），false（表示假），常用语逻辑判断 Undefined 表示变量未初始化，变量的值就是undefined，或者访问对象不存在属性是，也会返回undefined 
  //基本类型 //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));

  • null：返回的类型是object，这个早期JavaScript设计的一个历史遗留问题。虽然null表示空值，当从检测类型角度来看，需要特殊处理。

🍓引用类型

数组

🍒数组的创建
  //方法一：使用new关键字 let a1=new Array(1,\"hell0\",null); //方法二：使用字面量创建 let a2=[]; a2=[1,\"1\",4]; let a3=[1,2,3];
  • js的数组可以不用统一类型
🍒数组的操作 
🍉1.数组的查找
  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
  •  元素不存在查找结果为undefined；
🍉2.数组的遍历

方式一：传统for循环

 a1=[1,\"1\",4]; //方式一： for(let i=0;i<a1.length;i++){ console.log(a1[i]); }

方式二：for...of循环（值遍历） 

 //方式二： for (const element of a1) { console.log(element); }
  • element是当前遍历到的元素的值，变量名可自定义
  • of关键字用于遍历数组的值 

方式三 ：foreach遍历

 console.log(element); } //方式三： a1.forEach(element => { console.log(element); });
  • foreach是数组的内置方法，接收一个回调函数作为参数
🍉3.数组的增添
  //添加元素 let a=[1,2,3]; a[4]=100; a[100]=1; console.log(a[4]); console.log(a[100]); console.log(a);

  • 稀疏数组：数组索引不连续，存在未显示赋值的空槽（不占实际内存，遍历会跳过）；
  • 动态长度：数组长度有最大索引决定； 
🍉4.数组的删除
  //删除元素 let a=[1,2,3]; //删除前 console.log(a[1]); //删除从下标一开始的两个数据 a.splice(1,2); //删除后 console.log(a);

  • splice（起始索引，删除数量，插入元素1，插入元素2...） ；
  • 如果访问不存在的元素，记过为undefined。 
🍉5.数组的修改
  //修改元素 let a=[1,2,3]; //修改前 console.log(a[0]); a[0]=100; //修改后 console.log(a[0]);

💡四、函数

语法格式

  //函数格式 function 函数名（参数1，参数2...）{ //函数体 return 结果//（可选，返回值） } //函数调用（无返回值） 函数名（实参列表）; //函数调用（无返回值） 返回值=函数名（实参列表）;

示例：

  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

  • 当函数定义了n个参数。调用是传了m个参数（m>n）,JavaScript不会报错，会忽略多于参数，只计算前n个参数；
  •  当函数定义了n个参数。调用是传了m个参数（m<n）,JavaScript不会报错，多于参数会被赋值为undefined，在上述示例中，也就成了15+undefined，结果是NaN（Not a Number ,非数字）。

匿名函数

 语法格式

 let 变量名=function(参数名1，参数名2....){ 函数体); } //调用 函数名(参数1，参数2...)

 示例：

 let c=function(a,b){ console.log(a+b); } c(1,2);

 

  • 需要调用调用变量名，才能触发函数。 

💡五、对象

        在JavaScript中，对象是一种复合数据类型，用于存储键值对形式的数据，并且可以包含函数（方法）。

🍐对象的创建

🍍字面量创建（常用）：{}
  let student={ id:12333, name:\"张三\", age:12 }
  • 键值对之间使用逗号分割；
  • 键和值使用冒号分割 。
🍍使用new Object创建对象

语法：

 let 对象名=new Object(); 对象名.属性=值; ....

示例：

 let student=new Object(); student.id=2; student.name=\"张三\"; student.age=12;

🍐构造函数对象

语法格式

  function 构找函数名(参数1，参数2...){ this.属性=值; this.name=name; this.方法=function(){ 函数体 } } let a=new 够着函数名(参数...);

示例

  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);
  • 构造函数不需要return 

🍐对象的属性操作

访问

  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;
  • 使用[]访问属性，需要加上引号。 
网络标签：

相关问题