JavaScript学习——ES6(ECMAScript6)

声明变量方式 let const

let ， const 的区别：

1. 重复赋值
   • let可以重复赋值，const定义后不能赋值
2. 声明时赋值
   • let声明的时候可以不赋值，const声明的时候必须赋值

var 与let ， const 的区别：

1. 不存在变量提升（变量预解析）
   • var 命令会发生变量提升现象，即变量可以在声明之前使用，值为undefined。
   • let 和 const 没有变量声明提升的功能，必须要先声明才能使用。否则使用let和const会显示 ‘ReferenceError: Cannot access ‘a’ before initialization’
2. 不允许重复声明
   • var命令能重复声明，后者覆盖前者
   • let 和 const不允许在相同作用域内，重复声明同一个变量
3. 作用域
   • var 的作用域是以函数为界限
   • let 和 const 的作用域是块作用域，块级作用域指 { } 内的范围
   • var 可以定义全局变量和局部变量，let 和 const 只能定义局部变量
   • const 的声明的常量不能被修改，但对于引用类型来说，堆内存中的值是可以被改变的。
4. 变量作为全局属性
   • 定义的变量会作为window对象的属性，let不会
5. 预解析
   • var有预解析，let和const没有预解析
   • 变量没有声明赋值时，用var声明会显示 ‘undefined’，let和const会显示 ‘ReferenceError: Cannot access ‘a’ before initialization’

暂时性死区(临时性死区)

let、const没有预解析，在没有赋值的时候就开始使用，就会报错，在定义好但没有使用的这个代码区间就是临时性死区。

流程在进入作用域创建变量，到变量开始可被访问访问之前的一段时间，称为临时性死区（TDZ）

箭头函数

箭头函数是es6语法中针对函数表单式的一种简写

ES5函数的定义有两种常用方法：

• 声明式 function show(){ } -无法用箭头函数简写

• 赋值式 var fn = function(){} -可以用箭头函数简写

  语法：(形参)=>{要执行的代码}

箭头函数的使用方法

1. 当函数没有参数时，（）不能省略

2. 当函数只有一个参数，且函数体是一句代码，且是返回语句时，参数的

   （）可省略、函数体 {} 可省略、return 可省略、中间使用 => 连接

3. 若函数体只有一句，且不是return 语句， 不能省略 {}

4. 若函数体有多条语句，不能省略 {}

5. 若函数有多个参数，不能省略()

6. 若函数的返回值为对象，此时不能省略return

使用箭头函数注意

1. 箭头函数不适用于声明函数
2. 箭头函数不适用于DOM事件
3. 箭头函数不能作为构造函数（迭代器）
4. 箭头函数内不能使用arguments，普通函数里有
5. 不能使用yield命令
6. 原来的函数怎么调用 现在就怎么调用 函数名()
7. 箭头函数没有自己this，他的this就是所处环境的this，定义时候绑定，就是this是继承自父执行上下文中的this

​

函数参数默认值

​ 语法：

​ function fn(形参1 = 默认值,形参2= 默认值){}

​ (形参1 = 默认值,形参2= 默认值)=>{}

  function fn(a, b) {

      console.log(a, b, '普通函数')

    }
  fn(1, 2)

​ 参数没有传递实参时用默认值，参数传递实参时就去用传递的值

function fn(a = 10, b) {

      console.log(a, b, '普通函数用了es6')
   }

fn()

​ 如果箭头函数只有一个形参,但是设置了默认值，就不能省略小括号

var func = (a = 'hello') => { console.log(a) }

   func(123)

扩展运算符…

… 作用于数组、对象

​ 作用是作为展开运算符和合并运算符使用

1. ​ 作为展开运算符

   1. 展开数组

      var arr = [10, 20, 30]
      console.log(...arr) // 10 20 30
      
      // 展开后可以作为方法的实参使用
      
      var res = Math.max(...arr)
      
      console.log(res) // 30
      
      // 展开后作为新数组的元素
      
      var newArr = [1, 2, 3, ...arr]
      
      console.log(newArr) // (6)[1,2,3,10,20,30]
      

   2. 展开对象

      var obj = { name: '海绵宝宝', age: 123 }
      
      var o = {
      
          a: 1,
      
          b: 2,
      
      	c: 3,
      
          ...obj
      
        }
        console.log(o) 
        // {"a": 1,"b": 2,"c": 3,"name": "海绵宝宝","age": 123}
      

2. 作为合并运算符

   1. 合并数组

      var arr1 = [9, 10, 11]
      
      var newArr2 = [...arr, ...arr1]
      
      console.log(newArr2) // (6)[10,20,30,9,10,11]
      

   2. 函数合并参数

      function fn(...arg) {
      
            console.log(arg) //(5)[1,2,3,4,100]
      
          }
      
      fn(1, 2, 3, 4, 100)
      

   3. 箭头函数

      • 注意：扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错

      var ff = (n, ...arg) => {
      
           console.log(n) // 1
      
           console.log(arg) // (2)[2,4]
      
      }
      
      ff(1, 2, 4)
      

解构赋值

允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

作用：快速的从数据集合中获取数据

