初识函数

88 阅读4分钟

函数的概念

  • 什么是函数?
    • 首先明确一点,和我们数学中的函数是两个概念
    • 在 JS 中,函数可以理解为将一段在程序中多次出现的代码封装起来的盒子,以便在多个地方调用执行
    • 换句话说:函数就是一个内部封装了部分代码的盒子,可以在多个位置被调用
  • 函数的使用
    • 创建函数(定义函数)
    • 调用函数

函数的定义

  • 声明式定义
function fn() {

}
/**
 * 分析:
 *      function:声明函数的关键字,代表接下来这段代码是一个函数
 *      fn:函数名,调用函数时需要使用,函数名自定义,符合命名规范和见名知意即可(!** 匿名函数时可以不写)
 *      ():小括号内存放函数的参数(后续讲解)
 *      {}:存放函数代码,调用函数时,想执行的代码都写在内部
*/
  • 赋值式定义
var fn = function () {

}

函数的调用

function fn1() {

}
var fn2 = function () {

}

fn1()
fn2()

函数的参数

  • 参数是什么?
    • 如果没有参数,那么函数的执行功能是固定的,写好函数后内部内容将不会变
    • 比如:函数内部的代码为 1 + 1,那么始终执行时始终都是 1 + 1,如果此时想要计算 1 + 2 的值,需要重新封装一个 1+2 的函数
  • 参数在哪里?如何使用
    • 书写函数时有一个 () 内部就是书写参数的,函数分为两种,形参---实参
  • 形参和实参的区别
    • 形参:在函数声明时 function 后边的()内书写,每写一个参数,就相当于在函数内部创建一个变量,其值为函数调用时传递的值,只能在函数内部使用,不能在外部使用
    • 实参:顾名思义,实际的参数,也就是函数在调用时传递的参数
function num () {
    console.log(1 + 1)
}
num()   // 打印值为 1+1

function num (a, b) {   // 此处 a b 为形参
    console.log(a + b)
}
num(1, 1)   // 此处为 实参,分别传递给 a  和  b
num(1, 2)   // 此处打印值为 1 + 2
  • 注意
    • 函数的形参与实参是按照从左到右的顺序一一对应的
// 少传参数
function num1(a, b, c, d) {
    console.log(a,b,c,d)
}
num1(1, 2, 3, 4)    // 打印1,2,3,4
num1(1, 2, 4) // 打印1,2,4,undefined
num1(4) // 打印4,undefined,undefined,undefined
// 多传参数
function num2 (a) {
    console.log(a)
}
num2(1, 2)  // 打印 1
num2(1)  // 打印 1

函数的返回值

  • 返回值是什么?有什么作用
    • 函数内部默认有一个 return 他的值就是函数的返回值,如果函数内部不写 return 那么函数默认在函数体内部最底部返回一个 undefined
    • 如果不想返回 undefined 需要手动在函数内部写上 return 并且跟上需要返回的值
    • 可以中断函数(后续通过代码演示)
function num (a, b) {
    a+b
}
var ab = num(1,2)
console.log(ab)
function num (a, b) {
    // return a + b
    console.log('函数内部执行的 a + b =',a+b)
}
var ab = num(1,2)
console.log('函数外部执行的 a + b =',ab)

简单了解对象

  • 什么是对象
    • 首先排除男女朋友, 我们这是正经编程
    • 对象是一个 复杂数据类型, 也叫做 引用数据类型
    • 虽然我们说是复杂类型, 但是也没有很复杂, 只不过是存储了一些基本数据类型的集合
var obj = {
    num: 100,
    str: "hello",
    boo: true,
};
  • 这里的 {} 和函数中的 {} 不一样, 函数内部书写代码, 对象里面是书写数据的
  • 对象就是一个键值对的集合
    • 什么是键值对?
      • 对象 obj 中, num 是键, 100 是值
      • 对象 obj 中, str 是键, 'hello' 是值
      • 对象 obj 中, boo 是键, true 是值
    • 其实就是我们准备一个房子, 把我们想要的数据放进去, 然后把房子的地址给到变量名, 当我们需要某一个数据的时候, 就可以根据变量名里面存储的地址找到对应的房子, 然后去房子里面找到对应的数据

创建对象

  • 字面量方式创建对象
    • 语法:var obj = {} var obj1 = {键值对, 键值对}
  • 内置构造函数创建
    • 语法:var obj = new Object()
  • 对象内对于 键(key) 的要求
    • 推荐使用符合变量命名规则和规范的名字
    • 可以使用纯数字当作 键名
      • 这种情况下该属性会排列在最前面
    • 可以使用任何特殊符号
      • 使用特殊符号的时候,在书写时需要被引号包裹

对象数据类型的操作(增删改查)两种语法

  • 点语法
    var obj = {};
    obj.name = "qianfeng"; // 增
    obj.name = "qianfeng123"; // 改
    console.log(obj.name); // 查
    delete obj.name; // 删
    
  • 中括号语法(数组语法)
    var obj = {};
    obj["name"] = "qianfeng"; // 增
    obj["name"] = "qianfeng123123"; // 改
    console.log(obj["name"]); // 查
    delete obj["name"]; // 删
    
  • 两者的差异
    • 符合变量命名规范与规则的情况,两者并无差异
    • 操作不符合变量命名规范与规则的名称时,比如纯数字或者带有特殊符号的,就只能用中括号语法
    • 涉及变量相关的时候,只能使用中括号语法

面试题

  • 面试题: JS 中声明变量的三种方式有什么区别?
    • var
    • let
    • const