JavaScript-2023.3.26

补充:函数名和函数的调用,是两码事
function fn() {
conslole.log('haha')
return('haha')
}
fn()
//fn()里面没有返回值 return 控制台打印的是undefined

补充数组

arr.push()末尾增加数据
arr.unshift()首部增加数据
arr.pop() 末尾删除
arr.shift() 首部删除
arr.splice(位置,数量,增加的数据)
arr.resesrve() 逆序
arr.sort() 排序 sort内部,是吧数组中的每个元素当做字符串对待
我们可以给sort这个方法,增加一个实参
实参:有时候也可以是一个函数
//sort的内部,在两辆对比每一组数据的时候,sort都会调用这个函数,并且以这个函数的结果来决定从小到大还是从大到小

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

order(function(num1,num2) {
	return num2,num1//逆序 从大到小
}

arr.sort(function(){})

let arr=[11,33,17,5,88,17]
//实参:有时候也可以是一个函数
arr.sort(function(num1, num2){
	//return num1-num2顺序从大到小
	return num2 - num1//逆序从大到小
})
//sort的内部,在两辆对比每一组数据的时候,sort都会调用这个函数,并且以这个函数的结果来决定从小到大还是从大到小
console.log(arr)
例题
  let arr = ['zs', 'lisi', 'wangwu', 'zhaoliu']
        // 需求1: 往arr的末尾增加一个新的数据, zhuxiaoming
        arr.push('zhuxiaoming')
        console.log(arr)
        // 需求2: 往arr的头部增加一个新的数据, maotai
        arr.unshift('maotai')
        console.log(arr)
        // 需求3: 删除arr第0个元素
        arr.shift(0)
        console.log(arr)
        // 需求4: 删除arr最后一个元素
        arr.pop('arr.length')
        console.log(arr)
        // 需求5: 从arr的第1个位置起,删除2个元素
        arr.splice(1, 2)
        console.log(arr)
        // 需求6: 对arr进行排序
        arr.sort()
        console.log(arr)
        // 需求7: 对arr进行逆序
        arr.reverse()
        console.log(arr)

sort的运行原理

// sort的运行原理
        function order(cb) { // cb = function(){}
            let arr = [11, 23, 5, 17, 65, 87]
            for (let j = 0; j < arr.length - 1; j++) {
                for (let i = 0; i < arr.length - 1 - j; i++) {
                    let ret = cb(arr[i], arr[i + 1])
                    if (ret > 0) {
                        let temp = arr[i]
                        arr[i] = arr[i + 1]
                        arr[i + 1] = temp
                    }
                }
            }
            console.log(arr)
        }
        order(function (a, b) {
            return a - b
        })
forEach的内部,会使用for循环对arr进行循环遍历

他在循环遍历的过程中,每遍历一个元素,他都会调用我们传递的function(){},他还会把当前遍历的这个元素以实参的形式传递过来

arr.forEach(function(e){
	console.log
	sum+=e//e是数组中的每一个元素
})
let aver = sum  arr .length
console.log(aver)

需求2:在arr的所有元素中,将未成年人拎出来,形成一个新的数组

let arr=[10,8,22,7,19,24,26]
// let newArr =[]
//arr.forEach(function(e){
//if (e < 18){
//newArr .push(e)
//}
//})
//console.loe(newArr)
let newArr = arr.filter(function(e){
return e < 18//优化下面四行代码
//if (e < 18) {
//return true
//}else {
//return false
}
}) // 过滤
console.log(newArr)

例题

forEach()循环遍历

let arr = [10, 8, 22, 7, 19, 26, 33]
  // 需求1: 对arr进行循环遍历, 计算平均值
                let sum=0
                arr.forEach(function(e){  //e=arr[i]
                    sum+=e
                })
                let aver=sum/arr.length
                console.log(aver)


			
                    let arr1 = ['haha', 'hehe','xixi']
                    arr1.forEach(function (e,index){  //index表示下标
                    console.log(e)
                    console.log(index)
                      })

filter()过滤

let arr = [10, 8, 22, 7, 19, 26, 33]
 // 需求2: 在arr的所有元素中, 将未成年人拎出来,形成一个新的数组(过滤filter)
                let newArr=arr.filter(function(e){
                    return e <18
                })

