【es6】es6常用语法之函数

1 箭头函数

1.1 声明和调用，直接在括号中声明参数即可, 调用和普通调用函数一致

let compute = (a, b) => {
  return a + b
}
let result = compute(1, 2)
console.log(result);

1.2 特性

• this是静态的，this 始终是指向函数声明时 所在作用域下 的this的值
  • 设置普通函数和箭头函数
  • 设置 windows 的name属性, 和一个含有name属性的对象
  • 普通调用,全部指向全局
  • call 指向 局部调用,箭头函数指向全局,普通函数指向局部

function foo() {
  console.log(this.name)
}

let fn = () => {
  console.log(this.name)
}
window.name = `global`
const scope = {
  name: `scope`
}
foo()  // global
fn()   // global
foo.call(scope)  // global
fn.call(scope)  // scope

• 不能作为构造函数实例化对象

let Person = (name, age) => {
  this.name = name
  this.age = age
}
let me = new Person('yuiki', 21)
console.log(me);  // Person is not a constructor

• 不能使用 arguments 变量

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

• ⭐简写
• 省略小括号, 当形参有且只有一个
• 省略花括号,当代码体有且只有一条语句的时候,此时return 语句,也必须被省略,而且 语句的执行结果 就是函数的返回值

let add = n => {  // let add = (n) => {
  return n + n
}
console.log(add(1))

// let pow = n => {
//   return n*n
// }
let pow = n => n * n
console.log(pow(4))

1.3 案例，点击div2s后变色

• 写出样式

<div id="uk"></div>
<style>
  #uk {
    width: 100px;
    height: 100px;
    border: solid gray 1px;
  }
</style>

• ❌ 错误示例
  • 执行错误, 此时 this 指向的时 全局的 window

let uk = document.getElementById(`uk`)
uk.addEventListener("click", function () {
  // 定时器
  setTimeout(function () {
    // 修改颜色
    this.style.background = '#bfa'
  }, 2000)
})
setTimeout(function () {
  // 修改颜色
  console.log(this) // Window {window: Window, self......
  this.style.background = '#bfa'
})

• 我们需要保存 this 到 _this (随便定义保存this即可)
  • 我们将外层函数作用下的 this 保存于此, 内部函数 进行调用时, 在当前函数作用域下 找不到 _this, 提升至外层 寻找_this

let uk = document.getElementById(`uk`)
uk.addEventListener("click", function () {
  // 保存 this
  let _this = this
  // 定时器
  setTimeout(function () {
    // 修改颜色
    _this.style.background = 'red'
  }, 2000)
})

• ✔ 箭头函数解决
  • 由于 this 是静态的, 本身就是指向的 外层的this，此时this 指向的是事件源 uk

let uk = document.getElementById(`uk`)
uk.addEventListener("click", function () {
  setTimeout(() => {
    // 修改颜色
    this.style.background = 'red'
  }, 2000)
})

1.3.1 案例，从数组中返回偶数的元素

• 创建数组,使用 filter 拦截即可

const arr = [1, 2, 3, 4, 5, 6]
const result = arr.filter(function (item) {
  if (item % 2 === 0) {
    return true
  } else {
    return false
  }
})
console.log(result); // [2, 4, 6]

• 箭头函数

const arr = [1, 2, 3, 4, 5, 6]
const result = arr.filter(item => item % 2 === 0)
console.log(result); // [2, 4, 6]

1.4 总结

• 箭头函数适合与 this 无关的回调 ( 定时器,数组 )
• 不适合this有关的回调 ( 事件的回调,对象的方法 ),不适合而不是不能

2 函数

2.1 函数参数默认值

• 允许给函数参数赋初始值, 定义普通方法, 赋值即可
  • 需要注意的是,具有默认参数的值一定要靠后

function add(a, b, c = 10) {
  return a + b + c
}

• 与解构赋值结合使用
  • 解构传值， 当解构时有参数没有传参，直接默认初始值即可

function connect({host = `127.0.0.1`, username, password, port}) {
  console.log(`${host},${username},${password},${port}`)
}

connect({
  username: `root`,
  password: `root`,
  port: `3306`
})

3 rest参数

用于获取 函数的实参， 用来代替arguments

3.1 使用

• arguments 获取实参的方式, 原型是一个对象，并不是数组
• rest 获取实参的方式, 原型是数组, 此时我们可以使用数组常用方法对实参进行操作
• ❗ rest 参数必须放在参数最后

