JavaScript基础知识之基本语句与数据类型
前言
前端的三板斧，HTML、CSS和JavaScript，前面两个我之前已经学过了，今天开始学JavaScript，嗯，个人觉得还是比较简单的，如果有其他编程语言的基础的话，看文档学习很快就能掌握JavaScript，至少目前我是这样觉得的，也可能是因为我学的不是很深，有很多地方没去学习，我是想着学完JavaScript之后去学vue，所以我就学的比较浅，如果后面学vue的时候遇到看不懂的再去补吧。
JavaScript简介
JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序 的“脚本”。 JavaScript 是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多，学起来比较容易。
JavaScript与ECMAScript的关系
ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前 者的一种实现。在日常场合，这两个词是可以互换的。
JavaScript语句和标识符
语句
JavaScript程序的单位是行（line），也就是一行一行地执行，一般情况下，每一行就是一个语句。语句以分号结尾，一个分号就表示一个语句的结束。
标识符
标识符指的是用来识别各种值地合法名称。最常见的标识符就是变量名。
标识符是由字母、美元符号$、下划线和数字组成，其中数字不能开头。
中文也是合法的变量名，不会报错，但是不推荐使用中文。
变量
var num = 10;
变量的重新赋值
var num = 10;
num = 20;
变量提升
JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变 量，然后再一行一行地运行。这造成的结果，就是所有的变量的声 明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。下面举个简单的例子。
console.log(num);
var num = 20;
这段代码第一行会在控制台打印20，不会因为赋值语句在打印语句后而出现打印不出来的情况。
JavaScript嵌入到文件中
这里有三种方式来把JavaScript嵌入到文件当中去。
1.嵌入到HTML文件中
<body>
<script>
var age = 20
</script>
</body>
直接在body标签中写入script标签就可以了。
2.引入本地文件
<body>
<script type = "xxxxx " src = "xxxx">
var age = 20
</script>
</body>
3.引入网络文件
<body>
<script src = "xxxx">
var age = 20
</script>
</body>
JavaScript的注释与输出语句
//这是单行注释
/*
这是
多行
注释
*/
<!-- 在html文件中的注释 -->
//注释的快捷键ctrl+/
输出语句
// 在浏览器中弹出一个对话框,然后把要输出的内容展示出
//来,alert都是把要输出的内容首先转换为字符串然后在输出
//的
alert("要输出的内容");
//在页面上输出
document.write("要输出的内容");
// 在控制台输出内容
console.log("要输出的内容")
数据类型
JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的 数据类型，共有六种。根据类型分类可以分为基本数据类型和符合数据
var age = 20;
var s = "html";
var a = true;
var user = {
// age: 20,
// name:"zhao",
// hunyin:false,
}
以上就是几种数据类型，基本数据类型有数值，字符串和布尔类型。符合数据就是对象，内包含多个数据。
还有两种数据类型为null和undefined这两种，这两种一般看为两种特殊值。
运算符
typeof运算符
var age = 20;
var s = "html";
var a = true;
var user = {
// age: 20,
// name:"zhao",
// hunyin:false,
};
//typeof一般用来判断基本数据类型(object对象有很多)
//返回number
console.log(typeof age);
//返回string
console.log(typeof s);
//返回boolean
console.log(typeof a);
//返回object
console.log(typeof user);
//返回object
console.log(typeof []);
//返回object
console.log(typeof null);
//返回undefined
console.log(typeof undefined);
//null和undefined的区别
//null表示对象没有,undefined表示数值没有
typeof运算符是用来判断数据结构的，一般就是用来判断基本数据类型的，对于复合数据类型即对象，因为有很多都会返回object，所以一般不用这个运算符来进行判断。
算数运算符
算数运算符就是基本的加减乘除等等，非常简单，这里就一笔带过了。
var num1 = 100;
var num2 = 10;
//110
console.log(num1+num2);
//90
console.log(num1-num2);
//1000
console.log(num1*num2);
//10
console.log(num1/num2);
//自加自减
num1++;
console.log(num1);
num2--
console.log(num2);
console.log(++num1);
console.log(--num2);
需要注意的是，在使用自加自减的时候，就是放在变量之后，会 先返回变量操作前的值，再进行自增/自减操作；放在变量之前，会 先进行自增/自减操作，再返回变量操作后的值。
赋值运算符
//赋值运算
//吧20的值赋num3
var num3 = 20;
//把10的值赋给num4
var num4 = 10;
//把num4的值赋给num3
num3 = num4;
//等价于num3 = num3+num4
num3+=num4;
//等价于num3 = num3-num4
num3-=num4;
//等价于num3 = num3*num4
num3*=num4;
//等价于num3 = num3/num4
num3/=num4;
//等价于num3 = num3%num4
num3%=num4;
比较运算符
比较运算符用于比较两个值的大小，然后返回一个布尔值，表示是否满足指定的条件。
JavaScript一共提供了8个比较运算符
| 比较运算符 | 描述 |
|---|---|
| < | 小于运算符 |
| > | 大于运算符 |
| <= | 小于或等于运算符 |
| >= | 大于或等于运算符 |
| == | 相等运算符 |
| === | 严格相等运算符 |
| != | 不相等运算符 |
| !== | 严格不相等运算符 |
和=的区别
比较值而=比较值和类型
布尔运算符
取反运算符（！）
//布尔值的取反
!true//false
!false//true
//非布尔值的取反，对于非布尔值的取反，取反运算符会将其转化为布尔值，为方便记忆，下面6个值取反后为true，其他都为false
!undefined//true
!null//true
!0//true
!NaN//true
!""//true
!false//true
且运算符（&&）
当两个条件都满足时才返回true，否则返回false
console.log(2>1&&3>2);//true
或运算符（||）
当两个条件又一个满足返回true，都不满足返回false
console.log（10>20||10>5）;//true
条件语句
if语句
if结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。所谓布尔值，指的是JavaScript的两个特殊值，true表示真，false表示伪。语法规范如下。
if(布尔表达式){
语句;
}
//实例如下
var num = 2;
if(num==2){
num++;
}
console.log(num);
需要注意的是，不要混淆比较运算符与赋值运算符，括号里的内容应该是一个布尔值为结果，不要混淆=与==的作用。
if…else语句
在实际应用中，我们可能会遇到根据不同的结果来执行不同的操作，那么此时就可以使用if…else语句来实现。
//实例
var num = 4;
if(num>2){
num--;
}else{
num++;
}
//这段代码意思为当num大于2时，自减，否则自加。
//当有多个条件时，if else语句可以写多次，例如
if(num==4){
num -= 1;
}else if(num==3){
num -= 2;
}else if(...){
//
}
else{
//
}
需要注意的是，当有多个else时，else代码块总是与离自己最近的那个if语句配对。
switch语句
当多个if else连在一起使用的时候，我们可以引入switch语句。
switch (fruit) {
case "banana":
// ...如果fruit为banana，执行这个语句
break;
case "apple":
// ...如果fruit为apple，执行这个语句
break;
default:
// ..都不是，执行这个语句
}
需要注意的是，每个case代码块内部的break语句不能少，否则会 接下去执行下一个case代码块，而不是跳出switch结构。
三元运算符
三元运算符可以理解为一个if else结构，它的结构如下
(条件)？表达式1:表达式2
//这段代码意思是，当条件为true，执行表达式1，为false执行表达式2
//例子，判断奇数偶数
var n = 100;
n % 2 === 0 ? '偶数' : '奇数；
循环语句
for循环
循环语句用于重复执行某个操作，for语句就是循环命令，可以指定循环的起点，循环的终点和终止条件，格式如下。
for(初始化语句 ;条件;迭代因子){
语句
}
for语句后面的括号里面，有三个表达式。
初始化表达式（initialize）：确定循环变量的初始值，只在循环 开始时执行一次。
布尔表达式（test）：每轮循环开始时，都要执行这个条件表达 式，只有值为真，才继续进行循环。
迭代因子（increment）：每轮循环的最后一个操作，通常用来 递增循环变量
var x = 3;
for (var i = 0; i < x; i++) {
console.log(i);
}
//三个表达语句可以全部省略，这样会陷入死循环
for ( ; ; ){
console.log('Hello World');
}
while循环
while循环包括一个循环条件和执行代码块，只要循环条件为真，就会不断执行代码块中的代码。
while (条件) {
语句;
}
//例子
var i = 0;
while (i < 100) {
console.log('i 当前为：' + i);
i = i + 1;
}
break和continue
break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行。
break语句用于跳出代码块或循环
for (var i = 0; i < 5; i++) {
if (i === 3){
break;
}
console.log(i);
}
continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环
for (var i = 0; i < 5; i++) {
if (i === 3){
continue;
}
console.log(i);
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
