19.ES5和ES6

一.ES5和ES6

• 就是不断的更新完善,要考虑那些方法是ES5或者ES6的,看看是不是浏览器都支持

1.1复习一下

• ES5增加的数组常用方法:forEach,map,filter

1.2 JSON方法

• json 是一种特殊的字符串个是，本质是一个字符串
• 就是对象内部的 key 和 value 都用双引号包裹的字符串（必须是双引号）

var jsonObj = { "name": "Jack", "age": 18, "gender": "男" }

1.2.1 JSON的两个方法

• json.stringify 是将 js 的对象或者数组转换成为 json 格式的字符串

  var obj = {
    name: 'Jack',
    age: 18,
    gender: '男'
  }
  var arr = [
    {
      name: 'Jack',
      age: 18,
      gender: '男'
    },
    {
      name: 'Jack',
      age: 18,
      gender: '男'
    },
    {
      name: 'Jack',
      age: 18,
      gender: '男'
    }
  ]
  
  var jsonObj = JSON.stringify(obj)
  var jsonArr = JSON.stringify(arr)
  
  console.log(jsonObj)//就是 json 格式的对象字符串
  console.log(jsonArr)//就是 json 格式的数组字符串

• JSON.parse 是将 json 格式的字符串转换为 js 的对象或者数组

  var jsonObj = '{ "name": "Jack", "age": 18, "gender": "男" }'
  var jsonArr = '[{ "name": "Jack", "age": 18, "gender": "男" }, { "name": "Jack", "age": 18, "gender": "男" }, { "name": "Jack", "age": 18, "gender": "男" }]'
  
  var obj = JSON.parse(jsonStr)
  var arr = JSON.parse(jsonArr)
  
  console.log(obj)//就是我们 js 的对象
  console.log(arr)//就是我们 js 的数组

1.3 this指向

函数内部的 this 只和函数的调用方式有关系，和函数的定义方式没有关系

• 全局定义的函数直接调用，this => window
• 普通函数，this => window
• 定时器的处理函数，this => window
• 自调用函数，this => window
• forEach，this => window
• 对象内部的方法调用，this => 对象自己
• 事件处理函数，this => 事件源
• 箭头函数 this => 指向父级

1.4 call 和 apply 和 bind

• 改变this的指向,是强行改变 this 指向的方法

1.4.1 call

• call 方法是附加在函数调用后面使用，可以忽略函数本身的 this 指向
• 语法： 函数名.call(要改变的 this 指向，要给函数传递的参数1，要给函数传递的参数2， ...)

  var obj = { name: 'Jack' }
  function fn(a, b) {
    console.log(this)
    console.log(a)
    console.log(b)
  }
  fn(1, 2)
  fn.call(obj, 1, 2)
  

  • fn() 的时候，函数内部的 this 指向 window
  • fn.call(obj, 1, 2) 的时候，函数内部的 this 就指向了 obj 这个对象
  • 使用 call 方法的时候
    • 会立即执行函数
    • 第一个参数是你要改变的函数内部的 this 指向
    • 第二个参数开始，依次是向函数传递参数

1.4.2 apply

• apply 方法是附加在函数调用后面使用，可以忽略函数本身的 this 指向

• 语法： 函数名.apply(要改变的 this 指向，[要给函数传递的参数1， 要给函数传递的参数2， ...])

  var obj = { name: 'Jack' }
  function fn(a, b) {
    console.log(this)
    console.log(a)
    console.log(b)
  }
  fn(1, 2)
  fn.call(obj, [1, 2])
  

  • fn() 的时候，函数内部的 this 指向 window
  • fn.apply(obj, [1, 2]) 的时候，函数内部的 this 就指向了 obj 这个对象
  • 使用 apply 方法的时候
    • 会立即执行函数
    • 第一个参数是你要改变的函数内部的 this 指向
    • 第二个参数是一个 数组，数组里面的每一项依次是向函数传递的参数

1.4.3 bind

• bind 方法是附加在函数调用后面使用，可以忽略函数本身的 this 指向

• 和 call / apply 有一些不一样，就是不会立即执行函数，而是返回一个已经改变了 this 指向的函数

• 语法： var newFn = 函数名.bind(要改变的 this 指向); newFn(传递参数)

  var obj = { name: 'Jack' }
  function fn(a, b) {
    console.log(this)
    console.log(a)
    console.log(b)
  }
  fn(1, 2)
  var newFn = fn.bind(obj)
  newFn(1, 2)
  

  • bind 调用的时候，不会执行 fn 这个函数，而是返回一个新的函数
  • 这个新的函数就是一个改变了 this 指向以后的 fn 函数
  • fn(1, 2) 的时候 this 指向 window
  • newFn(1, 2) 的时候执行的是一个和 fn 一摸一样的函数，只不过里面的 this 指向改成了 obj

