//欢迎加我VX进群交流
vx账号:-Sep07
文章目录
前言
这是作为前端开发学习JavaScript的基础知识部分的以一部分学习笔记,此记录为方便以后查阅,以及加深印象
一、JavaScript语言是什么
JavaScript 是一门面向对象的语言,是前端开发必须要掌握的。一个完整的JavaScript由以下三个部分构成。一、ECMAScript 二、Dom 三、Bom
JavaScript是一门解释型的语言,是由解释器(浏览器)逐行翻译并执行的。
二、使用步骤
1.JS代码的引入
JS依然分为嵌入式和链入式,一般我们我们在html文档中使用嵌入式编写JavaScript代码时需要将JavaScript代码编写在<script type="text/javascript"></script>
标签中
示例:
<script type="text/javascript">
/*
JavaScript代码
*/
</scripy>
但一般情况下JavaScript的代码都写在外部的JavaScript文件中,再通过<script>
标签引入,但如果script标签中引入了外部的JavaScript文件,则不可以在<script>
标签中在编写JavaScript代码。
三、JS的基本语法
1.JS中严格的区分大小写:
JavaScript是大小写敏感的语言
2.JS中的每条语句都以;
结尾
1.变量
变量:可以用来保存字面量,变量的命名规则和JAVA语言相同,同样变量的命名也不能是JavaScript的保留字。
定义变量: var x;
、 var a,b,c
定义变量并赋值:var x1 = true
、var y1 = 100
- 定义变量时不需要给出变量的数据类型
- JavaScript中的变量可以重复定义
- 不使用
var
也可以定义变量,但会被默认为是为window
对象添加了属性,如:
name = "a"
等价于window.name = "a"
- 如果定义的变量未被赋值,则系统会自动为其赋值
undefind
- 一般我们以
;
分号为代码的结尾,也可以不添加分化,但多条代码在同一行时必须以分号分隔开。
2.数据类型
JavaScript有五种基本数据类型和一种引用数据类型;
基本数据类型
number :数值型: 十进制/八进制/十六进制
string : 字符型: ‘ ’ / " " 单引号或双引号括起来的
boolean : 布尔型: true/flase
null:空
undefind:未定义
引用数据类型
object:对象型
var a = new Number(10)
我们通常可以使用type of
来检查数据类型,用法如下:
var a = 10;
console.log(typeof(a));
引用数据类型的用法:
var a = new Number(100);
//变量a储存了一个对象
var obj = {
age:24,
name:"zhaoxin",
};//名值对的方式声明一个对象obj
var obj1 = new Object();
obj1.name = "赵欣";
obj1.age = "24";
obj1.sex = "男";
console.log(obj.name);
console.log(obj1.sex);//控制台输出
3.算数运算符
JavaScript中的算术运算符有如下几种:
算术运算符 | 含义 |
---|---|
+ | 两个数值相加 |
- | 两个数值相减 |
* | 两个数值相乘 |
/ | 两个数值相除,如果除数为0,返回Infinity 无限(number型) |
% | 取模运算 ,取模运算时可以带小数 |
= | 赋值运算,将右边的数值赋值到左边的变量 |
4.字符串运算符
运算符 | 含义 |
---|---|
+ | 用于拼接字符串,但如果是数值 与字符串拼接,则数字 会被自动转换成字符型 |
reult = 1 + 2 + "3"
//输出结果为字符串类型的 “33”
reult = 100 - "1"
// 99
/*输出结果为数值型的 “99”。
除了+会转换为字符串,其它的运算符“-,*,/”都会转换为数值类型。
*/
var d = "123";
d = d - 0;
//可以使用该方法将字符串转化为数值。等价于 d = Number(d),
5.关系运算符
关系运算符返回的结果是true
和 false
:
运算符 | 含义 |
---|---|
> | 大于 |
< | 小于 |
>= | 大于等于 |
<= | 小于等于 |
!= | 不等于 |
!== | 不等等于 |
关系运算符使用中遵循如下的几个原则:
1、数值之间比较大小
2、汉字之间比较Unicode编码值大小
3、字符之间比较ascii
码值
4、汉字的ascii码是位数字
6.关系运算符中的== 和 ===
由于这两个比较容易混淆故分开描述:
“==” 的比较规则
先检查两个操作数的数据类型是否相同
如果相同,则比较两个数是否相等
如果不同,则先将两个数转换为相同数据类型,再进行比较
“===”的比较规则
先检查两个操作数的数据类型是否相同
若不同,直接返回false
若相同,则比较二者是否相等
7. 逻辑运算符
javascript中的逻辑运算两边的操作数,可以是任意类型的任意值
运算符 | 含义 |
---|---|
! | 与运算,只有当两边都是true时,结果才为true |
&& | 或运算,只有两边都为false时,结果才为false |
|| | 非运算,将操作数的结果取反 |
!
非运算:会对布尔值进行取反操作,!!
则为两次取反。如果对非布尔值进行取反操作则会将其先转换为布尔值,然后再取反。我们可以利用该特点把其它类型的值转换为布尔值。
&&
与运算:JavaScript中的与运算是 短路与* 。
||
或运算:符号两端为false则返回false,只要有一个为true则返回ture。
8.一元运算符
只需要一个操作符:
正号+
:对数字无影响
负号-
:取反数字,对于非Number类型的值,会先转换为Number再运算,我们也可以使用一个+
转换为数值:var a = '18'; a = +a;
9. 自增和自减
var a = 1;
a ++;
自增可以使变量在自身的基础上面加1或者减1,自增又分为前++和后++;
前++和后++都会使原变量自增1,但区别在于自身的值的不同。
前++:值等于原变量的值<自增前的值>
后++:值等于原变量的新值<自增后的值>
示例:
var a = 1;
a++;
console.log("a = "+ a);//a的值是2
console.log("a++ = "+ a++);//a++的值,等于自增前的值2
var b = 1;
++b;
console.log("b = "+ b);//b的值是2
console.log("++b = "+ ++b);//++b的值,等于自增后的值3
前--
和 后--
的规则与前++
和后++
规则一样,略。
10.三元运算符以及其它注意事项
三元运算符的语法:
<条件表达书> ?<语句1> : <语句2> ;
示例:
var max = a > b ? a : b;
//判断a是否大于b,如果成立则将a赋给变量max,否则将b赋给变量max
- 任何值和NaN做任何比较结果都是false
- 如果符号的两边都是字符串,则比较的是字符串的Unicode编码,返回的值是True/False
- 中文字符的比较没有意义
- 比较两个数字类型的字符串时一定要注意转变类型。
console.log("123" < +"5");
——> true
流程控制
1.条件判断
语法:if(条件表达式)
if(a > 10){
}
如果if后面没有加{}
来表示代码块,则只能控制if后面紧随其后的一条语句。
if(a > 10){
//执行;
}else{
//执行;
}
若条件成立执行if
若条件不成立则执行else
;
2.条件分支
语法:
switch(条件表达式){
case1 ://执行表达式1的内容
console.log("执行");
break;
case2://执行表达式1的内容
console.log("执行");
break;
}
switch语句执行时会依次将case:
后面的表达式的值和条件表达式的值进行全等比较。
比较结果为true则执行,比较结果为false则继续进行下一个case的比较。
- 使用
break
可以退出switch语句。 - 如果所有执行结果都为
false
的情况下可以更具需要使用defult
定义默认执行的语句。
3. 循环
循环执行的三要素
1、初始化表达式
2、条件表达式
3、更新表达式
while循环
循环语句会反复执行一段代码多次,语法为:
/*
while(条件表达式){
执行的语句;
}
*/
var i = 1; //初始化变量
while(i <10){ //设置循环条件
console.log(i);
i++; //定义更新表达式
}
do…while循环
与while循环的区别在于程序会首先执行一次循环体(do后面的内容),而后仔判断
for循环
for循环是编程的重点,所以掌握好for循环尤为重要
语法:
for(初始化表达式; 条件表达式; 更新表达式){
//语句;
}
for循环的执行逻辑和java相同,先初始,再判断,仔执行,再更新,再判断,在执行,再更新。直到判断为false则跳出循环。
如果for循环中不谢表达式,只写;
,此时程序会是死循环,在编程过程中我们要避免死循环的出现。
练习1:
//打印1000以内的水仙花数
for(var i = 100 ; i < 1000 ; i ++){
var bai = ParseInt(i/100);
var shi = ParseInt((i-bai * 100) / 10);
var ge = i % 10
//判断;
if(bai * bai * bai + shi * shi + shi + ge * ge * ge = i){
document.write(i + ' ');
}
}
循环的嵌套 练习2:
//打印1~100之间的所有质数
for(var i = 2; i <= 100 ; i ++){
var falg = true;
for(var j = 2 ; j < i ; j ++){
if( i % j == 0){
flag = false;
}
console.log(i);
}
}
4. 其它
break:退出switch/循环语句。
continue:如果条件成立,跳过当次循环。
1、不能在if语句中使用bresk和continue语句。
2、break和continue会like终止离他最近的循环语句。
程序性能测试方法
console.time()开启计时器;
console.timeEnd()停止计时器;
//欢迎加我VX进群交流
vx账号:-Sep07