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对象有很多)//返回numberconsole.log(typeof age);//返回stringconsole.log(typeof s);//返回booleanconsole.log(typeof a);//返回objectconsole.log(typeof user);//返回objectconsole.log(typeof []);//返回objectconsole.log(typeof null);//返回undefinedconsole.log(typeof undefined);//null和undefined的区别//null表示对象没有,undefined表示数值没有
typeof运算符是用来判断数据结构的,一般就是用来判断基本数据类型的,对于复合数据类型即对象,因为有很多都会返回object,所以一般不用这个运算符来进行判断。
算数运算符
算数运算符就是基本的加减乘除等等,非常简单,这里就一笔带过了。
var num1 = 100;var num2 = 10;//110console.log(num1+num2);//90console.log(num1-num2);//1000console.log(num1*num2);//10console.log(num1/num2);
//自加自减num1++;console.log(num1);num2--console.log(num2);console.log(++num1);console.log(--num2);
需要注意的是,在使用自加自减的时候,就是放在变量之后,会 先返回变量操作前的值,再进行自增/自减操作;放在变量之前,会 先进行自增/自减操作,再返回变量操作后的值。
赋值运算符
//赋值运算//吧20的值赋num3var num3 = 20;//把10的值赋给num4var num4 = 10;//把num4的值赋给num3num3 = num4;//等价于num3 = num3+num4num3+=num4;//等价于num3 = num3-num4num3-=num4;//等价于num3 = num3*num4num3*=num4;//等价于num3 = num3/num4num3/=num4;//等价于num3 = num3%num4num3%=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);}