[JavaScript知识库]JS-part11.3-ES6- 箭头函数 / 函数的参数默认值 / 模板字符串 / 点点点运算符 / 解构赋值 / 对象的简写形式

一. ES6的箭头函数

+ 一种新的函数定义方式
+ 对于函数表达式的简写方式(匿名函数)
+ 匿名函数
  => var fn = function(){}
  => var obj = { fn: function(){} }
  => setTimeout( function(){}, 0)
  => setInterval( function(){}, 0)
  => [].forEach( function(){} )
  => div.onclick = function(){}
  => div.addEventListener('click', function(){})
  => ...
+ 语法: () => {}
  => (): 形参的位置
  => =>: 箭头函数的标志
  => {}: 代码段

var fn = function(){ console.log('我是一个函数')}
fn()

var fun = (a, b) => { 
    console.log('我是一个 fun 函数')
    console.log(a)
    console.log(b)
    }
fun(100, 200)

箭头函数的特性

1. 箭头函数如果只有一个形参
  => 那么可以省略小括号不写
  => (a) => {}
    -> a => {}

2. 箭头函数代码段里面只有一句话, 可以省略大括号和 return 不写
  => 并且会自动 return 这一句话的结果
  => () => { return 123 }
  => () => 123

3. 箭头函数里面没有 arguments
  => 压根没有, 用不了

4. 箭头函数里面没有 this 关键字
  => 官方解释: 箭头函数里面的 this 是 上下文(context), 外部作用域的 this 就是箭头函数内的 this
  => 私人解释: 你的箭头函数定义在哪一行, 上一行的 this 就是 箭头函数里面的 this

5. 箭头函数里面的 this 任何方法都改变不了
  => 因为箭头函数没有 this
  => call / apply / bind 不能改变箭头函数的 this 指向

// 1. 一个形参可以省略小括号不写
let fn = (a) => { console.log(a) }
let fun = a => { console.log(a) }

fn(100)    
fun(200)

let arr = [10, 20, 30, 40, 50]
let res = arr.every( function(item){ return item >= 10} )
let res2 = arr.every(item => { return item >= 10} )
console.log(res, res2)

// 2. 一句话可以省略大括号不写, 并且自动 return
let fn = (a, b) => { return a + b }
console.log(fn(10, 20))     
// 把 a + b 的结果当作 fun 的返回值
let fun = (a, b) => a+b
console.log(fun(20, 30))

let arr = [10, 20, 30, 40, 50]
let res3 = arr.every(item => item >= 10)
console.log(res3)

// 3. 箭头函数里面没有 arguments
let fun = function(){ console.log(arguments) }
let fn = () => { console.log(arguments) }
fun(100, 200, 300)
fn(10, 20, 30)    // Uncaught ReferenceError: arguments is not defined

// 4. 箭头函数里面没有 this
let div = document.querySelector('div')
div.onclick = function(){
    console.log(this)    // div
}

console.log(this)     // 该行(箭头函数定义的上一行)的 this 指向 window
div.onclick = () => {
    console.log(this)   // 箭头函数的 this 指向也和上一行保持一致, 是 window
}

div.onclick = function(){
   let fn = function(){
       console.log(this)    
   }
   fn()    // window
   // 该行是81行
   let fun = () => {      // 就是 81 行的 this
       console.log(this)
   }
   fun()   // div
}

// 该行是87行
let obj = {
    name: '我是 obj 对象',
    fn: function(){ console.log(this) },
    fun: () => { console.log(this) }
}

obj.fn()   // obj
obj.fun()  // window, 对象的成员用逗号隔开, 只是为了代码书写整齐, 实际上只是一行代码, 所以此时箭头函数的 this 是和 87 行保持一致

let div = document.querySelector('div')

div.onclick = function(){
    // 箭头函数的 this 在该行
    let obj = {
    name: '我是 obj 对象',
    fn: function(){ console.log(this) },
    fun: () => { console.log(this) }
    }

    obj.fn()   // obj
    obj.fun()  // div
}

// 5. 箭头函数改变不了 this 指向
let fn = () => { console.log(this) }
fn()   // window
let obj = {name: 'Jack'}
fn.call(obj)      // 改不了, 还是 window

二. 函数的参数默认值

+ 给函数的形参设置一个默认值
  => 如果你传递了实参, 就使用你传递
  => 如果你没有传递实参, 那么就使用默认值
  
+ 直接在形参后面使用 等于号(=) 进行赋值

// 1. 普通函数的参数默认值
function fn(a, b){
    console.log(a)
    console.log(b)
}
fn()     // undefined undefined

function fn(a = 100, b){
    // 形参 a 的默认值是 100
    console.log(a)
    console.log(b)
}
fn()     // 100 undefined
fn(20)     // 20 undefined
fn(20, 30)     // 20 30

// 2. 箭头参数也可以书写参数默认值
let fun = (a = 1000, b = 2000) => {
    console.log(a, b)
}
fun()    // 1000  2000
fun(100)    // 100  2000
fun(100, 200)    // 100  200

// 箭头函数只要你设置参数默认值, 不管你多少个形参, 都得写小括号
// let f = a =100 => {}    // 报错
let f = (a =100) => {}

三. 模板字符串

+ ES6 定义了一种声明字符串的方式
+ 使用 反引号(``)
+ 特点:
  1. 可以换行书写
  2. 可以直接进行变量的拼接
  3. 模板字符串可以调用函数
     => 字符串里面的内容是函数的参数
     => ${} 把字符串切开, 组合成一个数组当作第一个参数
     => 从左到右开始依次是每一个 ${} 里面的内容作为函数后面的参数