二.ES6新增的内容

2.1 let和const关键字

• let 和 const 不允许重复声明变量
• let 和 const 声明的变量不会在预解析的时候解析（也就是没有变量提升）
• let 和 const 声明的变量会被所有代码块限制作用范围

2.2 let 和 const 的区别

• let 声明的变量的值可以改变，const 声明的变量的值不可以改变
• let 声明的时候可以不赋值，const 声明的时候必须赋值
• 者都存在暂时性死区。也不允许重新说明。
• const会在内存当中锁死储存的内容，只读，意味着不能够修改，但是储存引用数据类型的时候会失效。
• 通过let和const设置的变量不会和顶层作用域对象window挂钩。

2.3 let 和var的区别

• 作用域不同。var全局或者局部let是块级
• 通过let声明的变量不能够重复声明
• 在循环当中let不会产生覆盖
• let会形成暂时性死区

2.4 块级作用域

• {}结合let使用。只能执行里面的代码,外部访问不到

2.5 箭头函数

• 箭头函数是 ES6 里面一个简写函数的语法方式
• 重点： 箭头函数只能简写函数表达式，不能简写声明式函数
• 语法： (函数的行参) => { 函数体内要执行的代码 }

2.5.1箭头函数的特殊性

• 箭头函数内部没有 this，箭头函数的 this 是上下文的 this
• 箭头函数内部没有 arguments 这个参数集合

2.5.2 函数传递参数的时候的默认值

箭头函数如果你需要使用默认值的话，那么一个参数的时候也需要写 （）

2.5.3 箭头函数的使用方式：

• 1.省略function关键字，形参列表后面加上=>，代码体不变，语法如上
• 2.如果只有一个形参，代表形参的()可以省略，两个及以上不可以省略
• 3.如果函数内只有一句代码，那么{}可以省略
• 4.如果函数中只有一句代码，并且是返回值，那么{}和return都可以省略let fn1 = ()=>"hello,world";

2.5.4 箭头函数需要注意

• 箭头函数没有this，使用this的时候回去找上一层作用域
• 不可以通过箭头函数创建构造函数
• 在箭头函数当中不存在arguments这个对象
• 箭头函数不能够作为generator函数

2.5.5 箭头函数使用的地方

let obj = {
fn1: ()=>{} // 最好使用普通函数
}
oBtn.addEventListener('click',()=>{}) // 最好使用普通函数
Tip：在构造函数添加方法的时候也最好别用。
总结：只要是要用到this的时候 都不建议使用箭头函数

三.解构赋值

• {} 是专门解构对象使用的
• [] 是专门解构数组使用的
• 不能混用

3.1 解构对象

• 快速的从对象中获取成员

	const obj = {
    name: 'Jack',
    age: 18,
    gender: '男'
  }
  // 前面的 {} 表示我要从 obj 这个对象中获取成员了
  // name age gender 都得是 obj 中有的成员
  // obj 必须是一个对象
  let { name, age, gender } = obj

3.2 解构数组

• 快速的从数组中获取成员

  // 使用解构赋值的方式从数组中获取成员
  const arr = ['Jack', 'Rose', 'Tom']
  // 前面的 [] 表示要从 arr 这个数组中获取成员了
  // a b c 分别对应这数组中的索引 0 1 2
  // arr 必须是一个数组
  let [a, b, c] = arr

3.3解构赋值注意

• 在es6中null是一个正常的值，而undefined是未定义，算是非正常值。
• 如果用null给一个变量用来解构赋值，变量可以顺利接受，但是如果用undefined给变量进行解构赋值，变量是不可以接受的
• let [a = fn1] = [undefined];
• 因为解构赋值失败，所以会直接将函数赋值给变量，然后执行
• 当等号左边的值和等号右边的对象当中的key不相同时，会发生解构失败，结果为undefined。

四.模版字符串

• ES5 中我们表示字符串的时候使用 '' 或者 ""
• 在 ES6 中，我们还有一个东西可以表示字符串，就是 ``（反引号）

ES5和ES6的区别

• ES6反引号可以换行书写
• ES6反引号可以直接在字符串里面拼接变量，用${变量}

五.展开运算符

• ES6 里面号新添加了一个运算符 ... ，叫做展开运算符

• 作用是把数组展开

  let arr = [1, 2, 3, 4, 5]
  console.log(...arr) // 1 2 3 4 5
  

• 合并数组的时候可以使用

  let arr = [1, 2, 3, 4]
  let arr2 = [...arr, 5]
  console.log(arr2)
  

• 也可以合并对象使用

  let obj = {
    name: 'Jack',
    age: 18
  }
  let obj2 = {
    ...obj,
    gender: '男'
  }
  console.log(obj2)
  

• 在函数传递参数的时候也可以使用

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