JavaScript基础 —— 学习第三天_<script> let arr=[5,4,3,2,1] for(let i=0;i<=arr.le-CSDN博客

本文链接：https://blog.csdn.net/qq_63342197/article/details/136760309

一、数组

（一）数组基本知识

声明

按顺序保存数据的数据类型

<body>
  <script>
    let arr = [1 ,2 ,'猪儿', true]
  </script>
</body>

声明数组函数

<body>
  <script>
    let arr = new Array(1 ,2 ,'猪儿', true)
  </script>
</body>

length 数组的长度就是里面元素的个数

复习：for循环遍历数组

求数组最大值和最小值

<body>
  <script>
    let arr = [2, 6, 17, 52, 25, 7, 77]
    let max = arr[0]
    let min = arr[0]
    for (let i = 1; i <= arr.length - 1; i++) {
      if (max < arr[i]) {
        max = arr[i]
      }
      if (min > arr[i]) {
        min = arr[i]
      }
    }
    document.write(`最大值是${max},最小值是${min}`)
  </script>
</body>

（二）操作数组

对数组进行增、删、改、查操作

1.查

前面都是查的操作

2.改

往空数组里面增加元素

<body>
  <script>
    let arr = ['red', 'blue', 'yellow']
    arr[0] = 1
    console.log(arr)
  </script>
</body>

在每个元素的后面加上一段文字

<body>
  <script>
    let arr = ['red', 'blue', 'yellow']
    for (let i = 0; i < arr.length; i++) {
      arr[i] = arr[i] + '是一种颜色'
    }
    console.log(arr)
  </script>
</body>

3.增

.push() 方法增加元素

将一个或多个元素添加到数组的末尾 push经常用

<body>
  <script>
    let arr = ['red', 'blue', 'yellow']
    arr.push('purple', 'green')
    console.log(arr)
  </script>
</body>

如果想添加完新元素返回新数组的长度就直接把这个方法写在输出里面

<body>
  <script>
    let arr = ['red', 'blue', 'yellow']
    console.log(arr.push('purple', 'green'))
  </script>
</body>

.unshift() 方法增加元素

将一个或多个元素添加到数组的开头

<body>
  <script>
    let arr = ['red', 'blue', 'yellow']
    arr.unshift('purple', 'green')
    console.log(arr)
  </script>
</body>

如果想添加完新元素返回新数组的长度就直接把这个方法写在输出里面

<body>
  <script>
    let arr = ['red', 'blue', 'yellow']
    console.log(arr.unshift('purple', 'green'))
  </script>
</body>

4.删

.pop() 方法删除元素

删除数组中最后一个元素并返回该元素的值，和增加同理

<body>
  <script>
    let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    arr.pop()
    console.log(arr)
    console.log(arr.pop())
  </script>
</body>

.shift() 方法删除元素

删除数组中第一个元素并返回该元素的值

<body>
  <script>
    let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    arr.shift()
    console.log(arr)
    console.log(arr.shift())
  </script>
</body>

.splice() 方法删除指定元素

两个参数第一个是起始位置第二个要说明删除几个元素，如果不写第二个元素就会删除从起始位置开始的后面的所有元素

<body>
  <script>
    let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    arr.splice(0, 3)
    console.log(arr)
  </script>
</body>

冒泡排序：

arr.sort()也可以直接调用这个函数升序

arr.sort(function (a, b)){

return a - b(降序变成b - a)

}

let arr = [5, 4, 3, 2, 1]
   let x
   for (let i = 0 ; i<arr.length-1 ;i++)
   {
    for (let j = 0 ;j<arr.length-1-i;j++)
   {
    if(arr[j] > arr [j+1])
    {
     x = arr[j]
     arr[j] = arr[j+1]
     arr[j+1] = x
    }
   }
   }
    console.log(arr)

二、函数

（一）介绍函数

函数被设计为执行特定任务的代码块，就是把大量出现重复的，经常出现的东西抽取封装成函数，以后需要用到的时候直接调用就行，方便复用，函数不被调用的时候是不执行的。

调用就是函数名()

1.语法

<body>
  <script>
   function 函数名() {
    函数体
   }
  </script>
</body>

2.命名规范

和变量命名基本一致

小驼峰

前缀为动词

**常见函数命名动词**
can	执行某个动作
has	是否含义某个值
is	是否为某个值
get	获得某个值
set	设置某个值
load	加载数据

3.函数传参

在函数里面可以放用户的参数下面括号里面的

a， b 就是形参（形式参数）

形参只在函数内部生效不用声明

最好给形参一个默认值，程序会更加严谨

用户输入的是实参（实际参数）

<body>
  <script>
    let a = 1
    let b = 2
    console.log(getadd(a = 0, b = 0))
    function getadd(a, b) {
      return a + b
    }
  </script>
</body>

4.函数返回值 return

把值返回给用户，而不是直接打印出文字,当函数执行return时将不会执行函数后面的语句结束函数

return 后面的数据必须写在同一行

不一定每个函数都要return 没有return的函数默认返回 undefined

return 数据

相当于函数被赋值为20

fn() = 20

<body>
  <script>
    function fn() {
      return 20
    }
    let re = fn()
  </script>
</body>

如何用 return 返回多个数据返回数组即可因为数组可以储存多个数据

<body>
  <script>
    function getmax(arr = []) {
      let max = arr[0]
      let min = arr[0]
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] > max) {
          max = arr[i]
        }
        if (arr[i] < min) {
          min = arr[i]
        }
      }
      return [max, min]
    }
    console.log(getmax([5, 5, 8, 5, 9])[0])
    console.log(getmax([5, 5, 8, 5, 9])[1])
  </script>