function fo1() {
  console.log(arguments);
}

fo1(`mako`, `hitachi`) // [[Prototype]]: Object

function fo2(...args) {
  console.log(args);
}

fo2(`mako`, `hitachi`) // [[Prototype]]: Array(0)

4 扩展运算符

【 … 】扩展运算符 能将 数组 转换为都好分割的 参数序列

4.1 使用

• 声明数组，然后直接声明函数打印,直接在 传入实参位置使用给扩展运算即可将数组转换为参数序列

const desire = [`food`, `water`, `toilet`]

function foo() {
  console.log(arguments)
}

foo(desire) // Arguments [Array(3)
foo(...desire) // Arguments(3) ['food', 'water', 'toilet',

4.2.1 案例, 数组的合并

• 普通的数组合并，使用 contact 即可, ... 直接使用扩展运算符将其数组转参序列即可

const math = [`foo`, `sin`]
const it = [`java`, `python`]

const merge = it.concat(math)
console.log(merge); //  ['java', 'python', 'foo', 'sin']
const merge1 = [...math, ...it]
console.log(merge1); //  ['java', 'python', 'foo', 'sin']

4.2.2 案例, 数组的克隆

• 直接转参赋值即可（浅拷贝）

const gal = [`hitachi`, `ayase`]
const game = [...gal]
const galGame = gal
console.log(gal === game) // false
console.log(gal === galGame) // true

4.2.3 案例, 伪数组合并

• 创建三个div，保存在常量中，此时还是一个对象, 直接转参就行

<div></div>
<div></div>
<div></div>
<script>
  const divs = document.querySelectorAll(`div`)
  console.log(divs);  // NodeList(3) [div#uk, div, div]
  //  [[Prototype]]: NodeList
  const divs1 = [...document.querySelectorAll(`div`)]
  console.log(divs1);  // [[Prototype]]: Array(0)
</script>

5 Symbol

新的原始数据类型，表示独一无二的值，类似与字符串

5.1 特性

• symbol值唯一， 是用来解决命名冲突的问题
• symbol值不能与其他的数据类型进行运算
• symbol 定义的对象属性 不能使用 for…in 循环遍历, 但是可以使用 Reflect.ownKeys 来获取对象的所有键名

5.2 创建symbol

• 唯一性是在内部进行实现的,外部封装,我们看不到唯一地址值

let s = Symbol()
console.log(s, typeof s)  // Symbol() 'symbol'

• 传入字符串
  • 字符串是作为传入字符串而存在的
  • 字符串用来描述我们创建的symbol, 和注释差不多
  • 标志虽然相同,但是不同symbol的地址值是不同的

let s = Symbol('yuiki')
let s1 = Symbol('yuiki')
console.log(s === s1) // false

• Symbol. for 创建, 此方式创建, 我们可以通过描述字符串得到唯一地址值

let s = Symbol.for('yuiki')
let s1 = Symbol.for('yuiki')
console.log(s === s1) // true

• ⭐无法进行运算, 加减乘除连接,同种symbol类型也不能

5.3.1 使用, 像对象中添加方法 up down

❗ 我们向一个对象中添加方法或属性,但是我们并不知道该对象是否已经存在该方法或属性

• 相比于我们预添加的对象, 自己额外声明一个对象
• 在对象中声明 symbol 的我们需要添加的方法或者属性

let game = {
  up: function () {
    console.log('down!!!')
  },
  down: function () {
    console.log('up!!!')
  }
}

let methods = {
  up: Symbol(),
  down: Symbol()
}

• 为原对象扩展方法即可

game[methods.down] = function () {
  console.log(`DOWN!!!`)
}
game[methods.up] = function () {
  console.log(`UP!!!`)
}

• 此时
  原对象和加入的方法不冲突 [外链图片转存中…(img-prjE1T3Q-1675393464359)]

5.3.2 使用, 直接为对象添加symbol方法

• 创建一个对象, 我们向其加入 symbol的方法
• ❌ 直接写入Symbol (symbol不是一个固定的属性, 我们无法为其加入方法)

let gal = {
  name: `hitachi`,
  // Symbol(): function() {}
}

• 补上 中括号, 为Symbol 加入描述字符串
  • 我们原本 想加入 say 方法, 变为symbol类的 say方法

let gal = {
  name: `hitachi`,
  [Symbol('say')]: function () {
    console.log(this.name)  // Symbol(say): ƒ ()
  }
}