this 关键字

概念: 每一个函数内部都有一个关键字 thisthis 的值, 之和函数的调用有关, 与函数书写无关

全局定义函数

function fn() {
console.log(this)   
}
fn()    //普通调用this指向window

对象内部的函数

// 2. 将函数 fn 赋值给 对象obj的c属性 fn 和 obj.c 是一个引用地址
function fn() {
console.log(this)   
}
var obj = {
  a: 1,
  b: '我是对象obj的属性B',
  c: fn
}
obj.c() // this === obj     this 指向了 调用者

定时器内部的函数

function fn() {
console.log(this)   
}
setTimeout(fn, 0)   // this === window
setInterval(fn, 1000)   // this === window

事件处理函数===>html:书写div结构并获取元素

function fn() {
console.log(this)   
}
var box = document.getElementById('box')
box.onclick = fn    // this === box     this 指向了 事件源

改变this指向的方法 ===> call; apply; bind

call方法:语法函数.call(this指向谁, 参数1, 参数2, 参数3...) 第二个位置的参数, 会传递到函数中

  var obj = {
     a: 1,
     b: 2,
     c: '我是对象obj的属性c'
  }
  function fn(x, y) {
  console.log(this, x, y)
  }
  fn.call(obj, 300, 400)

apply方法:函数.apply(this指向谁, [参数1, 参数2, 参数3]) 第二个位置的数组内数据, 会传递到函数内部

  var obj = {
     a: 1,
     b: 2,
     c: '我是对象obj的属性c'
  }
  function fn(x, y) {
  console.log(this, x, y)
  }
  fn.apply(obj, [500, 600])

bind方法:函数.bind(this指向谁, 参数1, 参数2, 参数3...) 第二个位置的参数开始, 会传递到函数中注意: bind 方法不会立即执行函数, 他会返回一个内部 this 修改完毕的新函数
```
  var obj = {
     a: 1,
     b: 2,
     c: '我是对象obj的属性c'
  }
  function fn(x, y) {
  console.log(this, x, y)
  }
  var newFn = fn.bind(obj, 700, 800)
  newFn()
```

let; const; var的使用及区别

语法:let 变量名 = 值 / const 变量名 = 值

不允许重复声明 (let/const不允许重复声明,var可以)

var a = 1
var a = 2    
console.log(a)   // var可以重复声明
let b = 1
let b = 2
console.log(b)   // let不允许重复声明
const c = 1
const c = 2
console.log(c)   // const不允许重复声明

变量提升 : let/const 声明的变量没有变量提升

console.log(a)
var a = 1
let a = 100
const a = 1000

块级作用域 let/const 声明的变量会受限于所有的{};var只受限于函数的块级作用域

if (true) {
  var a = 1
  let b = 2
  const c = 3
}
for (var i = 0; i <= 1; i++) {
  var a = 1
  let b = 2
  const c = 3
}
console.log(a)
console.log(b)
console.log(c)

let 与 const 的差异

  1. let 声明的叫做变量(后续可以修改内部的值);
  2. const 声明的叫做常量(后续不能修改内部的值, 也不能修改内部的引用地址)
  let 后续可以修改变量的值, 所以他首次定义时, 可以不赋值;

但是 const 声明的时常量, 后续不能重新修改他的值, 所以首次定义时, 必须赋值

箭头函数

定义: 就是对 ES5 普通函数的写法上的一个优化

ES5 普通函数定义
  function fn() {}
  const fn1 = function () { }

ES6 箭头函数
  const fn2 = () => {
      console.log('我是 fn2 箭头函数')
  }
  fn2()

箭头函数的优化
1. 参数只有一个时, 可以不写参数的小阔
```
 const fn3 = a => {
 console.log(a)
 }
 fn3(100)
```
2. 箭头函数的函数体, 只有一行代码, 那么可以省略大括号(并且会默认将这行代码 return)
```
 const fn5 = (a, b) => a + b
 let sum = fn5(100, 200)
 console.log(sum)
```

解构赋值

解构数组::ES6 解构赋值, 解构数组时, 赋值号左边必须写中括号, 代表数组的解构赋值
```
  var arr = [1, 2]
  let [num1, num2, num3] = arr
  console.log(num1, num2, num3)
```

