【ES6】ES6的一些新东西

let关键字（和var关键字的区别）

• 变量不能重复声明
• 拥有块级作用域
• 不存在变量提升
• 不影响作用域链的效果

举个例子

现在的需求是，页面上有三个方块儿，点击方块使其变色

• 用var关键字声明变量

  //此处忽略样式
  
  
  
  
  
  

  • 这段代码的第10行，不能换成items[i].style.background = 'red'，因为此处的i为全局变量，但是这个点击事件绑定的是一个回调函数，在代码内的循环完成时，i的值已经变成了3，而且是全局存在的，所以通过items[i]去调用对应的元素发生的就是是数组越界

• 改用let关键字

  let items = document.getElementByClassName('item')
  for(var i = 0; i < items.length; i++){
    items[i].onclick = function(){
      items[i].style.background = 'red'
    }
  }
  

  • 此时，代码的第5行就可以改成这种写法，因为let关键字声明的变量拥有块级作用域。在点击每个div时，每个i都是新的，可以在点击页面元素时生成一个新的i，再通过索引去改变对应的元素的style属性

const关键字

• 用于声明常量
• 声明时一定要初始化
• 一般使用大写的常量名
• 初始化完成后的常量值不可修改
• 拥有块级作用域
• 修改对于用const声明的数组和对象的元素时，不视作修改常量，不会报错，因为const声明的数组或对象的地址值没有发生改变，即使引用的数组和对象的本地已经发生了改变

析构赋值

其实一种语法糖，方便用户按照一定的模式，从数组或对象中提取值，并对变量进行赋值

• 数组的析构

  const F4 = ['师傅', '大师兄', '二师兄', '三师弟']
  let [a, b, c, d] = F4
  

  此时的a, b, c, d就分别为师傅，大师兄，二师兄和三师弟了

• 对象的析构

  const person = {
    name: 'tom',
    age: 18,
    eat: function(){
        console.log('吃东西')
    }
  }
  let {name, age, eat} = person
  
  console.log(name) //打出tom
  console.log(age)  //打出18
  eat() //打出'吃东西'
  

  对对象进行析构赋值，可以方便对对象内部的方法进行调用

模板字符串

用反引号声明字符串

• 模板字符串的内容中可以直接出现换行符

  let str = `
                        
  
                            
  张三
                            
  罗翔
                        
                    `
  

• 可以直接进行变量的拼接

  let name = '原神'
  let output = `原来你也玩${name}` //不需要用字符串的加法进行拼接
  

  ${xxx}是固定格式

简化对象的写法

ES6允许在花括号内部直接写入变量和函数，作为对象的属性和方法

• ES5:

  let name = '五指山'
  let price = 200
  
  var place = {
    name: name,
    price: price
  }
  

• 在ES6中可以进行简化的写法，同名的属性可以省略写，还可以直接省略的添加新的对象方法

  let name = '五指山'
  let price = 200
  
  const place = {
    name,
    price,
    visit(){
        console.log('参观')
    }
  }
  

箭头函数

一种新的声明函数的方式

• 本来的函数声明方式

  let fn = function(形参列表){
    ....
  }
  

• 箭头函数声明方式

  let fn = (形参列表) => {
    ...
  }
  

• 箭头函数的特性

  • this是静态的，始终指向函数声明时所在的作用域下的this的值，不能用call, apply去改变

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

  • 箭头函数不能使用arguments变量

• 箭头函数的简写

  • 当形参有且只有一个时，可以省略形参列表的小括号

    let add = n =>{
        return n+1
    }
    

  • 当代码体只有一条语句时，可以省略花括号。如果省略花括号，就要省略return语句

    let plus = n => n*n
    

• 箭头函数的适用范围

  • 适用于this无关的回调函数，例如定时器，数组的方法回调
  • 不适用于与this有关的回调，例如事件回调，对象的方法

设置函数参数默认初始值

ES6允许给函数参数设置初始值

• ES5及以前

  function add(a, b, c){
    return a+b+c
  }
  
  console.log(add(1,2))//此时会打印出NaN
  

• ES6，给c赋了一个默认值。一般有默认值的形参放在后面

  function add(a, b, c=10){
    return a+b+c
  }
  
  console.log(add(1,2))//此时会打印出13
  

• 结合析构赋值使用

  function connect({host='127.0.0.1', username='root', password='root', port='2000'}){
    console.log(host)
    ...
    console.log(port)
  }
  connect({
    host:'localhost',
    username:'admin',
    password:'admin',
    port:2000
  })
  

rest参数

ES6中新引入的参数，用于获取函数的实参，替代arguments

function date(...args){
    console.log(args)
}
date('tom', 'jerry', 'bob') //打印出一个真正的数组，而不是arguments参数返回的伪数组

• rest参数必须放在参数列表的最后面

扩展运算符...

可以将数组转化为用逗号分隔的参数序列

const boys ['tom', 'jerry', 'bob']
function login(){
    console.log(arguments)
}

login(...boys) //使用...将一个arguments拆成了3个元素的数组

• 用于合并数组

  const east = ['骑士', '猛龙']
  const west = ['湖人', '勇士']
  const allStar = [...east, ...west]
  
  console.log(allStar)
  

• 用于拷贝数组（只能扩展和深拷贝第一层的值）

  const east = ['骑士', '猛龙']
  const chosen = [...east]
  
  console.log(east)
  

• 将伪数组转化为真正的数组

  const divs = document.querySelectorAll('div')
  const divArray = [...divs]
  
  console.log(divArray)
  

新的数据类型：Symbol

• Symbol的值是唯一的
• Symbol的值不能与其他数据进行运算
• Symbol定义的对象，其属性不能使用for..in进行循环遍历，可以用Reflect.ownKeys来获取所有的键名

let s = Symbol('this is symbol')

• 向对象内部添加方法，不需要管本身对象有没有同名的方法

  let game = {.......} //内部很复杂
  
  let methods = {
    up: Symbol(),
    down: Symbol()
  }
  
  game[methods.up] = () =>{
    console.log("go up")
  }
  game[methods.down] = () =>{
    console.log("go down")
  }