JavaScript ES(6-11)全版本语法 (四)：Function上一篇编写的是ES6中的Array，链接：ht

前提概要

上一篇编写的是ES6中的Array，链接：juejin.cn/post/699962… ，这次写的是ES6中Function的一些API和部分应用场景。如有不对的或者不准确的地方，欢迎大家提出😄，我也积极修改。下边开始正文:

默认参数

我们在函数当中经常会用到参数，关于参数的默认值通常都是写在函数体中

ES5的时候通常会这么写

function foo(x,y){
  // y有个默认值
  y = y || 'world'
  console.log(x, y)
}
foo('hello',1) // hello 1
foo('hello',0) // hello world

上述代码中的foo('hello',0)我们想要输出hello 0但实际上输出的是hello world,所以y = y || 'world'的写法就不是很严谨，因此,就要在函数当中对传入的参数进行一定的处理，相对来说就很麻烦。

ES6中改变了对这种知识的写法：

function foo(x, y = 'world') {
    console.log(x, y)
}
foo('hello', 0) // hello 0

通过上述代码可以得出，ES6中的这种写法就避免出现ES5中的问题。而且这种写法的好处：1、代码简洁 2、利于代码阅读 3、利于代码优化

注意：函数参数是从左到右解析，如果没有默认值会被解析成 undefined

如果我们想让具体某个参数使用默认值，我们可以使用 undefined 进行赋值，如下段代码所示：

function f(x, y = 7, z = 42) {
    return x + y + z
}
console.log(f(1, undefined, 43)) // 51

在ES6中我们不仅可以给参数默认赋值具体的数值，同时参数赋值支持参数的逻辑运算进行赋值，如下段代码所示：

function f(x, y = 7, z = x + y) {
    return z * 0.5
}
console.log(f(1, 7)) // 4

注意点

1. ES6中函数当中不可以声明同名变量，并且参数变量是默认声明的

function foo (x = 5) {
  let x = 1 // 报错：Identifier 'x' has already been declared
  console.log(x)
}
foo()

2. 函数参数的默认值一定要放到参数的最后边，实参和行参的顺序是一一对应的

function foo (x, y = 5, z) {
  console.log(x, y, z)
}
foo(1, 2, 3) // 1 2 3
foo(1, 3) // 1 3 undefined

// ==> 正确写法
function foo (x, z, y = 5) {
  console.log(x, y, z)
}
foo(1, 3, 2) // 1 2 3
foo(1, 3) // 1 5 3

3. 与解构赋值的结合
函数解构赋值传参，实参和行参的结构要一样

function foo ({ x, y = 5 }) {
  console.log(x, y)
}
foo({}) // undefined 5
foo({ x: 1, y: 2 }) // 1 2
foo() // Cannot read property 'x' of undefined

function ajax (url, {
  body = '',
  method = 'GET',
  headers = {},
} = {}) {
  console.log(method)
}
ajax('www.baidu.com') // GET
ajax('www.baidu.com', { method: "POST" }) // POST

4. 函数的作用域(理解)

let x = 1
function foo (x, y = x) {
  console.log(y) // 2
}
foo(2)

上述代码说明：函数声明的行参会单独生成一个单独作用域

let x = 1
function foo (y = x) {
  // 局部的变量x 不会影响到行参当中的参数x
  let x = 2
  console.log(y) // 1
}
foo()

上述代码中y=1的原因是函数foo并没有传任何参数，行参当中的x此时没有被定义，那么它就会沿着作用域链去找，在当中作用域内没有被找到，那么就会沿着作用链去外边查找，此时会找到在全局作用域当中声明的x=1,作用域链的查找只会一层一层往外查找，不会往内部查找，因此内部声明的x=2并不生效。

length属性

函数指定了默认值以后，函数的length属性，将返回的是 第一个默认参数前面没有指定默认值 的参数个数。

ES5中获取判断函数有几个参数的方法是：

function foo(a, b = 1, c) {
  console.log(arguments.length)
}
foo('a', 'b') //2

然而在 ES6 中不能再使用 arguments 来判断了，但可以借助 Function.length 来判断。

function foo(x, y = 2, z = 3) {
    console.log(x, y)
}
console.log(foo.length)// 1

name属性

函数的name属性，返回该函数的函数名。

function foo () { }
console.log(foo.name) // foo
console.log((new Function).name) // anonymous(匿名)

扩展

function foo (x, y) {
  console.log(this, x, y)
}
// bind方法改变的this指向会指向到你在bind方法内声明的对象
foo.bind({ name: 'xs' })(1, 2) // {name:'xs'} 1 2
console.log(foo.bind().name) // bound foo
console.log(function () { }.bind().name) // bound

