1. 技术文章
  2. js函数 循环

js函数 循环

由 依然范特西╮ 提交于 2020-03-25 04:32:16

值类型之间的相互转化

转字符串：String() | .toString() | "" +  // 123..toString() | 重点是  "" +
转数字：Number(a) | parseFloat() | parseInt() | +  // +'123'
// parseFloat('3.14.15') => 3.14 | parseInt('3.14.15') => 3
转布尔：Boolean(a)
​
非数字：NaN  // 当一个其他类型转化为数字类型的产物
// 任何判断一个结果是否是NaN, isNaN(运算)
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>类型转化</title>
</head>
<body>
    值类型之间的相互转化
</body>
<script>
    // number | string | boolean
​
    // 转化为boolean
    var num = 10;
    var s = "123";
​
    num = 0;
    s = "";
    var b1 = Boolean(num);
    var b2 = Boolean(s);
    console.log(b1, b2);
​
    // 后期我们会在if分支结构中的判断以及循环中的判断中使用boolean类型,
    // 以上两种情况下, 系统都会把非boolean的数据自动转换为boolean
    // 0 | "" | null | undefined | NaN => false, 其他都会转化为true
​
    // 转化为数字类型
    console.log(Number(false), Number(true), true + true);
    var s1 = "123";
    var s2 = "3.14";
    var s3 = "123abc";
    var s4 = "3.14.15";
    var s5 = "abc123";
    // 123 3.14 NaN NaN NaN
    console.log(Number(s1), Number(s2), Number(s3), Number(s4), Number(s5));
    var n3 = parseInt(s3);
    console.log(n3);
    var n4 = parseFloat(s4);
    console.log(n4);
​
    // 常用转化的字符串一定是一个合法的数字字符串形式(s1, s2)
    var n1 = +s1;
    console.log(n1, typeof n1);
    console.log(+s2);
​
    // 转化为字符串类型
    var nn1 = 123;
    var ss1 = String(nn1);
    var ss2 = nn1.toString();
    var ss3 = "" + nn1;
    console.log(ss1, ss2, ss3);
​
    // 了解
    var ss4 = 123..toString();
​
    console.log(ss4);
​
    // 弱语言类型
    console.log(3 + "5");  // "35"
    console.log(3 - "5");  // -2
​
​
    // 总结:
    // 1.最快转化为数字类型 +"123" | +true
    // 2.最快转化为字符串形式 "" + 123 | "" + true
</script>
</html>
View Code

运算符

/*
算数运算符：+  -  *  /  %  ++  --
赋值运算符：+=  -=  *=  /=  %=
比较运算符：>  <  >=  <=  ==  ===  !=  !==
逻辑运算符：&&  ||  ！
三目运算符：结果 = 条件表达式 ? 结果1 : 结果2;
*/
​
 // 1.算法运算符
    // js中不区分整形和浮点型, 结果为什么就是什么
    var res = 5 / 2;  // 2.5
    console.log(res);
​
    // 任何正整数对n取余 结果为: [0, n-1]
    // [1, 正无穷] % n
    // [1, 正无穷] % 10 => [0, 9]
    console.log(5 % 2);  // 1
​
​
    // num++ | ++num => num = num + 1;  => 自增1
    // ++在后先赋值再自增 | ++在前先自增再赋值
    var num = 10;
    var r1 = ++num;
    console.log(r1);  // ++num => re=11 | num++ => re=10
    console.log(num);  // 11
​
    var a = 10;
    var b = a++;  // a:11 b:10
    var c = ++a;  // a:12 c:12
    console.log(a, b, c); // 12 10 12
​
    // 2.赋值运算符
    var x = 20;
    x += 10; // => x = x + 10
    console.log(x);
​
    // 3.比较运算符
​
    var y = 10;
    var z = '10';
​
    console.log(y == z);  // 只做值比较 => true
    console.log(y === z); // 全等: 值与类型都必须相等 => false
​
    console.log(y != z); // => false
    console.log(y !== z); // => ture
​
    // 4.逻辑运算符: js的逻辑运算符结果不一定为boolean类型的结果
    var a1 = 10;
    var a2 = 20;
    var a3 = '10';
​
    // 逻辑与: 条件1 && 条件2 => 全为真则真,否则为假
    // 逻辑或: 条件1 || 条件2 => 全为假则假,否则为真
    // 逻辑非: 非真即假,非假即真
​
    // 逻辑运算符的短路效果
​
    // var res1 = a1 == a3 && a2++; // => res1结果 即 a2的结果
    // console.log(res1, a2);  // 20, 21
​
    // 逻辑与的短路效果, 条件1为假, 条件2就不会被执行
    // var res1 = a1 === a3 && ++a2; // => res1结果 即 a2的结果
    // console.log(res1, a2);  // false 20