map()一一映射

 let arr = [10, 8, 22, 7, 19, 26, 33]
  // 需求3: 我需要一个新的数组, 新数组里面的每个元素是arr里面对应元素的平方
                // let  newArr=[]
                // for(let i = 0; i < arr.length; i++){
                //     newArr.push(arr[i] * arr[i])
                // }
                // console.log(newArr)
                        // 一 一 映射
              let newArr=  arr.map(function(e){
                return  e*e
                })
                console.log(newArr)

slice()截取区间(参数1: 开始的位置,参数2: 结束的位置)

 let arr = [10, 8, 22, 7, 19, 26, 33]
  // 需求4: 将arr中的区间[2, 4)元素拎出来, 形成一个新的数组
            // let newArr = [arr[2],arr[3],arr[4]]
            let newArr= arr.slice(2,4)//参数1: 开始的位置 参数2: 结束的位置
             //slice的特点: 包含开始位置,不包含结束的位置
            console.log(newArr)

some() 可以得出一个结论: 有没有/是否有

let arr = [10, 8, 22, 7, 19, 26, 33]
// 需求5: arr有没有年龄为16的元素
        //   some 可以得出一个结论: 有没有/是否有
        let flag = arr.some(function (e) {  //数组中有没有16
            return e === 22
        }) // 得到数组中,是否有满足条件的元素
        console.log(flag)

erery()可以得到一个结论:是否全都

let arr = [10, 8, 22, 7, 19, 26, 33]
 // 需求6: arr是否都是成年人
        //  erery可以得到一个结论:是否都
        let flag2 = arr.every(function (e) {  //是否全都大于18
            return e > 18
        })
        console.log(flag)

join()连接形成新的字符串

let arr = [10, 8, 22, 7, 19, 26, 33]
     // 需求7: 将arr中每一个元素使用-进行拼接形成字符串
        let newStr = arr.join('$')
        console.log(newStr)

数组常用的方法例题

    let arr = [
            {
                id: 1,
                name: 'zhangsan',
                age: 19
            },
            {
                id: 2,
                name: 'lisi',
                age: 22
            },
            {
                id: 3,
                name: 'wangwu',
                age: 16
            },
            {
                id: 4,
                name: 'zhaoliu',
                age: 26
            },
            {
                id: 5,
                name: 'runtu',
                age: 13
            }
        ]
        // 需求1: 对arr进行循环遍历, 计算平均年龄
        for (let k in arr) {
            console.log(arr[k])
        }
        let sum = 0
        arr.forEach(function (e) {
            sum += e.age
        });
        console.log(sum / arr.length);
        // 需求2: 在arr的所有元素中, 将未成年人拎出来,形成一个新的数组
        let newArr = arr.filter(function (e) {
            return e.age < 18
        })
        console.log(newArr)
        // 需求3: 将arr的所有元素的年龄拎出来,形成一个由数字形成的数组
        let newArr1 = arr.map(function (e) {
            return e.age
        })
        console.log(newArr1)
        // 需求4: 将arr中的区间[2, 4)元素拎出来, 形成一个新的数组
        let newArr3 = [arr[2], arr[3], arr[4]]
        console.log(newArr3);
        // 需求5: arr中哪个下标索引的年龄为26
        let flag = arr.some(function (e) {  //数组中有没有26
            return e.age === 26
        }) // 得到数组中,是否有满足条件的元素
        console.log(flag)
        // 需求6: arr有没有年龄为16的元素
        let flag1 = arr.some(function (e) {
            return e.age === 16
        })
        console.log(flag1)
        // 需求7: arr是否都是成年人
        let flag2 = arr.every(function (e) {  //是否全都大于18
            return e > 18
        })
        console.log(flag2)
        // 需求8: 将arr中每一个元素的name属性取出来,形成一个新的字符串数组, 再将这个数组的每个元素使用-进行拼接形成字符串
        let newArr4 = arr.map(function (e) {
            return e.name       //先用map把name取出来
        })
        console.log(newArr4)
        newArr4 = newArr4.join('-')

        console.log(newArr4)