</body>

5.函数作用域

一段程序代码的可用范围，减少了名字冲突，不同作用域下可以重名，重名找最近的

全局作用域

全局有效，在script标签内部定义的变量

局部作用域

在函数内部有效，函数内部的形参也被看作局部变量

特殊情况

如果函数内部变量没声明直接赋值，也被看作全局变量但是非常不推荐去使用

6.函数注意事项

有两个相同函数名的函数后面的函数会覆盖前面的函数

实参的个数可能和形参的个数不一致（尽量别这样）

实参多余形参时按顺序多余的直接舍弃 不参与运算

实参少余形参时基本是都是NaN

函数遇到return就结束了

和break的区别: break 是结束循环 return是结束函数

（二）匿名函数

1.具名函数

有具体名字的函数

2.匿名函数

没有名字的函数不能直接使用

函数表达式

将匿名函数赋值给一个变量，然后可以通过变量名进行调用，我们称这个为函数表达式

<body>
  <script>
  let fn = function(x, y) {
   console.log(x + y)
  }
  fn(1, 2)
  </script>
</body>

和具名函数的区别：

具名函数可以在任何位置调用

函数表达式必需先声明后使用，就是只能在在表达式后面调用

立即执行函数

避免全局变量之间的污染，先写两个小括号，然后在第一个小括号里面写一个函数,而且立即执行函数必须以分号结尾，最后那个小括号起到调用前面的函数的作用

后面小括号里面是实参前面小括号里面是形参

立即执行函数无需调用立即执行

<body>
  <script>
    (function () {
      let num = 10
    })();
    (function () {
      let num = 20
    })();
  </script>
</body>

第二种写法

<body>
  <script>
   (function() {}());
  </script>
</body>

（三）逻辑中断

当出现 || 或 && 时会出现逻辑中断的现象

&& 逻辑与第一个数是假的后面语句就不再执行了

|| 逻辑与第一个数是真的后面语句就不再执行了

console.log(11 && 22) 当都为真时返回最后一个真值（与运算）

console.log(11 || 22) 当都为真时返回第一个真值（或运算）

<body>
  <script>
    function getAdd(a, b) {
      a = a || 0
      b = b || 0
      return a + b
    }
  </script>
</body>

三、转换成布尔类型

（一）转换成布尔类型为假的数据类型

字符串只有空的时候布尔类型为假

数字只有零的时候布尔类型为假

underfined 转换成布尔类型为假

null 转换成布尔类型为假

NaN 转换成布尔类型为假

（二）隐式转换

有字符串的加法 “”+1 结果是 “1”

加法只能用于数字如果两边有空字符串 “”会转换成 0

null 经过数字转换会变成0

underfined 经过数字转换之后变成 NaN

LAST : 练习

用户输入一定的秒数换算成时分秒

界面展示：

代码如下：

<body>
  <script>
    function getTime(x = 0) {
      let a = (x - x % 3600) / 3600
      let a1 = x % 3600
      let b = (a1 - a1 % 60) / 60
      let b1 = a1 % 60
     a = a < 10 ? '0' + a : a
     b = b < 10 ? '0' + b : b
     b1 = b1 < 10 ? '0' + b1 : b1
      return [a, b, b1]
    }
    let arr = getTime(+prompt('请输入秒数'))
    document.write(`计算之后的时间是${arr[0]}小时${arr[1]}分${arr[2]}秒`)
  </script>
</body>