2021-05-16

封装

函数：可以实现一定的功能

把可以实现一定功能的代码，封装成一个函数

声明函数:

1、字面量声明

书写格式： 关键字 标识符（函数名） 小括号 {代码块（函数体）}

​ function lpj () {代码块}

// 创建函数
function lpj(){
  console.log(`您当前余额为：1000元`);
}

调用函数（执行函数体）

书写格式： 函数名 小括号

lpj ()

// 调用函数
lpj();//您当前余额为：1000元

注：什么时候执行函数体，取决于什么时候调用

2、构造函数声明

书写格式：关键字 标识符 赋值符号 new Function();

let lpj = new Function();

// 创建构造函数
let f70 = new Function();
f70();
let f71 = new Function(
  console.log(123)
  );
  f71();//123
let f72 = new Function(
 "  console.log(`阿良`);"
);
f72();//阿良 

3、函数表达式（匿名函数表达式） 声明函数

书写格式：关键字 标识符 赋值符号 Function() {函数体}

let f75 = Function() {函数体}

// 函数表达式（匿名函数表达式）
let f75 = function (){
  console.log(`1234567890`);
}
  f75();//1234567890
console.log(f75.name);//f75

4、箭头函数

书写格式：(参数1,…参数n)=>{函数体}

1. 省略function关键字

2. 如果只有一个形参，可以省略小括号

3. 如果函数体只有一条语句，可以省略大括号

4. 如果函数体只有一条语句，并且需要返回这条语句的结果则省略return关键字

5. 不可以使用arguments[在讲解DOM时，讲解什么是this]

6. 不会把自己的this绑定到函数上[原因在讲解构造函数时讲解]

7. 不可以用作构造函数

//箭头函数
let f74 = a =>console.log(a);//1998
f74 (1998);//传递实参1998给箭头函数f74

let f75 = () =>console.log(3);//3
f75 ();//执行箭头函数f75

let f76 = x =>x + 2;//形参加2
let f77 = f76(10);//传递实参10给形参x，并且把f76返回结果赋值给f77
console.log(f77);//输出f77的值为12

let f78 = (a,b) =>{//声明箭头函数f78，形参a，b赋值传进来的实参
    let f79 = a + b;//声明一个变量f79赋值等于形参a+b的结果(此时a=1,b=2)
    return f79;//返回变量f79的值(此时f79=3)给箭头函数f78
}
console.log(f78(1,2));//最终f78的返回值就是变量f79的值(即：3)

5、随机函数Math.random() 获取0到1的数字，但不包含0

//随机生成范围内的数字
function getRandomNum(min, max) {
    min > max ? [min, max] = [max, min] : "";//最大值与最小值的位置
    return parseInt((max - min + 1) * Math.random() + min);//拿到一个随机数
}

6、回调函数

当一个函数A提供给函数B当参数，则A 就是回调函数

应用场景：

1.数组的排序sort(会改变原数组)

let f70 = [52,9,31,19,17,63];
// 升序:a - b
let arr1 = f70.sort((a,b) => a - b);
console.log(arr1);//[ 9, 17, 19, 31, 52, 63 ]
// 降序:b - a
let arr2 = f70.sort((a,b) => b - a);
console.log(arr2);//[ 63, 52, 31, 19, 17, 9 ]

2、数组的方法

一、方法every

判断数组中的每个值，是不是都满足需求

注：所有都满足返回true，有1个不满足，则返回false

let f70 = [52,9,31,19,17,63];
let state = f70.every(a => a%2 ==0);//a是每一个值，即判断每一个值是不是偶数，有一个不是，则返回false，全都是，则返回true
console.log(state);//false

二、方法some

判断数组中的每个值，是不是都满足需求

注：只要有1个满足返回true，都不满足，才会返回false

let f70 = [52,9,31,19,17,63];
state = f70.some(a => a%2 ==0);//a是每一个值，即判断每一个值是不是偶数，有一个是则返回true，全都不是，则返回false
console.log(state);//true

三、方法filter 过滤

返回满足条件的值

注：不会改变原数组

let f70 = [52,9,30,29,18,62];
let state = f70.filter(a => a%2 ==0);
console.log(state);//[ 52, 30, 18, 62 ]

四、方法map

执行箭头函数的需求，把最终的结果，以新数组的方式返回

注：不会改变原数组

let f70 = [52,9,30,29,18,62];
let state = f70.map(a => a%2 ==0);
console.log(state);//[ true, false, true, false, true, true ]
state = f70.map(a => a-1);
console.log(state);//[ 51, 8, 29, 28, 17, 61 ]

五、方法forEach

执行箭头函数的操作，但是没有返回值

注：不会改变原数组

let f70 = [52,9,30,29,18,62];
state = f70.forEach(a => a-1);
console.log(state);//undefined
state = f70.forEach(a => {console.log(a-1);});//51,8,29,28,17,61

7、立即执行函数

IIFE: Immediately Invoked Function Eexpression

创建即调用，调用即销毁(不占用内存空间)

适用场景：关于一次性变量（例如：时间）

(function f70(){console.log("阿良");})();//阿良

函数三要素:函数名、参数、返回值

1函数名

创建函数时自定义的名称

查看函数名：函数名.name

2参数

形参（形式参数）

在函数声明的时候创建的参数

实参（实际参数）

在调用函数的时候传入的实际参数

注： 形参与实参名可以不同

形参的个数比实参多，多的形参数为undefined

实参的个数比形参多，多的实参数不会使用

//一
function aliang3(cont1,cont2,cont3,cont4){
console.log(`参数1:${cont1}`);
console.log(`参数2:${cont2}`);
console.log(`参数3:${cont3}`);
console.log(`参数4:${cont4}`);
}
aliang3("阿良","天才",18,'优秀');
//二
let inputName = "阿良";
let inputAge = 23;
let inputGender = "男";
let i = "a32s";
f70(inputName, inputAge,inputGender);//没有i
function f70(name, age, gender,i) {
  console.log(`你好，我叫${name}//阿良
  我今年${age}岁//23
  我是${gender}生
  我叫${
  i}`);//undefined
}

不定参数

书写格式: …形参

1.接收多的实参内容（以数组形式）

2.只能写在最后一个形参位置（其他位置，会报错）

function f70(a,b,...c){
  console.log(a,b,c);//1 2 [ 3, 4, 5, 6 ]
}
f70(1,2,3,4,5,6)

3返回值：

函数100%有返回值

若写了return，返回值就是return后的内容

若没写return，则返回undefined

注：renturn具备终止函数的功能

若需要返回多个值，需要return后面的内容是引用数据类型

function f70(){
  console.log(`阿良`);//阿良
  return ["al",1,null];
}
console.log(f70());//[ 'al', 1, null ]

函数的属性与方法

属性

1、函数名.arguments

arguments是函数的属性，返回所有的实参内容（键值对形式的数组）

可以类似于数组的使用方式进行值的获取（通过下标）

但此方法返回值不是数组而是类数组，不可使用数组的方法

2、函数名.length

**length**在函数中，返回的是函数形参的个数

但不统计设置默认值的形参

若第一个形参就设置了默认值，则返回0

当实参的值是undefined，相对应的形参又设置了默认值，则形参的值是默认值，而不是undefined

两者返回值如下：

//形参不设置默认
function aliang(num1, num2, num3) {
    let rest = aliang.arguments[2];
    console.log(rest);//实参内容-----9
    console.log(aliang.length);//形参个数-----3
}
aliang(3,6,9);

//形参设置默认值
function aliang(num1=2, num2, num3=8) {
    console.log(aliang.length);//形参个数-----0
}
aliang(1,3,5);