JavaScript基础
函数
函数的使用
// 1. 声明函数
function Fn() { //Fn是函数的名字
// {}里面的是该函数要做的事情，当调用函数就相当于执行了以下的代码
let a = 1
a++
console.log(a)
}
// 2. 调用函数
Fn()
- 函数不调用是不会执行的
函数的参数
- 初识参数
// 场景：打印我要吃的菜品的名字
function cp() {
console.log('我想吃西红柿炒鸡蛋')
}
cp()
// 假如我还想吃其他菜
function cp1() {
console.log('我想吃辣椒烧肉')
}
cp1()
// 上面的代码是不是只有菜名是不一样的，这个时候为了提高函数的可复用性，我们可以把不一样的地方用参数的方式传入
function cp2(names) { //names是形式参数
console.log('我想吃' + names)
}
// 调用函数的时候（）里面的是实参
cp2('泡面')
cp2('牛腩')
// 由此可见，利用把函数不同的部分作为参数是可以提高代码的可复用性的；还可以看到参数分为形式参数和实际参数
- 形参与实参的匹配问题
// 情况1：形参与实参的个数相等
function f1(a, b, c) {
console.log(a)
console.log(b)
console.log(c)
}
f1(2, 1, 3) //正常输出结果
// 情况2：实参个数多于形参
function f2(a, b, c) {
console.log(a)
console.log(b)
console.log(c)
}
f2(2, 1, 3, 4) //会取到形参的个数，多的的实参没有任何作用
// 情况3：实参个数小于形参
function f3(a, b, c) {
console.log(a)
console.log(b)
console.log(c)
}
f3(2, 1) //console.log(c)为undefined，因为形参可以看作不用声明的变量，c没有接受到值，所以结构为undefined
// 由此可得，形参的默认值为undefined，多个参数用逗号隔开，形参与实参的个数不匹配会出现不可预计的结果，尽量保持他们个数一致
函数的返回值
- 初识返回值
// 场景：我们调用一个函数计算两个数字的和,再拿得到的总和去干一些事情
// 1 把总和console.log()出去
function f1(a, b) {
let sun = a + b
console.log(sun)
}
f1(1, 2)
// 2 把总和alert()出去
function f2(a, b) {
let sun = a + b
alert(sun)
}
f2(1, 2)
// 那有的小伙伴就会想,我们再添加一个形参,如果第三个参数的结果为true我们就console.log,结果为false我们就alert
function f3(a, b, bl) {
let sun = a + b
if (bl) {
console.log(sun)
} else {
alert(sun)
}
}
f3(1, 2, true)
f3(1, 2, false)
// 当然这样也是可以的,但是如果我们还想拿这个和去做一些其他的事情呢?是不是这样的设计是很不合理的
// 最理想的情景是:我们的函数只是实现某种功能,把最终的结果返回给函数的调用者函数名(),函数名()= return后面的结果,然后我们就可以很灵活的去操作这个结果
// 比如:我们有一个可以实现做菜的函数,把做好的菜返回,谁想吃谁吃
function f4() {
return '西红柿炒鸡蛋'
}
let names = f4()
console.log(names) //调用这个函数之后会得到一个西红柿炒鸡蛋
console.log('李华吃' + names)
console.log('小明吃' + names)
- 注意点
// 1. return 终止函数,return语句之后的代码不执行
function f1() {
console.log(1)
console.log(2)
console.log(3)
}
f1() //没有return的时候,{}里面的所以代码都会执行
function f2() {
console.log(1)
console.log(2)
return
console.log(3)
}
f2() //只会执行return前面的代码,遇到return后函数就会终止,所以return后面的代码就不会执行
// 2. return只能返回一个变量,如果return后面有多个变量,则只会返回最后一个
function f3(a, b) {
return a, b
}
console.log(f3(1, 2)) //2
// 如果想返回多个变量可以与数组或者对象的方式(对象在此之前还没有学过,先用数组举个例子)
function f4(a, b) {
return [a, b]
}
console.log(f4(1, 2)) // [1, 2],得到一个数组,如果想拿到某个具体的,则通过数组的索引去拿即可
// 3. 函数如果没有return或者return后面没有跟着结果则函数默认的返回值为undefined
function f5(a, b) {
let sun = a + b
}
console.log(f5(1, 2)) //undefined
function f6(a, b) {
let sun = a + b
return
}
console.log(f6(1, 2)) //undefined
- 回顾break,continue,顺便看看前两者与return的区别
// break,结束当前的循环体(for,while)
// continue,跳出本次循环,继续执行下一次循环(for,while)
// return:不仅可以退出循环,还能返回语句中的结果,同时还可以结束当前函数体内的代码
function f1() {
for (let i = 0; i < 10; i++) {
if (i == 3) {
return i
}
}
console.log(1)
}
console.log(f1()) //3, 当i==3的时候结束了返回了结果并且console.log(1)就不会执行
arguments的使用
// 前面我们有提过形参与实参的个数要尽量匹配上,但是当我们不确定要传递多少个实参的时候,可以使用arguments来获取传递进来的参数,
// arguments实际上是当前函数的一个内置对象,所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参
// 案例
function f1() {
console.log(arguments)
}
f1(1, 2, 3) //Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ],为伪数组
// 伪数组:并不是真正意义上的数组,但是具有数组的length属性,是按照索引的方法进行存储取值,没有真正数组的一些方法如pop(),push()等等
// 那么我们拿到arguments里面的某个实参呢,没错,可以通过数组索引号
// 案例,计算所有实参的和
function f2() {
let sun = 0
for (let i = 0; i < arguments.length; i++) {
sun += arguments[i]
}
console.log(sun)
}
f2(1, 2, 3, 4)
函数案例
// 为什么说函数比较好,看案例
// 求某数组的最大值(以前学的for)
let arr = [32, 13, 100, 88, 21, 10]
let max = arr[0]
for (var i = 1; i < arr.length; i++) {
if (max < arr[i]) {
max = arr[i]
}
}
console.log(max)
// 现在通过函数传参的方法求任意数组的最大值
function getMax(arr) {
let max = arr[0]
for (var i = 1; i < arr.length; i++) {
if (max < arr[i]) {
max = arr[i]
}
}
console.log(max)
}
getMax([1, 31, 10, 20])
getMax([1, 31, 1001, 20])
函数可以调用另外一个函数
function f1() {
console.log('f1')
f2()
console.log(1)
}
function f2() {
console.log('f2')
}
f1()
/*
当f1()的时候,会执行{
console.log('f1')
f2()
}
先console.log('f1')
然后遇到f2()的时候
会调用函数f2,执行了console.log('f2')
然后再console.log(1)
*/
函数的两种声明方式
// 1. 利用函数关键字function定义函数(命名函数)
function f1() {}
// 2. 函数表达式
var f2 = function() {}
// 调用
f1()
f2()
