大家好，给大家分享一下javascript基本语法规则，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！
目录
JS基础语法知识
语法标准： ECMA组织规定
JavaScript：
- ECMAScript
- DOM 文档
- BOM 浏览器（一个窗口代表一个BOM）
注：所有的js代码在一个 标签中编写
属性：
1. type = 'text/java' 声明当前标签内写的文本格式（可以省略）
2. src = 'demo.js' 引入外部的.js文件（与css不同，css是通过href属性引入）
注意点：1、可以有多个标签，多个标签是自上而下顺序执行
2、一个标签只能专心做一个事情，要么用于引入外部js文件，要么直接在当前页面内写代码
alert() 在当前页面上弹出一个警告框，警告框中显示要显示的内容
向页面中输出内容
- document.write('这是一些内容');
注意：<1>如果内容中含有标签会自动解析，如：
<>
document.write("<h1>hello world</h1>");
</> 
<2>转义字符 < 代表 < > 代表 >
- alert('这是一些内容'); 在页面上弹出警告框
- console.log('这是一些内容'); 在浏览器调试面板控制台输出内容，一般用于代码调试。
- 小彩蛋：招聘简介快码论文。
- 小彩蛋：招聘简介快码论文。
JavaScript的注释
- 单行注释 // ctrl + /
- 多行注释 /* 内容 */ ctrl + shift + A
注意：在编写js代码的时候，要在每一行代码结束的位置加分号。
代码压缩：去掉编写代码的时候，有的所有空格、tab键和换行。
常量和变量
常量
概念：值不可以被修改的叫做常量。
数据类型：
- 基本数据类型：
- 数字：
- 类型：number
- 例子：100 、 -20 、3.14
- 布尔值：
- 类型：boolean
- 例子：true、false
- 字符串：
- 类型：所有带单引号或者双引号的都叫做字符串。（单引号/双引号效果一样，必须成对出现）
- 例子：'hello' "world" '100' "3.14"
- 数字：
- 复合/引用数据类型（以后讲解）
- 特殊数据类型：
- null 空
- undefined 代表一种状态
- NaN （not a number） 不是一个数字
变量
概念：值可以被修改的称为变量。
程序被CPU执行。
【注】程序磁盘读取到内存中，被CPU运行。
了解计算机的组成：磁盘 内存 CPU/GPU
关键信息：内存有空间，程序本质上运行实在内存中运行的。
【注】编程就是合理的分配内存。
1、声明变量（必须声明以后才能使用）
关键字（系统征用的有特殊功能的单词叫做关键字）：var 声明变量。
2、初始化：声明变量的时候，直接给这个变量赋值叫做初始化。
3、undefined：如果我们声明变量的时候，没有赋值给这个变量，系统默认赋值为undefined。
<>
var num = 10;
num = 200;
alert(num); /* 200 */
var num1;
alert(num1);/* undefined */
var num2 = null;
num2 = 10;
alert(num2);
</>【注】提高整个程序运行的效率，我们可以将声明变量，没有值赋值给这个变量的时候，默认赋值成null，提高程序运行效率。
变量命名
标识符：所有用户自定义的名字叫做标识符。
变量名也是标识符。
命名规则：
- 只能由数字、字母、下划线和美元符号($)组成。
- 不能以数字开头。
- 不能是保留字和关键字。
- 大小写敏感。 age Age 这是两个完全不同的变量
- 见名思意（尽量使用英文全称）
- 单词个数超过两个的
- 驼峰式命名 className
- 下划线命名 class_name
关键字和保留字：
关键字：
| Break | Else | New | var |
| Case | Finally | Return | void |
| Catch | For | Switch | while |
| Continue | Function | This | with |
| Default | If | Throw | |
| Delete | In | Try | |
| Do | Instanceof | Typeof |
保留字：
| Abstract | Enum | Int | short |
| Boolean | Export | Interface | static |
| Byte | Extends | Long | super |
| Char | Final | Native | synchronized |
| Class | Float | Package | throws |
| Const | Goto | Private | transient |
| Debugger | Implenents | Protected | volatile |
| Double | Import |
关键字：
typeof：
格式：typeof 常量/变量
功能：输出当前常量或者变量的数据类型。
<>
alert(typeof 100);/* number */
alert(typeof "hello");
alert(typeof true);
alert(typeof undefined);
alert(typeof typeof 100);/* string */
</> 弱引用
【注】JS是弱引用语言，变量的数据类型在赋值的时候才能确定。
变量：弱引用类型。赋值成什么数据类型就是什么数据类型。
【注】不建议改变变量的数据类型，容易引起歧义。
<>
var num = 10;
alert(num);
num="hello";
alert(num);
</>进制转换
十进制：0 - 9
二进制：1 0
八进制：模八取余
十六进制：模十六取余
十转二：模二取余，固定流程
二转八：从右往左数，每三位一组，不足三位0补齐，最后将每一组单独转十进制数
二转十六：从右往左数，每四位一组，不足四位0补齐，最后将每一组单独转十进制数
JS-ximd思维导图
算术运算符
运算符：
- 算术运算符
- + - * / %
- 关系运算符
- > < >= <= == != === !==
- 逻辑运算符
- && || !
- 一元运算符
- ++ --
- 赋值运算符
- 基本赋值运算符： =
- 复合赋值运算符： += -= ... x=
表达式：任何数据和运算符组成的式子叫做表达式
<1>表达式的值
<2>表达式的功能
算数运算符
+ - * / %（取余符号）
【注】将不同数据类型进行算术运算。
自动数据类型转换：不同数据类型之间没有办法进行运算，将数据转成同一数据类型，再进行计算。
1、其中有一个操作数必须是字符串，运算符必须是 + 号，别的数据类型转成字符串，进行字符串拼接。
<>
alert("hello"+"world"); /* helloworld */
alert("hello"+100); /* hello100 */
alert("hello"+true); /* hellotrue */
alert("hello"+null); /* hellonull */
alert("hello"+undefined);/* helloundefined */
alert("hello"+NaN); /* helloNaN */
</>2、任何数据和字符串做 + 加法以外的操作，那么字符串要先转成数字再去进行运算。
<1>如果字符串是一个纯数字字符组成的字符串，转成对应的数字。
<2>如果字符串含有数字以外的别的字符，转成NaN，NaN和任何数据运算都是NaN。
<>
alert(100+"20"); /* 10020 */
alert(100-"20"); /* 80 */
alert(100-"20a") /* NaN */
</>3、除字符串以外的数据，在进行算数运算的时候，先转成数字，再进行运算。
<>
alert(10 + true); /* 11，true=>1 */
alert(10 + false); /* 10，false=>0 */
alert(10 - null); /* 10，false=>0 */
alert(10 - undefined); /* NaN，undefined=>NaN */
alert(10 - NaN); /* NaN */
</>细节：
计算机是不会进行小数运算。（天生由Bug）
小彩蛋：金融账户，只储存整数，单位是分。
<>
alert(0.8 - 0.1);
</>
在JS中除数可以为0.
<>
alert(10 / 0); /* Infinity:无穷大 */
alert(-10 / 0); /* -Infinity：无穷小 */
alert(Infinity + "hello"); /* Infinityhello */
alert(Infinity + 100); /* Infinity */
</>赋值
普通赋值运算符：=
功能：将 = 号右边的值，赋值给 = 号左边的变量。
复合赋值运算符：x= += -=
一元运算符：
自增
++
a++;
值：++后置，先取a的值作为a++表达式的值，然后再对a进行+1
功能：对原有的变量进行+1操作
++a;
值：++前置，先对a进行+1，再a的值作为++a表达式的值
功能：对原有的变量进行+1操作
<>
var a = 5;
//a = a + 1;
//a += 1;
alert(a++); //a++ = 5,a = 6;
alert(++a); //++a = 6,a = 6;
alert(a);
</>自减
--
--a;
a--;
算术运算符练习
<>
var money = 10000;
money += money * 0.5 * 50; /* money = money + money * 0.5 * 50; */
alert(money);
var total = 89;
var day = parseInt(total / 24); //取整
var hours = total % 24;
alert("一共花了" + day + "天，" + hours +"小时");
var Fahrenheit = 80;
var centigrade = (Fahrenheit-32) * 5 / 9.0;
alert("摄氏度是：" + centigrade + "°");
var num = 123;
var a = num % 10;
var b = parseInt(num / 10) % 10;
var c = parseInt(num / 100);
alert("百位是：" + c + "，十位是：" + b + "，个位是：" + a);
</>强制数据类型转换
- Boolean() 将其他的数据类型强制转换成布尔值
- 非0即真，非空即真
-
<> alert(Boolean(-100)); alert(Boolean(3.14)); alert(Boolean(0)); /* false */ alert(Boolean("11")); alert(Boolean("hello")); alert(Boolean("")); /* false */ alert(Boolean(null)); /* false */ alert(Boolean(undefined));/* false */ alert(Boolean(NaN)); /* false */ </>
- number() 将其他的数据类型强制转换成数字
- 【注】只有纯数字字符组成的字符串转数字，才能转为数字，其他都为NaN
- parseInt()
- 取整
- 将别的进制转成十进制 必须传入字符串
<> /* 52 二进制 110100 八进制 64 十六进制 34 */ var str1 = "110100"; alert(parseInt(str1,2)); var str2 = "64"; alert(parseInt(str2,8)); var str3 = "34"; alert(parseInt(str3,16)); </>
- parseFloat() 取浮点数
<>
alert(Number("100")); /* 100 */
alert(Number("100a")); /* NaN */
alert(parseInt("100a")); /* 100 */
alert(parseInt("10b0a")); /* 10 */
alert(parseInt("c10b0a")); /* NaN */
alert(parseInt("3.14")); /* 3 */
alert(parseFloat("3.14a")); /* 3.14 */
</>关系运算符
> < >= <= == != === !==
赋值运算符：= 用来赋值
关系运算符：至少两个 = ，用来判断；最后运算的值绝对是布尔值
- 自动数据类型转换：
- 和其他运算符一样，当关系运算符操作非数值时要遵循以下规则：
- 两个操作数都是数值，则数值比较；
- 两个操作数都是字符串，则比较两个字符串对应的字符编码值；
- ASCII码表是电脑内部，每一个字符和字符对应编码的一张表
- 如果是两个单个字符进行比较，直接比较字符的ASCII码值
- 逐位，进行比较，如果比较出大小，就直接得出结果
- 两个操作数有一个是数值，则将另一个转换为数值，再进行数值比较
- ASCII码表是电脑内部，每一个字符和字符对应编码的一张表
- 在相等和不等的比较上，如果操作数是非数值，则遵循以下规则：
- 一个操作数是布尔值，则比较之前将其转换为数值，false 转成 0，true 转成 1；
- 一个操作数是字符串，则比较之前将其转换成为数值再比较
- 一个操作数是 NaN，则 == 返回 false， !=返回 true；并且NaN和自身不符；
- ===：恒等，必须数字和数据类型都相等，返回true，否则返回false
- 和其他运算符一样，当关系运算符操作非数值时要遵循以下规则：
<>
alert("A" < "a"); /* true */
alert("abcd" < "adc"); /* true */
alert(1 == true); /* true,true=>1 */
alert(0 == false); /* true,false=>0 */
alert(10 == "10"); /* true */
alert(10 === "10"); /* false */
alert(Number("10") === 10); /* true */
alert(10 == "10a"); /* false */
alert(NaN == NaN); /* false */
</>关系运算（特殊值）
| 值 | |
| null == undefined | true |
| "NaN" == NaN | false |
| 5 == NaN | false |
| NaN == NaN | false |
| false == 0 | true |
| true == 1 | true |
| true == 2 | false |
| undefined == 0 | false |
| null == 0 | false |
| '100' == 100 | true |
| '100' === 100 | false |
小彩蛋：
<>
alert(Number(null)); /* 0 */
alert(Number(undefined)); /* NaN */
alert(null == undefined); /* true */
</>逻辑运算符
- 与（且） &&：
- 格式：表达式1 && 表达式2
- 规律：只有当两个表达式都为true的时候，整个表达式才为真
- 短路操作：当表达式1为 false 时，表达式2就不执行了，就直接得出结果为false
- 或 || ：
- 格式：表达式1 || 表达式2
- 规律：只有当两个表达式都为false的时候，整个表达式才为假
- 短路操作：当表达式1为 true时，表达式2就不执行了，直接得出结果为true
- 非 ！：
- 格式：！表达式
- 规律：先将这个表达式的值自动数据类型转换成布尔值，然后，再取反
- 【注】其他数据类型转布尔值：非空即真
流程控制语句
代码自上而下顺序执行
分支结构/选择结构/条件结构：要根据不同的条件，执行不同的操作
循环结构：重复去做一件事情
顺序结构
题目：输入两个数，然后交换这两个数，再输出它们交换后的结果
<>
var num1 = 10;
var num2 = 20;
alert("num1:" + num1 + ",num2:" + num2);
var tmp = num1;
num1 = num2;
num2 = tmp;
alert("num1:" + num1 + ",num2:" + num2);
</>
单分支语句和双分支语句
分支语句/选择语句/条件语句：根据不同选择，执行不同的内容
- 单分支：
- 语法：
if（判断的条件）{
执行语句；（判断条件为true的时候执行）
}
- 语法：
- 双分支：
- 语法：
if（判断的条件）{
执行语句；（判断条件为true的时候执行）
} else {
执行语句；（判断条件为false的时候执行）
}
- 语法：
- 步骤：
- 1、确定判断条件应该写什么
- 2、根据不同的结果，编写对应的执行语句
- 【注】if（）里面可以写任何的表达式，都会自动数据类型转换成布尔值
题目：判断一个数是偶数还是奇数
<>
var num = 8;
if(num % 2 == 0){
alert("这就是一个偶数");
}else{
alert("这是一个奇数");
}
</>题目：求两个数的最大数
<>
var num1 = 10, num2 = 20;
if(num1 > num2){
alert("最大数是num1：" + num1);
}else{
alert("最大数是num2：" + num2);
}
</>题目：判断一个年份是闰年还是平年；（能被4整除且不能被100整除，或能被400整除）
/* 代码规范：
阅读代码时间要占到编写代码时间的10倍。
1、运算符前后，都要加空格
2、; 或 ,后面只需要加一个空格
3、代码缩进
*/
<>
var year = 2020;
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
alert(year + "年是闰年");
}else{
alert(year + "年是平年");
}
</>多分支语句
- 语法：
if（判断的条件1）{
执行语句1；
} else if（判断条件2）{
执行语句2；
}
...
else{
执行语句；（上述所有条件都不成立，执行这里）
}
<>
var y = 0;
var x = 10;
//判断x区间
if(x < 1){
y = x;
}else if(x >= 1 && x <10){
y = 2 * x + 1;
}else{
y = 5 * x - 17;
}
alert("当x的值是" + x + ",y的值是" + y);
var grade = 80;
if(grade > 85){
if(grade >= 95 && grade <= 100){
alert("优秀，奖学金：1000");
}else if(grade >= 90 && grade < 95){
alert("优秀，奖学金：800");
}else{
alert("优秀，奖学金：300");
}
}else if(grade >= 75 && grade <= 85){
alert("良好");
}else if(grade >= 60 && grade <= 75){
alert("及格");
}else{
alert("不及格");
}
</>switch语句
- 语法：
switch(表达式){
case 常量1：
执行语句；
break；
case 常量2：
执行语句；
break；
. . .
default：
当上述所有的case选项都匹配失败，执行这里
break；
}
- 过程：
- 1、计算switch( )语句表达的值
- 2、和case( )后续的值进行匹配，匹配成功，执行对应case选项下的执行语句
<>
/*
if的多分支语句和switch语句的编写
1、如果是匹配确定的结果，优先使用switch
2、需要判断的题目，只能用if语句
*/
/*
注意：
1、一般情况下不要省略break；
2、一般情况下不要省略break；
*/
var grade = "B";
switch(grade){
case "A":
alert("80~100");
break;
case "B":
alert("70~79");
break;
case "C":
alert("60~69");
break;
case "D":
alert("<60");
break;
default:
alert("error");
break;
}
</>三目运算符
- 格式：
- 表达式1 ？ 表达式2 ： 表达式3；
- 执行：
- 1、先去判断表达式1是否为真
- 2、表达式1为真，直接去执行表达式2
- 3、表达式1为假，直接去执行表达式3
<>
var num = 7;
num % 2 == 0 ? alert("偶数") : alert("奇数");
</>省略break简化代码
题目：输入月份，显示当月的天数
要求：1）利用case穿透简化代码
<>
var month = 2;
var year = 2001;
switch(month){
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
alert("31天");
break;
case 2:
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
alert("29天");
}else{
alert("28天");
}
break;
default:
alert("30天");
break;
}
</>问题：输入年、月、日，计算某一天是该年的第几天，第几周？
/* switch语句 */
<>
/* 月份正着写出现一个问题：break应该写在哪
月份倒着写要注意：相加的天数应该为上个月的总天数，而不是本月的天数 */
var year = 2022;
var month = 9;
var day = 4;
var sum = 0;
switch(month){
case 12: sum += 30;
case 11: sum += 31;
case 10: sum += 30;
case 9: sum += 31;
case 8: sum += 31;
case 7: sum += 30;
case 6: sum += 31;
case 5: sum += 30;
case 4: sum += 31;
case 3:
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
sum += 29;
}else{
sum += 28;
}
case 2: sum += 31;
case 1: sum += day;
break;
default:
alert("error");
}
alert(sum + "天");
var week = parseInt(sum / 7);
alert(week + "周");
</>
/* for循环 */
<>
var year = 2022;
var month = 9;
var day = 4;
var sum = 0;
for (var i = 1; i < month; i++){
if (i == 1 || i== 3 || i == 5 || i == 7 || i == 8 || i == 10 || i == 12){
sum += 31;
}
else if ( i == 4 || i == 6 || i == 9 || i == 11){
sum += 30;
}
else{
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
sum += 29;
}
else {
sum += 28;
}
}
}
sum = day + sum;
alert (sum + "天");
var week = parseInt(sum / 7);
alert(week + "周");
</>
while循环
- 格式：
- while(循环条件){
- 循环语句；
- }
- 执行：
- 如果循环条件成立就执行循环语句，直到循环条件不成立为止。
- 使用循环的好处：
- 1、代码简洁
- 2、代码没有冗余
- 3、后期维护方便
- 写循环的步骤：
- 1、确定循环的次数
- 【注】循环条件，while( )我们可以写任意的表达式，最后都会自当数据类型转换成布尔值
- 【注】不能让循环条件永远成立，会造成死循环
- 2、确定每一次循环要执行的代码
- 1、确定循环的次数
练习：
<>
/* 打印出1000-2000年中所有的闰年，并以每行四个数的形式输出 */
var i = 1000;
var count = 0; /* 计算闰年的个数 */
while(i <= 2000){
/* 可以加一个括号提高优先级 */
if((i % 4 ==0 && i % 100 != 0) || i % 400 == 0){
document.write(i);
count++;
if(count % 4 == 0){
document.write("<br/>");
}
}
i++;
}
</>do_while循环
- 格式：
do{
}while(循环条件);
- 【注】do_while循环后面的分号不要省略
<>
//1~100的和
var i = 1;
var sum = 0;
while(i <= 100){
sum += i;
i++;
}
alert(sum);
do{
sum += i;
i++;
}while(i <= 100);
alert(sum);
</>while循环和do_while循环的区别
- 1、while循环
- 先判断循环条件
- 2、do_while循环
- 先去运行一次循环语句，在去判断循环条件
for循环
- 格式：
- for(表达式1；表达式2；表达式3){
- 执行语句；
- }
break和continue关键字
- break：
- 功能：终止当前循环；
- continue：
- 功能：跳过这次循环，直接进入下次循环
<>
//输出1~100的数
for(var i = 1; i <= 100; i++){
if(i == 5){
break;
}
document.write(i + "<br/>");
}
</>死循环
产生条件：循环条件永远成立
<>
while(1){
}
do{
}while(1);
for(;;){
}
</>案例
打印三角形
<>
//确定输出的行
for(var i = 1;i <= 5;i ++){
//输出圆圈的个数
for(var j = 1;j <= i;j ++){
document.write("⭕");
}
document.write("<br/>");
}
</><>
/* 输出空格数 = 5 - 当前行的圆圈数 */
for(var i = 1; i <= 5; i ++){
// 空格数
for(var k = 1; k <= 5 - i; k++){
document.write("   ");
}
//圆圈个数
for(var j = 1; j <= i; j++){
document.write("⭕");
}
document.write("<br/>");
}
</>九九乘法表
<>
for(var i = 1;i <= 9;i ++){
for(var j = 1;j <= i;j ++){
document.write(j + "X" + i + "=" + (i * j) + " ");
}
document.write("<br/>");
}
</>循环练习
1、山上有一口缸可以装50升水，现在有15升水。老和尚叫小和尚下山挑水，每次可以挑5升。问：小和尚要挑几次水才可以把水缸挑满？
<>
var water = 15;
var count = 0;
while (water < 50){
count ++;
water += 5;
}
alert("一共挑了" + count + "次水");
</>2、判断一个数是不是合数。（指自然数中除了能被1和本身整除外，还能被其他的数整除（不包括0）的数）
3、判断一个数是不是质数（除了1和它本身以外不再有其他的除数整除。）
<>
//【注】大于3的数判断
var num = 7;
var isYes = false;//是质数
for(var i = 2;i < num; i++){
if(num % i == 0){
isYes = true;
break;
}
}
if(isYes){
alert(num + "是合数");
}else{
alert(num + "是质数");
}
</>4、国王，奖励发明国际象棋的大师，大师说，我们要麦子，国际一共有64格，第一个放一粒麦子，后面的格放前面的双倍，当棋盘被放满的时候，要这么多粮食。
<>
var sum = 0;
var num = 1;
for(var i = 0; i < 64; i++){
sum += num;
num *= 2;
}
alert(sum);
</>5、找出所有的水仙花数，三位数，各位立方和等于该数本身。
例如：153 = 1 ^ 3 + 5 ^ + 3 ^ 3
<>
/* Math.pow(x,y)：求x的y次方 */
for(var i = 100; i < 1000; i++){
var a = parseInt(i / 100);
var b = parseInt(i % 100 /10);
var c = i % 10;
var sum = Math.pow(a,3) + Math.pow(b,3) + Math.pow(c,3)
if(i == sum){
document.write(i + "是水仙花数");
document.write("<br/>");
}
}
</>6、输入两个数，求两个数的最大公约数（能够同时整除两个数的最大数）
思路：先找出两个数中最小的那个数
最大公约数，最小是1，最大只有两个数中的较小数
7、输入两个数，求两个数的最小公倍数（能够同时被两个数整除的最小数）
思路：
1、先找出两个数中的最大数
2、最大数++，直到找出能被两个数整除的数（退出循环）
最小公倍数：最大两个数的积，最小两个数中的较大数
<>
var num1 = 12;
var num2 = 6;
var min = num1 > num2 ? num2 : num1;
while(1){
//判断是否能够整除这两个数；
if(num1 % min == 0 && num2 % min ==0){
break;
}
min--;
}
alert("最大公约数为：" + min);
var num1 = 6;
var num2 = 12;
var max = num1 > num2 ? num1 : num2;
while(1){
if(max % num1 == 0 && max % num2 ==0){
break;
}
max++;
}
alert("最小公倍数为：" + max);
</>
扫一扫
1299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
