js基础-函数+对象
函数
一、函数的作用
函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。
二、函数的使用
2.1函数的声明与调用
//函数的声明语法
function 函数名（）{
函数体
}
/*===============*/
function getName() {
document.write('小李子')
}
//函数调用
getName()
2.2函数的命名规范
- 和变量命名基本一致
- 尽量小驼峰式命名法
- 前缀应该为动词
- 命名建议：常用动词约定
| 动词 | 含义 |
|---|---|
| can | 判断是否可执行某个动作 |
| has | 判断是否含义某个值 |
| is | 判断是否为某个值 |
| get | 获取某个值 |
| set | 设置某个值 |
| load | 加载某些数据 |
三、函数传参
参数列表
-
传入数据列表
-
声明这个函数需要传入几个数据
-
多个数据用逗号隔开
//声明语法
function 函数名 （参数1，参2，....）
//例
function calsSum(num1,num2){
console.log(num1+num2)
}
calsSum(200,100)
四、函数返回值
当调用某个函数，这个函数会返回一个结果出来，这就是有返回值的函数，需要根据需求设定
4.1 return返回值
当函数需要返回数据出去时，用return关键字
//语法
return 数据
/*===================*/
function getmax(num1,num2){
if(num1>num2){
return num1
}
else{
return num2
}
}
let A=getmax(100,150)
console.log(A)
let b=getmax(500,150)
alert(b)
let c=getmax(300,150)
document.write(c)
注意：
- 在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
- 函数内部只能运行到 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写
- return会立即结束当前函数
- 函数可以没有 return，这种情况函数默认返回值为 undefined
五、作用域
5.1作用域的概述
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
作用域分为全局作用域、局部作用域两类
- 全局作用域：作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件；
- 局部作用域：作用于函数内的代码环境或作用于由 { } 包括,if语句和for语句里面的{ }等 ，就是局部作用域。
- 变量访问原则-----作用域链,就近原则（根据函数的声明定义来逐级就近判断）
<script>
// script标签内的运行环境就是全局作用域
let num = 100; // 全局作用域
function getMax() {
// 这个区域内就不属于全局作用域
// 局部作用域 或者 也叫做 函数作用域
let num2 = 200;
}
for (let index = 0; index < 4; index++) {
// 块级作用域
}
while (true) {
// 块级作用域
}
if (true) {
// 块级作用域
}
</script>
- 如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐
- 函数内部的形参可以看做是局部变量，所以形参相当于函数内部定义的局部变量，只有在函数内部可以使用。
六.匿名函数
<script>
// 函数按照有没有名字 分成两种
// 有名字 具名函数
// 没有名字 匿名函数
// 具名函数 函数名称 func1
// function func1() {
// }
// 匿名函数 = function () {}; 匿名函数 了解即可
// let func2 = function () {}; 叫做 函数表达式
// 表达式 可以表示结果的一段代码 函数表达式 了解
let func2 = function () {
console.log("123");
};
// 调用
func2();
</script>
七、自启动函数
<script>
/*
自执行函数 = 匿名函数一起出现 通用的功能是 防止变量污染
函数在定义的同时 直接就执行了
用在哪里呢
适合做一次性的任务- 不希望这个函数可以得到复用！！！
函数包装多段代码 让程序比较简洁
1 页面打开时候
1 设置 页面的标题 = 月薪过万
2 设置 页面的背景颜色 = 黄色
*/
// 匿名函数
// function () {
// // 设置 页面的标题 = 月薪过万
// document.title = '月薪过万';
// // 设置 页面的背景颜色 = 黄色
// document.body.style.backgroundColor = 'yellow';
// }
// let msg = 123;
// // 自执行函数
// (function () {
// let msg = 123;
// // 设置 页面的标题 = 月薪过万
// document.title = '月薪过万';
// // 设置 页面的背景颜色 = 黄色
// document.body.style.backgroundColor = 'yellow';
// })();
// console.log(msg);
</script>
对象
一、什么事对象
对象（object）是JavaScript里的一种数据类型，是一种无序的数据集合。
二、对象的使用
1.对象的声明
let 属性名 = {
属性名:属性值,
方法名:函数
}
2.对象的属性
let person = {
uname: 'pipi',
age:18,
sex: '女',
}
3.属性的访问
<script>
let goods = {
name: '小米11',
price: '3299元',
size: '大',
}
//方法一 对象名.属性名
console.log(goods.name);
console.log(goods.price);
console.log(goods.size);
//方法二 对象名["属性名"] 需要加引号
console.log(goods["name"]);
console.log(goods["price"]);
console.log(goods["size"]);
document.write(`名称：${goods.name}，价格：${goods.price}，型号：${goods.size}`)
</script>
4.对象中的方法及访问
<script>
let person = {
name: 'liya',
sayHi:function (msg){
document.write(msg);
}
}
person.sayHi('你好<br>')
</script>
5.对象的增删改
<script>
let person = {
userName: 'liya',
height: 180,
}
person.userName = 'pipi'; //修改
person.age = 18; //新增
delete person.height; //删除
console.log(person);
//新增
person.sayHi = function(){
document.write('新增的函数');
}
person.sayHi()
</script>
6.对象的遍历
<script>
let person = {
userName: 'liya',
age: 18,
height:180,
}
for (let k in person) {
console.log(k);//打印属性名
console.log(person[k]); //打印属性值
console.log(`属性名${k} 属性值${person[k]}`)
}
</script>
记住：k是获得对象的属性名，属性名[k]是获得属性值
案例：
let students = [
{name: '小明', age: 18, gender: '男', hometown: '河北省'},
{name: '小红', age: 19, gender: '女', hometown: '河南省'},
{name: '小刚', age: 17, gender: '男', hometown: '山西省'},
{name: '小丽', age: 18, gender: '女', hometown: '山东省'}
]
需求：根据以上数据渲染生成表格
<!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{
width: 600px;
margin: 50px auto;
border-collapse: collapse;
text-align: center
}
caption{
font-weight: 700;
}
thead{
background-color: #f6f6f6;
}
td{
height: 30px;
}
</style>
</head>
<body>
<script>
let students = [
{ name: '小明', age: 18, gender: '男', hometown: '河北省'},
{ name: '小红', age: 19, gender: '女', hometown: '河南省' },
{ name: '小刚', age: 17, gender: '男', hometown: '山西省' },
{ name: '小丽', age: 18, gender: '女', hometown: '山东省' }
]
let htmlTable = `<table border="1">
<caption>
学生列表
</caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
</thead>
<tbody>`
// 遍历数组，获取其中的每一个对象
for (let i = 0; i < students.length; i++) {
htmlTable += `<tr>
<td>${i + 1}</td>`
//遍历对象，获取每一个元素
for (let k in students[i]) {
htmlTable += `<td>${students[i][k]}</td>`
}
htmlTable += `</tr>`
}
htmlTable += `</tbody>
</table>`
document.write(htmlTable)
</script>
</body>
</html>
三、内置对象
1.什么是内置对象
JavaScript内部提供的对象，包含各种属性和方法给开发者调用，如使用过的document.write()；console.log()。
2.内置对象Math
Math对象是JavaScript提供的一个“数学高手”对象
功能：
- random：生成0-1之间的随机数（包含0不包括1）
- ceil：向上取整
- floor：向下取整
- max：找最大数
- min：找最小数
- pow：幂运算
- abs：绝对值
- round：四舍五入
<script>
console.log(Math.random()) //随机值
console.log(Math.ceil(0.2)) //向上取整
console.log(Math.floor(0.2)) //向下取整
console.log(Math.max(0,2,23,76,8,9)) //最大值
console.log(Math.min(1,2,67,87)) //最小值
console.log(Math.pow(2,3)) //幂运算 2的三次方
console.log(Math.abs(-3)) //绝对值
console.log(Math.round(0.6)) //四舍五入
</script>
3.练习
练习1.生成0-10的随机数
<script>
console.log(Math.round(Math.random()*10)) //0-10取随机数
</script>
练习2：生成5-10的随机数
<script>
console.log(Math.round(Math.random()*5+5)) //5-10取随机数
</script>
练习3：生成N-M的随机数
<script>
console.log(Math.round(Math.random()*(M-N)+N)) //N-M取随机数
</script>
根据以上三个练习可以写出一个求随机数的函数
<script>
function getRandom(min,max){
return Math.round(Math.random()*(max-min)+min);
}
console.log(getRandom(0,10)); //0-10取随机数
console.log(getRandom(5,10)); //5-10取随机数
</script>
4.案例
案例1:随机点名系统
需求：请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中
分析：
①：利用随机函数随机生成一个数字作为索引号
②： 数组[随机数] 生成到页面中
<script>
let arr = ['赵云', '关羽', '张飞', '黄忠', '马超', '刘备', '曹操'];
document.write(arr[Math.round(Math.random()*arr.length-1)]);
</script>
案例2：随机点名系统改进
需求：请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中，但是不允许重复显示
分析：
①：利用随机函数随机生成一个数字作为索引号
②：数组[随机数] 生成到页面中
③：数组中删除刚才抽中的索引号
<script>
let arr = ['赵云', '关羽', '张飞', '黄忠', '马超', '刘备', '曹操'];
function getRandom(min,max){
return Math.round(Math.random()*(max-min)+min);
}
for(let i = 0; i < 7; i++){
let index = getRandom(0,arr.length-1)
document.write(arr[index]);
arr.splice(index,1)
}
</script>
案例3：猜数字游戏
需求：程序随机生成 1~10 之间的一个数字，用户输入一个数字
分析：
①：利用随机数生成一个数字
②：需要一直猜，所以需要不断的循环
③：因为条件是结果猜对了，就是判断条件退出，用while循环合适
④：内部判断可以用多分支语句
<script>
let num1 = Math.round(Math.random()*9+1);
//设置一个死循环
while(true){
let num2 = +prompt('输入你要猜的数字');
if(num2 > num1){
alert('猜大了，继续猜');
}else if(num2 < num1){
alert('猜小了，继续猜');
}else{
alert('恭喜你，猜对了' + num1);
break; //打断循环
}
}
</script>
