JavaScript 基础语法

原创已于 2022-04-23 10:29:15 修改 · 973 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端

于 2022-04-23 10:09:43 首次发布

前端专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了JavaScript的基础知识，包括它的运行环境、组成、特点以及添加方法。讲解了变量声明、数据类型及其转换，深入探讨了运算符、函数、分支结构、循环结构和数组的操作。此外，还提到了数组的API函数，如字符串转换、拼接、选取和修改等。通过实例展示了如何在实际编程中运用这些概念和方法。

1 JavaScript 概述和 JS 添加方法

1.1 JavaScript 概述

JavaScript 是一种运行于 JavaScript 解释器/引擎中的解释型脚本语言。

解释型：运行之前是不需要编译的，运行之前不会检查错误，直到碰到错误为止。
与之相对的编译型：对源代码进行编译，还能检查语法错误，例如：C/C++。

运行环境：
1、独立安装的 JS 解释器（NodeJS）；
2、嵌入在浏览器内核中的 JS 解释器；
使用场合：PC机，手机，平板，机顶盒
组成：
1、核心（ECMAScript）；
2、文档对象模型（DOM，Document Object Model）【让 JS 有能力与网页进行对话】；
3、浏览器对象模型（BOM，Browser Object Model）【让 JS 有能力与浏览器进行对话】；
特点：
1、开发工具简单，记事本即可；
2、无需编译，直接由 JS 引擎负责执行；
3、弱类型语言由数据来决定数据类型；
4、面向对象；

1.2 JS 添加方法

1、将 JS 代码嵌入在元素“事件”中

<html>
	<body>
		<button onclick="console.log('hello world');">
			print
		</button>
	</body>
</html>

2、将 JS 代码嵌入在 <script> 标记中【<script></script>允许出现网页的任意位置处】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        console.log('你好！');
    </script>
</head>
<body>
    <script>
        console.log('hello world');
    </script>
</body>
</html>

3、将 JS 代码写在外部脚本文件中（xxx.js），在页面中引入 js 文件<script src="文件路径"></script> 【此时标签内部不允许出现任何内容，若出现内容，内容无效，引入文件仍有效】

<html>
	<body>
		<script src="myscript.js"></script>
	</body>
</html>

注释

//单行注释
/*多行注释*/

JS 语法规范：
1、语句使用分号来表示结束，由表达式、关键字、运算符组成；
2、使用英文标点符号；
3、大小写敏感；

2 变量

2.1 变量的声明与赋值

变量的声明：var 变量名;
【不要省略 var 关键字，否则无论变量声明位于何处变量都为全局变量】
变量的赋值：变量名=值;
命名规范：
1、不允许使用 JS 的关键字和保留字；
2、由字母、数字、下划线以及美元符号$组成；
3、不能以数字开头；
4、尽量见名知意；
5、可以采用“驼峰命名法”；

未经初始化的变量，返回值为undefined；
未声明的变量在输出会报错，显示 xxx is not defined ;

2.2 数据类型

数据类型分为原始类型和引用类型两种。
原始类型：
1、数字类型number
32位整数（十进制、八进制、十六进制）或64位浮点数
2、字符串类型string
Unicode 字符、数字、标点，均占2字节
3、布尔类型boolean
【true 1/false 0】表示条件结果
4、空null【声明对象未赋值】
5、未定义undefined【声明变量未赋值/访问对象不存在】

2.3 数据类型转换

隐式转换（自动转换）

typeof() 函数
【也可为typeof，用于判断一个值的数据类型】
NaN (= Not a Number)
可用is NaN来判断一个数据是否为非数字，其结果为boolean类型
结果为 true ：不是一个数字；
结果为 false ：是一个数字；

转换函数 - 显式转换（强制转换）

变量.toString() 将任意类型的数据转换为 string 类型;
= parseInt(数据) 获取指定数据的整数部分【为从左向右依次转换，碰到第一个非整数字符，就停止转换。如果第一个字符就是非整数字符的话，结果为NaN】
=Number(数据) 将一个字符串解析为number 【如果包含非数字字符，就返回NaN】
= parseFloat(数据) 将指定数据转换为小数【为从左向右依次转换，碰到第一个非数字符，就停止转换。如果第一个字符就是非数字符的话，结果为NaN】

