JavaScript 基础语法与核心概念详解

JavaScript 是一门动态弱类型语言，变量可以存放不同类型的值，随着程序的运行，类型也会改变。

<script> var age1=11; age1="abc" console.log(age1); let age2=12; age2=true; console.log(age2); const age3=13; console.log(age3); </script>

• +：当使用 + 运算符对不同类型的值进行拼接时，会自动将非字符串类型转换为字符串。

<script> let age1=123+"h"; console.log(age1); let age2="123"+"你好"; console.log(age2); let age3="123"+true; console.log(age3); </script>

运算符

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

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

<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：用于返回操作数的数据类型。

基本类型

<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 表示空值，但从检测类型角度来看，需要特殊处理。

引用类型

数组

数组的创建

<script> //方法一：使用 new 关键字 let a1=new Array(1,"hell0",null); //方法二：使用字面量创建 let a2=[]; a2=[1,"1",4]; let a3=[1,2,3]; </script>

• js 的数组可以不用统一类型。

数组的操作

1. 数组的查找

<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 循环

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

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

<script> //方式二： for (const element of a1) { console.log(element); } </script>

• element 是当前遍历到的元素的值，变量名可自定义。
• of 关键字用于遍历数组的值。

方式三：foreach 遍历

<script> //方式三： a1.forEach(element => { console.log(element); }); </script>

• foreach 是数组的内置方法，接收一个回调函数作为参数。

3. 数组的增添

<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. 数组的删除

<script> //删除元素 let a=[1,2,3]; //删除前 console.log(a[1]); //删除从下标一开始的两个数据 a.splice(1,2); //删除后 console.log(a); </script>

• splice（起始索引，删除数量，插入元素 1，插入元素 2...）；
• 如果访问不存在的元素，结果为 undefined。

5. 数组的修改

<script> //修改元素 let a=[1,2,3]; //修改前 console.log(a[0]); a[0]=100; //修改后 console.log(a[0]); </script>

四、函数

语法格式

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

示例：

<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，非数字）。

匿名函数

语法格式

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

示例：

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

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

五、对象

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

对象的创建

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

<script> let student={ id:12333, name:"张三", age:12 } </script>

• 键值对之间使用逗号分割；
• 键和值使用冒号分割。

使用 new Object 创建对象

语法：

<script> let 对象名=new Object(); 对象名。属性=值; .... </script>

示例：

<script> let student=new Object(); student.id=2; student.name="张三"; student.age=12; </script>

构造函数对象

语法格式

<script> function 构造函数名 (参数 1，参数 2...){ this.属性=值; this.name=name; this.方法=function(){ 函数体 } } let a=new 构造函数名 (参数...); </script>

示例

<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。

对象的属性操作

访问

<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>

• 使用 [] 访问属性，需要加上引号。