赞过我的同学，今天写的程序都没有BUG。
思维导图
[不可不知的JS函数知识]
|
|—— 关于函数的定义和作用
|—— [函数的定义和作用] （ES6前后的三种定义方法）
|—— [匿名函数的定义和作用]
|—— [箭头函数]
|
|—— 关于函数的参数
|—— [argument的理解]
|—— [默认参数的设置方式]
|
|—— 关于函数的作用于
|—— [作用域、作用域链、预解析]
|
|—— 关于函数的执行
|—— [递归函数]
函数的作用
函数是专门用来封装代码的。
不使用函数的话代码会过于冗杂，同时需求变更时要修改的地方会很多。
函数的定义
ES6之前：
还可以直接把一个函数保存在变量中，可以作为函数的参数和返回值，同时将来可以直接用变量名称（）；的方式执行
function 函数名称(形参列表){
需要封装的代码;
}
let 函数名称 = function(形参列表){
需要封装的代码;
}
ES6之后：
为了简化函数的定义，ES6中引入了箭头函数
let 函数名称 = (形参列表) =>{
需要封装的代码;
}
注意点
函数的命名要求
命名函数最好用驼峰命名 toLeft 小写单词 首字母大写单词…
关于函数的类型说明
js中函数参数可以不需要指定类型 也不需要确定函数的返回值类型，所以在函数名前加类型名。
函数如果没有通过return返回值，默认会返回undefined
每一个定义的全局函数都会包含在Window对象中
say();===window.say();
匿名函数
匿名函数就是没有名称的函数
扫描二维码关注公众号，回复： 12467436 查看本文章
// 匿名函数
function(形参) {
封装的代码
}
(形参)=>{
封装的代码
}
匿名函数的注意点
匿名函数不能够只定义不使用
匿名函数的应用场景
- 作为其他函数的参数
- 作为其他函数的返回值
- 作为一个立即执行的函数
重点：如果想让匿名函数立即执行, 那么必须使用()将函定义包裹起来保证不解析错误,再用();去执行。
// 3.1作为其他函数的参数
function test(fn) {
// let fn = say;
fn();
}
test(function () {
console.log("hello world");
});
test(); //输出hello world；
// 3.2作为其他函数的返回值
function test() {
return function () {
console.log("hello world");
};
}
let fn = test(); // 相当于let fn = say;
fn(); //输出hello world；
// 3.3作为一个立即执行的函数
(function () {
console.log("hello world");
})();
什么是箭头函数?
箭头函数是ES6中新增的一种定义函数的格式
目的: 就是为了简化定义函数的代码
类似：
let arr = new Array();
let arr = [];
//从前：
function 函数名称(形参列表){
需要封装的代码;
}
let 函数名称 = function(形参列表){
需要封装的代码;
}
//现在
let 函数名称 = (形参列表)=>{
需要封装的代码;
}
箭头函数的注意点
- 在箭头函数中如果只有一个形参, 那么()可以省略
- 在箭头函数中如果{}中只有一句代码, 那么{}也可以省略
// function say(name) {
// console.log("hello " + name);
// }
// let say = name => {
// console.log("hello " + name);
// }
let say = name => console.log("hello " + name);
say("it666");
arguments的作用
保存所有传递给函数的实参,
是一个对象，但每一个实参对应一个数字索引，可以像使用数组那样找到参数，类似于伪数组
function getSum() {
// 注意点: 每个函数中都有一个叫做arguments的东东
// arguments其实是一个伪数组
// console.log(arguments);
// console.log(arguments[0]);
// console.log(arguments[1]);
// console.log(arguments[2])
let sum = 0;
for (let i = 0; i < arguments.length; i++){
let num = arguments[i];
// console.log(num); // 10 20 30
// sum = 0 + 10; sum = 10;
// sum = 10 + 20; sum = 30;
// sum = 30 + 30; sum = 60;
sum += num; // sum = sum + num;
}
return sum;
}
let res = getSum(10, 20, 30, 40);
函数的默认值
形参默认值就是当设置了形参但是没有实参时就可以直接使用这个值
在ES6之前可以通过逻辑运算符来指定形参的默认值
格式：条件A||条件B
function print(a,b)
{
a=a||"a是undefined就是输出我";
b=b||"b是undefined就是输出我";
//a=a||"a是undefined就是输出我";
//相当于a=(a||"str")
//如果a没有被传参那就会默认为undefined，即为0
console.log(a,b);
}
print();
// 输出："a是undefined就是输出我"，"b是undefined就是输出我"
print(123,'abc');
//输出：123,'abc'
在ES6之后通过直接在形参中设置等号设置默认值
function print(a='a是undefined就是输出我',b='b是undefined就是输出我')
{
console.log(a,b);
}
print();
// 输出："a是undefined就是输出我"，"b是undefined就是输出我"
print(123,'abc');
//输出：123,'abc'
递归函数
什么是递归函数?
递归函数就是在函数中自己调用自己, 我们就称之为递归函数
递归函数在一定程度上可以实现循环的功能
递归函数的注意点
每次调用递归函数都会开辟一块新的存储空间, 所以性能不是很好,递归调用太多会内存栈溢出。
*/
function login() {
// 1.接收用户输入的密码
let pwd = prompt("请输入密码");
// 2.判断密码是否正确
if(pwd !== "123456"){
login();
}
// 3.输出欢迎回来
alert("欢迎回来");
}
login();