总结

数组.forEach(函数)
let newarr=数组.filter(函数)
let newarr=数组.map(函数)
let newarr=数组.slice(开始位置,结束位置)
let newarr=有新变量去接收
1.对原数组产生了影响,arr.push() arr.pop()
2.对原数组没有产生影响,而是形成了新数组(所以要用变量去接收)
数组常见的方法数组常见的方法
数组常见的方法

对象

数组存储数据时候缺少了描述数据的信息 只有下标可以表示位置
对象可以详细的描述数据信息
对象:JavaScript里的一种数据类型
对象是无序的,但数组是有序的
如果用多个变量保存则比较散,用对象比较统一

变量保存则比较散
变量
对象可以描述静态信息
对象可以描述静态信息

静态:姓名,年龄,身高,性别,爱好=>可以使用数字,字符串,数组,布尔类型等表示
动态:(点名,唱,跳,rap)=> 使用函数表示

对象使用

let 对象名={}
变量字面量写法
let 对象名 = new Object()
对象的属性和方法

属性

数据描述性的信息称为属性,如人的姓名、身高、年龄、性别等,一般是名词性的。
属性都是成 对出现的,包括属性名和值,它们之间使用英文 : 分隔
多个属性之间使用英文 , 分隔
属性就是依附在对象上的变量(外面是变量,对象内是属性)
属性名可以使用" "或’ '一般情况下省略,除非名称遇到特殊符号如空格、中横线等

对象的增删改查

数组的增删改查
数组的增删改查

对象的增删改查
let obj ={
uname :'zs',
age: '18',
}
// 方式1: 对象.属性名
//.后面跟着的东西,不会识别成变量
// obj .uname
// obj.age

//方式2:对象[属性名]
//[]里面的东西会被识别成数据
console.log(obj['uname'])//加上引号就会变成数据  不会报错  不会当成变量
console.log(obj['age'])

let obj ={
uname :'zs',
age: '18,'
}
let str = 'age'
console.log(obj.str ) //.后面的不会被识别成变量--->undefined
console.log(obj['str']) //[]后面会被识别成变量--->18

1.delete 对象.属性
2.delete 对象[属性]

1.对象.属性名 = 新值
2.对象[性名] = 新值

方式1 对象.属性名 . 后面的东西不会被识别成变量
方式2 对象[属性名]

循环遍历
for(let k in 对象){
//k所代表的是对象的属性名
// obj.k 得到的都是undefined  .后面不会被识别成变量
obj[k]
}
  let obj = {
            name: 'pink老师',
            age: 18,
            sex: '男',
            fn: function () { }
        }
        // 循环遍历obj这个对象
        for (let k in obj) {
            console.log(obj[k])
        }
对象总结

对象的查询

对象的增删改查

循环遍历

属性-查的另一种写法

‘user-name’ 有-的时候要加一个引号
console.log(obj[‘user-name’]) //此时只能用[] 不能用.

对象和数组的选择

1.数组:当我们需要存储多项同一类型的数据时
2.对象:当我们需要存储一个物体的多方面的信息时
3.数组 套 对象:如果我们需要存储 多个同类物品, 每个物体都具备多方面信息时

在这里插入代码片
        let student_list = [
            {
                name: 'zs',
                age: 22,
                height: 175
            },
            {
                name: 'ls',
                age: 27,
                height: 165
            },
            {
                name: 'ww',
                age: 15,
                height: 160
            }
        ]

        // 1.求最大的年龄的那个人的名字
        let max = student_list[0]
        for (let i = 1; i < student_list.length; i++) {
            if (student_list[i].age > max.age) {
                max = student_list[i]
            }
        }
        console.log(max.name)


        // 2.求班级的平均年龄
        // let totalAge = 0


        // for (let j = 0; j < student_list.length; j++) {
        //     totalAge += student_list[j].age
        // }

        // let aver = totalAge / student_list.length

        // console.log(aver)

        let sum = 0
        student_list.forEach(function (e) {
            sum += e.age
        });
        console.log(sum / student_list.length);

        // 3.求班级的平均身高
        let sum1 = 0
        student_list.forEach(function (e) {
            sum1 += e.height
        })
        console.log(sum1 / student_list.length);