var result=parseFloat("35.25");     //35.25
var result=parseFloat("35.25你好"); //35.2
var result=parseFloat("你好35.25"); //NaN

3 运算符和表达式

3.1 表达式

表达式：由运算符和操作数所组成的式子叫做表达式，每个表达式都有自己的值。

3.2 运算符

运算符：能够完成数据计算的一组符号

算数运算符
+加；-减；
*乘；/除；%取余；
++自增；--自减；
表达式描述
i++ 变量i先取值再加1
++i 变量i先加1再取值
i-- 变量i先取值再减1
--i 变量i先减1再取值
关系运算符
>大于；<小于；
>=大于等于；<=小于等于；
==判断等于；!=不等于；
===全等；!==不全等；
【判断等于和不等于不比较类型，只比较数值；全等和不全等在比较数值+类型】
逻辑运算符
&&与；||或；!非；
短路逻辑：
在与逻辑中，当前面的表达式为 false 时，我们就不会判断后面的表达式；
同样，在或逻辑中，当前面的表达式为 true 时，我们就不会判断后面的表达式。
三目运算符
表达式1 ? 表达式2 : 表达式3 ;
表达式1为判断语句；
若表达式1的值为 true ，则运行表达式2，返回表达式2的值；
若表达式1的值为 false ，则运行表达式3，返回表达式3的值。
```
var msg=age>18?"成年人":"未成年人";
```

表达式	描述
`i++`	变量i先取值再加1
`++i`	变量i先加1再取值
`i--`	变量i先取值再减1
`--i`	变量i先减1再取值

4 函数

函数（function），也可以称之为方法或者过程，是一段预定义好，并可以被反复使用的代码块。其中可以包含多条可执行语句。
函数的声明与调用

/*函数的声明
function 函数名(参数列表声明）{
	可执行语句;
	return 返回值;
}*/
function add(num1,num2)//此处的参数为形参
{
	console.log("正在运行加法运算");
	return num1+num2;
}
//函数的调用 函数名（实际参数）
var a=3;
var b=5;
var c=add(a,b);//此处的参数为实参

按值传递：传参时，实际上是将实参的值传给了形参。在函数体内对变量进行修改，实际上是不会影响到外部变量的。
声明提前：JS 在正式执行之前，会将所有 var 声明的变量和 function 声明的函数预读到所在作用域的顶部。但是，对变量的赋值还保留在原来的位置处。【即仅是声明提前】

//声明提前
console.log(a);//此时输出的值为undefined，即变量未声明，不报错
var a=100;
console.log(a);//此时输出值为100

变量的作用域

作用域：变量或函数的可访问范围。它控制着变量或函数的可见性和生命周期。

函数作用域：只在当前函数内可访问
【局部变量：只在当前函数内可以访问到，离开此范围就无法访问了】
全局作用域：一经定义，代码的任何位置都可以访问【全局变量：在代码的任何位置都能访问到（在声明时不加 var ，就算在函数内声明也认为是全局变量，不推荐使用）】

5 结构

5.1 分支结构

if-else 结构

/*if (条件表达式）{
	可执行语句
}
else if(条件表达式){
	可执行语句
}
else {
 	可执行语句
}*/
var score=86;
if(score>90){
	console.log("优秀");
}
else if(score>80){
	console.log("良好");
}
else if(score>60){
	console.log("及格");
}
else{
	console.log("不及格");
}

条件表达式的值必须为boolean类型
若不是，则会进行自动转化
0/0.0/''/null/undefined/NaN——false
1/"内容"——true

switch-case 结构

/*switch (表达式){
	case 值1:
		可执行语句；
		break;结束语句
	case 值2:
		可执行语句;
		break;结束语句
	...
	dafault:
		可执行语句;
}*/
var day=6;
switch (day){
	case 1:
	case 2:
	case 3:
	case 4:
	case 5:
		console.log("weekday");
		break;
	case 6:
	case 7:
		console.log("weekend");
		break;
	default:
		console.log("error");
}

