JavaScript第四天（1）-数组，冒泡排序，函数体，逻辑中断return小细节，return返回多个值，求两个数的最大值，作用域

编程语言 2022-04-20 01:50:08 阅读次数: 0

栓选数组

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
        // 需要一个新的空数组   数组字面量  [] 
        let newArr = []
        // 遍历旧数组
        for (let i = 0; i < arr.length; i++) {
    
    
            if (arr[i] >= 10) {
    
    
                // console.log(arr[i])
                // 满足条件的，依次追加给新的数组
                // 把 arr[i] 追加给 newArr
                // newArr = arr[i]  不可以
                newArr.push(arr[i])
            }
        }
        console.log(newArr)
    </script>
</body>

</html>

for(let i=0;i<arr.length;i++){
if(arr[i]>=10){
newArr.push(arr[i])

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
        // 声明新数组
        let newArr = []
        // 遍历旧数组
        for (let i = 0; i < arr.length; i++) {
    
    
            if (arr[i] !== 0) {
    
    
                // 追加给新的数组
                newArr.push(arr[i])
            }
        }
        console.log(newArr)
    </script>
</body>

</html>

for(let i=0;i<arr.length;i++){
if(arr[i]!==0){
newArr.push(arr[i])}}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // let arr = ['red', 'green', 'blue']
        // 删除最后一个元素
        // arr.pop()
        // 看我删了一个， 删的是 最后一个 blue
        // console.log(arr.pop())
        // 看我删了一个， 删的是 第一个 red
        // console.log(arr.shift())
        // shift是删除     unshift比shift 加了一个 un 表示加
        // console.log(arr)
        // 重点删除  arr.splice(从哪里开始删， 删几个)
        let arr = ['red', 'green', 'blue']
        //  我就想把green 删掉
        // 第一个1 是从索引号是1的位置开始删
        // 第二1 是删除几个
        // arr.splice(1, 1)
        // arr.splice(1)
        console.log(arr)
    </script>
</body>

</html>

arr.pop()
删除的是最后一个blue
arr.shoft()删除unshift加了一个un表示加
console.log(arr)
arr.splice(从哪里开始删除，删了几个）

冒泡排序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let arr = [2, 6, 4, 3, 5, 1]
        // 1. 外层循环控制  趟数   循环 4次   arr.length - 1
        for (let i = 0; i < arr.length - 1; i++) {
    
    
            // 2. 里层的循环 控制 一趟交换几次  arr.length - i - 1 次序
            for (let j = 0; j < arr.length - i - 1; j++) {
    
    
                // 交换两个变量
                // arr[j]   arr[j + 1]
                if (arr[j] > arr[j + 1]) {
    
    
                    let temp = arr[j]
                    arr[j] = arr[j + 1]
                    arr[j + 1] = temp
                }
            }
        }
        console.log(arr)

        // 复习变量
        // let num1 = 10
        // let num2 = 20
        // let temp = num1
        // num1 = num2
        // num2 = temp


    </script>
</body>

</html>

for(let i=0;i<arr.length-1;i++){
for(let j=0;j<arr.length-i-1;j++){
if(arr[j]>arr[j+1]){
let temp=arr[j]
arr[j]=arr[j+1]
arr[j+1]=temp}}}
数组删除元素小结
arr.pop()数组末尾删除一个数据元素利用的方法:arr.pop()

  1. 想要数组末尾删除1个数据元素利用那个方法？带参数吗？
     arr.pop()
     不带参数
     返回值是删除的元素
  2. 想要数组开头删除1个数据元素利用那个方法？带参数吗？
     arr.shift()
     不带参数
     返回值是删除的元素
  3. 想要指定删除数组元素用那个？开发常用吗？有那些使用场景？
     arr.splice(起始位置, 删除的个数)
     开发很常用，比如随机抽奖，比如删除指定商品等等
    冒泡排序
    冒泡排序是一种简单的排序算法。 它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列
    的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。
    这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。
    比如数组 [2,3,1,4,5] 经过排序成为了 [1,2,3,4,5] 或者 [5,4,3,2,1]
    简单的排序算法，在这里插入图片描述
    长度就是数组长度减去次数
    但是我们次数是从0开始的，所以最终arr.length-i-1
    在这里插入图片描述
    根据数据生成柱形图
    需求： 用户输入四个季度的数据，可以生成柱形图
    分析：
    ①：需要输入4次，所以可以把4个数据放到一个数组里面
     利用循环，弹出4次框，同时存到数组里面
    ②：遍历改数组，根据数据生成4个柱形图，渲染打印到页面中
     柱形图就是div盒子，设置宽度固定，高度是用户输入的数据
     div里面包含显示的数字和 第n季度
  4. 掌握函数的基本使用，让代码具备复用能力
  5. 理解封装的意义，能够具备封装函数的能力
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let arr = ['pink', 'red', 'blue']
        // for 循环用来计数的， while 可以有条件判断
        for (let i = 0; i < arr.length; i++) {
    
    
            // i   是序号，但是可以当索引号来看   0 1 2 3
            // arr[i]  是数组元素 是里面的每一个值  pink red blue
        }
    </script>
</body>

</html>
  1. 99乘法表，页面需要打印多个怎么办？
  2. 体验函数的魅力
     代码复用
    1.1 为什么需要函数
    目标： 能说出为什么需要函数
    函数：
    function，是被设计为执行特定任务的代码块
    说明：
    函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势
    是有利于精简代码方便复用。
    function:是被设计为执行特定任务的代码块
    函数是可以把具有相同或者相似逻辑的代码包裹起来，通过函数调用执行这些包裹的代码逻辑，精简代码方便复用
    在这里插入图片描述
  3. 为什么需要函数？
     可以实现代码复用，提高开发效率
  4. 函数是什么？
     function执行特定任务的代码块
    可以实现代码复用，提高开发效率function执行特定任务的代码块
    1.2 函数使用
    目标：掌握函数语法，把代码封装起来
     函数的声明语法
    函数的声明语法
    function 函数名(){
    函数体}
    function sayHi(){
    document.write(‘hai~~’)}
    函数名命名规范：和变量命名基本一致，尽量小驼峰式命名法，前缀应该为动词，命名建议：常用都次约定
    function getName(){}
    function addSquares(){}
    在这里插入图片描述
    set设置某个值，get获取某个值，is判断是否为某个值
    has判断是否含义某个值，can判断是否额可以执行某个动作
    1.2 函数使用
    目标：掌握函数语法，把代码封装起来
     函数的调用语法
    函数名()//函数调用，这些函数体内代码逻辑会被执行
    注意：声明（定义）的函数必须调用才会真正被执行，使用 () 调用函数
     例
    声明定义的函数必须调用才会被真正被执行的，使用()调用函数
    在这里插入图片描述
     函数体
    函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才
    会被执行。函数的功能代码都要写在函数体当中
    函数体式函数的构成部分，它负责将相同或者相似的代码包裹起来，指导函数调用的时候函数体内的代码才会被执行，在这里插入图片描述
    在这里插入图片描述
    .left{background-color:pink;}
    .right{backgrond-color:purple;}
  5. 函数是用那个关键字声明的？
     function
  6. 函数不调用会执行吗？如何调用函数？
     函数不调用自己不执行
     调用方式: 函数名()
  7. 函数的复用代码和循环重复代码有什么不同？  循环代码写完即执行，不能很方便控制执行位置
     随时调用，随时执行，可重复调用
    循环代码写完就执行，不能很方便控制执行位置，随时调用随时执行，可以重复调用
    函数课堂练习
    需求：
  8. 写一个打招呼的函数 hi~
  9. 把99乘法表封装到函数里面，重复调用3次
    函数案例
    需求：
  10. 封装一个函数，计算两个数的和
  11. 封装一个函数，计算1-100之间所有数的和
    灵魂拷问：
    这些函数有什么缺陷？
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. 求2个数的和
        // function getSum() {
    
    
        //     let num1 = 10
        //     let num2 = 20
        //     document.write(num1 + num2)
        // }
        // getSum()
        // 2. 求 1~100的累加和 封装函数
        // function getSum100() {
    
    
        //     let sum = 0
        //     for (let i = 1; i <= 100; i++) {
    
    
        //         sum += i
        //     }
        //     document.write(sum)
        // }
        // getSum100()

        // 带有参数的函数
        // function getSum(参数1, 参数2...) {
    
    

        // }
        // getSum(参数1,参数2...)
        // 声明
        function getSum(num1, num2) {
    
    
            document.write(num1 + num2)
        }
        // 调用
        getSum(1, 2)
        getSum(1, 1)
        getSum(168493, 123123)

        document.write('<br>')
        function getSum100(start, end) {
    
    
            let sum = 0
            for (let i = start; i <= end; i++) {
    
    
                sum += i
            }
            document.write(sum)
        }
        getSum100(2, 10)
        getSum100(20, 100)
    </script>
</body>

</html>

function getSum100(start,end){
let sum=0
for(let i=start;i<end;i++){sum+=i;}
document.write(sum)}
getSum1-00(2,10)
getSum

05逻辑中断

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>


        // 带有参数的函数
        // function getSum(参数1, 参数2...) {
    
    

        // }
        // getSum(参数1,参数2...)
        // 声明
        // x 和 y 我们怎么理解 函数内变量 
        // 如果一个变量没有赋值，则默认为  undefined
        document.write(undefined + 10)
        document.write(undefined + true)
        document.write(undefined + undefined)
        document.write(undefined + null)
        document.write(undefined + 'pink')

        // 什么时候当假看  0  undefined  null  '' false  NaN
        document.write('<br>-------------------------------')
        function getSum(x, y) {
    
    
            // x = 1 
            // document.write(x)
            // document.write(x + y)
            // 我们想要：如果调用的时候，我们没有传递实参，则默认为 0
            x = x || 0
            y = y || 0
            document.write(x + y)
        }
        // 调用
        // getSum(1, 2)
        getSum()
        getSum(1, 2)



    </script>
</body>

</html>

如果一个变量没有赋值，则默认为undefined如果一个变量没有赋值，则默认为undefined
x=x||0
y=y||0

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 求学生总分
        // 声明函数
        function getScore(arr) {
    
    
            // arr = [99, 10, 100]
            let sum = 0
            for (let i = 0; i < arr.length; i++) {
    
    
                sum += arr[i]
            }
            document.write(sum)
        }
        // 调用函数
        getScore([99, 10, 100])
        getScore([100, 100, 100])
    </script>
</body>

</html>

function getScore(Arr){let sum=0;
for(let i=0;i<arr.length;i++){sum+=arr[i]}
doocument.write(sum)}
getScore([99,10,100])
getScore([100,100,100])

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // function fn() {
    
    
        //     return 20
        // }
        // fn()
        // return 相当于 执行了一句话   fn() = 20
        // document.write(fn())
        // 进一次深入研究 有的时候函数名字比较长
        // function getMyResult() {
    
    
        //     return 20
        // }
        // document.write(getMyResult())
        // let re = getMyResult()
        // document.write(re)

        // 求和函数有返回值  这个函数就只是求和，把结果返回给我们就行了，这个函数不需要打印输出
        function getSum(x, y) {
    
    
            x = x || 0
            y = y || 0
            // 先计算 x + y 再返回
            return x + y
        }
        let sum = getSum(1, 2)
        // let num1 = prompt('请输入')
        document.write(sum)
    </script>
</body>

</html>

function getSum(x,y){
x=x||0
y=y||0
return x+y}
let sum=getSum(1,2)
document.write(sum)

return小细节

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // function fn() {
    
    
        //     // 退出函数的作用  return 后面的代码不在执行
        //     return

        //     alert(11)
        //     return
        // }
        // fn()
        function fn() {
    
    
            return
        }
        let re = fn()
        console.log(re)
    </script>
</body>

</html>

function fn(){return}
let re=fun()
console.log(re)
let re=fn()

09求数组当中的最大值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 求数组最大值的函数
        function getArrMaxValue(arr) {
    
    
            // 声明一个max变量
            // 把数组第一个值给 max
            let max = arr[0]
            // 开始遍历数组并比较
            for (let i = 1; i < arr.length; i++) {
    
    
                if (max < arr[i]) {
    
    
                    max = arr[i]
                }
            }
            // 返回这个最大值
            return max
        }
        let maxplus = getArrMaxValue([1, 6, 2, 9, 3])
        document.write(`数组的最大值是${
     
     maxplus}`)
    </script>
</body>

</html>

10-return返回多个值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function fn(x, y) {
    
    
            let jia = x + y
            let jian = x - y
            // return jia, jian 结果值返回了 jian 因为return只能返回一个值
            return [jia, jian]
        }
        let re = fn(1, 2)   //  [3, -1]
        document.write(`相加之后的结果是：${
     
     re[0]},相减之后的结果是: ${
     
     re[1]} `)
    </script>
</body>

</html>

return [jia,jian]
let re=fn(1,2)
document.write(‘相加之后的结果式 r e [ 0 ] , 详 见 之 后 的 嘉 国 师 {re[0]},详见之后的嘉国师 re[0],详见之后的嘉国师{re[1]}’)
document.write('相加之后的结果式 r e [ 0 ] , 详 见 之 后 的 结 果 式 {re[0]},详见之后的结果式 re[0],详见之后的结果式{re[1]})
function getArrMaxAndMin(arr){
let max=min=arr[0]
for(let i=1;i<arr.length;i++){
if(max<arr[i])max=arr[i]}if(min>arr[i]){min=arr[i]}
v a l u e [ 0 ] , value[0], value[0],value[1]

12-求两个数的最大值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 求两个数的最大值
        let num1 = +prompt('请输入第一个数')
        let num2 = +prompt('请输入第二个数')
        // 比较函数 最大值
        // return 可以写多个，但是条件是只能执行1个
        function getMax(x, y) {
    
    
            // if (x > y) {
    
    
            //     return x
            // } else {
    
    
            //     return y
            // }
            return x > y ? x : y
        }
        // 实参也可以放变量  
        let max = getMax(num1, num2)
        document.write(max)
    </script>
</body>

</html>

return x>y?x:y
let max=getMax(num1,num2)
document.write(max)
function getMax(x,y){return x>y?x:y}

作用域

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let num = 0
        console.log(11)
        function fn() {
    
    
            function ff() {
    
    

            }
        }
        function fn1() {
    
    

        }
    </script>
    <script>
        console.log(22)
    </script>
</body>

</html>

function fn(){
function ff(){}]
function fn(){function ff(){}}
function fn2(){}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. 全局变量  全局能用
        // let num = 10
        // console.log(num)
        // function fn() {
    
    
        //     console.log(num)
        // }
        // fn()
        // if (true) {
    
    
        //     console.log(num)
        // }
        // 2. 在局部作用域下，变量是 局部变量
        // 函数内的变量，只能给内部使用，函数外面不能使用
        // function fn() {
    
    

        //     let num = 10
        //     console.log(num)
        //     function fn1() {
    
    
        //         console.log(num)
        //         let num2 = 20
        //     }
        //     fn1()
        //     // console.log(num2)  num2 is not defined
        // }
        // fn()
        // console.log(num)  num is not defined

        // 3. 块级变量  
        // if (true) {
    
    
        //     let num = 10
        // }
        // // console.log(num)
        // for (let i = 0; i < 5; i++) {
    
    
        //     console.log(i)
        // }
        // console.log(i)

        // function fn() {
    
    
        //     // let num = 10
        //     num = 10
        // }
        // fn()
        // if (true) {
    
    
        //     num = 10
        // }
        // console.log(num)
        // function fn(x, y) {
    
    
        //     // x 和 y 可以看做是 局部变量
        //     document.write(x + y)
        // }
        // fn(1, 2)
        // console.log(x) 错误了

        let num = 10

        function fn() {
    
    
            let i = 0
            console.log(i);
        }
        fn()

        if (true) {
    
    
            let j = 0
        }
    </script>

</body>

</html>

全局变量，全局能用
let num=10
console.log(num)
function fn(){
console.log(num)}
变量是局部变量，函数内的变量只能内部使用，函数外面不能够使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let num = 10
        function fn() {
    
    
            let num = 20
            console.log(num)
        }
        fn()
    </script>

</body>

</html>

let num=10
function fn(){
let num=20
console.log(num)}
fn()

猜你喜欢

转载自blog.csdn.net/weixin_43428283/article/details/123979741
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022