// 1. 换行书写
let str = `
  123
  456
`
// 2. 拼接变量
let age = 18
let str2 = `
  小明今年${ age }岁了
`
console.log(str2)

// 面试题可能会有
function fn(a, b, c){
    console.log(a)
    console.log(b)
    console.log(c)
}

var num = 100
var num2 = 200

fn`hello ${ num } world ${ num2 } 你好`
// 1. ${} 切开字符串  ['hello', 'world', '你好']
// 2. ${ num } 里面的 num 就是函数的第二个参数
// 3. ${ num2 } 里面的 num2 就是函数的第三个参数

四. 点点点(…)运算符

+ 展开运算符
  => 当你在函数的实参位置或者数组或者对象里面使用它的时候是展开
  => 就是把包裹的内容全部开放
+ 合并运算符
  => 当你在函数的形参位置使用它的时候是合并
  => 作用: 箭头函数没有 arguments, 我们就使用 合并运算符做一个

1. 展开运算符

// 1. 展开
let arr1 = [1, 2, 3, 4]
console.log(arr1)
console.log(...arr1)
console.log(Math.max(...arr1))

let arr2 = [...arr1, 5, 6, 7, 8]
console.log(arr2)

let obj = {
    name: 'Jack',
    age: 18
}

let obj2 = {
    ...obj,
    gender: '男'
}

console.log(obj, obj2)

2. 合并运算符

// 2. 合并
function fn(...a){
    // 定义一个 a 变量, 从第一个实参开始到最后一个实参全部获取, 放在一个数组里, 给了 a
    console.log(a)
}

fn(100, 200, 300, 400, 500, 600)

function fn(a, ...b){
    // 定义一个 a 变量, 接收第一个实参
    // 定义一个变量 b, 从第二个开始到最后一个实参放在一个数组里, 给了 b
    console.log(a)
    console.log(b)
}

fn(100, 200, 300, 400, 500, 600)

// 点点点运算符的作用
let fn = (...arg) => {
    console.log(arg)
}
fn(10, 20, 30, 40, 50)

五. 解构赋值

1. 解构数组

// 1. 解构数组
let arr = [10, 20, 30, 40]
// 通过获取数组中的索引 [0] 来获取数据
let a = arr[0]
// let b = arr[1]
// let c = arr[2]
// let d = arr[3]
// console.log(a, b, c, d)

// 解构赋值获取数组里面的数据
let [a, b, c, d] = arr
console.log(a, b, c, d)

// 解构多维数组
let arr = [10, 20, [30, 40, [50]]]
let d = arr[0]         // 10
let d = arr[1]         // 20
let d = arr[2][0]         // 30
let d = arr[2][1]         // 40
let e = arr[2][2][0]      // 50
console.log(a, b, c, d, e)

// 解构赋值的形式
let [a, b, [c, d, [e]]] = arr
console.log(a, b, c, d, e)  // 10 20 30 40 50

// 交换变量
var a = 5
var b = 6
console.log(a, b)     // 5 6
var [b, a] = [a, b]
console.log(a, b)     // 6 5

2. 解构对象

+ 定义: 快速从 对象 或者 数组 里面获取一些数据

+ 分成两种
  1. 解构对象
    => 语法: let[变量1, 变量2, ...] = [数据1, 数据2, ...]
    => 也可以解构多维数组
  2. 解构数组
    => 语法: let { key1, key2, ...} = {键值对1, 键值对2, ...}
    => 解构的时候可以给解构的变量起一个别名
      -> { key1: 别名 } = {}
    => 也可以解构多维对象

// 2. 解构对象
let obj = { name: 'Jack', age: 18, gender: '男'}
// let name = obj.name
// let age = obj.age
// let gender = obj.gender
// console.log(name, age, gender)

// 解构赋值
let { name, age, gender } = obj
console.log(name, age, gender)

// 给解构的变量起别名
// let n = obj.name
let { name: n, age: a, gender, score } = obj  // 等价于 let n = obj.name
console.log(n, a, gender, score)

// 解构多维对象
let o1 = {
    a: 100,
    b: 200,
    o2: {
        c: 300,
        o3: {
            d: 400
        }
    }
}

console.log(o1)
// d
// let d = o1.o2.o3.d
// let c = o1.o2.c
// let b = o1.b
// let a = o1.a
// console.log(a, b, c, d)

// 解构赋值
let {a, b, o2: { c, o3: { d } } } = o1
console.log(a, b, c, d)
// let { c, o3: { d } } = o1.o2
// let c = o1.o2.c
// let { d } = o1.o2.o3
// let d = o1.o2.o3.d

六. 对象的简写形式

+ 在 ES6 标准下, 有一个对象的简写方式
 1. 当 key 和 value 一模一样的时候, 可以只写一个
 2. 当某一个 key 的值是一个函数, 并且不是箭头函数的时候, 可以直接省略 function 关键字 和冒号 不写

// 1. key 和 value 一样, 可以省略一个不写
let age = 18
let obj = {
    name: 'Jack',
    age,   // 等价于 age : age
    gender: '男'
    // gender: 'gender' // 不能省略
}
console.log(obj)

// 2. 函数省略
let obj = {
    name: '我是 obj 对象',
    f1: function(){ console.log(this) },  // 可省略, 等价于 f3
    f2: () => { console.log(this) },   // 不可省略
    f3 (){ console.log(this) }
}
obj.f1()   // obj
obj.f2()   // window
obj.f3()   // obj