值类型之间的相互转化,运算符,if条件判断,循环,函数

值类型之间的相互转化

number | string | boolean    
一.转换为boolean=>Boolean(a);
var num = 10;
var s = '123';
var b1 = Boolean(num);
var b2 = Boolean(s);
console.log(b1,b2); //true true
var num1 = 0;
var s1 = "";
var b3 = Boolean(num1);
var b4 = Boolean(s1);
console.log(b3,b4); //false false
// 后期我们会在if分支结构中的判断以及循环中的判断中使用boolean类型,
// 以上两种情况下, 系统都会把非boolean的数据自动转换为boolean
// 0 | "" | null | undefined | NaN => false, 其他都会转化为true

二.转换为数字类型 Number(a) | parseInt(a) | parseFloat(a) | +
①Number(a)
console.log(Number(false), Number(true), true + true);
//0 1 2

var s1 = "123";
var s2 = "3.14";
var s3 = "123abc";
var s4 = "3.14.15";
var s5 = "abc123";
console.log(Number(s1), Number(s2), Number(s3), Number(s4), Number(s5));
// 123 3.14 NaN NaN NaN

②parseInt(a) parseFloat(a)
var s1 = '3.14.15';
var n1 = parseInt(s1);
var n2 = parseFloat(s1);
console.log(n1,n2); //3 3.14

③ +
//常用转化的字符串一定是一个合法的数字字符串形式(s1, s2)
var s1 = '123';
var s2 = '3.14';
var n1 = +s1;
var n2 = +s2;
console.log(n1,n2); //123 3.14

非数字：NaN  // 当一个其他类型转化为数字类型的产物
// 任何判断一个结果是否是NaN => isNaN(运算)
var s = 'abc';
var n = +s;
console.log(isNaN(n)); //true

三.转换为字符串类型 String(a) | .toString() | "" + 
var n1 = 123;
var s1 = String(n1);
var s2 = n1.toString();
var s3 = "" + n1;
console.log(s1,s2,s3); //'123' '123' '123'
var s4 = 123..toString();
// ..语法第一个.小数点,第二个.方法的调用

// 弱语言类型
//优点考虑字符串类型
console.log(3 + "5");  // "35"
console.log(3 - "5");  // -2

// 总结:
// 1.最快转化为数字类型 +"123" | +true
// 2.最快转化为字符串形式 "" + 123 | "" + true

运算符

/*
算数运算符：+ - * / % ++ --
赋值运算符：+= -= *= /= %=
比较运算符：> < >= <= == === != !==
逻辑运算符：&& || ！
三目运算符：结果 = 条件表达式 ? 结果1 : 结果2;
*/

一.算数运算符
// js中不区分整形和浮点型, 结果为什么就是什么
var res = 5 / 2;  // 2.5

// 任何正整数对n取余 结果为: [0, n-1]

// num++ | ++num => num = num + 1;  => 自增1
// ++在后先赋值再自增 | ++在前先自增再赋值
var num = 10;
var r1 = ++num;
console.log(r1);  // ++num => r1=11 | num++ => r1=10
console.log(num);  // 11

二.赋值运算符
x += 10; // => x = x + 10

三.比较运算符
var x = 123;
var y = '123';
console.log(x == y); // 只做值比较 => true
console.log(x === y); // 全等: 值与类型都必须相等 => false


四.逻辑运算符
// 逻辑与: 条件1 && 条件2 => 全为真则真,否则为假
// 逻辑或: 条件1 || 条件2 => 全为假则假,否则为真
// 逻辑非: 非真即假,非假即真

// 逻辑与的短路效果, 条件1为假, 条件2就不会被执行
var a = 10;
var b = 20;
var c = '10';
var res = a === c && b++;
console.log(res,b) //false 20

var res = a == c && b++;//res结果即b的结果,b++先赋值后自增
console.log(res,b) //20,21

// 逻辑或的短路效果, 条件1为真, 条件2就不会被执行
var res = a == c || b++;
console.log(res,b) //true 20

var res = a === c || ++b; //res结果即b的结果,++b先自增后赋值
console.log(res,b) //21 21


五.三目运算符
// 三目运算符：结果 = 条件表达式 ? 结果1 : 结果2;
// 条件满足, 执行:前的结果1, 否则执行:后的结果2
var x = 10;
var y = '10';
var res = x == y ? 'x与y的值相等':'x与y的值不等';
console.log(res) //x与y的值相等

