ECMAScript 6

 参考:http://es6.ruanyifeng.com/

 ES6支持:http://kangax.github.io/compat-table/es6/

一、新增类型

1、Symbol类型实例,用来当作唯一值

对象成员的key有两种,一种是字符串,一种是Symbol
let s1 = Symbol("描述")
a[s1] = 1;
a = {
   [s1]: 1

}

symbol 成员不能被遍历,可以通过以下方法获取:Object.getOwnPropertySymbols(object)

var s1 = Symbol.for("名称"); // 查找有名Symbol

Symbol.keyFor(s1); // 得到Symbol的名称

2、Class
//类,是对function.prototype的改造写法
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  static toString() { // 静态方法,通过类调用
    return '';
  }
}
// 实例化,是对new function的改造写法
let b = new Point();
// 继承,是对 prototype = new function 的改造写法
class ColorPoint extends Point {
}

3、新增数据结构 序列 Set
    var s = new Set([]);
s.add()、s.size、s.delete()、s.has()、s.clear()、set.forEach(function)
// Set 转 数组
var a = [...s]
4、新增数据结构 WeakSet
    与Set的区别:只能存放对象,不能遍历,垃圾回收时不会考虑它包含的引用
作用:可以用它来缓存DOM对象,DOM被删除时其资源会被回收,从而避免内存泄漏
5、新增数据结构 键值映射 Map
    var m = new Map([['key1','value1'],['key2','value2']);
m.set(key,'value'); //key 可以是对象
m.get()、m.has()、me.delete()、m.size、m.clear()、m.forEach(function)
//Map 转 数组
[...map.values()]

6、新增数据结构 WeakMap,特性同 WeakSet

二、语法

// 模块,变量声明,解构赋值,箭头函数,扩展运算符

export let [a, b] = (arr)=> [...arr]

1、模块

   export var m1 = 1;
   export{
       m1 as m4,
       m2,
  m3
   }
   export default m1; // 模块的默认成员
import {firstName, lastName as surname, year} from './profile'; 
import * as circle from './circle'; // 将所有输入放到对象 circle中
import m form './profile'; // 获取模块的默认成员
import {default as m} from './profile';// 获取模块的默认成员

2、变量声明
   let变量与var变量的区别:let变量在块内不会“声明提前”。块内声明了一个let变量,那么在这个声明前(暂时性死区)使用该变量会报错。function外声明的let变量也不会是全局变量。
   const常量只能 在声明时 初始化一次,   其他特性与let相同

3、解构赋值

   var [a, b, c] = [1, 2, 3];
   var {a,b} = {1,2};

   var [a,b] = '12';

   function({a, b}){}

3、箭头函数:this指向与外层一样,不能作为构造函数,不能作为Generator函数,没有arguments,没有prototype

4、扩展操作符... 与 for-of循环

可遍历对象(Array、Map、Set、String、arguments、NodeList、Generator函数值)有一个成员是[Symbol.iterator],即遍历器生成方法,可以用for...of 遍历

var array =  [...iterable] // 可遍历对象转数组

二、扩展

1、对象 扩展
   冻结: Object.freeze(object); //使得object的成员不能被改变
   严格相等:Object.is({}, {}); // false
   合并:Object.assign(o1,o2); //相当于 _.extend(o1,o2);
   //成员定义方式扩展
   var x = 1;
   var o = {
       x, // 成员属性简写,等价于 x:x
  f(){
     // 成员方法简写,等价于 f:function(){}
  },
  [x]:1 // 属性名表达式,等价于 o[x] = 1;
   }
   // 原型
   设置原型:Object.setPrototypeOf(o1, o2); // 相当于 o1.__proto__ = o2
   获取原型:Object.getPrototypeOf(obj); //相当于 obj.__proto__
2、字符串扩展
    新增方法: includes()、startsWith()、endsWith()、repeat()、String.raw(加上转义)
模板字符串:`` 包裹,可以书写多行字符串。字符串中可以通过 ${} 来引用上下文中的变量
3、数组扩展
   Array.form(类数组转数组),Array.of(一组值转数组)
   [].find(function(){return boolean;//查找}),[].findIndex(),[].fill(用给定值填充),[].includes()
   // 遍历器,也适用于 Set、Map
   遍历键:for (let index of ['a', 'b'].keys()) {  }
   遍历值:for (let elem of ['a', 'b'].values()) {}
   遍历键值对:for (let [index, elem] of ['a', 'b'].entries()) {}
4、函数扩展
   参数默认值
   function f(x=1){
   }
   // 解构赋值 结合 参数默认值
   function f({x, y = 5}) {
      return [x, y];
   }
   function f({x, y} = { x: 0, y: 0 }) {
      return [x, y];
   }
   // rest参数(剩余参数),... 理解为展开运算符,把一个对象展开成用逗号隔开的序列
   function f(...values){
      for (var val of values) {
      }
   }
   // 解构赋值 结合 rest参数(ES7)
   let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
   // 函数名
   f.name
   // 函数绑定 (ES7)

   foo::bar;   // 等同于   bar.bind(foo);

四、异步编程

1、Generator函数
function* gen() {
  yield 'hello';
  var reset = yield 'world';
  return reset;
}
var hw = gen(); // 得到状态遍历器
hw.next() // 遍历,得到{ value: 'hello', done: false }

hw.next(0) // 0 传给 reset

2、Promise 对象

const promise = new Promise(function(resolve, reject) {
  
});
promise.then(result => {···}).catch(error => {···}).finally(() => {···});
Promise.all(promises)
Promise.race(promises)

3、async 函数
相当于 Generator函数 + 自动执行器,Generator函数内 yield promise,自动执行器 hw.next().then(result => {hw.next(result)})
const asyncReadFile = async function () {
  const f1 = await readFile('/etc/fstab');  // 将 readFile 的结果赋给 f1,再进行下一步
  const f2 = await readFile('/etc/shells');
};

asyncReadFile(); // 返回 Promise 对象

五、对象操作

1、Proxy对象,新对象重载了原对象或原方法的默认行为(get,set,apply)
var newObj = new Proxy(obj, handlers);

2、Reflect,提供对象操作的等效(proxy前)方法(set,get,has,definedProperty,deleteProperty,apply)

六、修饰器

//类修饰器
function decorator(target) {
  target.prototype.isTestable = true;
}
@decorator  
class A {}
// 等同于
A = decorator(A) || A;  // 这段代码在编译时运行,而非运行时
//方法修饰器
function readonly(target, name, descriptor){
  descriptor.writable = false;
  return descriptor;
}
class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}
// 类似于
Object.defineProperty(Person.prototype, 'name', readonly(Person.prototype, 'name', descriptor));
阅读更多
个人分类: JS基础
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