系列文章目录
JavaScript入门基础语法
前言
作为前端三剑客的JavaScript，可以说是必须要掌握的，因为有了JavaScript，才使静态的页面产生了一些动态的效果。本文整理了个人学习中一些Javascript基础知识，后续更新~~~
一、什么是JavaScript？
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
二、基础语法
1.输出
代码如下（示例）：
// js执行顺序是从上往下执行
<script>
//这是警告框输出
alert("这是一个警告框");
// body中输出
document.write("body中输出内容");
//控制台输出
console.log("控制台输出内容");
</script>
2.注释
代码如下（示例）：
<script>
// 这是单行注释
/*这是多行
注释*/
/*
1.js严格区分大小写
2.js的每条语句以英文分号(;)结尾
3.js忽略多个空格和换行，可以利用它格式化代码
*/
</script>
3.字面量和变量
代码如下（示例）：
<script>
/*
字面量: 字面量是一些不可改变的值.
比如：1、2、3、4、5...
字面量都是可以直接使用的，但是一般不直接使用
*/
//字面量的输出
document.write(123 + 456);
document.write("<br>");
/*
变量： 变量可以用来保存字面量，而且变量的值是可以任意改变的
变量更加方便使用，所以开发中都是通过变量来保存字面量的
*/
/*
变量必须先声明再使用
在js中使用关键字var来声明一个变量
*/
//声明变量
var a;
//给变量赋值
a = 520;
//输出变量
document.write(a);
document.write("<br>");
//声明并赋值
var b = 20;
document.write(b);
</script>
4.字面量和变量
代码如下（示例）：
<script>
/*
1.标识符可以含有字母,数字,下划线(_),美元符($).
2.标识符不能以数字开头
3.标识符不能用js中的关键字和保留字.
4.命名要见名知意，以驼峰命名法命名
(小驼峰)首字母小写,后面的每个单词开头大写，其余字母小写
例：helloWorld
(大驼峰)每个单词首字母大写其余字母小写
例：HelloWorld
js底层用unicode编码保存标识符,用中文命名也不会报错
强烈建议不要用中文
*/
//这样也不会报错，但是强烈建议千万不要这样命名
var 哈喽 = 10;
document.write(哈喽);
document.write("<br>");
//见名知意的命名
var age = 18;
document.write(age);
document.write("<br>");
</script>
5.数据类型
数据类型指的就是字面量的类型， js中一共有六种数据类型
| 数据类型 | 备注 |
|---|---|
| String | 字符串 |
| Number | 数值 |
| Boolean | 布尔值 |
| Null | 空值 |
| Undefined | 未定义 |
| Object | 对象 |
前5种是基本数据类型，最后一种是引用数据类型
代码如下（示例）：
<script>
// 字符串
var str = "hello";
var Str = 'HELLO';
document.write(str);
document.write(Str);
document.write("<br>");
// 数值
var age = 520;
document.write(age);
document.write("<br>");
// 布尔值
var bool = true;
document.write(bool);
document.write("<br>");
// 空值
var a = null;
document.write(a);
document.write("<br>");
// 未定义
var b;
document.write(b);
document.write("<br>");
//typeof检查数据类型
document.write(typeof(str));
</script>
6.强制类型转换
强制类型转换是指将一个数据类型强制转换成其他数据类型
1.其他类型转换成String
1.调用被转换类型的toString()方法.
toString()方法不影响原变量,它会将结果返回.
null和undefined这两个类型没有toString()方法
2.调用String()函数,并用被转换的数据作为参数传递给函数
使用string()函数做强制类型转换时
对于Number,Boolean实际上就是调用toString()方法
但对于Null,Undefined,就不会调用toString()方法
它会将Null直接转换成"null",Undefined直接转换成"undefined"
代码如下（示例）：
<script>
/** 1.调用toString()方法
* toString()方法不影响原变量,它会将结果返回.
* null和undefined这两个类型没有toString()方法
*/
var age = 123;
//强制转换成String类型
age = age.toString();
document.write(age);
document.write("<br>");
//已变为String类型
document.write(typeof(age));
document.write("<br>");
/* 2.调用string()函数
* 使用string()函数做强制类型转换时
* 对于Number,Boolean实际上就是调用toString()方法
* 但对于Null,Undefined,就不会调用toString()方法
* 它会将Null直接转换成"null",Undefined直接转换成"undefined"
*/
var score = 456;
//强制转换成String类型
score = String(score);
document.write(score);
document.write("<br>");
//已变为String类型
document.write(typeof(score));
document.write("<br>");
</script>
2.其他类型转换成Number
1.调用Nmuber()函数
字符串–>数值
1.纯数字字符串，直接转成数字.
2.非数字字符串,转成NaN(Not a Number，非数).
3.空字符串,转成数字0.
布尔值->数值
true->1
false->0
Null->数值
null->0
Undefined->数值
undefined->
NaN
2.这种方法专门对付字符串
parseInt():字符串中有效整数取出来转换成Number.
parseFloat():字符串中有效小数取出来转换成Number.
代码如下（示例）：
<script>
var str = "12346";
//强制转换成String类型
str = Number(str);
document.write(str);
document.write("<br>");
//已变为Number类型
document.write(typeof str);
document.write("<br>");
var Str = "score";
Str = Number(Str);
document.write(Str);
document.write("<br>");
//已变为Number类型
document.write(typeof Str);
document.write("<br>");
var bool = true;
bool = Number(bool);
document.write(bool);
document.write("<br>");
document.write(typeof bool);
document.write("<br>");
var bool2 = false;
bool2 = Number(bool2);
document.write(bool2);
document.write("<br>");
document.write(typeof bool2);
document.write("<br>");
var null1 = null;
null1 = Number(null1);
document.write(null1);
document.write("<br>");
document.write(typeof null1);
document.write("<br>");
var und;
und = Number(und);
document.write(und);
document.write("<br>");
document.write(typeof und);
document.write("<br>");
var str2 = "123h12";
str2 = parseInt(str2);
document.write(str2);
document.write("<br>");
document.write(typeof str2);
document.write("<br>");
var str3 = "12.6f.df313.123";
str3 = parseFloat(str3);
document.write(str3);
document.write("<br>");
document.write(typeof str3);
</script>
3.其他类型转换成Boolean
调用Boolean()函数转换
数字->布尔：除了0和
NaN都是true.
字符串->布尔：除了空串，其余都是true.
Null->布尔：Null转Boolean是false.
Undefined->布尔：Undefined转Boolean是false.
Object->布尔：Object转Boolean是true.
代码如下（示例）：
<script>
//字符串转布尔
var str = "hello";
str = Boolean(str);
document.write(str);
document.write("<br>");
document.write(typeof str);
document.write("<br>");
//数值转布尔
var num = 52;
num = Boolean(num);
document.write(num);
document.write("<br>");
document.write(typeof num);
document.write("<br>");
</script>
7.算术运算符
| 运算符 | 符号 | 语法 |
|---|---|---|
| 加 | + | a+1 |
| 减 | - | a-2 |
| 乘 | * | a*3 |
| 除 | / | a/4 |
| 取余 | % | a%5 |
字符串相加就是拼串：“123” + “456”–>“123456”
任何类型+空串可以转换成string类型(可通过此方法类型转换string)
其他类型可以通过-0(减0)，*1(乘以1)，/1(除以1) 将其转换成Number类型
8.逻辑运算符
| 逻辑运算符 | 符号 | 语法 |
|---|---|---|
| 与 | && | a&&b |
| 或 | || | a||b |
| 非 | ! | !a |
与运算：&&也称短路与。两个值都是true，则返回true
只要有一个值是false，就会返回false。
短路与，第一个值为false，则不会检查第二个值。
代码如下（示例）：
<script>
var a=1&&2;
var b=false&&true;
document.write(a);
document.write("<br>");
document.write(b);
</script>
或运算：|| 也称短路或，只要有一个值是true，则返回true.
两个值都是false，则返回false.
短路或，第一个值为true，则不会检查第二个值.
代码如下（示例）：
<script>
var a=1||2;
var b=true||false;
document.write(a);
document.write("<br>");
document.write(b);
</script>
非运算：对一个布尔值进行取反运算
对于非布尔值，则先将它转成布尔值再取反
任何非布尔值两次非运算将其转成布尔值(可以做类型转换的方法)
代码如下（示例）：
<script>
var bool=!false;
document.write(bool);
document.write("<br>");
var str=!"123";
document.write(str);
document.write("<br>");
document.write(typeof str);
document.write("<br>");
</script>
9.赋值运算符
| 符号 | 语法 | 原式 |
|---|---|---|
| += | a+=1 | a=a+1 |
| -= | a-=2 | a=a-2 |
| *= | a*=3 | a=a*3 |
| /= | a/=4 | a=a/4 |
| %= | a%=5 | a=a%5 |
10.关系运算符
| 符号 | 备注 | 语法 |
|---|---|---|
| > | 大于 | a>b |
| >= | 大于等于 | a>=b |
| < | 小于 | a<b |
| <= | 小于等于 | a<=b |
非数值比较时，会先将其转成数值型再比较
任何值和NaN比较都是false
如果两边都是字符串,比较的是unicode编码(一个字符一个字符的去比较)
11.自增和自减
| a++ | ++a |
|---|---|
| a- - | - -a |
后++(a++)，前++(++a)，立即使原变量自增1.
a++的值等于原变量的值(自增前的值)
++a的值等于新值(自增后的值)
代码如下（示例）：
<script>
var a = 20;
var result = a++ + ++a+a;
document.write(result);
/**第一个a++等于原值20
* 第二个++a等于新值22
* 第三个a 等于新值22
* 所以结果为：20+22+22=64
* /
</script>
后–(a–),前–(–a)，立即使原变量自减1.
a–的值等于原变量的值(自增前的值).
–a的值等于新值(自增后的值).
代码如下（示例）：
<script>
var a = 64;
var result = a-- - --a-a;
document.write(result);
/**第一个a--等于原值64
* 第二个--a等于新值62
* 第三个a 等于新值62
* 所以结果为：64-62-62=-60
*/
</script>
12.相等运算符
| 符号 | 语法 |
|---|---|
| == | a==b |
两个值的类型不同时，会自动类型转换
undefined和null相等时，返回true(undefined==null ,返回true)
NaN和任何值不相等，包括它本身(NaN==NaN,返回false)
通过isNaN()函数判断是否为NaN
13.不相运算符
| 符号 | 语法 |
|---|---|
| != | a!=b |
两个值的类型不同会制动类型转换
14.全等运算符
| 符号 | 语法 |
|---|---|
| === | a===b |
两个值的类型不同，则返回false
undefined和unll不全等
15.不全等运算符
| 符号 | 语法 |
|---|---|
| ！== | a!==b |
16.条件运算符(可嵌套使用)
语法：
条件表达式?语句1：语句2；
条件表达式为true，执行语句1
条件表达式为false，执行语句2
代码如下（示例）：
<script>
var a=9;
a = a>10?a-5:a+10;
//a的结果为19
document.write(a);
</script>
17.运算符的优先级
优先级越高，先计算
优先级相同，从左往右算
如果不确定优先级可以给需要优先计算的套括号
18.代码块
我们的程序是由一条一条语句构成的，语句是按照从上往下的顺序一条一条的执行。在js中可以使用{ }来为语句进行分组，同一个{ }中的语句我们称为一组语句，它们要么都执行，要么都不执行。一个{ }中的语句我们也称为代码块，代码块只有分组的作用，没有其他用途。
代码如下（示例）：
<script>
//这是一个代码块
{
// js执行顺序是从上往下执行
alert("这是一个警告框");
document.write("body中输出内容");
console.log("控制台输出内容");
confirm("请选择确认or取消");
prompt("提示框");
}
</script>
19.条件判断语句
语法：
1.if(条件表达式){
语句；
}
2.if(条件表达式){
语句1;
}else{
语句2;
}
3.if(条件表达式){
语句1;
}else if{
语句2;
}else if{
语句3;
}else{
语句4;
}
只有一个代码块被执行
20.条件分支语句
switch(条件表达式){
case 表达式：语句…break;
case 表达式：语句…break;
…
default：语句…break;
}
代码如下（示例）：
<script>
var score = 60;
switch(score/10){
case 10:
case 9:
case 8:
case 7:
case 6: document.write("及格");break;
//所有的case都不满足，执行default
default:document.write("不及格");break;
}
</script>
21.循环结构
1.while循环：
while(条件表达式){
循环体；
}
while语句在执行时，先对条件表达式进行求值判断。如果值为true，则执行循环体。循环体执行完毕后，继续对表达式进行判断，如果值为true，继续执行循环体，以此类推。直到表达式判断值为false终止循环
break可跳出循环
代码如下（示例）：
<script>
var score = 1,sum = 0;
while(score<=100){
sum+=score;
score++;
}
document.write(sum);
</script>
2.do…while:
do{
循环体；
}while(条件表达式)
do…while与while的区别在于，前者无论如何都要执行一次循环体的语句再进行条件表达式的判断，而后者是先判断表达式，如果不满足条件一次都不执行。
代码如下（示例）：
<script>
var score = 1,sum = 0;
do{
sum+=score;
score++;
}while(score<=100)
document.write(sum);
</script>
2.for循环语句:
for(①初始化表达式;②条件表达式;③更新表达式){
循环体；
}
for循环语句执行流程：
①初始化变量
②执行条件表达式，判断是否执行循环体
如果为true，则执行③
如果为false，终止循环
③执行更新表达式，完毕继续执行②
<script>
for(var i=1,sum=0;i<=100;i++){
sum+=i;
}
document.write(sum);
</script>
3.for循环–九九乘法表
代码如下（示例）：
<script>
for(var i=1;i<=9;i++){
for(var j=1;j<i+1;j++){
document.write("   "+j +"*"+ i +"="+i*j);
}
document.write("<br>");
}
</script>
3.for循环–水仙花数
代码如下（示例）：
<script>
//水仙花数：一个三位数，每位上的数字的3次幂之和等于它本身
for(var i = 100;i<1000;i++){
//依次求出各个位上的数
ge = parseInt(i%10);
shi = parseInt((i/10)%10);
bai = parseInt(i/100);
//进行判断
if((ge*ge*ge)+(shi*shi*shi)+(bai*bai*bai)==i){
document.write(i);
document.write("<br>");
}
}
</script>
总结
以上就是今天讲的内容，本文仅仅简单介绍了JavaScript的基础语法，后续将后面的进阶分享给大家~
扫一扫
1020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
