4. 数组
创建数组
//方法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)
操作数组
修改数组
// 修改数组
let arr = ['刘振','刘振','陈欣','陈欣']
for(let i = 0; i < arr.length; i++){
arr[i] = arr[i] + '老师'
}
console.log(arr)
新增数组
数组.push()方法---将内容加到数组的末尾,并返回新数组长度
let arr = [1,2,3]
arr.push(4,5)
console.log(arr)
数组.unshift()方法---将内容加到数组的开头,并返回新数组长度
数组筛选
// 数组筛选
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)
删除数组
数组.pop()---从数组中删除最后一个元素,并返回该元素的值
数组.shift()---从数组中删除第一个元素,并返回该元素的值
数组.splice()---删除指定元素
语法:arr.splice(起始位置-从0开始,删除几个元素)
数组排序
数组.sort()---排序
数组.reverse()---反转
数组.indexOf()---查找指定元素
数组.forEach()---遍历
数组.map()---把每个元素都转换成字符串
数组.reduce()---求和
数组.filter()---过滤
数组.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. 函数返回值
return能将内部执行结果交给函数外部使用
return后面的代码不会执行,会立即结束当前函数,所以return后面的数据不要换行写
return函数可以没有return,这时默认返回undefined
return返回多个数据:return [值1.值2],采用数组的形式
//两数之中最大值
function getMax(x, y) {
return x > y ? x : y
}
let num = getMax(20,30)
console.log(num)
3. 函数细节
函数名相同,后面会覆盖前面的结果
实参多于形参,多余的参数不参与运算
实参少于形参,剩余的形参为undefined,NaN错误
4. 作用域
全局作用域:作用于整个文件
局部作用域:作用于局部,如函数内部等
函数内部变量直接赋值,不声明,可以看作全局变量
函数的形参也可以看作局部变量
5. 匿名函数(没有函数名)
函数表达式
//函数表达式
let fn = function (x, y) {
console.log(x + y)
}
fn()
函数表达式与具名函数(有函数名的函数)的区别===具名函数的声明可以写在函数之前,函数表达式不可以
立即执行函数(防止变量污染)
// 立即执行函数
(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