ES6 学习笔记

let 和 const

1. const适用于创建常量，不可修改
2. let 自带块级作用域，没有变量声明提升，不允许重复声明

变量的解构赋值

1. 数值的解构赋值

       let arr=[1,2,3]
       let [num1,num2,num3]=arr
   

2. 对象的解构赋值，使用：改名，也可以设置默认值

       let obj={
           username="张三",
           userage: 20
       }
       let {userage:age,username,sex='男'}=obj
       console.log(username,age,sex)
   

3. 字符串的解构赋值

       let str="hello"
       let[a,b,c,d,e]=str
   

字符串扩展

1. 模板字符串（高级的字符串拼接）
   • ${字符串}

数组的扩展

1. 数组的扁平化扩展

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

   • flatmap()相当于先执行map()在执行flat()

       let arr2=[1,2,3]
       console.log(arr2.fil(1))
   

set数据结构

1. 只能用new创建
2. 成员不可以重复

       let arr = [1, 2, 3, 4, 5, 6, 1, 2, 1, 2, 3]
       let newArr = new Set();
       arr.forEach(function (ele) {
           newArr.add(ele);
       })
       console.log([...newArr]);
   

   • delete()删除某个成员
   • has()查找是否存在某个成员
   • clear()清空
   • forEach()遍历

class类

1. 类的内部默认只能写方法
2. 类的内部必须存在constructor函数
3. 除了constructor函数之外的函数都相当于共有方法

       class Point{
           constructor(x,y){
               this.x=x
               this.y=y
           }
           tostring(){
               return `(${this.x},${this.y})`
           }
       }
       let p =new Point(1,2)
       console.log(p)
       console.log(p.toString())
   

4. class类的继承
   • 子class中如果父class有constructor必须用super方法调用父class类

         class Point {
             constructor(x, y) {
                 this.x = x
                 this.y = y
             }
             tostring() {
                 return `我的坐标为(${this.x},${this.y})`
             }
         }
         class ColorPoint extends Point {
             constructor(x, y, color) {
                 super(x, y)
                 this.color = color
             }
             say() {
                 return `I'm ${this.color}`
             }
         }
         let colorP = new ColorPoint(1, 1, "red")
         console.log(colorP.tostring());
         console.log(colorP.say());
     

函数参数的扩展

1. rest剩余参数

       function fun(a,...rest){
           console.log(rest)
       }
       fun(1,2,3,4)
   

2. 箭头函数
   • 箭头分为左侧和右侧，左侧为参数部分，默认使用小括号包裹
   • 当只有一个参数的时候可以直接写参数，没有参数可以写空的()右侧为函数体部分，默认使用{}包裹
   • 当函数直接返回值时直接写在右侧就行
   • 当函数只返回对象的时候可以直接({})
   • 箭头函数的this指向问题
     • 创建的时候就指向好了

         let add=(x,y=10)=>x+y
         let double = x =>{
             x=x*2
             return x;
         }
         
     

使用webpack编译打包es6模块语法-安装node

• 安装命令行工具 gitbash
• 新建一个文件夹(webpack-es6)
• 在文件夹内打开命令行工具执行npm init -y命令。该命令的作用是将这个文件夹变成node项目，从而可以让这个项目使用npm下载对应的包。
• 项目内安装webpack执行 npm install webpack webpack-cli --save-dev
• 在项目的根目录下新建 index.html src/index.js a.js,在a.js内写一些es6模块代码（导出变量），index.js 内导出a.js模块内的导出。
• 在项目根目录下打开命令行工具执行npx webpack命令。该命令的默认作用是将项目下的src 文件夹下的index.js打包编译到dist文件夹下的 main.js ,然后index.html引入打包好之后的js 文件，在浏览器中查看。
• 如果更改index.js以及a.js 需要重新执行npx webpack编译