JS函数、解构赋值

☁️ 函数

函数提升

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

会把所有函数声明提升到当前作用域的最前面，只提升函数声明，不提升函数调用。

// 函数提升
fn()

function fn() {
    console.log('fn')
}

函数表达式必须先声明赋值再调用

函数参数

动态参数：函数的参数个数不固定，可以通过arguments对象获取所有参数。argument是伪数组，可以通过下标访问。

function add() {
    let sum = 0
    for (let i = 0; i < arguments.length; i++) {
        sum += arguments[i]
    }
    return sum
}

console.log(add(1, 2, 3, 4))  // 10
console.log(add(1, 2, 3, 4, 5))  // 15

剩余参数：允许将不定数量的参数表示为一个数组。

function add(...args) {
    return args.reduce((prev, next) => prev + next)
}

console.log(add(1, 2, 3, 4))  // 10
console.log(add(1, 2, 3, 4, 5))  // 15

两者的区别：剩余参数中...是语法符号，置于最末函数形参之前，用于获取多余的实参，是一个真数组。开发中，提倡使用剩余参数。

展开运算符
展开运算符...可以将数组展开，不会改变原数组。
1
2
3
let arr = [1, 2, 3]
console.log(...arr)  // 1 2 3
console.log(arr)  // [1, 2, 3]
用于合并数组, 求数组最大值等。
1
2
3
4
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr = [...arr1, ...arr2]  // [1, 2, 3, 4, 5, 6]
Math.max(...arr)  // 6

箭头函数（ES6）

适用于匿名函数，简化函数定义。

// 无参数
let fn = () => {
    console.log('fn')
}

// 一个参数，可以省略括号
let fn = a => {
    console.log(a)
}

// 多个参数
let fn = (a, b) => {
    console.log(a, b)
}

// 有返回值，可以省略大括号和return
let fn = (a, b) => a + b

// 返回对象，需要用小括号包裹，加括号的函数题返回对象字面量表达式
let fn = (uname) => ({uname: uname})

箭头函数中没有arguments对象，有剩余参数。
this：箭头函数没有自己的this，只会从自己的作用域链的上一层沿用this。
DOM事件回调函数为了简便，不推荐使用箭头函数，因为this指向的是window。

☁️ 解构赋值

数组解构

是将数组的单元值快速批量赋值给一系列变量的简洁语法。
1
2
const arr = [100, 60, 80]
const [max, min, avg] = arr

典型应用：交换变量值

1
2
3

let a = 10
let b = 20;  // 加分号，防止代码压缩时出错
[a, b] = [b, a]

如果变量多，单元值少，多余的变量值为undefined。
如果变量少，单元值多，多余的单元值会被忽略。

可以利用剩余参数

1 2	const arr = [1, 2, 3, 4, 5] const [a,...b] = arr // b = [2, 3, 4, 5]

可以设置默认值

1 2	const arr = [1] const [a, b = 2] = arr // b = 2

按需导入，忽略不需要的值

1 2	const arr = [1, 2, 3, 4, 5] const [,,a,,b] = arr // a = 3, b = 5

多维数组解构

1 2	const arr = [1, 2, [3, 4]] const [a, b, [c, d]] = arr // a = 1, b = 2, c = 3, d = 4

对象解构

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

1 2	const obj = {name: 'Tom', age: 18} const {name, age} = obj

对象属性的值将复制给与属性名相同的变量
解构的变量名不要和外面的变量名重复
对象中找不到与变量名一致的属性时变量值为undefined
如果对象属性名和变量名不一致，可以使用别名 旧变量名: 新变量名
1
2
const obj = {name: 'Tom', age: 18}
const {name: uname, age: uage} = obj

数组对象解构

1 2	const obj = [{ name: 'Tom', age: 18 }, { name: 'Jerry', age: 20 }] const [{ name, age }, { name: uname, age: uage }] = obj

多级对象解构

1 2	const obj = { name: 'Tom', age: 18, friend: { name: 'Jerry', age: 20 } } const { name, age, friend: { name: uname, age: uage } } = obj

传参可以使用对象解构

// 后端返回数据
const msg = {
   "code": 200,
   "msg": "success",
   "data": [
      {
         "name": "Tom",
         "age": 18
      },
      {
         "name": "Jerry",
         "age": 20
      }
   ]
}

 function show({data}) {  // 直接使用对象解构
    console.log(data)
 }

  show(msg)  // 直接传入对象

forEach方法，用于调用数组的每个元素，并将元素传递给回调函数。起遍历作用。
1
2
3
4
let arr = [1, 2, 3, 4, 5]
arr.forEach((item, index) => {
   console.log(item, index)
})
与map的区别是：forEach没有返回值，map有返回值。