ES6学习笔记

TIPS

JavaScript ES6学习笔记

回顾 var

1. 变量声明提升, 可重复定义, 全局变量挂载到window
2. 回顾作用域 (变量生命周期): 全局作用域, 函数作用域

let 和 const (块级变量声明)

• 没有变量声明提升, 不能重复定义, 不挂载到window
• 声明的变量和{}配合产生块级作用域一生命在大括号内部的变量无法在外部使用
• 产生临时Temporal Dead Zone (临时死区)
• 解决闭包问题 (ES6规范后引入的)

TIPS

const >> let >> var (const 浏览器不用去监控他是否变化, 可以节约性能)

存储常量的空间里的值不能改变, 如果 const 定义的对象, 用对象点属性的方法修改值, 是可以的

... 展开 & 收集运算符(spreed & rest):

此运算符在不同地方使用有不同的功效, 可以从写和读两个角度考虑

• 写

  function test(...arg) {};
  test(1,2,3);
  // 收集作用, 收集为数组, 例如在函数中传入不固定的实参,
  // 但是rest只能在函数传参的最后一位出现例如 function test(a, b, ...arg) {}
  

• 读

  var arg= [1, 2, 3];
  console.log(...arg);
  // 展开作用
  

作用: 简化书写长度, 提升开发效率

ES6/ES7: ES6可以处理数组, ES7能处理对象

Object.assign 合并对象, 浅层clone, 可以理解成从 $.extend 那里演化过来

ES6变化 - destructuring

解构 (结构化值)

解过程中, 具有赋值和变量声明两个功能

目的在于把等号左右长的相似的两个东西内部的值取出来

对象数组都可以参与解构

let obj= {name:'xxxxx', age:18}
let {name, age} = obj;

作用: 简化书写长度, 提升开发效率

默认参数:

let {name, age,sex='male'} = obj;

数组的解构赋值

let {0:x, 1:y, 2:x } = [1,2,3]

ES6变化 - 箭头函数

箭头函数特点:

1. 不用写function关键字
2. 只能作为函数使用不能 new, 没有原型
3. 参数不能重复命名
4. 返回值可以不写 return, 但是有时需要配合{}
5. 内部 argumentsthis 由定义时外围最接近一层的非箭头函数的 arguments 和 this 决定其值, 对于 this, 如果没有被非箭头函数包裹, 则 this 指向 window

ES5 - Object.defineProperty

ES5规范开始后续版本迭代, 也在致力于做一件事, 就是把js底层已有的功能, 提供给开发者使用, defineProperty就是其中一个, 此方法会可直接在一个对象上定义一个新的具有详细描述的属性, 或者修改一个对象的现有属性, 并返回这个对象

使用: Object.defineProperty(对象, 属性, 描述符);

描述符: 对象的属性的进行详细描述

1. 数据描述符:

   • value:xxx' 属性值, 默认
   • writable:true 是否可写, 默认false
   • configurable:true 是否可配置, 默认false
   • enumerable:true 是否可举, 默认false

2. 存取描述符: (set和get方法与value和writable属性互斥)

   • set:function(){} 属性访问器进行写操作时调用该方法
   • get:function(){} 属性访问器进行读操作时调用该方法

作用: 双向数据绑定的核心方法, 主要做数据劫持操作 (监控属性变化), 同时是后期ES6中很多语法糖底层实现的核心方法

WARNING

如果描述符中同时出现: value, writable, 和 set, get两组的话, 会出现异常, 切记不要同时使用

class

class创建类, extends, constructor, super

class xxx extends xxx {
  constructor (){
   super ()
  }
}

class定义的类的原型prototype不能枚举

ES7变化 - class提案属性

• static property = xxx: 静态属性
• property = xxx: 私有属性
• @decorator*饰器