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