let 和 const
- const适用于创建常量,不可修改
- let 自带块级作用域,没有变量声明提升,不允许重复声明
变量的解构赋值
- 数值的解构赋值
let arr=[1,2,3] let [num1,num2,num3]=arr
- 对象的解构赋值,使用:改名,也可以设置默认值
let obj={ username="张三", userage: 20 } let {userage:age,username,sex='男'}=obj console.log(username,age,sex)
- 字符串的解构赋值
let str="hello" let[a,b,c,d,e]=str
字符串扩展
- 模板字符串(高级的字符串拼接)
- ${字符串}
数组的扩展
- 数组的扁平化扩展
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数据结构
- 只能用new创建
- 成员不可以重复
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类
- 类的内部默认只能写方法
- 类的内部必须存在constructor函数
- 除了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())
- 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());
- 子class中如果父class有constructor必须用super方法调用父class类
函数参数的扩展
- rest剩余参数
function fun(a,...rest){ console.log(rest) } fun(1,2,3,4)
- 箭头函数
- 箭头分为左侧和右侧,左侧为参数部分,默认使用小括号包裹
- 当只有一个参数的时候可以直接写参数,没有参数可以写空的()右侧为函数体部分,默认使用{}包裹
- 当函数直接返回值时直接写在右侧就行
- 当函数只返回对象的时候可以直接({})
- 箭头函数的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编译