if条件判断

// 三种弹出框
// alert(123);  // 普通弹出框
// var res = prompt("请输入:"); // 输入框, 得到输入的字符串内容
// var res = confirm("请选择"); // 确认框, 得到true | false

// +做类型转换
var salary = +prompt("请输入工资:");
if (salary > 88888) {
    console.log("开始还账!");
    salary -= 50000;

    console.log("开始购物 30000!");
    salary -= 30000;  // 最少剩8888

    if (salary > 10000) {
        console.log("旅游!");
    } else if (salary > 9000) {
        console.log("花200学习!");
        salary -= 200;
    } else {
        console.log("吃土!")
    }

} else {
    console.log("要求提薪");
}
// if可以省略else if, 也可以省略else
// if可以嵌套
// if(条件){ 逻辑体 } else if(条件){ 逻辑体 } else{ 逻辑体 }

循环

// 循环比较
// 1.for: 解决已知循环次数的
// 2.while: 可以解决所有for循环可以解决的问题,也可以解决不知道循环次数但知道结束条件
// 3.do...while: 无论条件是否满足,循环体都会被执行一次
一.for循环
for (循环变量①; 条件表达式②; 循环变量增量③) {
    代码块④;
}
eg:
for(var i = 0; i < 5; i++){
    console.log('打气!')
}
//① ②④③ ... ②④③ ②

二.while循环
while (条件表达式) {
    代码块;
}
eg:
var j = 0;
while(j < 5){
    console.log('打气');
    j++;
}

三.do..while 循环
do {
    代码块;
} while (条件表达式);
eg:
var k = 0;
do{
    console.log('打气!');
    k++;
}while(k < 5);

// break：结束本层循环
var x = 0;
while(x < 5){   //打印0,1,2
    if (x > 2) {
        break;
    }
    console.log(x);
    x++;
}
// continue：结束本次循环进入下一次循环
var x = 0;
while(x < 5){   //打印0,1,3,4
    if (x == 2){
        x++;
        continue;
    } 
    console.log(x);
    x++;
}

函数

// js函数的重点: 如何给事件提供功能

// 1.函数的定义
// function 函数名(形参列表) {
//      函数体;
// }

// 2.函数的调用
// var res = 函数名(实参列表);
    eg:
    //fn1();
    function fn1() {
        console.log('函数fn1')
    }
    fn1(); //定义前后都可以调用

// 3.函数的参数
// i.个数不需要统一
    function fn1(a,b) {
        console.log(a,b)
    }
    fn1(1,2); //1 2
    fn1(1); //1 undefined
    fn1(1,2,3); //1 2

    fn2("abc");
    function fn2() {  // 不需要参数就不接收, 需要就接收
        console.log("自己玩")
    }
// ii.可以任意位置具有默认值
    function fn3(a,b=1,c,d=2) {
        console.log(a,b,c,d);
    }
    fn3(); //undefined 1 undefined 2
    fn3(6); //6 1 undefined 2
    fn3(6,8); //6 8 undefined 2
    fn3(6,null,8); //6 null 8 2 
// iii.通过...语法接收多个值
    function fn4(...arr) {
        console.log(arr)
    }
    fn4(); //[]
    fn4(1); //[1]
    fn4(1,2,3,4); //[1,2,3,4]

// 4.返回值讲解
// i.可以空return操作，用来结束函数
    function fn5(a) {
        if (a == 10){
            return;
        }
        console.log('参数不为10')
    }
    fn5(10);
// ii.返回值可以为任意js类型数据
    function fn6() {
        return{
            'name':'henry',
            'age':25
        }
    }
    var res = fn6();
    console.log(res); //{name: "henry", age: 25}
    console.log(res.age); //25
// iii.函数最多只能拥有一个返回值
    function fn7() {
        return 1,true;
    }
    var res = fn7();
    console.log(res) //将最后一个值返回
    //解决方案 return[1,true];

// 5.匿名函数: 没有名字的函数, 函数只能在定义的时候自己来调用一次, 之后再也无法被调用
 // 匿名函数 自定义
(function () {  // 产生了一个局部名称空间(局部作用域), 并且可以随着匿名函数调用完毕, 被回收
    var aaa = 1000;
    console.log("匿名函数的自调用")
})();