​
    // 逻辑或的短路效果, 条件为真, 条件2就不会被执行
    var res2 = a1 == a3 || a2++;
    console.log(res2, a2);  // true 20
​
​
    // 5.三目运算符：结果 = 条件表达式 ? 结果1 : 结果2;
    var xx = 10;
    var yy = '10';
    // 条件满足, 执行:前的结果1, 否则执行:后的结果2
    var res = xx == yy ? "xx与yy的值相等" : "xx与yy的值不相等";
    console.log(res)
​
    console.log(NaN == NaN, isNaN(NaN))
​
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>运算符</title>
</head>
<body>
运算符
<!--需求: box的内容是123,则将文字颜色修改为red,负责不做操作-->
<div id="box">1234</div>
<script>
    var box_ctx = box.innerText;
    // 前者满足,则做后者操作;前者不满足,后者被短路,不做操作
    box_ctx == '123' && (box.style.color = 'red');
</script>
</body>
<script>
    // 1.算法运算符
    // js中不区分整形和浮点型, 结果为什么就是什么
    var res = 5 / 2;  // 2.5
    console.log(res);
​
    // 任何正整数对n取余 结果为: [0, n-1]
    // [1, 正无穷] % n
    // [1, 正无穷] % 10 => [0, 9]
    console.log(5 % 2);  // 1
​
​
    // num++ | ++num => num = num + 1;  => 自增1
    // ++在后先赋值再自增 | ++在前先自增再赋值
    var num = 10;
    var r1 = ++num;
    console.log(r1);  // ++num => re=11 | num++ => re=10
    console.log(num);  // 11
​
    var a = 10;
    var b = a++;  // a:11 b:10
    var c = ++a;  // a:12 c:12
    console.log(a, b, c); // 12 10 12
​
    // 2.赋值运算符
    var x = 20;
    x += 10; // => x = x + 10
    console.log(x);
​
    // 3.比较运算符
​
    var y = 10;
    var z = '10';
​
    console.log(y == z);  // 只做值比较 => true
    console.log(y === z); // 全等: 值与类型都必须相等 => false
​
    console.log(y != z); // => false
    console.log(y !== z); // => ture
​
    // 4.逻辑运算符: js的逻辑运算符结果不一定为boolean类型的结果
    var a1 = 10;
    var a2 = 20;
    var a3 = '10';
​
    // 逻辑与: 条件1 && 条件2 => 全为真则真,否则为假
    // 逻辑或: 条件1 || 条件2 => 全为假则假,否则为真
    // 逻辑非: 非真即假,非假即真
​
    // 逻辑运算符的短路效果
​
    // var res1 = a1 == a3 && a2++; // => res1结果 即 a2的结果
    // console.log(res1, a2);  // 20, 21
​
    // 逻辑与的短路效果, 条件1为假, 条件2就不会被执行
    // var res1 = a1 === a3 && ++a2; // => res1结果 即 a2的结果
    // console.log(res1, a2);  // false 20
​
    // 逻辑或的短路效果, 条件为真, 条件2就不会被执行
    var res2 = a1 == a3 || a2++;
    console.log(res2, a2);  // true 20
​
​
    // 5.三目运算符：结果 = 条件表达式 ? 结果1 : 结果2;
    var xx = 10;
    var yy = '10';
    // 条件满足, 执行:前的结果1, 否则执行:后的结果2
    var res = xx == yy ? "xx与yy的值相等" : "xx与yy的值不相等";
    console.log(res)
​
    console.log(NaN == NaN, isNaN(NaN))
</script>
</html>
View Code 

if条件判断

if (表达式1) {
​
} else if (表达式2) {
​
}
...
else if (表达式2) {
​
} else {
​
}
 // 三种弹出框:
    // 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{ 逻辑体 }
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>if分支结构</title>
</head>
<body>
if分支结构
</body>
<script>
​
    // 三种弹出框
    // 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("要求提薪");
    }
​
​
</script>
</html>
View Code

循环

// 循环比较：
// 1.for: 解决已知循环次数的
// 2.while: 可以解决所有for循环可以解决的问题,也可以解决不知道循环次数但知道结束条件
// 3.do...while: 无论条件是否满足,循环体都会被执行一次
// 语法：
for (循环变量①; 条件表达式②; 循环变量增量③) {
    代码块④;
}
=
while (条件表达式) {
    代码块;
}
​
do {
    代码块;
} while (条件表达式);
​
// break：结束本层循环
// continue：结束本次循环进入下一次循环
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>
​
</body>
<script>
    /**
     * for (循环变量①; 条件表达式②; 循环变量增量③) {
            代码块④;
        }
     */
    for (var i = 0; i < 5; i++) {
        console.log("打气");
    }
    // ① ②④③ ... ②④③ ②
