JavaScript基础语法(2)

操作符

变量可以存储数据,我们还需要学习操作符来操作这些数据

算术运算符

//快速的说出以下的结果?
console.log(123 + 123);
console.log("123" + 123);
console.log(123 - 123);
console.log(123 - "123");
console.log(12 * "12");
console.log(12 / 12);
console.log(10 % 2);

赋值运算符

赋值运算符有: = , +=, -=, *=, /=, %=

var num = 10;
num += 1;   //num = num + 1;
num -= 1;   //num = num - 1;
num *= 2;   //num = num * 2;
num /= 2;   //num = num / 2;
num % = 2;  //num = num % 2;

一元运算符

一元运算符:只有一个操作数的运算符

二元运算符:有两个操作数的运算符,比如算术运算符、赋值运算符

自增运算符:++

  • 先自增: ++i

  • 后自增:i++

//先自增:
var num = 1;
console.log(++num); //先自增:表示先加1,后返回值

//后自增:
var num = 1;
console.log(num++);// 后自增:表示先返回值,后+1

自减运算符:--

  • 先自减:--i

  • 后自减:i--

练习:

//1. 思考思考
var num = 5;
console.log(num++);
console.log(++num);

//2. 猜猜看
var a = 1; var b = ++a + ++a; console.log(b);    
var a = 1; var b = a++ + ++a; console.log(b);    
var a = 1; var b = a++ + a++; console.log(b);    
var a = 1; var b = ++a + a++; console.log(b);  

逻辑运算符

  • &&:与运算符,表示且,只有当两个操作数都为true的时候,结果才是true

  • ||:或运算符,表示或,只要有其中一个操作数是true,结果就是true

  • !:非运算符,取反

console.log( true && true );
console.log( false && true );
console.log( true && false );
console.log( false && false );

console.log( true || true );
console.log( false || true );
console.log( true || false );
console.log( false || false );

console.log(!true);
console.log(!false);

比较运算符

比较运算符也叫关系运算符, < > >= <= == != === !==, 关系运算符的结果是布尔类型

var a = 5;
var b = 6;
console.log(a > b);//大于
console.log(a < b);//小于
console.log(a >= b);//大于等于
console.log(a <= b);//小于等于

console.log(a == b); //相等,只比较值,不比较类型
console.log(a === b); //全等,比较类型和值
console.log(a != b); // 不等, 只判断值,不判断类型
console.log(a !== b); // 不全等 判断值,且判断类型

