js学习日记第四天

4. 数组

1. 创建数组

 //方法1
 let arr = ['1','2','3','4','5']
 //方法2
 let arr = new Array(1,2,3,4,5)

  // 求数组最大值
     let arr = [2,6,1,77,52,25,7]
     let max = arr[0]
     for(let i = 1; i < arr.length; i++){
         if(max < arr[i]){
             max = arr[i]
         }
     }
     console.log(max)

2. 操作数组

1. 修改数组

  // 修改数组
     let arr = ['刘振','刘振','陈欣','陈欣']
     for(let i = 0; i < arr.length; i++){
         arr[i] = arr[i] + '老师'
     }
     console.log(arr)

2. 新增数组

1. 数组.push()方法---将内容加到数组的末尾,并返回新数组长度

let arr = [1,2,3]
arr.push(4,5)
console.log(arr)

2. 数组.unshift()方法---将内容加到数组的开头,并返回新数组长度

3. 数组筛选

// 数组筛选
let arr = [2,0,6,1,77,0,52,0,25,7,10]
// 1.声明新数组
let newarr = []
// 2.遍历旧数组
for(let i = 0; i < arr.length; i++){
    // 3.给出筛选条件
    if(arr[i] >= 10){
        newarr.push(arr[i])
    }
}
// 输出新数组
console.log(newarr)

3. 删除数组

1. 数组.pop()---从数组中删除最后一个元素，并返回该元素的值

2. 数组.shift()---从数组中删除第一个元素，并返回该元素的值

3. 数组.splice()---删除指定元素

语法：arr.splice(起始位置-从0开始，删除几个元素)

4. 数组排序

1. 数组.sort()---排序

2. 数组.reverse()---反转

3. 数组.indexOf()---查找指定元素

4. 数组.forEach()---遍历

5. 数组.map()---把每个元素都转换成字符串

6. 数组.reduce()---求和

7. 数组.filter()---过滤

8. 数组.every()---检查是否满足某个条件

综合案例-根据数据生成柱形图素材

        // 声明数组
        let arr = []
        // 弹四次输入框，将输入数据放入数组
        for (let i = 1; i <= 4; i++) {
            arr.push(prompt(`请输入第${i}个季度的值`))
        }
        // console.log(arr)
        // 盒子开头
        document.write('<div class="box">')
        // 盒子中间
        for(let i = 0; i < arr.length; i++){
        document.write(`
            <div style="height: ${arr[i]}px;">
                <span>${arr[i]}</span>
                <h4>第${i + 1}季度</h4>
            </div>
            `)
        }
        // 盒子结尾
        document.write('</div>')

5. 函数(便于代码复用，提高开发效率)

1. 函数使用

        // 求两数之和
        function sum() {
            let num1 = +prompt('请输入第一个数字：')
            let num2 = +prompt('请输入第二个数字：')
            console.log(num1 + num2)
        }
        sum()

        // 带参数的求和(提高函数灵活性)
        function sum(num1, num2) {
            console.log(num1 + num2)
        }
        sum(10,20)

        // 求数组和(形参初始化更安全)
        function arrSum(arr = []) {
            // console.log(arr)
            let sum = 0
            for (let i = 0; i < arr.length; i++){
                sum += arr[i]
            }
            console.log(sum)
        }
        // arrSum([20,50,80,90,40])
        let arr1 = [1,2,3,6,5]
        arrSum(arr1)//函数实参可以是变量

2. 函数返回值

1. return能将内部执行结果交给函数外部使用

2. return后面的代码不会执行，会立即结束当前函数，所以return后面的数据不要换行写

3. return函数可以没有return，这时默认返回undefined

4. return返回多个数据：return [值1.值2]，采用数组的形式

        //两数之中最大值
        function getMax(x, y) {
            return x > y ? x : y
        }
        let num = getMax(20,30)
        console.log(num)

3. 函数细节

5. 函数名相同，后面会覆盖前面的结果

6. 实参多于形参，多余的参数不参与运算

7. 实参少于形参，剩余的形参为undefined，NaN错误

4. 作用域

8. 全局作用域：作用于整个文件

9. 局部作用域：作用于局部，如函数内部等

10. 函数内部变量直接赋值，不声明，可以看作全局变量

11. 函数的形参也可以看作局部变量

5. 匿名函数(没有函数名)

12. 函数表达式

//函数表达式
let fn = function (x, y) {
    console.log(x + y)
}
fn()

13. 函数表达式与具名函数(有函数名的函数)的区别===具名函数的声明可以写在函数之前，函数表达式不可以

14. 立即执行函数(防止变量污染)

// 立即执行函数
    (function(){
        let num = 20
        console.log(num);
    })();//立即执行函数要以分号结尾

转换时间案例

        // 用户输入总秒数
        let second = +prompt('请输入总秒数：')
        // 封装转换时间的函数
        function getTime(t) {
            let h = parseInt(t / 60 / 60 % 24)
            let m = parseInt(t / 60 % 60)
            let s = parseInt(t % 60)
            // console.log(h, m, s);
            // 补0操作
            h = h < 10 ? '0' + h : h
            m = m < 10 ? '0' + m : m
            s = s < 10 ? '0' + s : s
            // document.write(h, m, s)
            return `转换之后的时间为：${h}小时${m}分钟${s}秒`
        }
        let re = getTime(second)
        document.write(re)

6. 逻辑中断

console.log(11 && 22)//都真，后面覆盖前面
console.log(false && 'hello')//逻辑与，一假则假，故一遇到false,就直接中断，不再看后面
console.log(33 || 44)//逻辑或，一真则真，故一遇到真,就直接中断，不再看后面
console.log(0 && 55)//0