switch-case 结束机制：
1、碰到break结束
2、整个结构都执行完毕结束直落
两个case或多个case之间，没有任何的可执行代码，那么就以最后一块的case为主

if-else 与 switch-case 的区别
if-else 可以判定相等或不等的情形，适用性更广；
switch-case 结构更清晰，效率更高，但一般只用于指定变量相等于某个范围内的某个特定的值。

5.2 循环结构

while 循环
【先判断，后执行】【如果循环条件一直为真的话，那么就是个死循环，尽量避免死循环的产生，一定要记得更新循环变量（条件）】

/*while(boolean表达式){
	可执行语句;
}*/
var n=5;
while(n>0){
	console.log("n="+n);
	n--;
}

do-while 循环
【先执行，后判断】【无论循环条件是否满足，循环体至少执行一遍】

/*do{
	可执行语句；
}while(boolean表达式);*/
var n=5;
do{
	console.log("n="+n);
	n--;
}while(n>0);

for 循环
【先判断，后执行】

/*for(表达式1;表达式2;表达式3){
	可执行语句；
}*/
for(var n=5;n>0;n--){
	console.log("n="+n);
}

三者判断和循环间的区别

var n=0;
while(n>0){
	console.log("n="+n);
	n--;
}
//while循环先判断后执行，此时 while 循环不执行
n=0;
do{
	console.log("n="+n);
	n--;
}while(n>0);
//do-while循环先执行后判断，此时do-while循环执行一次，控制台输出n=0，此时n的取值为-1
for(n=0;n>0;n--){
	console.log("n="+n);
}
//for循环先判断后执行，此时for循环不执行

6 数组

数组：内存中连续存储多个数据的数据结构，再起一个统一的名字，用于存储多个数据。

6.1 索引数组

创建数组

var arr1=[];           //定义一个不包含元素的数组
var arr2=[1,2,3];      //数组元素：1，2，3（3个元素）
var arr3=new Array();  //定义一个不包含元素的数组
var arr4=new Array(N); //定义一个包含N个空元素的数组
var arr5=new Array("Tom","Marry","John");
//数组元素："Tom","Marry","John"(3个元素)

数组下标从0开始，连续而不重复
数组的length属性：记录理论上数组元素的个数，始终为最大下标+1
因此有以下固定套路：
1、获取数组的最后一个元素：arr[arr.length-1]
2、获取倒数第n个元素：arr[arr.length-n]
3、数组缩容：减小arr.length的数值，会删除结尾多余的元素

SET操作
设置数组元素的值
若添加元素的下标大于等于length属性值，则会在尾部添加一个新元素。

//方法一
var arr1=[];
arr1[0]=0;
arr1[1]=1;
//方法二 混合元素类型数组
var arr2=new Array();
arr2[0]="张三";
arr2[1]=175;
arr2[2]=true;

GET操作
获取元素的值
当获取时的下标大于等于length属性值，不会报错（下标越界异常），返回值为undefined。

var arr=[1,2];
console.log(arr[1]);//控制台输出2
console.log(arr[2]);//控制台输出undefined

遍历数组
依次访问数组中的每一个元素，对每一个元素执行相同的操作。

for(var i=0;i<arr.length;i++){
	arr[i];//当前正在遍历的元素
}

索引数组的特点：三个不限制
1、不限制数组的元素个数：长度可变
2、不限制下标越界：
获取元素值（不报错，返回 undefined）
修改元素值（不报错，自动在指定位置创建新元素，并且修改 length 属性为最大下标+1）
【下标不连续的数组——稀疏数组】
3、不限制元素的数据类型

6.2 关联数组

可自定义下标名称的数组【每个元素都有专门的名称】
创建关联数组

//方法一
var book1=[];
book1['bookname']='西游记';
book1['price']=35.5;
//方法二
var book2={'bookname':'水浒传','price':35.5};

遍历关联数组
【for in 循环】
由于关联数组的length属性值无法获取其中元素的数量，所以遍历关联数组只能用 for in 循环

for(var key in hash){
	key;//当前元素的下标名
	hash[key];//当前元素的值
}