运算符优先级

  • ()的优先级最高

  • 一元运算符(++, --, !)

  • 算术运算符(先*/%, 后+-

  • 关系运算符 (先> < >= <=, 后== === != !==)

  • 逻辑运算符(先&&||

不用死记,如果不确定的时候,使用()增加优先级

//猜猜看
var result = ((4 >= 6) || ("人" != "狗")) && !(((12 * 2) == 144) && true);
console.log(result);

//蒙一下
var num = 10;
console.log(5 == num / 2 && (2 + 2 * num).toString() === "22");

#

 

类型转换

查看变量的类型

typeof关键字可以查看数据的类型

var num = 11;
console.log(typeof num);
num = "abc";
console.log(typeof num);

小技巧:在控制台可以根据颜色来判断数据的类型哦(^__^)

 

转换成数字类型

  • Number()

console.log(Number('55'));
Number()可以把任意值转换成数值类型,但是如果字符串中有不是数字的字符,返回NaN
  • parseInt()

var num1 = parseInt("12.3abc");  // 返回12,如果第一个字符是数字会解析直到遇到非数字结束
var num2 = parseInt("abc123");   // 返回NaN,如果第一个字符不是数字或者正负符号就返回NaN
  • parseFloat()

parseFloat()把字符串转换成浮点数
parseFloat()和parseInt()非常相似,不同之处在与
 parseFloat会解析第一个. 遇到第二个.或者非数字结束
 如果解析的内容里只有整数,解析成整数
  • 算术运算

var str = '500';
console.log(+str);    // 取正
console.log(-str);    // 取负
console.log(str - 0);

NaN

NaN: not a number, 表示一个number类型的非数字

在js中,NaN用来表示一个非数字的特殊值,当发现无法进行运算时,js不会报错,而是会返回一个NaN

NaN的注意事项:

  • NaN的类型是number类型的,表示一个非数字

  • NaN不等于任何值,包括NaN本身

  • 通过isNaN()可以判断一个number类型的值, 是否是一个数字,返回false的时候,表示是一个数字。

var num = 5;
console.log(isNaN(5));

 

转换成字符串

  • toString()

var num = 5;
console.log(num.toString());// 把数值5变成字符串5
//将来所有的数据都会有toString()方法,除了null和undefined
  • String()

var num = 5;
num = String(num);
console.log(num);
  • 拼串,使用起来最方便

var num = 5;
num = num + "";
console.log(num);

 

转换成布尔类型

所有的值都可以转换成布尔类型

其中,""NaNundefinednull0false这几个值会转换成false,其他值都会转换成true

  • Boolean()

console.log(Boolean(1));
console.log(Boolean(0));
  • !!

var a = "abc";
console.log(!!a);

 

 

 

 

流程控制

程序的三种基本结构

顺序结构

从上到下执行的代码就是顺序结构

程序默认就是由上到下一行一行的顺序执行的

console.log("哈哈1");
console.log("哈哈2");
console.log("哈哈3");

分支结构

分支结构,也叫选择结构,根据不同的情况,执行对应代码

循环结构

循环结构:重复做一件事情

分支结构

if语句

  • 单独的if语句

//语法
if (条件){
 //只有当条件为 true 时执行的代码
}

var age = 8;
if(age < 12) {
 console.log("不准玩王者荣耀");
}
  • if..else语句

if (条件){
 //当条件为 true 时执行的代码
} else {
 //当条件不为 true 时执行的代码
}

var age = 8;
if(age < 12) {
 console.log("不准玩王者荣耀");
}else {
 console.log("可以玩王者荣耀");
}
  • if..else if..else语句

if (条件 1){
 //当条件 1 为 true 时执行的代码
} else if (条件 2) {
 //当条件 2 为 true 时执行的代码
} else {
 //当条件 1 和 条件 2 都不为 true 时执行的代码
}

var age = 8;
if(age < 12) {
 console.log("不准玩王者荣耀");
}else if(age < 18){
 console.log("可以玩王者荣耀2个小时");
}else {
 console.log("可以玩王者荣耀一天");
}

案例:

1. 判断一个数是偶数还是奇数
2. 判断年龄大于16,并且是个男孩,就可以开始撩妹了
3. 如果你有钱 或者 你很帅 ,就可以很快找到女朋友
3. 素质教育,把百分制分数转换成ABCDE  
A: 90-100
B: 80-89
C: 70-79
D: 60-69
E: 0-59

三元运算符

用法1:
var 结果 = 判断条件 ? 值1 值2
如果判断条件为true, 结果就是值1, 如果为false, 结果就是 值2

案例:

//思考1:求两个数的最小值
//思考2:判断成年还是未成年
//思考3:求三个数的最小值

switch语句

if..else适用于范围的判断,switch..case适用于具体的值的判断

语法格式:

switch (变量) {
 case 值1:
   语句1;
   break;
 case 值2:
   语句2;
   break;
 case 值3:
   语句3;
   break;
 
 default:
   默认语句;
   break;
}

注意:

break可以省略,如果省略,代码会继续执行下一个case
switch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换(例如,字符串'10' 不等于数值 10)

案例:

输入一个数字,显示星期几
素质教育(把分数变成ABCDE)千万不要写100个case哟
//测试题:
var num = "10";
switch (num) {
   case 10:
       console.log("10");
   case 20:
       console.log("20");
   case 30:
       console.log("30");
   default:
       console.log("lalala");
}

使用场景

  1. 如果是范围性的判断,使用if..else会更加方便

  2. 如果是对具体值的判断,使用switch..case语句会更加方便,当然用if..else也是可以的。

  3. 如果if..else比较简单,可以使用三元运算符进行替代。

//练习1:土豪的儿子, 输入ABCDE
//如果考了A: 买玛莎拉蒂
//如果考了B: 买宝马
//如果考了C: 买三轮
//如果考了D: 买摩拜自行车
//如果考了E: 断绝父子关系
//如果是其他值,提示代码有bug

//练习2: 买手机,输入自己的工资
  //如果超过30000: 买苹果手机
  //如果10000-30000: 买vivo手机
  //如果5000-10000 : 买魅族手机
  //如果低于5000   : 还买个锤子

//练习3: 输入自己的银行卡金额
//如果超过1000W : 高富帅
   //如果不超过     :穷矮丑

 

循环语句

在javascript中,循环语句有三种,while、do..while、for循环。

while循环

基本语法:

//当循环条件为true时,执行循环体,
//当循环条件为false时,结束循环。
while(循环条件){
 //循环体:需要循环执行的语句
}

代码示例:

//计算1-100之间所有数的和
//1. 初始化变量
var i = 1;
var sum = 0;
while(i <= 100){//判断条件
 sum += i;//循环体
 i++;//自增,修改循环条件(不能省略)
}
console.log(sum);

练习:

//1. 计算所有偶数的和
//2. 循环表白案例
//3. 循环登录案例,只有当用户输入admin的时候才能登录成功,否则一直弹框

do..while循环

do..while循环和while循环非常像,二者经常可以相互替代,但是do..while的特点是不管条件成不成立,都会执行一次。

基础语法:

do{
 //循环体;
}while(循环条件);

代码示例:

//初始化变量
var i = 1;
var sum = 0;
do{
 sum += i;//循环体
 i++;//自增
}while(i <= 100);//循环条件

思考:

// 1. 计算所有偶数的和
// 2. 循环输入账号密码的案例用do..while怎么写?
// 3. 循环表白的案例用do..while怎么写?

思考:

// while循环与do..while循环的区别是啥?

断点调试

断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。

调试步骤:

浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点

调试中的相关操作:

Watch:监视,通过watch可以监视变量的值的变化,非常的常用。
F10:程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化。
F8:跳到下一个断点处,如果后面没有断点了,则程序执行结束。

苦口婆心一下:

<font color="red">

  1. 代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试,知识点花点功夫肯定学的会,但是代码调试这个东西,自己不去练,永远都学不会。

  2. 今天学的代码调试非常的简单,只要求同学们记住代码调试的这几个按钮的作用即可,后面还会学到很多的代码调试技巧。

</font>

for循环(重点)

写while循环的经常会忘记自增,for循环其实是while循环演化过来的,语法更加的简洁明了,使用非常的广泛。

for循环语法:

//1. for循环使用分号分隔
//2. for循环有2个分号,两个分号不能少
for(初始化语句;判断语句;自增语句){
 //循环体
}

执行顺序:1243 ---- 243 -----243(直到循环条件变成false)

  1. 初始化语句

  2. 判断语句

  3. 自增或者自减

  4. 循环体

for循环代码示例:

//计算1-100之间所有数的和
var sum = 0;
for(var i = 1; i <= 100; i++){
 sum += i;
}

思考1:

//1 求1-100之间所有数的和、平均值
//2 求1-100之间所有数的乘积
//3 计算1-100之间能3整除的数的和

思考2:

//1 计算1-100之间不能被7整除的数的和
//2 求1-100之间所有偶数的和
//3 同时求1-100之间所有偶数和奇数的和

思考3(双重for循环):

//1 打印正方形
//2 打印直角三角形
//3 打印9*9乘法表

break和continue

break:立即跳出整个循环,即循环结束,开始执行循环后面的内容(直接跳到大括号)

continue:立即跳出当前循环,继续下一次循环(跳到i++的地方)

思考:

//1. 找到1-100之间第一个能被7整除的数
//2. 打印1-10之间所有的数,除了5这个数

思考1:

//输出结果是什么?
for(var i = 1; i <=10; i++) {
 if(i == 5){
   continue;
}
 if(i == 7){
   break;
}
 console.log(i);
}

思考2:

//1. 求1-100之间不能被7整除的整数的和(用continue)
//2. 求200-300之间所有的奇数的和(用continue)
//3. 求200-300之间第一个能被7整数的数(break)

总结

  1. 循环有很多种,但是以后用得最多的是for循环

  2. 当不明确循环次数的时候,可以使用while循环

  3. 当无论如何都要执行一次代码的时候,可以使用do..while循环。

  4. 循环可以相互替代。

  5.  

懦夫从未启程,弱者死在途中
原文地址:https://www.cnblogs.com/oliviazhang/p/13568012.html