JavaScript中的函数要点概述

GIS小小白

已于 2023-12-08 14:39:45 修改

阅读量45

点赞数 1

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2023-11-13 18:01:14 首次发布

本文链接：https://blog.csdn.net/weixin_73810008/article/details/134367337

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一.函数的优势

可以实现一堆代码的复用，本质上是代码块，类似于alert（）和prompt（）都是js已经封装好的函数，我们可以直接使用。

二.函数的使用

1.函数声明

function 函数名(){

函数体

}

2.函数调用

函数名( )

3.函数传参

注意形参和实参的一一对应

三.函数提升

函数提升与变量提升比较类似，是指函数在声明之前即可被调用。

<script>
  // 调用函数
  foo()
  // 声明函数
  function foo() {
    console.log('声明之前即被调用...')
  }

  // 不存在提升现象
  bar()  // 错误
  var bar = function () {
    console.log('函数表达式不存在提升现象...')
  }
</script>

总结：

函数提升能够使函数的声明调用更灵活
函数表达式不存在提升的现象（因为只会提升声明，不会提升赋值，所以不能提前使用）
函数提升出现在相同作用域当中

四.函数参数

1.普通参数

总结：

声明函数时为形参赋值即为参数的默认值
如果参数未自定义默认值时，参数的默认值为 undefined
调用函数时没有传入对应实参时，参数的默认值被当做实参传入

2.动态参数

arguments 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参。所以不用担心到底传了多少参数，用啥遍历这个伪数组

<script>
// 求生函数，计算所有参数的和
function sum() {
// console.log(arguments)
let s = 0
for(let i = 0; i < arguments.length; i++) {
s += arguments[i]
}
console.log(s)
}
// 调用求和函数
sum(5, 10)// 两个参数
sum(1, 2, 4) // 两个参数
</script>

总结：

arguments 是一个伪数组
arguments 的作用是动态获取函数的实参

2.剩余参数

<script>
function config(address, ...other) {
console.log(address) // 得到 'http://baidu.com'
console.log(other) // other 得到 ['get', 'json']
}
// 调用函数
config('http://baidu.com', 'get', 'json');
</script>

总结：

... 是语法符号，置于最末函数形参之前，用于获取多余的实参
借助 ... 获取的剩余实参，是个真数组

3.展开运算符

（展开运算符（spread operator）通常以三个连续的点（...）表示，所以放到这与剩余参数做个对比）

展开运算符可以简化代码，并提供了一种方便的方式来合并数组、克隆数据、传递参数等操作。在实际开发中，它经常被用于处理复杂的数据结构。

3.1在数组中的作用

const arr1 = [1, 2, 3];

const arr2 = [4, 5, 6];

const combinedArray = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

const cloneArr = [...arr1]; // [1, 2, 3] // 克隆数组

3.2在函数调用中的应用

function sum(a, b, c) {

return a + b + c; }

const numbers = [1, 2, 3];

const result = sum(...numbers); // 相当于 sum(1, 2, 3)

3.3在对象中的应用

const obj1 = { a: 1, b: 2 };

const obj2 = { c: 3, d: 4 };

const mergedObj = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

五.箭头函数

1.概述

箭头函数是一种声明函数的简洁语法，它与普通函数并无本质的区别，差异性更多体现在语法格式上。（一个很鲜明的特点就是，箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。）

1.箭头函数一般写法

const a = ()=>{ 函数体 }

2.只有一个形参的时候，可以省略小括号

const b = x=>{函数体}

3.函数体只有一行代码时，可以省略包裹函数体的大括号

const c = x => 一行代码

4.函数体只有一行代码时，可以省略return

const d = x => x + x

5.箭头函数可以直接返回一个对象

const e = (uname) => ({uname:uname}) //本来函数体是由{ }包裹的，但是为了和包裹对象的{ }区分开，所以用小括号

总结：

箭头函数属于表达式函数，因此不存在函数提升
箭头函数只有一个参数时可以省略圆括号 ()
箭头函数函数体只有一行代码时可以省略花括号 {}，并自动做为返回值被返回

2.箭头函数参数

箭头函数中没有 arguments，只能使用 ... 动态获取实参

<body>
  <script>
    // 1. 利用箭头函数来求和
    const getSum = (...arr) => {
      let sum = 0
      for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
      }
      return sum
    }
    const result = getSum(2, 3, 4)
    console.log(result) // 9
  </script>

3.this指向介绍

如果是作为一个普通函数，谁调用了这个函数，那么这个函数的this指向就是谁

 // const obj = {
    //   name: 'andy',
    //   sayHi: function () {
    //     console.log(this)  // obj
    //   }
    // }
    // obj.sayHi()

这个就是我前面介绍的普通函数this指向，如果该函数没有写在对象里，而是在外面，那么调用它的就是最大的window对象，那么this的指向就是window对象

箭头函数的this  是上一层作用域的this 指向

const obj = {

name = 'hhh',

sayHi:()=>{

console.log(this) //window

}

}

解析:这里的this肯定是obj的this，那调用obj的就是window对象，所以this就指向window对象

GIS小小白

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录