解构对象:解构对象时, 赋值号左边必须写大括号, 代表对象的解构赋值

  var obj = {
      a: 11,
      b: 21,
      c: 31
  }
  let { a, b, c } = obj
  console.log(a, b, c)

展开运算符

语法: ...数组(对象) 作用: 展开数组或者对象===>相当于把数组两侧包裹的中括号去掉

  var arr = [1, 2, 3]
  console.log(arr)
  console.log(...arr)

  var obj = {
    a: 1,
    b: 2
  }
  var obj1 = {
    ...obj,
    c: 3,
    d: 4
  }
  console.log(obj1)

Map 和 Set

Set

  /**
   *  Map 和 Set
   * 
   *          es6 新推出的两种数据结构
   * 
   *      1. set  类似于 数组的 一种数据结构
   *              内部按照索引排序(但是不能通过索引取值)
   * 
   *          语法 let s = new Set([数据1, 数据2, 数据3])
   * 
   *          特点: 天生不支持重复数据
  */

  var arr = [1, 2, 3, 4, 5]
  console.log(arr)
  // console.log(arr[0]) // 数组允许使用索引获取到对应的值, set 不允许


  let s = new Set([3, 4, 5, 5, 5, 4, 4, 3])
  console.log('原始数据结构', s)
  // console.log(s[0])


  // 1. size (类似数组的 length); 作用: 获取到当前数据结构中 数据的数量
  // console.log(s.size)

  // 2. add 方法; 作用: 向当前数据结构中 新增数据
  // s.add(100)
  // s.add(5)
  // console.log('add 后的数据结构', s)

  // 3. has() 作用: 查询当前数据结构中是否拥有该数据; 找到的时候, 返回 true, 否则返回false
  // console.log(s.has(100))
  // console.log(s.has(5))

  // 4. delete(数据)   作用: 将当前数据结构中的 这个数据删掉
  // s.delete(5)
  // console.log(s)

  // 5. clear()   作用: 清空当前数据结构
  // s.clear()
  // console.log('清空后的数据结构 ', s)

  // 6. forEach   作用: 遍历数据结构, 拿到数据结构的每一项
  s.forEach(function (item, key, origin) {
      // set 数据结构是没有 key 所以 item 和 key 打印出来的值都一样
      console.log(item, key, origin)
  })

Map

  /**
   *  Map
   * 
   *      ES6 推出的一种数据结构
   * 
   *      和 set 一样, 也不支持重复数据
   * 
   *      类似于 对象的 一种数据结构
   *          但是 map 的 key 可以是任意类型的值
   * 
   *      语法: var m = new Map([key, value])
   * 
   *      在实际开发中, 我们使用 map 的场景一般为 想要将对象的 key 用于字符串之外的数据时使用
  */
  // var obj = {
  //     a: 1,
  //     b: 2
  // }
  // console.log(obj)
  // console.log(obj.a)  // 点语法, 将 a 当成一个字符串去对象中查找
  // console.log(obj["a"])   // 中括号语法, 去对象的key中查找一个 'a' 

  // var m = new Map([key, value])

  var arr = [1, 2, 3]
  var arr1 = [4, 5, 6]
  var m = new Map([[[500], [600]], [arr, arr1], ['arr123', arr1]])
  // console.log('原始数据结构: ', m)


  // 1. size  作用: 返回当前数据结构的 数据长度(多少个)
  // console.log(m.size)

  // 2. set() 作用: 向当前数据结构中, 新增数据
  m.set('newKey', [1, 2, 3, 4, 5])
  // console.log('set 新增数据后 的数据结构: ', m)

  // 3. get(key) 作用: 获取到指定key 对应的 value
  // console.log(m.get(arr))
  // console.log(m.get('newKey'))

  // 4. has(key)  作用: 查询数据结构中是否存在当前 key; 存在返回一个 true ,否则返回一个 false
  // console.log(m.has('12345'))
  // console.log(m.has('newKey'))

  // 5. delete    作用: 删除当前数据结构对应的 key
  // m.delete('newKey')
  // console.log(m)

  // 6. clear 作用: 清空当前数据结构
  // m.clear()
  // console.log(m)

  // 7. forEach
  m.forEach(function (item, key, origin) {
      /**
       *  item: 对应的 value
       *  key: 对应的 key
       *  origin: 对应的原始数据结构
      */
      console.log(item, key, origin)
  })

this 关键字 与 ES6