本文介绍了JavaScript中的函数使用，包括函数的基本结构、参数、默认参数和封装示例。此外，还讲解了匿名函数、数组的求和、逻辑运算符的短路效果以及如何将秒数转换为时间格式。接着，文章探讨了对象的声明、属性、方法及遍历，数组对象的处理，并展示了如何利用内置对象Math进行随机数生成和四舍五入操作。最后，通过随机点名和猜数游戏案例，以及随机颜色生成，进一步阐述了JavaScript编程的应用。
函数
1.1函数的基本使用以及封装练习
function,是被设计为执行特定任务的代码块
function 函数名() {函数体}
函数命名规范
- 和变量命名基本一致
- 尽量小驼峰
- 前缀应该为动词
例如 function getName()
function sayHi()
| 动词 | 含义 |
|---|---|
| can | 判断是否课执行某个动作 |
| has | 判断是否含义某个值 |
| is | 判断是否为某个值 |
| get | 获取某个值 |
| set | 设置某个值 |
| load | 加载某些数据 |
之前使用过的alert(),pop(),sort()等都是封装过的函数
1.2函数的参数以及默认参数
<script>
function getSum(start = 0, end = 0) {//声名的时候是形参
let sum = 0
for (let i = start; i <= end; i++) {
sum += i
}
alert(sum)
}
let start = +prompt('起始:')
let end = +prompt('终止:')
getSum(start, end)//调用的时候是实参
</script>
参数默认值是undefined,为了更严谨声名的时候形参一般赋值为0,调用时的值优先级比0高,即只会在缺少实参的时候执行
1.3函数封装数组求和案例
<script>
function getArrSum(arr = []) {//此处使用同参数默认值
let sum = 0
for (let i = 0; i < mark.length; i++) {
sum += mark[i]
}
alert(sum)
}
let mark = []
let n = +prompt('请输入数字:')
for (let i = 0; i < n; i++) {
mark[i] = +prompt('请输入一个数字:')
}
getArrSum(mark)
</script>
1.4函数返回值return略
return细节
- 在函数体中使用return关键字能将内部的执行结果交给函数外部使用
- return后面代码不会再被换执行会立即结束当前函数,所以return后面的数据不要换行写
- return函数可以没有return,这种情况函数默认返回值为underfined
- return可以返回数组 return[数一,数二,]
1.5匿名函数
函数没有名字,无法直接使用,可以间接使用
-
函数表达式:将匿名函数赋值给一个变量,并且通过变量名称进行调用,将这个称为函数表达式
let fn = function() {//函数体} fn()//此处为调用 -
立即执行函数必须加分号";"
无需调用
最大作用防止变量污染
(function(x,y){
//代码
})();//最后一个小括号相当于调用函数里面放形参
//或者
(function name可加可不加名字(x,y){}())
1.6案例封装时间计算函数
<script>
let second = +prompt(`请输入秒数:`)
function getTime(t) {
let h = parseInt(t / 60 / 60 % 24)
let m = parseInt(t / 60 % 60)
let s = parseInt(t % 60)
h = h < 10 ? '0' + h : h
m = m < 10 ? '0' + m : m
s = s < 10 ? '0' + s : s
console.log(h, m, s)
return `转换完毕之后时${h}小时${m}分钟${s}秒`
}
let str = getTime(second)
document.write(str)
</script>
1.7逻辑中断
let age = 18
console.log(false && age++)//一假则假,&&后面的不执行
console.log(age)//18上一句不执行
console.log(true || age++)//一真则真||后面的不执行
console.log(11 || age++)//同上
console.log(11 && 22)//都是真,返回最后一个22
console.log(11 || 22)//第一个就是真返回第一个11
| 符号 | 短路条件 |
|---|---|
| && | 左边假就短路 |
| || | 左边真就短路 |
1.8 转化为布尔型
记忆: ’ ',0 ,undefined ,null ,flase , NaN转化为布尔值后都是false,其余则为真
使用Boolean()强转
对象
1.1简介
数组arr=[180,180,180]无法区别用对象可以更好区分
object:一种数据类型,可以理解为一种无序的数据集合(数组是有序的)
声名: let 对象名 = {}或者 let 对象名 = new Object()
let obj = {
uname: 'pink老师',
age: 18,
gender:'女'
}
console.log(obj)//就是上面的{uname:'pink老师',age:18,gender:'女'}
console.log(type(obj))//object
1.2对象的使用
对象本质是无序的数据集合,操作数据无非就是增 删 改 查语法
属性
let obj = {
uname: 'pink老师',
'my-age': 18,
gender:'女'
}
console.log(obj.gender)//查1
console.log(obj['my-age'])//查2因为'my-age'属性里面有'-'会被误以为减号['']中一定要加''
obj.gender = '男'//改
obj.hobby = '足球'//增
delete obj.gender//删
属性,方法
let obj = {
uname:'刘德华',
//方法
song: function (){console.log('冰雨')}
}
obj.song()
1.3对象的遍历
用for in 遍历
let obj = {
uname: 'pink老师',
'my-age': 18,
gender:'女'
}
for(let k in obj){
console.log(k)//这个得到的是属性名字符串类型'uname''age'
console.log(obj[k])//这个得到的才是值pink老师,18,男
}
1.4数组对象
let students = [
{ name: '小名', age: '14', gender: '男' },
{ name: '小红', age: '18', gender: '女' },
{ name: '小刚', age: '19', gender: '男' },
{ name: '小强', age: '17', gender: '女' }
]
for (let i = 0; i < students.length; i++) {
console.log(i)//0,1,2,3
console.log(students[i])//打印全部
console.log(students[i].name)//打印小名,小红,小刚,小强
}
渲染学生信息表
<!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>
<style>
table,
tr,
td,
th {
border: 1px solid #000;
border-collapse: collapse;
}
table td,
th {
height: 50px;
width: 60px;
text-align: center;
}
table {
margin: 0 auto;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
<script>
let students = [
{ name: '小名', age: '14', gender: '男', hometown: '河北省' },
{ name: '小红', age: '18', gender: '女', hometown: '河南省' },
{ name: '小刚', age: '19', gender: '男', hometown: '广东省' },
{ name: '小强', age: '17', gender: '女', hometown: '内蒙古自治区' }
]
for (let i = 0; i < students.length; i++) {
document.write(`
<tr>
<td>${students[i].name}</td>
<td>${students[i].age}</td>
<td>${students[i].gender}</td>
<td>${students[i].hometown}</td>
</tr>`)
}
</script>
</table>
</body>
</html>
1.5内置对象
- JavaScript内部提供的对象,包含各种属性和方法给开发者调用
- 例如document.write() console.log()
1.5.1内置对象–Math
用法
Math.round(-20.5)//-20
Math.round(-20.51)//-21
Math.round(20.5)//21
//随机数,可用于抽奖
//每次刷新结果都不一样
console.log(Math.random()*arr.length)//随机生成[0,10]
console.log(Math.floor(Math.floor()*(M-N+1))+N)//生成[M,N]
| 方法 | 解释 |
|---|---|
| random | 生成0-1之间的随机数(包括0不包括1) |
| ceil | 天花板:向上取 |
| floor | 地板:向下取整,但不可写字符串,parseInt(12px)可以把px去掉 |
| max | 找最大值可以多个数 |
| min | 找最小值可以多个数 |
| pow | 幂运算 |
| abs | 绝对值 |
| round | 四舍五入 |
1.5.2随机点名案例
<script>
let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
while (arr.length > 0) {
let random = Math.floor(Math.random() * arr.length)
alert(arr[random])
arr.splice(random, 1)
alert(arr)
}
</script>
1.5.3猜数案例
<script>
function randomInt(x, y) {
return Math.floor(Math.random() * (y - x + 1)) + x
}
let num = randomInt(1, 10)
while (true) {
let num1 = +prompt(`请输入一个数:`)
if (num1 > num) alert(`大了接着猜`)
else if (num1 < num) alert(`小了接着猜`)
else if (num1 == num) {
alert(`猜对了结束了`)
break
}
else { alert(`请按要求输入`) }
}
</script>
1.5.5随机颜色案例
<script>
let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
function getRandomColor(flag) {
if (flag) {
let str = '#'
for (let i = 0; i < 6; i++) {
let n = Math.floor(Math.random() * 17)
str += arr[n]
}
return str
}
else {
let r = Math.floor(Math.random() * 256)
let g = Math.floor(Math.random() * 256)
let b = Math.floor(Math.random() * 256)
return `rgb(${r},${g},${b})`
}
}
alert(getRandomColor(true))
alert(getRandomColor(false))
</script>
术语
| 术语 | 解释 | 举例 |
|---|---|---|
| 关键字 | 在JavaScript中有特殊意义的词汇 | let,var,function,if,else,switch,case,break |
| 保留字 | 在目前JavaScript中无意义,但未来可能具有特殊意义 | int,short,long,char |
| 标识符 | 变量名,函数名的另一种叫法 | 无 |
| 表达式 | 能产产生值的代码,一般配合运算符出现 | 10+3,age>=18 |
| 语句 | 一段可执行的代码 | if() for() |
1.1基本数据类型(简单数据类型)(值类型)和引用数据类型(复杂数据类型)(引用类型)
- 值类型:在存储变量中存储的是本身,因此叫做值类型
string,number,bollean,underfined,null
- 引用类型:在存储变量中存储的仅仅只是地址(引用),可以通过这个地址找到堆里面的值,因此叫做引用数据类型
通过new关键字创建的对象(系统对象,自定义对象),如Object,Array,Date等
1.2栈和堆
<script>
//传值
let num1 = 10
let num2 = num1
num2 = 20
console.log(num1)//10
//传址
let obj1 = {
age: 18
}
let obj2 = obj1
obj2.age = 20
console.log(obj1.age)//20
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dWlwg4ED-1686756369935)(…/…/…/…/AppData/Roaming/Typora/typora-user-images/image-20230513120647963.png)]
扫一扫
13万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
