ES类似于对于JS、TS的统一规范，每一年进行规定更新，所以会有ES5,ES6* 编译 => AST =>babel 监听 转义
下面是一个例子
var zhaowa = 'zhaowa' //之前声明变量
zhaowa='es'
//固定量ES6
const LIMIT =10
const OBJ_MAP={
a:'A',
b:'B'
上述可知，const是常量
常量有什么特征
1.不允许重复声明赋值
//ES5
Object.defineProperty(window,'arg',{
value:'yy',
writable:false
})
console.log(arg) //yy
//并且在更改后重新输出 =>浏览器不会报错2
//ES6
const arg3='yy'
const arg4
arg4='yy' //=>一样会报错哦~
//更改后重新输出，浏览器会报错
块级作用域
//ES5
if(true){
var arg1='yy'
}
console.log(arg1) //yy
//ES6
if(true){
const arg1='yy'
}
console.log(arg1) //error
无变量提升
//ES5
console.log(arg1)
var arg1= 'yy'
=> var arg1
console.log(arg1)
arg1='yy'
//ES6
console.log(arg1) //error
const arg1='yy'
//dead zone 死驱
if(true){
console.log(arg3) //error
const arg3='yy'
}
进一步探讨
const obj={
teacher:'yy',
coutse:'zhaowa'
}
obj.course='es'
obj={} //NO OK
对象合并
Object.assign(obj,obj1)
obj={
...obj1,
...obj2
}
//const 常量的是obj 引用类型
//obj =>栈 (地址ajsddr) =>堆(内容值)
//常量的是addr
**面试题:**破局方法
const obj2={
teacher:'yy',
course:'es'
}
Object.freeze(obj2) //冻结后
obj2.course='ts' //不会报错，但是被冻结后无法更改了
//追问
const obj3={
teacher:'yy',
course:'es',
zhaowa:{
score:5
}
}
Object.freeze(obj3)
obj3.zhaowa.score=4.9 //成功
//freeze只能冻结当前层级 =>如何破局
//通过递归访问key值，判断key值进行再次递归调用
function deepFreeze(obj){
Object.freeze(obj)
(Object.keys(obj) || []).forEach(key=>{
if(typeof obj[key]==='object'){
deepFreeze(obj[key])
}
})
}
deepFreeze(obj3)
deconstruction 解构
const zhaowa={
teacher:'yy',
course:'es'
}
//es5
const teacher =zhaowa.teacher
//es6
const{
teacher,
course
}=zhaowa
//es5
const arr=['aa','bb','cc']
const a=arr[0]
const b=arr[1]
//es6
const {a,b,c}=arr
别名
const {
course,
name:className //=>将name变成className
teacher:
{
name,
age
}
}=zhaowa
arrow_function 箭头函数
//es 5
function test(a,b){
return a+b
}
const test=function(a,b){
return a+b
}
const result=test(1,1)
//es6
const test=(a,b)=>{
return a+b
}
//箭头连接 输入和输出
const test= (a,b)=> a+b
上下文
const obj={
teacher:'yy',
getTeacher:function(){
console.log('function',this.teacher)//yy
},
course:'es',
getCourse:()=>{
console.log('course',this) //无法指向到course，因为这是范式
}
}
注意以下场景
dom操作
const btn = document.querySelector("#btn")
btn.addEventListener('click',function(){
this.style.coloer='#fff'
})
这里如果将function改为箭头函数，那么this指向就无法完成=>因为箭头函数是一个范式
类操作
//下面function不可以改成箭头函数
function Obj(techer,course){
this.teacher=tercher
this.course=course
}
const Obj1=new Obj('aa','es')
class
助力JS更加具备面向对象的能力
//es5
function Course(teacher,course){
this.teacher=teacher
this.course=course
}
Course.prototype.getCourse=function(){
return `teacher:${this.teacher},course:${this.course}`
}
//es6
class Course{
//构造过程需要的东西
constructor(teacher,course){
this.teacher=teacher
this.course=course
}
getCourse(){
/...
}
}
console.log(typeof Course) //function
属性定义
class Course{
//构造过程需要的东西
constructor(teacher,course){
this._teacher=teacher //_ +xxx内部属性
this.course=course
}
//外部对teacher进行操作时候 =>进行的加工操作
get teacher(){
return '爪哇'+this._teacher
}
set teacher(){
throw Error() //只读，不能进行修改
this._teacher=val
}
}
1.变量的只读
2.如何实现私有属性 -闭包
class Course{
//构造过程需要的东西
constructor(teacher,course){
this._teacher=teacher //_ +xxx内部属性
let _course='es6'
//闭包
this.getCourse=()=>{
return _course //只能拿到给出的，访问不到内部的
}
}
}
3.适配器模式
class utils{
constructor(core){
this._main=core
this._name={
first:'zhaowa',
last:'.....'
}
}
//获取name的时候进行加工
get name(){
return this._name.first +this._name.last
}
}
总结
ES主要是对于Javascript与Typescript的语法规范化的规定，每一年由广大程序员提出建议，进行统一探讨后进行发布，供大家参考，ES6主要是const、class、desconstruciton等提出。
