71-80JS函数（定义、注意点、匿名、箭头、递归）
2019-05-06 本文已影响3人
饥人谷_island
1.什么是函数?
函数是专门用于封装代码的, 函数是一段可以随时被反复执行的代码块
2.函数格式
function 函数名称(形参列表){
被封装的代码;
}
3.不使用函数的弊端
3.1冗余代码太多
3.2需求变更, 需要修改很多的代码
4.使用函数的好处
4.1冗余代码变少了
4.2需求变更, 需要修改的代码变少了
*/
// 定义向左变道的函数
function toLeft(){
console.log("打左转向灯");
console.log("踩刹车");
console.log("向左打方向盘");
console.log("回正方向盘");
}
// 定义向右变道的函数
function toRight(){
console.log("打右转向灯");
console.log("向右打方向盘");
console.log("回正方向盘");
}
// 向左变道
console.log("打左转向灯");
console.log("踩刹车");
console.log("向左打方向盘");
console.log("回正方向盘");
// 向右变道
console.log("打右转向灯");
console.log("向右打方向盘");
console.log("回正方向盘");
// 向左变道
console.log("打左转向灯");
console.log("踩刹车");
console.log("向左打方向盘");
console.log("回正方向盘");
// 向左变道
// 以下代码的含义: 找到名称叫做toLeft的函数, 执行这个函数中封装的代码
toLeft();
// 向右变道
toRight();
// 向左变道
toLeft();
1.函数定义步骤
1.1书写函数的固定格式
1.2给函数起一个有意义的名称
1.为了提升代码的阅读性
2.函数名称也是标识符的一种, 所以也需要遵守标识符的命名规则和规范
1.3确定函数的形参列表
看看使用函数的时候是否需要传入一些辅助的数据
1.4将需要封装的代码拷贝到{}中
1.5确定函数的返回值
可以通过return 数据; 的格式, 将函数中的计算结果返回给函数的调用者
*/
function getSum(a, b){ // a = num1, b = num2;
let res = a + b; // let res = 10 + 20; let res = 30;
// 将res返回给函数的调用者
return res;
}
/*
// 需求: 要求计算两个变量的和
let num1 = 10;
let num2 = 20;
let res = num1 + num2;
console.log(res);
let value1 = 30;
let value2 = 20;
let res2 = value1 +value2;
console.log(res2);
*/
let num1 = 10;
let num2 = 20;
let result = getSum(num1, num2); // let result = res; let result = 30;
console.log(result);
// 1.一个函数可以有形参也可以没有形参(零个或多个)
// 什么是形参? 定义函数时函数()中的变量我们就称之为形参
/*
// 没有形参的函数
// function say() {
// console.log("hello world");
// }
// say();
// 有形参的函数
function say(name) {
console.log("hello " + name);
}
say("lnj");
*/
// 2.一个函数可以有返回值也可以没有返回值
/*
// 没有返回值的函数
// function say() {
// console.log("hello world");
// }
// say();
// 有返回值的函数
function getSum(a, b) {
return a + b;
}
let res = getSum(10 , 20);
console.log(res);
*/
// 3.函数没有通过return明确返回值, 默认返回undefined
/*
function say() {
console.log("hello world");
return; // undefined
}
let res = say();
console.log(res);
*/
// 4.return的作用和break相似, 所以return后面不能编写任何语句(永远执行不到)
// break作用立即结束switch语句或者循环语句
// return作用立即结束当前所在函数
/*
function say() {
console.log("hello world");
return;
console.log("return后面的代码");
}
say();
*/
// 5.调用函数时实参的个数和形参的个数可以不相同
// 什么是实参? 调用函数时传入的数据我们就称之为实参
/*
function getSum(a, b) {
console.log(a, b);
return a + b;
}
// let res = getSum(10, 20); // 这里的10和20就是实参
// let num1 = 10;
// let num2 = 20;
// let res = getSum(num1, num2); // 这里的num1和num2也是实参
// console.log(res);
// let res = getSum(10);
let res = getSum(10, 20, 30);
*/
// 6.JavaScript中的函数和数组一样, 都是引用数据类型(对象类型)
// 既然是一种数据类型, 所以也可以保存到一个变量中
// 将一个函数保存到一个变量中
// 将来可以通过变量名称找到函数并执行函数
let say = function () {
console.log("hello world");
}
say();
1.因为console.log();也是通过()来调用的, 所以log也是一个函数
2.log函数的特点
可以接收1个或多个参数
3.为什么log函数可以接收1个或多个参数
内部的实现原理就用到了arguments
4.arguments的作用
保存所有传递给函数的实参
// console.log();
function say() {
console.log("hello world");
}
window.say();
console.log(1);
console.log(1, 2);
console.log(1, 2, 3);
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);
console.log(res);
1.扩展运算符在等号左边, 将剩余的数据打包到一个新的数组中
注意点: 只能写在最后
let [a, ...b] = [1, 3, 5]; a = 1; b = [3, 5];
2.扩展运算符在等号右边, 将数组中的数据解开
let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];
let arr = [...arr1, ...arr2]; let arr = [1, 3, 5, 2, 4, 6];
3.扩展运算符在函数的形参列表中的作用
将传递给函数的所有实参打包到一个数组中
注意点: 和在等号左边一样, 也只能写在形参列表的最后
*/
/*
function getSum(...values) {
// console.log(values);
let sum = 0;
for (let i = 0; i < values.length; i++){
let num = values[i];
sum += num;
}
return sum;
}
let res = getSum(10, 20, 30, 40);
console.log(res);
*/
// function getSum(a, ...values) {
function getSum(...values, a) {
console.log(a);
console.log(values);
}
getSum(10, 20 , 30);
function getSum(a, b) {
// 在ES6之前可以通过逻辑运算符来给形参指定默认值
// 格式: 条件A || 条件B
// 如果条件A成立, 那么就返回条件A
// 如果条件A不成立, 无论条件B是否成立, 都会返回条件B
a = a || "指趣学院";
b = b || "知播渔教育";
console.log(a, b);
}
getSum(123, "abc");
*/
// 从ES6开始, 可以直接在形参后面通过=指定默认值
// 注意点: ES6开始的默认值还可以从其它的函数中获取
// function getSum(a = "指趣学院", b = "知播渔教育") {
function getSum(a = "指趣学院", b = getDefault()) {
console.log(a, b);
}
getSum();
// getSum(123, "abc");
function getDefault() {
return "李南江"
}
let say = function () {
console.log("hello world");
}
// say();
// let fn = say;
// fn();
// 将函数作为其他函数的参数
function test(fn) { // let fn = say;
fn();
}
test(say);
*/
// 将函数作为其他函数的返回值
function test() {
// 注意点: 在其它编程语言中函数是不可以嵌套定义的,
// 但是在JavaScript中函数是可以嵌套定义的
let say = function () {
console.log("hello world");
}
return say;
}
let fn = test(); // let fn = say;
fn();
1.什么是匿名函数?
匿名函数就是没有名称的函数
2.匿名函数的注意点
匿名函数不能够只定义不使用
3.匿名函数的应用场景
3.1作为其他函数的参数
3.2作为其他函数的返回值
3.3作为一个立即执行的函数
*/
/*
// 有名称的函数
// function say() {
// console.log("hello lnj");
// }
// let say = function() {
// console.log("hello lnj");
// }
// 匿名函数
function() {
console.log("hello lnj");
}
*/
// 3.1作为其他函数的参数
/*
function test(fn) { // let fn = say;
fn();
}
test(function () {
console.log("hello world");
});
*/
// 3.2作为其他函数的返回值
/*
function test() {
return function () {
console.log("hello lnj");
};
}
let fn = test(); // let fn = say;
fn();
*/
// 3.3作为一个立即执行的函数
// 注意点: 如果想让匿名函数立即执行, 那么必须使用()将函数的定义包裹起来才可以
(function () {
console.log("hello it666");
})();
1.什么是箭头函数?
箭头函数是ES6中新增的一种定义函数的格式
目的: 就是为了简化定义函数的代码
let arr = new Array();
let arr = [];
2.在ES6之前如何定义函数
function 函数名称(形参列表){
需要封装的代码;
}
let 函数名称 = function(形参列表){
需要封装的代码;
}
3.从ES6开始如何定义函数
let 函数名称 = (形参列表) =>{
需要封装的代码;
}
4.箭头函数的注意点
4.1在箭头函数中如果只有一个形参, 那么()可以省略
4.2在箭头函数中如果{}中只有一句代码, 那么{}也可以省略
// function say() {
// console.log("hello lnj");
// }
let say = () => {
console.log("hello lnj");
}
say();
// function say(name) {
// console.log("hello " + name);
// }
// let say = (name) => {
// console.log("hello " + name);
// }
// let say = name => {
// console.log("hello " + name);
// }
let say = name => console.log("hello " + name);
say("it666");
需求: 要求用户输入密码, 判断输入密码是否正确(假设正确密码是123456)
如果正确, 输出"欢迎回来"
如果不正确, 要求用户重新输入
*/
/*
let pwd = -1;
do{
pwd = prompt("请输入密码");
}while (pwd !== "123456");
alert("欢迎回来");
*/
/*
1.什么是递归函数?
递归函数就是在函数中自己调用自己, 我们就称之为递归函数
递归函数在一定程度上可以实现循环的功能
2.递归函数的注意点
每次调用递归函数都会开辟一块新的存储空间, 所以性能不是很好
*/
function login() {
// 1.接收用户输入的密码
let pwd = prompt("请输入密码");
// 2.判断密码是否正确
if(pwd !== "123456"){
login();
}
// 3.输出欢迎回来
alert("欢迎回来");
}
login();