扩展运算符(...)

扩展运算符是把固定的数组内容“打散”到对应的参数

1. 函数参数传值

function foo (a, b, c) {
  console.log(a, b, c) // 1 2 3
}
let arr = [1, 2, 3]
foo(...arr)

2. 合并数组

// 把arr1数组和arr2数组合并成一个数组
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
// ES5中实现的方式
Array.prototype.push.apply(arr1,arr2)
console.log(arr1) // [1,2,3,4,5,6]
// ES6中实现的方式
arr1.push(...arr2)
console.log(arr1) // [1,2,3,4,5,6]

3. 字符串打散

let str = 'hello World'
let arr = [...str]
console.log(arr) // ["h", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]

Rest参数(剩余参数)

Rest参数是把不定的参数“收敛”到数组

1. 不定参数的求和问题

function foo (x,y,z) {
  let sum = 0
  // ES5 中实现的方式
  // Array.prototype.forEach.call(arguments,function(item){
  //   sum += item
  // })
  
  // ES6 中实现方式
  sum = Array.from(arguments).reduce(function(prev,cur){
    return prev + cur
  },0)
  return sum
}
console.log(foo(1,2)) // 3
console.log(foo(1,2,3)) // 6

在ES6就不能这么写了，因为 arguments 的问题。现在需要这样写：

// ...args在不确定参数的时候可以这么使用，把逗号分隔的数字转化为一个数组
function foo (...args) {
  // console.log(args)
  let sum = 0
  args.forEach(function (item) {
    sum += item
  })
  return sum
}
console.log(foo(1, 2)) // 3
console.log(foo(1, 2, 3)) // 6

2. Rest参数也可以和其他参数一起来用：

function foo (x, ...args) {
  console.log(x) // 1
  console.log(args) // [2,3,4]
}
foo(1, 2, 3, 4)

3. 与解构赋值结合使用

let [x, ...y] = [1, 2, 3]
console.log(x) // 1 
console.log(y) // [2,3]

扩展运算符(...)和rest参数(剩余参数)的区别

扩展运算符(...) 和 rest参数(剩余参数) 是形似但相反意义的操作符，简单的来说扩展运算符(...)是把固定的数组内容“打散”到对应的参数。而rest参数(剩余参数)是把不定的参数“收敛”到数组。

通俗理解：...如果在等号的左边或者行参上就是rest参数(剩余参数)，...如果放在等号的右边或者实参上就是扩展运算符

箭头函数

之前声明函数需要使用 function，如下：

function sum(x,y) {
  return x + y
}
// 或者
let sum = function(x,y) {
  return x + y
}

现在可以这样做了：

let sum = (x, y) => {
  return x + y
}
// 或者
let sum = (x,y) => x +y

如果带参数

let sum = (x) => { return x}
// 或者
let sum = x => x

注意：如果只有一个参数，可以省略括号，如果大于一个参数一定要记得带括号

返回值需要注意的地方

如果返回值是表达式

如果返回值是表达式可以省略 return 和 {}
```
let sum = x => x * x
```
如果返回值是字面量对象

如果返回值是字面量对象，一定要用小括号包起来
```
let person = (name) => ({
  age: 20,
  address: 'Beijing City'
})
```

1. 箭头函数中的 this指向定义时所在的对象，而不是调用时所在的对象

let foo = {
  name: 'es',
  say: function() {
    console.log(this.name)
  }
}
console.log(foo.say()) // es

这是用普通函数的写法，say 在被调用之后，this 指向的是调用 say 方法的对象，显示是 foo 对象，所以 this === foo this.name 也就是 foo.name。

let foo = {
  name: 'es',
  say: () => {
    console.log(this.name, this)
  }
}
console.log(foo.say()) // undefined

因为箭头函数中对 this 的处理是定义时，this 的指向也就是 foo 外层的所指向的 window，而 window 没有 name 属性，所以结果是 undefined。

2. 不可以当作构造函数

let Person = (name, age) => {
  console.log(this)
  this.name = name
  this.age = age
}
let p1 = new Person('xs', 18)
console.log(p1) // 报错：Person is not a constructor

3. 不可以使用arguments对象，如果要用，可以用rest参数代替。

ES5中输出arugments

function foo () {
  console.log(arguments) // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
}
foo(1, 2, 3)

上述代码是可以正常执行的，但是换成箭头函数就会报错

let foo = () => {
  console.log(arguments) //报错：arguments is not defined
}
foo(1, 2, 3)

但是如果我们还想接收1,2,3参数，可以使用rest参数，即：

let foo = (...args) => {
  console.log(args) [1,2,3]
}
foo(1,2,3)