6.3 索引数组和关联数组的对比

索引数组	关联数组
能以字符串输出	不能用字符串形式输出
下标是数字	下标是自定义字符串
`length`属性值有效	`length`属性值失效（=0）
可用 for 循环遍历	不能用 for 循环遍历——for in

查找时：

索引数组	关联数组
索引	hash数组
遍历	不用遍历
受存储位置影响	和存储位置无关
受数组元素个数影响	和数组元素个数无关

今后只要希望快速查找元素时，就用关联数组

6.4 数组的API函数

数组转字符

String(arr)
将arr中每个元素转为字符串，逗号分隔开
固定套路：对数组拍照（用于鉴别数组是否被修改过）
arr.join("连接符")
将arr中每个元素转为字符串，用自定义连接符分隔
固定套路：
1、将字符组成单词：chars.join("")->无缝拼接
2、判断数组是空数组：arr.join("")==""
3、将单词组成句子：words.join(" ")
4、将数组转化为页面元素的内容："<开始标签>"+arr.join("</结束标签><开始标签>")+"</结束标签>"

拼接和选取
【不直接修改原数组，而返回新数组】

拼接concat()
拼接两个或更多的数组，并返回结果

var newArr=arr1.concat(值1,值2,arr2,...);

将值1、值2和arr2中的每一个元素都拼接到arr1的元素之后，返回新数组newArr
其中，arr2的元素会先被打散再拼接
arr1中的值不变

选取slice()
返回现有数组中的一个子数组

/*
var subArr=arr.slice(starti,endi+1);
选取arr中starti位置开始，到endi结束的所有元素组成新数组返回
原数组保持不变
*/
var arr1=[10,20,30,40,50];
var arr2=arr1.slice(1,4);//20,30,40
//一直选取到结尾可省略第二的参数
var arr3=arr1.slice(2);  //30,40,50
//如果选取的元素离结尾近可采用倒数下标
//即arr.slice(arr.length-n,arr.length-m+1)=arr.slice(-n,-m+1)
//【反向选取，但顺序不反向】
var arr4=arr1.slice(-4,-1)//20,30,40
//复制数组：arr.slice(0,arr.length)=arr.slice()
var arr5=arr1.slice();    //10,20,30,40,50

凡是两个参数都是下标的函数，都有一个特性：含头不含尾

修改数组

删除插入替换splice
【直接修改原数组】

//删除 arr.splice(starti,n);
//删除arr中从starti位置开始的n个元素，不考虑含头不含尾
var arr1=[10,20,30,40,50];
arr1.splice(1,1);  //arr1=[10,30,40,50]
//var newArr=arr.aplice(starti,n);
//newArr保存了被删除元素组成的数组
var arr2=arr1.splice(1,2);
//arr1=[10,50]	arr2=[30，40]

//插入 arr.splice(starti,0,值1,值2,arr1,...);
//在arr中starti位置插入值1,值2,以及arr1中的元素,...,原starti位置的值及其后的值被向后推移
arr1.splice(1,0,20,[30,40]);  //arr1=[10,20,30,40,50]
var arr3=arr1.splice(4,0,60);
//arr1=[10,20,30,40,50,60]	arr3=[]

//替换 arr.splice(starti,n,值1,值2,arr1,...);
//先删除arr中从starti位置开始的n个值，再在starti位置插入值1,值2,以及arr1中的元素,...
//删除元素的个数和插入的新元素的个数不必一致
arr1.splice(1,5,11,12,[13,14],15);  //arr1=[10,11,12,13,14,15]
var arr4=arr1.splice(1,3,10);
//arr1=[10,10,14,15] arr4=[11,12,13]

颠倒数组
reverse()
颠倒数组中元素的顺序
【仅负责原样颠倒数组，不负责排序】

var arr1=[10,20,30,40,50];
arr1.reverse();
//arr1=[50,40,30,20,10];

排序
arr.sort()
默认将所有元素转为字符串再排列,因此只能排列字符串类型的元素
若需要排列其他类型的数组，需要自己写出排序函数（冒泡、快排、插入）