​
​
    /*while (条件表达式) {
        代码块;
    }
    * */
    var j = 0;
    while (j < 5) {
        console.log("打气");
        j++;
    }
​
    /*
    do {
        代码块;
    } while (条件表达式);
    * */
    var k = 0;
    do {
        console.log("打气");
        k++;
    } while (k < 5);
​
    // 循环比较
    // 1.for: 解决已知循环次数的
    // 2.while: 可以解决所有for循环可以解决的问题,也可以解决不知道循环次数但知道结束条件
    // 3.do...while: 无论条件是否满足,循环体都会被执行一次
​
    var x = 0;
    while (x < 5) { // 0, 1, 3, 4
        if (x == 2) {
            x++;
            continue;
        }
        console.log(x);
        x++;
    }
    // while (x < 5) { // 0, 1, 3, 4
    //     x++;
    //     if (x == 3) {
    //         continue;
    //     }
    //     var res = x - 1;
    //     console.log(res);
    // }
​
    console.log(x);  // 5
    x = 0;
    while (x < 5) { // 0, 1, 2
        if (x >= 3) {
            break;
        }
        console.log(x);
        x++;
    }
</script>
</html>
View Code

 函数

// js函数的重点: 如何给事件提供功能
​
// 1.函数的定义
// function 函数名(形参列表) {
//      函数体;
// }
​
// 2.函数的调用
// var res = 函数名(实参列表);
​
// 3.函数的参数
// i.个数不需要统一
// ii.可以任意位置具有默认值
// iii.通过...语法接收多个值
​
// 4.返回值讲解
// i.可以空return操作，用来结束函数
// ii.返回值可以为任意js类型数据
// iii.函数最多只能拥有一个返回值
​
// 5.匿名函数: 没有名字的函数, 函数只能在定义的时候自己来调用一次, 之后在也无法被调用
 // 匿名函数 自定义
    (function () {  // 产生具备名称空间(局部作用域), 并且可以随着匿名函数调用完毕, 被回收
        var aaa = 1000;
        console.log("匿名函数的自调用")
    })()
​
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>函数</title>
</head>
<body>
函数
</body>
<script>
    // 1.函数的定义
    // function 函数名(形参列表) {
    //      函数体;
    // }
​
    // 2.函数的调用
    // var res = 函数名(实参列表);
​
    // 3.函数的参数
    // i.个数不需要统一
    // ii.可以任意位置具有默认值
    // iii.通过...语法接收多个值
​
    // 4.返回值讲解
    // i.可以空return操作，用来结束函数
    // ii.返回值可以为任意js类型数据
    // iii.函数最多只能拥有一个返回值
​
    // js函数的重点: 如何给事件提供功能
    // 注: 匿名函数
​
​
    // 函数定义与调用(调用可以写在定义前)
    function fn1() {
        console.log("函数fn1");
    }
    var res = fn1();
    console.log(res);
​
    // 参数
    // i.个数不需要统一
    function fn2(a, b) {
        console.log(a, b);
    }
    fn2(10, 20, 30);
​
    fn3("abc");
    function fn3() {  // 不需要参数就不接收, 需要就接收
        console.log("自己玩")
    }
​
    // ii.可以任意位置具有默认值
    function fn4(a, b=10, c, d=20) {
        console.log(a, b, c, d);
    }
    fn4(); // undefined 10 undefined 20
    fn4(100)  // 100 10 undefined 20
    fn4(100, 200) // 100 200 undefined 20
    fn4(100, null, 200)  // 100 null 200 20
​
    // iii.通过...语法接收多个值
    function fn5(...arr) {  // 以数组形式接受多个值
        console.log(arr)
    }
    fn5(1, 2, 3, 4, 5);
​
​
    // i.可以空return操作，用来结束函数
    function fn6(a) {
        if (a == 10) {
            return;
        }
        console.log("参数不为10");
    }
    fn6(10);
​
    // ii.返回值可以为任意js类型数据
    function fn7() {
        return {
            name: 'egon',
            age: 79
        }
    }
    var res = fn7();
    console.log(res.age)
​
    // iii.函数最多只能拥有一个返回值
    function fn8() {
        // return 10, true;  // 了解: 将最后一个值返回
        // 解决方案
        return [10, true];
    }
    res = fn8();
    console.log(res);
​
​
    // 匿名函数 自定义
    (function () {  // 产生具备名称空间(局部作用域), 并且可以随着匿名函数调用完毕, 被回收
        var aaa = 1000;
        console.log("匿名函数的自调用")
    })()
​
​
</script>
<script>
    console.log(aaa)
</script>
</html>
View Code

 

 

 

标签
var
函数调用
js代码
html代码
num
js
var函数
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!