Math对象JavaScript提供的一个“数学”对象

作用:提供了一系列做数学运算的方法

Math对象包含的方法有:
PI:圆周率
floor:向下取整
ceil: 向上取整
max: 找最大数
min: 找最小数
round:四舍五入
pow: 幂运算
abs:绝对值
random: 生成0-1之间的随机数 (包含0不包括1)

例题
猜数字游戏 最多猜三次
 // 猜数字游戏
        // 程序随机生成 1~10 之间的一个数字,用户输入一个数字
        // 如果大于该数字,就提示,数字猜大了,继续猜
        // 如果小于该数字,就提示,数字猜小了,继续猜
        // 如果猜对了,就提示猜对了,程序结束
        // 最多猜3次


        let count = 0
        function getRandom(start, end) {
            return start + Math.floor(Math.random() * (end - start + 1))
        }
        let guessnum = getRandom(1, 100)
        while (true) {

            let num = +prompt('请输入一个数字')
            count++
            if (num > guessnum) {
                alert('猜大了,继续猜')
            } else if (num < guessnum) {
                alert('猜小了,继续猜')
            } else {

                alert('恭喜你,猜对了!')
                break
            }
            if (count >= 3) {
                alert('太笨了!')
                break
            }


        }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Initialization error (ESLint). Cannot find module 'C:/Users/14304/Desktop/JAVA/JinRongKanBan/pc_前端源码/node_modules/eslint/lib/options' Require stack: - C:\Program Files\JetBrains\IntelliJ IDEA 2023.1.3\plugins\javascript-impl\languageService\eslint\bin\eslint-common.js - C:\Program Files\JetBrains\IntelliJ IDEA 2023.1.3\plugins\javascript-impl\languageService\eslint\bin\eslint-plugin.js - C:\Program Files\JetBrains\IntelliJ IDEA 2023.1.3\plugins\javascript-impl\languageService\eslint\bin\eslint-plugin-provider.js - C:\Program Files\JetBrains\IntelliJ IDEA 2023.1.3\plugins\javascript-impl\jsLanguageServicesImpl\js-language-service.js Error: Cannot find module 'C:/Users/14304/Desktop/JAVA/JinRongKanBan/pc_前端源码/node_modules/eslint/lib/options' Require stack: - C:\Program Files\JetBrains\IntelliJ IDEA 2023.1.3\plugins\javascript-impl\languageService\eslint\bin\eslint-common.js - C:\Program Files\JetBrains\IntelliJ IDEA 2023.1.3\plugins\javascript-impl\languageService\eslint\bin\eslint-plugin.js - C:\Program Files\JetBrains\IntelliJ IDEA 2023.1.3\plugins\javascript-impl\languageService\eslint\bin\eslint-plugin-provider.js - C:\Program Files\JetBrains\IntelliJ IDEA 2023.1.3\plugins\javascript-impl\jsLanguageServicesImpl\js-language-service.js at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15) at Module._load (node:internal/modules/cjs/loader:922:27) at Module.require (node:internal/modules/cjs/loader:1143:19) at require (node:internal/modules/cjs/helpers:110:18) at requireInContext (C:\Program Files\JetBrains\IntelliJ IDEA 2023.1.3\plugins\javascript-impl\languageService\eslint\bin\eslint-common.js:24:12) at new ESLintPlugin (C:\Program Files\JetBrains\IntelliJ IDEA 2023.1.3\plugins\javascript-impl\languageService\eslint\bin\eslint-plugin.js:33:61) at ESLintPluginFactory.create (C:\Program Files\JetBrains\IntelliJ IDEA 2023.1.3\plugins\javascript-impl\languageService\eslint\bin\eslint-plugin-provider.js:25:34) at Interface.<anonymous> (C:\Program Files\JetBrains\IntelliJ IDEA 2023.1.3\plugins\javascript-impl\jsLanguageServicesImpl\js-language-service.js:82:52) at Interface.emit (node:events:513:28) at [_onLine] [as _onLine] (node:internal/readline/interface:422:12) Process finished with exit code -1
07-13

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值