1. ​ 解构数组

   语法: var [变量1，变量2] = 数组

   var arr = ['海绵宝宝', '天线宝宝', '花园宝宝', '小猪佩奇', 123]
   
   var [e] = arr
   
   console.log(e) // 海绵宝宝
   
   var arr = [1, 2, [3, 4, [5, [16]]]]
   
   var [a1, b1, c1] = arr
   
   console.log(a1, b1, c1) // 1，2(3)[3,4,[5,[16]]]
   
   var [a, b, [c, d, [e]]] = arr
   
   console.log(e + 100) // 105
   

2. ​ 解构对象

   语法：var {键} = 对象

   var o = { a: 1, b: 2 }
   
   // 给解构出来的变量给另起一个别名
   var { a:haha, b } = o
   
   console.log(a, b) //1 2
   
   console.log(haha) // 1
   
   // 解构多级对象
   var info = {
       
   	username: '张三',
       
   	love: { boyfriend: '李四', boyfriend2: '王小妹' }
           
   }
   
   var { username, love: { boyfriend2 } } = info
           
   console.log(boyfriend2) // 王小妹
           
   var boyfriend = info.love.boyfriend
           
   console.log(info.love.boyfriend) // 李四
   

对象简写

对象中单属性名和属性值变量名同名的时候，我们就可以只写一个属性名

set和map

set和map都是es6新增的数据结构

Set结构

Set类型类似数组类型（类数组结构） ,是值的集合

集合里面的值是不会重复的，set类型里面的每一个值都是唯一的

var arr0 = ['a', 'b', 123, true, true, 123]

var mySet = new Set(arr0)

console.log(mySet) // {0:'a', 1:'b', 2:123, 3:true}

方法：返回值是set可以连缀
add(val) 加元素
delete(val) 删元素
has(val) 判断是否包含元素 boolean
clear() 删除所有数据

属性：
size 元素个数

使用new Set()实例化

var arr = [12, 11, 10, 10, 9, 9, 8, 4, 5]

// 定义一个set类型

var newSet = new Set(arr)

newSet.add('海绵宝宝')

var result = [...newSet]

console.log(result) // (7)[12,11,10,9,8,4,5]

Map结构

类似对象类型，里面是键值对的集合

这些键值对是有序的，且键名可以是任意类型，键的类型范围不局限于字符串，可以是各类的，相比于Object类型的“键值对” map结构提供了一个“值值对”

方法：返回值是Map实例可以连缀
set(key,val) 加元素
get(key) 取元素
has(key) 判断是否包含元素 boolean

​ delete(key) 删元素

clear() 删除所有数据

属性：
size 键值对个数

使用new Map()实例化

var arr = [1, 2, 3]

// 定义一个Map

var myMap = new Map([

      ['name', '海绵宝宝'], // “键名”是name  值是海绵宝宝

      ['age', 12],// “键名”是age  值是12

      [1, 999],// “键名”是111  值是999

      [undefined, 23],// “键名”是undefined  值是23

      [true, 888],// “键名”是true  值是888

      [arr, function () { }]// “键名”是arr  值是function

   ])

myMap.set(null, 'qwe')

set和map的区别

1. map是键值对，set是值的集合，当然键和值可以是任何的值
2. map可以通过get方法获取值，而set不行，因为set只有值
3. 都可以通过迭代器进行 for…of遍历
4. set的值是唯一的，可以用来做数组去重，map由于没有格式限制，可以做数据存储

for in和for of

for in 可以遍历对象和数组， for of 可以遍历数组、set、map

• ​ 相同点： for in 可以遍历数组 for of 也可以遍历数组
• ​ 不同点： for in 可以遍历对象 for of 不行

var arr = ['海绵宝宝', '天线宝宝', '巴士宝宝']

var obj = { name: '海绵宝宝', age: 12 }

for (var value in arr) {

      console.log(value) // 数组索引0 1 2

      console.log(arr[value]) // 数组的值 海绵宝宝

    }

for (var value of arr) {

      console.log(value) // 数组的值 海绵宝宝

    }

for (var value in obj) {

      console.log(value)    // for in 拿对象里面的键

      console.log(obj[value])  // for in 拿对象里面的值

    }

模块化语法

以前使用src引入js文件，在es6可以使用模块化语法导入js模块

每个js文件都是一个独立的模块，即一个文件就是一个作用域，每个模块里面的数据只能自己模块使用

1. 设置script的 type=‘module’

2. 引入 要以html文件的http格式打开

3. 导入方式

   1. 导入重命名

      import { rand as nnn } from ‘./public.js’

   2. 导入整个模块

      import * as nnn from ‘./public.js’

   3. 导入默认模块

      import Tool from ‘./public.js’

模板字符串

传统字符串字面量使用单引号''或者双引号""

模板字符串使用反单引号(backquote) ``

• 模板字符串可以插入表达式 ${expression}

var str = '宝宝巴士'

var age = 120

console.log(str + '今年已经' + age + '岁了')

console.log(`${str}明年就${age + 1}岁了`)

类语法书写构造函数

​ 语法：

​ class 类名（也叫构造函数名） {

​ constructor (形参1,形参2){

​ 这里的代码类似es5语法中的构造函数的代码

​ }

​ 函数名1(){

​ 这里的代码类似es5语法中的 构造函数.prototype.函数名 = function(){}

​ }

​ }

class Person {

      constructor(name, age) {

        this.name = name

        this.age = age

      }

      // 原型链上的函数

      sayHi(a) {
      
        console.log('hello', a)

      }

    }

let p2 = new Person("宝宝巴士", 18)

p2.sayHi(a)

console.log(p2)