(javascript)（基础知识+实例） 4.循环回顾，函数循环含义：重复执行某一段代码组成部分：初始化状态条

循环

含义：重复执行某一段代码
组成部分：
1. 初始化状态
2. 条件判断
3. 循环体代码
4. 状态变化

语法

while
do..while
for

    for(var i=0;i<10;i++){
        console.log(i)
    }

for循环执行的步骤
1. 执行初始化状态
2. 执行条件判断满足执行3 不满足就结束循环
3. 循环体代码
4. 状态变化
5. 重新回到第2步
break continue
- break如果出现循环体会终止循环
- continue会跳过本次循环直接进入下一次循环
双重for循环
- 每一次外循环都会等待内循环执行结束
- 一旦出现嵌套不用用相同变量

函数 function js的头等公民

含义：在计算机中以命名的方式存储一段代码，在我们需要执行这段代码的时候，根据这个名称找到这段代码取出来执行

函数存代码过程（定义、声明）

    function 函数名(变量,变量,变量...){
        // 放一段代码
        // 在定义函数的时候 这个函数体内的代码不会执行
    }

函数取代码（调用、执行）
```
    函数名()
```
函数的作用
1. 方便复用一段代码
2. 方便维护和修改一段代码
函数和循环都是重复执行一段代码，如果这一段代码连续的重复用循环，如果不是连续重复或者是多个文件里面的重复用函数
函数的参数
- 函数在定义或者调用的时候小括号里面的数据被称为参数
- 在函数定义位置小括号里面写的参数被称为形式参数，简称形参，一般在这个地方写的是一个变量
- 在函数调用位置小括号里面写的参数被称为实际参数，简称实参，一般在这个地方写的就是一个具体的数据
函数的实参和形参的个数关系
- 形参个数和实参个数相同,形参会从左往右一一给实参赋值
- 形参个数小于实参,多余的实参就失去作用
- 形参个数大于实参,多余的形参它的值是undefined

返回值

返回值
- 含义：就是函数在调用（执行）之后得到的结果
- 默认的函数它的返回值是undefined
- 如果函数需要有一个返回值可以在函数体内某一行加上一个关键字 return， return 值，这个值就是函数的返回值
返回值作用（什么时候需要有返回值）
- 如果我们调用函数之后需要得到函数的执行结果，拿结果进行下一步运算或者判断，这时候就需要有返回值
isNaN(数据) 方法
- 这个方法可以用来判断这个数据是不是NaN 如果是返回true 如果不是返回false

return关键字

作用
1. 让函数有一个返回值
2. 终止函数的执行
注意
1. break只能结束循环不能够结束函数的执行
2. return只能结束函数的执行无法终止循环

圆周率

Math.PI

随机数

每一次程序运行得到的值不是固定值
Math.random()
范围是(0,1)
生成一个0-10之间的随机数

实例

（以下代码均为课程实例）（1）函数的语法

    <script>
        // 用函数将求和的代码存储到了函数内部
        function getSum() {
            // 此处代码在函数定义的时候并不会执行
            var sum = 0
            for(var i=1;i<=100;i++){
                sum+=i
            }
            console.log(sum)
        }
        // 根据函数名找到这一段代码 执行
        getSum()
        // 每调用函数一次  函数体内的代码就会执行一次
        getSum()

        getSum()
    </script>

（2）形参和实参个数比较

    <script>
        /* 形参 == 实参 */
        function foo(a, b, c){
            console.log(a,b,c)
        }
        foo(1,2,3)
        /* 形参<实参 */
        function baz(a,b){

        }
        baz(1,2,3)
        /* 形参>实参 */
        function fn(a,b,c){
            /* 
                var a
                var b
                var c
                a = 1
            */
            console.log(a)
            console.log(b)
            console.log(c)
        }
        fn(1)
    </script>

（3）封装一个求两个数乘积的函数

    <script>
        // 定义 == 封装
        function getJi(num1, num2){
            var ji = num1 * num2
            console.log(ji)
        }
        // 调用
        getJi(10, 20)
        getJi(20, 30)
    </script>

