ES6新增的内容

• 在 ES6 的时候，多了两个关键字 let 和 const，也是用来声明变量的；

• 只不过和 var 有一些区别；

1、let 和 const 不允许重复声明变量

 // 使用 var 的时候重复声明变量是没问题的，只不过就是后面会把前面覆盖掉
      var num = 100;
      var num = 200;
      // 使用 let 重复声明变量的时候就会报错了
      let num = 100;
      let num = 200; // 这里就会报错了
      // 使用 const 重复声明变量的时候就会报错
      const num = 100;
      const num = 200; // 这里就会报错了

2、let 和 const 声明的变量不会在预解析的时候解析（也就是没有变量提升）

  // 因为预解析（变量提升）的原因，在前面是有这个变量的，只不过没有赋值
      console.log(num); // undefined
      var num = 100;
      // 因为 let 不会进行预解析（变量提升），所以直接报错了
      console.log(num); // undefined
      let num = 100;
      // 因为 const 不会进行预解析（变量提升），所以直接报错了
      console.log(num); // undefined
      const num = 100;

3、let 和 const 声明的变量会被所在代码块限制作用范围（块级作用域）

 // var 声明的变量只有函数能限制其作用域，其他的不能限制
      if (true) {
        var num = 100; //全局变量
      }
      console.log(num); // 100
      // let 声明的变量，除了函数可以限制，所有的代码块都可以限制其作用域（if/while/for/...）
      if (true) {
        let num = 100;
        console.log(num); // 100
      }
      console.log(num); // 报错
      // const 声明的变量，除了函数可以限制，所有的代码块都可以限制其作用域（if/while/for/...）
      if (true) {
        const num = 100;
        console.log(num); // 100
      }
      console.log(num); // 报错

·let 和 const 的区别

1、let 声明的变量的值可以改变，const 声明的变量的值不可以改变。

  let num1 = 100;
      num1 = 200;
      console.log(num); // 200
      const num2 = 100;
      num2 = 200; // 这里就会报错了，因为 const 声明的变量值不可以改变（我们也叫做常量）

2、let 声明的时候可以不赋值，const 声明的时候必须赋值。

let num1;
      num = 100;
      console.log(num); // 100
      const num2 // 这里就会报错了，因为 const 声明的时候必须赋值

箭头函数

• 箭头函数是 ES6 里面一个简写函数的语法方式

• 重点： 箭头函数只能简写函数表达式，不能简写声明式函数

• 语法： (函数的行参) => { 函数体内要执行的代码 }

   const fn = function (a, b) {
          console.log(a);
          console.log(b);
        };
        // 可以使用箭头函数写成
        const fun = (a, b) => {
          console.log(a);
          console.log(b);
        };
  
  
        const obj = {
          fn: function (a, b) {
            console.log(a);
            console.log(b);
          },
        };
        // 可以使用箭头函数写成
        const obj2 = {
          fn: (a, b) => {
            console.log(a);
            console.log(b);
          },
        };

  箭头函数的特殊性

• 箭头函数内部没有 this，箭头函数的 this 是上下文的 this

  // 在箭头函数定义的位置往上数，这一行是可以打印出 this 的
  // 因为这里的 this 是 window
  // 所以箭头函数内部的 this 就是 window
  const obj = {
    
    fn: function () {
      console.log(this)
    },
    // 这个位置是箭头函数的上一行，但是不能打印出 this
    fun: () => {
      // 箭头函数内部的 this 是书写箭头函数的上一行一个可以打印出 this 的位置
      console.log(this)//window
    }
  }
  obj.test = ()=>{
      console.log(this)//window
  }
  
  obj.fn()
  obj.fun()

• 按照我们之前的 this 指向来判断，两个都应该指向 obj
• 但是 fun 因为是箭头函数，所以 this 不指向 obj，而是指向 fun 的外层，就是 window

• 箭头函数内部没有 arguments 这个参数集合

  const obj = {
    fn: function () {
      console.log(arguments)
    },
    fun: () => {
      console.log(arguments)
    }
  }
  obj.fn(1, 2, 3) // 会打印一个伪数组 [1, 2, 3]
  obj.fun(1, 2, 3) // 会直接报错

• 函数的行参只有一个的时候可以不写 () 其余情况必须写

  const obj = {
    fn: () => {
      console.log('没有参数，必须写小括号')
    },
    fn2: a => {
      console.log('一个行参，可以不写小括号')
    },
    fn3: (a, b) => {
      console.log('两个或两个以上参数，必须写小括号')
    }
  }

• 函数体只有一行代码的时候，可以不写 {} ，并且会自动 return

​
const obj = {
  fn: () => {
    console.log('没有参数，必须写小括号')
  },
  fn2: a => {
    console.log('一个行参，可以不写小括号')
  },
  fn3: (a, b) => {
    console.log('两个或两个以上参数，必须写小括号')
  }
}

​

解构赋值

• 解构赋值，就是快速的从对象或者数组中取出成员的一个语法方式

解构对象

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

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

解构数组

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

// 使用解构赋值的方式从数组中获取成员
const arr = ['Jack', 'Rose', 'Tom']

// 前面的 [] 表示要从 arr 这个数组中获取成员了
// a b c 分别对应这数组中的索引 0 1 2
// arr 必须是一个数组
let [a, b, c] = arr

注意

• {} 是专门解构对象使用的

• [] 是专门解构数组使用的

• 不能混用

模版字符串

• ES5 中我们表示字符串的时候使用 '' 或者 ""

• 在 ES6 中，我们还有一个东西可以表示字符串，就是 ``（反引号）

1. 模板字符串可以很好解决双引号和单引号不能换行的缺点

   let str = `
   	hello
   	world
   `
   
   console.log(str) // 是可以使用的

2. 反引号可以直接在字符串里面拼接变量

   // 模版字符串拼接变量
   //在 `` 里面的 ${} 就是用来书写变量的位置
   let num = 100
   let str = `hello${num}world${num}`
   console.log(str) // hello100world100

   展开运算符

• ES6 里面号新添加了一个运算符 ... ，叫做展开运算符
• 作用是把数组展开

let arr = [1, 2, 3, 4, 5]//->   1, 2, 3, 4, 5
console.log(...arr) // 1 2 3 4 5
console.log(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)


function box(...arr){
    console.log(arr) [1,2,3,4,5,6]
}
box(1,2,3,4,5,6)

新增数据结构set和map

• set类似数组，可以不会存放重复元素
• 参数1：数组。也可以不传

let s1 = new Set([a,b,a]); 
console.log(s1)//a,b 会把重复的元素去掉
        // 遍历
        s1.forEach(function(v){
            console.log(v)//遍历set中的元素
        })
        
        
 //数组去重 把arr中的重复元素去掉，得到一个新数组
let arr = [1,2,3,1,2,3] 
let resArr = [...new Set(arr)]
let resArr = Array.from(new Set(arr))

• map类似对象，可以存放键值对，属性名：属性值， map的属性名可以是任何类型的，而普通对象的属性名只能是字符串

let obj = [
            ['username',"aaa"],
            ['age',19]
        ]
        // 创建
        let m = new Map(obj)
        // 设置键值对
        m.set('sex','男');
        m.set(true,'真')
        // 根据键 获取 值
        m.get('sex')
        m.get(true)