day2-JS基础&流程控制

  • day2-JS基础&流程控制已关闭评论
  • 104 次浏览
  • A+
所属分类:Web前端
摘要

typora-root-url: img
自增自减运算符
1、基本使用
内置提供 ++、–运算符 是用于将变量本身进行加1或者减1操作
// 1、基本使用
var i = 10;
i++;//等价于语句 i+=1
console.log(i);//11
var m = 10;
m–;
console.log(m)



typora-root-url: img
自增自减运算符
1、基本使用
内置提供 ++、--运算符 是用于将变量本身进行加1或者减1操作
// 1、基本使用
var i = 10;
i++;//等价于语句 i+=1
console.log(i);//11
var m = 10;
m--;
console.log(m)

2、前置与后置的区别
// 2、前置与后置的区别
// 可以将++、--运算符号 设置到变量的前面或者后面 ++i i++
// 前置与后置的区别:不管前置还是后置永远会将值进行加1或者减1操作 区别当遇到赋值或者输出语句时 ++在就先将变量本身加1 然后在参与其他的运算 ++在后 先将变量参与其他运算之后 最后加1
var j = 10;
// var res = j++;
//
var res = ++j
console.log(res,j)

3、练习题
var k = 0;
// 计算结果需要使用k++的值 加上 ++k的值 加上k的值 加上 k++的值
/*
var a = k++; a=0 k=1
var b = ++k; b=2 k=2
var c = k; c=2 k=2
var d = k++; d=2 k=3
var res2 = a + b + c + d
*/

var res2 = k++ + ++k +k +k++;
console.log(res2);

数据类型转换
强制转换
转换数值类型
1、Number
// 1、Number 语法Number(需要转换的内容)
console.log(Number("100"));//100
console.log(Number("100元"));//NaN
console.log(Number("人民币100"));//NaN
console.log(Number(true));//1
console.log(Number(false));//0
console.log(Number(undefined));//NaN
console.log(Number(null));//0
// Number在转换字符串时 只有字符串中所有的都是数字才可以转换为数字否则得到的都是NaN

2、parseInt
// 2、parseInt
console.log(parseInt("100"));//100
console.log(parseInt("100元"));//100
console.log(parseInt("人民币100"));//NaN
console.log(parseInt(true));//NaN
console.log(parseInt(false));//NaN
console.log(parseInt(undefined));//NaN
console.log(parseInt(null));//NaN
// parseInt主要是针对字符串 非字符串都是NaN 转换字符串为数字的规则 从第一个字符开始提取数字 如果是数字就保留 只要遇到一个非数字就结束,如果结束的时候没有提取到任何数字 最终结果就是NaN

3、parseFloat
// 3、parseFloat
console.log('-------------------------------------------')
console.log(parseFloat("100.00"));//100
console.log(parseFloat("100.01元"));//100
console.log(parseFloat("人民币100.1"));//NaN

转换字符串类型
// 1、toString 语法待转数据变量.toString()
var num = 10;
console.log(num.toString());
// 布尔转换字符串
console.log(true.toString())
console.log(false.toString())
// undefined
// TypeError: Cannot read properties of undefined (reading 'toString') 不能使用undefined读取toString这个属性 以后见到了类似的错误直接下结论 调用的变量值肯定是错误的
// console.log(undefined.toString());
// console.log(null.toString());
// 2、String String(待转换的数据)
console.log(String(10))
console.log(String(undefined))

转换布尔类型
// Boolean
console.log(Boolean(0))
// 在js中只有五种可以转换为布尔值的false 其他的全部都是true
// 分别是空字符串、数字0 undefined、null、NaN
console.log(Boolean(" "));//true 空字符串是只有引号 如果字符串中有空格都算内容
console.log(Boolean(""));
console.log(Boolean(undefined));
console.log(Boolean(null))
console.log(Boolean(NaN));
console.log(Boolean("0"))