（4）函数的返回值01

    <script>
        // alert函数js自动已经实现好了
        // 所有传递的数据都是实参
        var num = prompt('请输入')
        console.log(num)
        var aa = alert('hello world')
        console.log(aa)
        var str = typeof(true)
        parseInt(11.11)
    </script>

（5）函数的返回值02

    <script>
      function getSum(start, end) {
        // console.log(start, end)
        var sum = 0;
        for (var i = start; i <= end; i++) {
          sum += i;
        }
        // return sum
        console.log(sum);
      }

      // 判断一下getSum有没有返回值
      // 默认的函数它的返回值是undefined
      var res = getSum(1,2)
      console.log(res)
    </script>

（6）返回的作用

    <script>
      // 求表达式  (1+10) * (3+40)
      function getSum(num1, num2) {
        var sum = num1+num2
        // console.log(sum)
        return sum
      }
      function getJi(num1, num2){
        var ji = num1 * num2
        console.log(ji)
      }
      // 需要拿到getSum执行之后的结果 再进行下一步运算 此时getSum就需要有返回值
      var res = getSum(1,10)
      console.log(res)
      var res2 = getSum(3, 40)
      console.log(res2)
      var res3 = getJi(res, res2)
      console.log(res3)
    </script>

（7）isNaN方法

    <script>
        console.log(NaN == NaN) // true
        // 如何判断一个数据是不是NaN
        console.log(isNaN(NaN))

        console.log(isNaN(1))
        // 也会存在一个隐式的类型转化
        console.log(isNaN('10')) // 会先将这个数据自动转换成数值类型 再判断是不是数字
        // '10' --> 10
        console.log(isNaN('10px')) // '10px' --> NaN
        console.log(isNaN('hello')) // 'hello' --> NaN
    </script>

（8）return的作用

    <script>
        function foo(){
            console.log(1)
            console.log(2)
            // return // 函数就已经有一个结果 后面的语句就不会执行了
            // break
            console.log(3)
        }

        // console.log(foo())


        for(var i=1;i<10;i++){
            if(i==3){
                // break
                return
            }
            console.log(i)
        }
    </script>

（9）交换两个变量的值

<script>
        var a = 1
        var b = 2
        // 定义一个第三方变量
        var temp = null
        temp = a
        a = b
        b = temp
        console.log(a,b)
    </script>

（10）随机数

    <script>
        console.log(Math.random()) // 0.0000000000001 - 0.9999999999999
        console.log(parseInt(Math.random()*10))  // [0,9]
        console.log(parseInt(Math.random()*10) + 1)  // [1,10]
        console.log(parseInt(Math.random()*11))  // [0,10]
        console.log(parseInt(Math.random()*11) + 10)  // [10,20]
        console.log(parseInt(Math.random()*41))  // [0,40]
        console.log(parseInt(Math.random()*41) + 10)  // [10,50]
        console.log(parseInt(Math.random()*41))  // [0,40]
        console.log(parseInt(Math.random()*41) + 15)  // [15,55]
        console.log(parseInt(Math.random()*67))  // [0,66]
        console.log(parseInt(Math.random()*41) + 12)  // [12,78]
    </script>

（11）冒泡排序

    <script>
        // 封装一个函数 把传入三个数字按照从小到大的顺序排列
        /* 
            冒泡排序法
            依次拿相邻两个数比较 因为我们要排序的方式是从小到大的，所以要求前面的数
            应该比后面的数小 如果前面的数大于后面的数 交换两个数的位置
        */
        function sort(a, b, c){
            // 相邻两个数依次比较
            if(a>b){
                // 交换两个变量的值
                var temp = null
                temp = b
                b = a
                a = temp
            }
            if(b>c){
                // 交换两个变量的值
                var temp = null
                temp = b
                b = c
                c = temp
            }
            // 第一轮就比较结束 得出的结论 最大的数应该在最后一位 c就是最大的
            // 剩下的a和b 再比较一次
            if(a>b){
                // 交换两个变量的值
                var temp = null
                temp = b
                b = a
                a = temp
            }
            return a, b, c
            return a + ',' + b + ',' + c
        }
        console.log(sort(11,2,5))  // 2,5,11
        console.log(sort(1,20,5))  // 1,5,20
    </script>

