1. 函数的概念
1.1 什么是函数
函数具有某种特定功能的代码块。
函数其实本质也是一种数据，属于对象数据类型。
1.2 为什么要有函数
1）解决代码的冗余问题，形成代码复用。
2）可以把整个代码项目，通过函数模块化。
3） 封装代码，让函数内部的代码对外部不可见。
2. 函数的组成
函数的声明：
函数的调用：
函数由如下部分组成：
函数名，命名规则同变量名一致。
函数体， 函数的内容，代码块。
参数， 分为形参和实参。
返回值， 函数调用表达式的结果
3 定义函数的三种方式
function关键字方式/字面量方式
function 函数名() {
}
function 函数名(参数) {
}
表达式方式
var 函数名 = function(){
}
var 函数名 = function(参数) {
}
Function构造函数方式
var 函数名 = new Function('函数体');
var 函数名 = new Function('参数', '函数体')
4 函数调用
1) 在函数名后面加上 () 就是对函数的调用，函数内的代码会执行。
2) 函数名后面不加() 不会调用函数，函数内的代码也不会执行；函数名本质上是个变量名，通过函数名可以引用到函数本身。
5 函数的返回值
5.1 返回值
1）函数名() 被称之为函数调用表达式， 表表达式的值就是函数的返回值。
2）在函数体内，return 右边的表达式（或变量、直接量）便是函数的返回值。
3）函数体内没写 return 或者 return 的右边是空的，默认默认会返回 undefined。
4）return 除了设置返回值外，还可以结束函数的执行，return 之后的代码不会执行。
5.2 那些函数需要些返回值
什么样的函数需要写返回值？
如果函数的作用是进行某种计算，得到的计算结果最后以返回值的形式返回。
什么样的函数不需要返回值？
函数的功能是实现某个具体的操作（界面操作），无需返回值。
6 函数的参数
6.1 形参和实参
形参： 声明函数的时候，给的参数， 类似于变量名；在声明函数的时候，参数是没有值。
实参：调用函数是给的参数； 实参会按照顺序赋值给形参。
6.2 形参和实参的数量问题
正常情况下，实参数量应该等于形参数量。
如果实参数量大于形参数量， 多出来的实参，将被忽略。
如果实参数量小于形参数量， 有的形参没有对应的实参，取默认值 undefined。
6.3 形参的默认值
JS函数允许形参有默认值，有默认值的形参，在调用函数的时候，可以没有与之对应的实参！
如何实现形参的默认值？
function demo(a, b=默认值) { }
注意： 有默认值的形参一定要放在后面！
es6才可以这么写，那问题来了，如果es6前应该怎么去设置默认值
6.4 arguments
arguments 只能在函数内使用。arguments 是一个类数组对象，具有数组的一些特性。arguments可以获取所有的实参，所以我们想获取实参的话有两种方式：①用形参；②使用arguments。用途：如计算所有参数和，取参数中的最大值，取参数中的最小值，求所有参数平均数。
7 函数的嵌套
函数体内是可以再嵌套函数的。
8 自调用函数
IIFE(Immediately Invoked Function Expression)8.1 匿名函数没有名字的函数称之为 匿名函数。匿名函数声明完之后要立即调用，否则没有意义。
8.2 自调用函数
函数声明完立即调用，称之为自调用函数，也叫立即调用函数，英文简称 IIFE，英文全称 Immediately Invoked Function Expression。注意：两个连续的自调用函数，之间必须加分号，告诉浏览器是不同的函数，否则会有语法错误。或者，在后面的自调用函数前加 ! 等没有副作用的一元运算符。
练习
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数的练习</title>
</head>
<body>
<button id="red">红色</button>
<button id="green">绿色</button>
<button id="blue">蓝色</button>
<button id="pink">粉色</button>
<script>
/*
* 当点击不同的按钮的时候 让页面加载相应的颜色
* 改变屏幕的颜色 就是控制body的背景颜色
*/
varoBody=document.getElementsByTagName("body")[0];
varoRed=document.getElementById("red");
varoGreen=document.getElementById("green");
varoBlue=document.getElementById("blue");
varoPink=document.getElementById("pink");
functionchangeColor(col){
oBody.style.backgroundColor=col;
}
oRed.onclick=function(){
changeColor("red");
}
oGreen.onclick=function(){
changeColor("green");
}
oBlue.onclick=function(){
changeColor("blue");
}
oPink.onclick=function(){
changeColor("pink");
}
</script>
</body>
</html>
9 箭头函数箭头函数不能使用arguments
varfn=function(a,b){
returna+b
}
varfn=(a,b)=>{
returna+b;
}
// 如果执行语句只有一条，return 也可以省去
varfn=(a,b)=>a+b;
// 如果参数只有一个，小括号也可以省去
varfn=a=>a+2;
fn(3)
caller 和 callee
functionouter(){
console.log(outer.caller)//当前这个函数的宿主环境是全局，所以是null
inner()
}
functioninner(){
//这里指的是当前这个函数的宿主函数
console.log(inner.caller)//outer函数
}
outer()
10 选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul,ol{
list-style: none;
}
.main{
width:500px;
margin:0 auto;
}
ul>li{
width:100px;
height:40px;
line-height: 40px;
text-align:center;
border:1px solid #333;
margin-right:10px;
display:inline-block;
position:relative;
top:1px;
}
.main>div{
height:300px;
line-height: 300px;
border:1px solid #333;
text-align:center;
display:none;
}
.main li.current{
background:darkcyan;
border-bottom-color:darkcyan;
}
.main div.current{
background:darkcyan;
display:block;
}
</style>
</head>
<body>
<div class="main" id="main">
<ul>
<li class="current">音乐</li>
<li>电视</li>
<li>综艺</li>
</ul>
<div class="current">音乐内容</div>
<div>电视内容</div>
<div>综艺内容</div>
</div>
</body>
</html>
<script>
var main=document.getElementById("main");
var lis=main.getElementsByTagName("li");
var divs=main.getElementsByTagName("div");
for(var i=0;i<lis.length;i++){
lis[i].index=i;
lis[i].onclick=function(){
for(var i=0;i<lis.length;i++){
lis[i].className="";
divs[i].className="";
}
var index=this.index;
lis[index].className="current";
divs[index].className="current";
}
}
</script>
数组
1 什么是数组
1) 数组是值的有序集合。
2) 每个值叫做一个元素。
3) 每个元素在数组中有一个位置, 以数字表示,称为索引 (有时也称为下标)。
4) 数组的元素可以是任何类型。
5) 数组索引从 0 开始,数组最大能容纳 4294967295 个元素。
2 创建数组
2.1 使用数组直接量
3 读写数组
元素使用操作符 [] 来读写数组的每一个元素, []中是数组的索引。
// 读取数组中元素的值
nameList[12];
// 给数组中的元素赋值
nameList[2] = 100;
数组可以通过 length 属性获取数组的长度，也就是数组中元素的个数。
nameList.length; // 获取数组 nameList 的长度
如果数组[大于元素个数的索引]
var ary=[1,2,3];
ary[3]=200;//相当于新增一个
ary[5]=300;
console.log(ary);//[1, 2, 3, 200, empty, 300]
console.log(ary[4]);//undefined
数组length属性的特别之处（他不是只读的，通过修改length，可以从数组末尾删除或添加元素）
let colors=['red','blue','green'];
colors.length=2;
console.log(colors[2])//undefined
ary.length=7;//新增的元素都用undefined填充
ary[ary.length]='black';//数组最后添加一个
4 遍历数组（迭代）
// for 循环遍历
for (var i = 0; i < arr.length; i ++) {
arr[i]
}
//for in 循环
for (var i in arr) {
arr[i]
}
6 多维数组
// 创建多维数组
var cityList = [
['广州', '深圳', '佛山', '东莞', '惠州'],
['南京', '苏州', '徐州', '无锡', '南通'],
['济南', '青岛', '烟台', '潍坊', '淄博'],
['杭州', '宁波', '温州', '绍兴', '湖州']
];
// 多维数组取值
cityList[2][1];
7 字符串具有数组的特性
字符串可以通过 [] 取到指定的字符，只能取值无法修改。
2）字符串属性 .length 可获取字符串的长度（字符的个数）。
3）字符串可以向数组那样遍历。8 数组方法1）
push：●作用：向数组末尾追加某一项●参数：添加的具体项，可以是一项,也可以是多项●返回值：新数组的长度●是否改变原数组：改变
var colors = ['red', 'pink'];
var res = colors.push('blue');
// 原数组
console.log(colors);//['red', 'pink', 'blue']
// 返回值
console.log(res);//3
2）pop：●作用：删除数组的最后一项●参数：无●返回值：删除的项●是否改变原数组：改变
var colors = ['red', 'pink'];
var res = colors.pop();
// 原数组
console.log(colors);//['red']
// 返回值
console.log(res);//pink
3）shift：●作用：删除数组的第一项●参数：无●返回值：删除的项●是否改变原数组：改变
var colors = ['red', 'pink'];
var res = colors.shift();
// 原数组
console.log(colors);//['pink']
// 返回值
console.log(res);//red
4）unshift：●作用：向数组的开头添加内容●参数：添加的内容●返回值：新数组的长度●是否改变原数组：改变
var colors = ['red', 'pink'];
var res = colors.unshift('blue', 'green');
// 原数组
console.log(colors);//['blue', 'green', 'red', 'pink']
// 返回值
console.log(res);//4
5)reverse 倒序●作用：把数组元素反向排列●参数：无●返回值：返回值是排序后的新数组●是否改变原数组：改变
var ary=[1,2,3];
var res=ary.reverse();
console.log(res);//[3,2,1];
console.log(ary);//[3,2,1];
6) sort 排序●作用：把数组进行排序●参数：无或者是一个函数●返回值：排序后的新数组●是否改变原数组：改变
//----------------------不传参的时候
//=====>10 以内的可以排
var ary=[3,2,1,6,8];
ary.sort();
[1, 2, 3, 6, 8]
//=====> 超出10
var ary2=[1,21,5,33,26]
ary2.sort();
[1, 21, 26, 33, 5];
//---------------------------传参的时候
var ary2=[1,21,5,33,26]
ary2.sort(function(a,b){
return a-b; // 升序
return b-a; //降序
})
7）splice（增删改一体化）
●作用：删除/新增/修改●参数：splice（n,m,...x）不能传负数●返回值：删除的元素●是否改变原数组：是
@1、删除
删除需要给splice传递两个参数第一个参数：要删除的第一个元素的位置第二个参数：要删除的元素数量
var nums = [1, 2, 3, 4, 5, 6];
var res = nums.splice(0, 2);
console.log(nums);// [3, 4, 5, 6]
console.log(res);// [1,2]
@2、新增
新增需要传递3个参数第一个参数：开始的位置第二个参数：0（要删除的元素数量）第三个参数: 要插入的元素（任意个）
var nums = [1, 2, 3, 4, 5, 6];
var res = nums.splice(3, 0, 7, 8, 9);
console.log(nums);//[1, 2, 3, 7, 8, 9, 4, 5, 6]
console.log(res);// []
@3、修改
修改也需要传递3个参数第一个参数：开始的位置第二个参数：要删除的元素数量第三个参数: 要插入的元素（任意个）注意：删除的个数和新增的个数可以不一致
var nums = [1, 2, 3, 4, 5, 6];
var res = nums.splice(0, 3, 7, 8, 9);
console.log(nums);//[7, 8, 9, 4, 5, 6]
console.log(res);// [1, 2, 3]
小节
思考一：删除数组最后一项，你有几种方法？●ary.pop()●ary.splice(ary.length-1,1);●ary.length--
思考二：在数组末尾追加新内容，你有几种方法？●ary.push(x);●ary.splice(ary.length，0，x)；
●ary[ary.length]=x;
8）slice
●作用：从原有的数组中选中特定的内容●参数：可以有一个或者两个●返回值：返回值是一个数组，返回的每一项是复制的项●是否改变原数组：不改变
@1、如果只有一个参数，slice()会返回该索引到数组末尾的所有元素
var nums = [1, 2, 3, 4, 5, 6];
var res = nums.slice(1);
console.log(nums);//[1, 2, 3, 4, 5, 6]
console.log(res);// [2, 3, 4, 5, 6]
@2、如果有两个参数，slice()返回从开始索引到结束索引对应的所有元素但是不包含结束索引nums.slice(n,m),包含n，不包含m
var nums = [1, 2, 3, 4, 5, 6];
var res = nums.slice(1, 5);
console.log(nums);//[1, 2, 3, 4, 5, 6]
console.log(res);// [2, 3, 4, 5]
@3、如果slice()的参数有负值，那么就以数组长度加上这个负数来确定位置，案例如下长度为6，slice（-5，-1）就相当于slice(1，5)
var nums = [1, 2, 3, 4, 5, 6];
var res = nums.slice(-5, -1);
console.log(nums);//[1, 2, 3, 4, 5, 6]
console.log(res);// [2, 3, 4, 5]
@4、如果结束位置小于开始位置，则返回空数组
var nums = [1, 2, 3, 4, 5, 6];
var res = nums.slice(-1, -5);
console.log(nums);//[1, 2, 3, 4, 5, 6]
console.log(res);// []
9）concat
●作用：实现多个数组或者值的拼接●参数：数组或者值●返回值：返回值是拼接后的新数组●是否改变原数组：不改变
var ary1 = [1, 2, 3];
var ary2 = [4, 5, 6];
var res = ary1.concat(ary2, "珠峰", "同学");
console.log(ary1);//[1, 2, 3]
console.log(res);//[1, 2, 3, 4, 5, 6, '珠峰', '同学']
10）toString
●作用：可以把一个数组转换为字符串●参数：无●返回值：返回值是转换后的字符串●是否改变原数组：不改变●数组中每一个元素转为字符串，然后是使用逗号连接输出显示。
var ary1 = [1, { a: 1 }, null, undefined, 3];
var res = ary1.toString();
console.log(ary1);//[1, {a:1},null, undefined, 3]
console.log(res)//1,[object Object],,,3
alert方法最终体现的是字符串，会调用toString()，所以alert([1,2])结果是1，2
11）join
●作用：把数组通过指定的连接符，转换为字符串●参数：连接符●返回值：返回值是转换后的字符串●是否改变原数组：不改变
var ary1 = [1, 2, undefined, 3, { a: 1 }];
var res = ary1.join("|");
console.log(ary1);//[1, 2, undefined, 3, { a: 1 }]
console.log(res)// 1|2||3|[object Object]
eval(res) //==> eval 执行计算
12)indexOf/ lastIndexOf
不兼容ie6-ie8；●作用：获取某项在数组中(首次出现/最后出现的) 索引（也可以用来是否包含某项）●参数：（n,m）●参数：○ n:检测的项○m:如果是indexOf 的话，就是从索引m开始检索。如果是lastIndexOf 的话，就是从索引m停止检索●返回值：-1或者具体的索引值●是否改变原数组：不改变
+作用：检测数组中的某项在数组中（首次indexOf/最后lastIndexOf）出现的位置
varary=[1,2,3,4,1,55,1];
//检测1这个项目在数组ary 中首次出现的位置
ary.indexOf(1);//0
//从索引2开始，检测1这个项目在数组中首次出现的位置
ary.indexOf(1,2);//4
// 检测1这个项目在数组中最后一次出现的索引
ary.lastIndexOf(1);
// 检测1这个项目在数组中最后出现的索引，在索引5的位置停止检测
ary.lastIndexOf(1,5)
//如果此项在数组中没有出现，返回值就是-1
ary.indexOf(66)===>-1
13）includes
●作用：检测数组中是否包含某一项●参数：具体项●返回值：布尔值●是否修改原数组：否
数组迭代方法
迭代、循环、遍历
14）forEach
●作用：遍历数组中的每一项●参数：函数●返回值：undefined●是否修改原数组：否●foreach方法 用来遍历数组的每一项 forEach方法没有返回值
// 使用forEach迭代数组，计算数组元素的和
//一个家庭的年龄 过年了 每个人长1岁
//方法1 创建一个新数组
varuserAages=[19,21,18,34,32,25,45];
varnewUserAges=[];
userAages.forEach(function(item,index,array){
newUserAges[index]=item+1;
})
console.log(newUserAges);
//方法2 直接改变原来数组
varre=userAages.forEach(function(item,index,array){
userAages[index]=item+1;
})
console.log(userAages);
console.log(re);
15）map(结束)
●作用：把一个数组可以映射成一个新的数组●参数：函数●返回值：映射后的新数组●是否修改原数组：否
// 有一个数组装着2021年所有人的年龄，2022年以后，每个人的年龄都增加1岁
varallAge=[19,15,,2,30,32,43,45];
varage2020=allAge.map(function(item,index,arr){
returnitem+1;
})
console.log(age2020);
