JS-进阶-函数

JS学习笔记13

函数进阶

函数提升

函数可以在声明之前调用，会把所以函数声明提升到当前作用域的最前面，

只提升函数声明不提升函数调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
  // 调用函数
  foo()
  // 声明函数
  function foo() {
    console.log('声明之前即被调用...')
  }

  // 不存在提升现象
  bar()  // 错误
  var bar = function () {
    console.log('函数表达式不存在提升现象...')
  }
</script>
  1. 函数提升能够使函数的声明调用更灵活
  2. 函数表达式不存在提升的现象
  3. 函数提升出现在相同作用域当中

函数参数

动态参数

arguments 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

(当不确定传入多少实参时)

剩余参数

  • …是语法符号，置于最末函数形参之前，用于获取最后的形参
  • 剩余参数是真数组
  • 实际开发多用剩余参数
1
2
3
4
5
6
7
8
<script>
  function config(baseURL, ...other) {
    console.log(baseURL) // 得到 'http://baidu.com'
    console.log(other)  // other  得到 ['get', 'json']
  }
  // 调用函数
  config('http://baidu.com', 'get', 'json');
</script>

展开运算符

...展开运算符用于将数组展开

1
2
const arr=[1,2,3,4,5]
console.log(...arr)
  • 不会修改原数组
  • 典型应用：求数组最大值（最小值），合并数组
1
2
3
Math.max(...arr)
Math.min(...arr)
a=[...arr1,...arr2]

==箭头函数==

更简短的函数写法并且不绑定this,语法比函数表达式更简洁

基本语法

1
2
3
4
5
const fn=() => {
  函数体
}
fn()

  • 只有一个形参的时候，可以省略小括号
1
2
3
const fn= x =>{
  
}
  • 只有一行代码时，可以省略大括号
1
const fn=() => console.log(1)
  • 只有一行代码，可以省略return,直接返回值
1
const fn= (x,y)=> x+y
  • 箭头函数可以直接返回一个对象
1
const fn=(uname)=>({uname: uname})
  1. 箭头函数属于表达式函数，因此不存在函数提升
  2. 箭头函数只有一个参数时可以省略圆括号 ()
  3. 箭头函数函数体只有一行代码时可以省略花括号 {}，并自动做为返回值被返回
  4. 加括号的函数体返回对象字面量表达式

箭头函数参数

没有arguements,有剩余参数

1
2
3
4
5
6
7
const getSum = (...arr) =>{
  let sum=0
  for(let i=0;i<arr.length;i++){
    sum+=arr[i]
  }
  return sum
}

箭头函数的this

箭头函数不会创建自己的this,从上层作用域找

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
  const fn = ()=>{
    console.log(this)  //window
  }
    箭头函数的this  是上一层作用域的this 指向
     
     对象方法箭头函数 this
    const obj = {
      uname: 'pink老师',
      sayHi: () => {
        console.log(this)  // this 指向谁？ window
        					//window.obj.sayHi
       }
     }
     obj.sayHi()
</script>

dom事件的回调函数为了简便，不太推荐用箭头函数

事件回调函数为this时，指向window

==解构赋值==

数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法

基本语法

1
2
3
4
5
6
7
8
9
arr=[1,2,3];
[a,b,c]=arr
//交换变量
let a=1
let b=2;    //这里必须加上分号
[b,a]=[a,b]
console.log(a,b)
//没有分号会识别成这样
let b=2[b,a]=[a,b]  导致报错

==加分号的情况还有立即执行函数==

总结：

  1. 赋值运算符 = 左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
  2. 变量的顺序对应数组单元值的位置依次进行赋值操作
  3. 变量的数量大于单元值数量时，多余的变量将被赋值为 undefined
  4. 变量的数量小于单元值数量时，可以通过 ... 获取剩余单元值，但只能置于最末位
  5. 允许初始化变量的默认值，且只有单元值为 undefined 时默认值才会生效

对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
  // 普通对象
  const user = {
    name: '小明',
    age: 18
  };
  // 批量声明变量 name age
  // 同时将数组单元值 小明  18 依次赋值给变量 name  age
  const {name, age} = user

  console.log(name) // 小明
  console.log(age) // 18

 对象解构的变量名 可以重新改名  旧变量名: 新变量名
    const { uname: username, age } = { uname: 'jason', age: 18 }
</script>
  1. 赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
  2. 对象属性的值将被赋值给与属性名相同的变量
  3. 对象中找不到与变量名一致的属性时变量值为 undefined
  4. 允许初始化变量的默认值，属性不存在或单元值为 undefined 时默认值才会生效

多维解构赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<body>
  <script>
    // 1. 这是后台传递过来的数据
    const msg = {
      "code": 200,
      "msg": "获取新闻列表成功",
      "data": [
        {
          "id": 1,
          "title": "5G商用自己，三大运用商收入下降",
          "count": 58
        },
        {
          "id": 2,
          "title": "国际媒体头条速览",
          "count": 56
        },
        {
          "id": 3,
          "title": "乌克兰和俄罗斯持续冲突",
          "count": 1669
        },

      ]
    }

    // 需求1： 请将以上msg对象  采用对象解构的方式 只选出  data 方面后面使用渲染页面
    // const { data } = msg
    // console.log(data)
    // 需求2： 上面msg是后台传递过来的数据，我们需要把data选出当做参数传递给 函数
    // const { data } = msg
    // msg 虽然很多属性，但是我们利用解构只要 data值
    function render({ data }) {
      // const { data } = arr
      // 我们只要 data 数据
      // 内部处理
      console.log(data)

    }
    render(msg)

    // 需求3， 为了防止msg里面的data名字混淆，要求渲染函数里面的数据名改为 myData
    function render({ data: myData }) {
      // 要求将 获取过来的 data数据 更名为 myData
      // 内部处理
      console.log(myData)

    }
    render(msg)

  </script>

forEach(适合遍历数组对象)

1
2
3
4
5
const arr = ['red', 'green', 'pink']
    const result = arr.forEach(function (item, index) {
      console.log(item)  // 数组元素 red  green pink
      console.log(index) // 索引号
    })

filter（筛选数组方法）

1
2
3
4
5
6
7
8
9
10
const arr = [10, 20, 30]
   // const newArr = arr.filter(function (item, index) {
   //   // console.log(item)
   //   // console.log(index)
   //   return item >= 20
   // })
   // 返回的符合条件的新数组

   const newArr = arr.filter(item => item >= 20)
   console.log(newArr)
web > JS
#JS
JS-进阶-函数
https://wjcbolg.cn/2023/04/29/JS学习笔记13/
作者
JasonWang
发布于
2023年4月29日
许可协议
BY-JW