JavaScript基础知识之基本语句与数据类型

前言

前端的三板斧，HTML、CSS和JavaScript，前面两个我之前已经学过了，今天开始学JavaScript，嗯，个人觉得还是比较简单的，如果有其他编程语言的基础的话，看文档学习很快就能掌握JavaScript，至少目前我是这样觉得的，也可能是因为我学的不是很深，有很多地方没去学习，我是想着学完JavaScript之后去学vue，所以我就学的比较浅，如果后面学vue的时候遇到看不懂的再去补吧。

JavaScript简介

JavaScript 是一种轻量级的脚本语言。所谓"脚本语言"，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的"脚本"。 JavaScript 是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多，学起来比较容易。

JavaScript与ECMAScript的关系

ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。

JavaScript语句和标识符

语句

JavaScript程序的单位是行（line），也就是一行一行地执行，一般情况下，每一行就是一个语句。语句以分号结尾，一个分号就表示一个语句的结束。

标识符

标识符指的是用来识别各种值地合法名称。最常见的标识符就是变量名。

标识符是由字母、美元符号$、下划线和数字组成，其中数字不能开头。

中文也是合法的变量名，不会报错，但是不推荐使用中文。

变量

javascript 复制代码

var num = 10;

变量的重新赋值

javascript 复制代码

var num = 10;
num = 20;

变量提升

JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。下面举个简单的例子。

javascript 复制代码

console.log(num);
var num = 20;

这段代码第一行会在控制台打印20，不会因为赋值语句在打印语句后而出现打印不出来的情况。

JavaScript嵌入到文件中

这里有三种方式来把JavaScript嵌入到文件当中去。

1.嵌入到HTML文件中

javascript 复制代码

 <body>
 	<script>
 		var age = 20
 	</script>
 </body>

直接在body标签中写入script标签就可以了。

2.引入本地文件

javascript 复制代码

 <body>
 	<script type = "xxxxx " src = "xxxx">
 		var age = 20
 	</script>
 </body>

3.引入网络文件

js 复制代码

<body>
 	<script src = "xxxx">
 		var age = 20
 	</script>
 </body>

JavaScript的注释与输出语句

javascript 复制代码

//这是单行注释
/*
这是
多行
注释
*/
<!-- 在html文件中的注释 -->
//注释的快捷键ctrl+/

输出语句

js 复制代码

// 在浏览器中弹出一个对话框,然后把要输出的内容展示出
//来,alert都是把要输出的内容首先转换为字符串然后在输出
//的
alert("要输出的内容");
//在页面上输出
 document.write("要输出的内容"); 
// 在控制台输出内容
console.log("要输出的内容")

数据类型

JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种。根据类型分类可以分为基本数据类型和符合数据

js 复制代码

var age = 20;
        var s = "html";
        var a = true;
        var user = {
            // age: 20,
            // name:"zhao",
            // hunyin:false,
        }

以上就是几种数据类型，基本数据类型有数值，字符串和布尔类型。符合数据就是对象，内包含多个数据。

还有两种数据类型为null和undefined这两种，这两种一般看为两种特殊值。

运算符

typeof运算符

js 复制代码

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，所以一般不用这个运算符来进行判断。

算数运算符

算数运算符就是基本的加减乘除等等，非常简单，这里就一笔带过了。

js 复制代码

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

需要注意的是，在使用自加自减的时候，就是放在变量之后，会先返回变量操作前的值，再进行自增/自减操作；放在变量之前，会先进行自增/自减操作，再返回变量操作后的值。

赋值运算符

js 复制代码

//赋值运算
        //吧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个比较运算符

比较运算符	描述
<	小于运算符
>	大于运算符
<=	小于或等于运算符
>=	大于或等于运算符
==	相等运算符
===	严格相等运算符
!=	不相等运算符
!==	严格不相等运算符

和=的区别

比较值而=比较值和类型

布尔运算符

取反运算符（！）

js 复制代码

//布尔值的取反
!true//false
!false//true
//非布尔值的取反，对于非布尔值的取反，取反运算符会将其转化为布尔值，为方便记忆，下面6个值取反后为true，其他都为false
!undefined//true
!null//true
!0//true
!NaN//true
!""//true
!false//true

且运算符（&&）

当两个条件都满足时才返回true，否则返回false

js 复制代码

console.log(2>1&&3>2);//true

或运算符（||）

当两个条件又一个满足返回true，都不满足返回false

js 复制代码

console.log（10>20||10>5）;//true

条件语句

if语句

if结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。所谓布尔值，指的是JavaScript的两个特殊值，true表示真，false表示伪。语法规范如下。

javascript 复制代码

if(布尔表达式){
    语句;
}
//实例如下
var num = 2;
if(num==2){
    num++;
}
console.log(num);

需要注意的是，不要混淆比较运算符与赋值运算符，括号里的内容应该是一个布尔值为结果，不要混淆=与==的作用。

if...else语句

在实际应用中，我们可能会遇到根据不同的结果来执行不同的操作，那么此时就可以使用if...else语句来实现。

js 复制代码

//实例
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语句。

js 复制代码

switch (fruit) {
 case "banana":
 // ...如果fruit为banana，执行这个语句
 break;
 case "apple":
 // ...如果fruit为apple，执行这个语句
 break;
 default:
 // ..都不是，执行这个语句
}

需要注意的是，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构。

三元运算符

三元运算符可以理解为一个if else结构，它的结构如下

js 复制代码

(条件)？表达式1:表达式2
//这段代码意思是，当条件为true，执行表达式1，为false执行表达式2
//例子，判断奇数偶数
var n = 100;
 n % 2 === 0 ? '偶数' : '奇数；

循环语句

for循环

循环语句用于重复执行某个操作，for语句就是循环命令，可以指定循环的起点，循环的终点和终止条件，格式如下。

javascript 复制代码

for(初始化语句 ;条件;迭代因子){
语句
}

for语句后面的括号里面，有三个表达式。

初始化表达式（initialize）：确定循环变量的初始值，只在循环开始时执行一次。

布尔表达式（test）：每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续进行循环。

迭代因子（increment）：每轮循环的最后一个操作，通常用来递增循环变量

js 复制代码

var x = 3;
 for (var i = 0; i < x; i++) {
  console.log(i);
 }
//三个表达语句可以全部省略，这样会陷入死循环
 for ( ; ; ){
  console.log('Hello World');
 }

while循环

while循环包括一个循环条件和执行代码块，只要循环条件为真，就会不断执行代码块中的代码。

js 复制代码

 while (条件) {
语句;
 }
//例子
 var i = 0;
 while (i < 100) {
 console.log('i 当前为：' + i);
 i = i + 1;
 }

break和continue

break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行。

break语句用于跳出代码块或循环

js 复制代码

 for (var i = 0; i < 5; i++) {
 if (i === 3){
	 break;
    }
 	console.log(i);
 }

continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环

js 复制代码

for (var i = 0; i < 5; i++) {
    if (i === 3){
        continue;
    }
    console.log(i);
 }