（12）枚举法排序

    <script>
        // 封装一个函数 把传入三个数字按照从小到大的顺序排列
        /* 
            穷举法 枚举法
            假设a最小
                - 比较b和c
                    + b>c    a,c,b
                    + b<c    a,b,c
            假设b最小
                - 比较a和c
                    + a>c    b,c,a
                    + a<c    b,a,c
            假设c最小
                - 比较a和b
                    + a>b    c,b,a
                    + a<b    c,a,b
        */
        function sort(a, b, c){
            // 假设a最小
            if(a<b&&a<c){
                // 比较b和c
                if(b>c){
                    console.log(a,c,b)
                }else{
                    console.log(a,b,c)
                }
            }
            // 假设b最小
            if(b<a&&b<c){
                // 比较a和c
                if(a>c){
                    console.log(b,c,a)
                }else{
                    console.log(b,a,c)
                }
            }
            // 假设c最小
            if(c<a&&c<b){
                // 比较a和b
                if(a>b){
                    console.log(c,b,a)
                }else{
                    console.log(c,a,b)
                }
            }
        }
        sort(11,2,5)  // 2,5,11
        sort(1,20,5)  // 1,5,20
    </script>

（13）编写函数，判断一个字符串的内容是不是纯数字

    <script>
        // console.log(NaN == NaN)
        // 编写函数，判断一个字符串的内容是不是纯数字   
        // '10' '10.1' '10px' 'hello'
        function isFullNumberStr(str){
            // console.log(str) // 字符串  '10'
            // 把字符串转换成数值 Number方法
            // console.log(Number(str)) // 10
            // var num = Number(str)
            // 转换之后的结果如果是正常的数字 就代表是纯数字字符串
            /* if(num == str){
                return true
            }else{
                return false
            } */
            // 转换之后的结果如果是NaN 就代表是非纯数字字符串
            if(isNaN(str)){
                return false
            }else{
                return true
            }
        }
        console.log(isFullNumberStr('10'))   // 返回值true
        console.log(isFullNumberStr('10.1')) // 返回值true
        console.log(isFullNumberStr('10px')) // 返回值false
        console.log(isFullNumberStr('hello')) // 返回值false
        console.log(isFullNumberStr(''))
    </script>

（14）封装一个求圆的面积函数 πrr

    <script>
        // 封装一个求圆的面积函数   π*r*r

        function mianji(r) {
            var r = Number(r)
            var x = Number(x)

            x = (Math.PI) * r * r
            alert(x)
        }
        mianji(2)
    </script>
    <script>
        // 封装一个求圆的周长函数   2*π*r
        function zhouchang(r) {
            var r = Number(r)
            var y = Number(y)

            y=2*(Math.PI)*r
            alert(y)
        }
        zhouchang(4)
    </script>

（15）封装一个生成m,n范围的随机数函数

    <script>
        // 封装一个生成m,n范围的随机数函数

        // console.log(foo(10, 50))
        // console.log(foo(100, 506))
function suiji(m,n){
    alert(parseInt(Math.random()*(n-m+1)) + m)
}
suiji(10,50)

suiji(100,506)
    </script>

（16）生成随机背景色 #000000 - #ffffff

    <script>
        // 生成随机背景色 #000000 - #ffffff
        // 生成随机背景色 #000000 - #ffffff
        var str = '#'
        for (var i = 1; i <= 6; i++) {
            var colo = parseInt(Math.random() * 16)
            var colo16 = colo.toString(16)
            str += colo16
        }
        console.log(str)
        document.querySelector('div').style.backgroundColor = str
    </script>