JS高级-ES6

let

• ES6中新增加的用于声明变量的关键字

  • let声明的变量只在所处于的块级有效
  • 使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性

  if(true){
  	let num = 120
  }
  console.log(num) //num is not defined
  

  • 不存在变量提升

  console.log(num)//num is not defined
  let num = 120
  

  • 暂时性死区

  var temp = 'let变量'
  if(true){
  	console.log(temp)//temp is not defined
  	let temp = '数据中心'
  }
  

const

• 声明常量，常量就是值(内存地址)不能变化的量
  • 具有块级作用域

  if(true){
  	const num = 123
  }
  console.log(num)//num is not defined
  

  • 声明常量时必须赋值

  const PI //Missing initializer in const declaration
  

  • 常量赋值后，值不能修改

  <script>
    const PI = 3.14
    //PI = 120 //Assignment to constant variable.
    console.log(PI)
  
    const arr = [120,121,30]
    arr[0] = 156
    arr[1] = 180
    console.log(arr)
    //arr = [123,125] //Assignment to constant variable.
  
  </script>
  

var \ let \ const区别

var	let	const
函数级作用域	块级作用域	块级作用域
变量提升	不存在变量提升	不存在变量提升
值可更改	值可更改	值不可更改

解构赋值

• ES6允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构

数组解构

let [a,b,c] = [1,2,3]
console.log(a)//1
console.log(c)//3

对象解构

let person = {
	name: '张三',
	age: 18,
	hobbys: ['篮球','足球']
}
let {name,age,hobbys} = person
let [h1,h2] = hobbys
console.log(name)//张三
console.log(hobbys)
console.log(h2)//足球

对象解构重命名

let person = {
	name: '张三',
	age : 18
}
let {name: uname,age: uage} = preson
console.log(uname)//张三
console.log(uage)//18

箭头函数

• ES6中新增的定义函数的方式

  () => {}
  const fn = () => {}
  

箭头函数的几种情况

• 函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号

  const sum = (num1 ,num2) => num1 + num2
  sum()
  

• 参数只有一个，可以省略小括号

  const num = num => num + 1
  num()
  

箭头函数中的this

• 箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this

<script>
      var obj = {
        name: '张三'
      }
      function fn(){
        console.log(this)//obj
        return () => {
          console.log(this)//obj
        }
      }
      const func = fn.call(obj)
      func()
    </script>

剩余参数

• 剩余参数语法允许我们将一个不定数量的参数表示为一个数组

function sum (first,...args){	
	console.log(first)//10
	console.log(args)//[23,20]
}
sum(10,23,20)

Set

• ES6提供了新的数组结构Set，它类似于数组，但是成员的值都是唯一的，没有重复的值
• Set本身是一个构造函数，用来生成Set数据结构

  const s = new Set()
  

• Set函数可以接受一个数组作为参数，用来初始化

  const s1 = new Set([1,2,3,4,5,2])
  console.log(s1.size)//5
  console.log(...s1)
  

Set实例方法

• add(value)
  • 添加某个值，返回Set结构本身
• delete(value)
  • 删除某个值，返回一个布尔值，表示删除是否成功
• has(value)
  • 返回一个布尔值，表示该值是否为Set的成员
• clear()
  • 清除所有成员，没有返回值

遍历

• Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值

s1.forEach(value => console.log(value)) // 1 2 3 4 5

简单学习内容，后面再补充