隐式转换
/*
隐式转换 是借助于语言中运算符或者语句 自动将不满足的数据类型转换为需要的数据类型
例如 使用 - 表示进行减法运算
*/
var str = "1000";
// 因为减法运算需要两边都是数字 所以 自动的将str变成数字在进行计算
console.log(str - 10);
// 在自动转换的过程中原始变量不会修改
console.log(typeof str);
console.log(str);
// 例如后面的流程控制 很多需要使用布尔值 如果你给的不是布尔值 就会自动转换

流程控制
代码的执行顺序
代码执行的顺序 默认按照从上向下顺序执行
涉及到赋值语句 先执行右边 在执行左边 单独看某一个表达式 从左向右顺序执行
无法实现代码的跳跃式执行

if语句
1、语法
如果表达式为真就执行大括号中的代码块 整个if语句结束 如果第一个表达式为假 会继续检查下一个elseif中的表达式是否为真,如果所有的表达式都为假 存在else语句的情况下 就执行else中的代码块
在if语句中else if与else并非必须
if(表达式){
代码块
}else if(表达式2){
代码块
}
...
else{
代码块
}

2、使用示例
// var has = true;
// console.log('买10个包子')
// if(has){
// console.log('买一个西瓜')
// }

var has = true;
// 在所有的表达式中 最终一定要得到一个布尔值 如果给的不是布尔值系统都会自动的转换为布尔值
var num = 0;
if (has) {
console.log('买一个西瓜')
} else {
console.log('买10个包子')
}

var day = prompt('输入数字0-6表示星期几');
if (day == 0) {
console.log('摸鱼')
} else if (day == 1) {
console.log('摸鱼')
} else if (day == 2) {
console.log('发开代码')
} else if (day == 3) {
console.log('提交测试')
} else if (day == 4) {
console.log('修改bug 发布上线')
} else if (day == 5) {
console.log('加班修复线上bug')
} else {
console.log('休息睡觉')
}

switch语句
1、语法
//表达式会计算出一个值(不会自动转换为布尔值)
switch(表达式){
case 值1:
代码块
break;
case 值2:
代码块
break;
...
default:
代码
break;
}
//在使用Switch语句的时候 表达式的值与每一个case的值是进行的全等比较

2、基本使用
var day = prompt("输入星期几")
switch (day - 0) {
case 0:
console.log('摸鱼')
break;
case 1:
console.log('划水')
break;
case 2:
console.log('写代码');
break;
case 3:
console.log('提交测试');
break;
case 4:
console.log('发布上线');
break;
case 5:
console.log('加班修改bug');
break;
case 6:
console.log('休息 不可能');
break;
default:
console.log('今天星期几');
break;
}

3、穿透
day = 2;
switch (day) {
case 0:
case 1:
case 2:
case 3:
case 4:
console.log('写代码');
break;
case 5:
case 6:
console.log('休息')
break;
}

三元
1、语法
表达式1?表达式2:表达式3
三元的语法 可以用于简化if...else...语句
表达式1为真就执行表达式2否则就执行表达式3

2、使用示例
// 基本使用
var num = 20;
num == 20 ? console.log('num 等于20') : console.log('num不等于20')

if (num == 20) {
console.log('num 等于20')
} else {
console.log('num不等于20')
}
// 使用三元实现赋值功能
// 在设置个人资料的场景中性别 使用者看到的是 男 女 实际交互时使用的是1 2 这样的数字表示
var inputSex = '男'
// 根据表达式的布尔值 决定是将1这个值还是2这个值赋值给sex变量
var sex = (inputSex == '男') ? 1 : 2
console.log(sex)

循环语句
循环四要素
循环是为了重复的去实现一件事情或者一件有规律的事情
1、做什么
2、计数器初始化
3、变更计数器
4、计数器作为条件的判断 控制循环的次数

for语句
1、语法
for(计数器初始化;循环条件;计数器变更){
//循环体代码
}

2、for示例
for (var i = 1; i <= 5; i++) {
console.log('跑第一圈400m')
}

3、执行过程

1、执行步骤1进行初始化计数器功能
2、执行步骤2 判断条件是否满足
如果条件为假 整个循环结束
如果条件为真 执行步骤四,执行完毕之后在执行步骤三 再次执行步骤条件判断 根据条件判断的结果进行重复

4、断点追踪for循环的执行过程