ESMAScript6（es6）新特性

2019-08-17  本文已影响0人  陈yc

ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

常量

const PIE = 3.14;

箭头函数：

() => {//括号内放参数（若参数只有一个，括号可以省略）
    //若函数内命令行只有一条，会作为函数的返回值）
}

let evens = [1, 2, 3, 4, 5];
let odds = evens.map(v => v + 1);

默认参数：

function f(x = 1, y = 2, z = 3){
  return x + y + z;
}

可变参数：

function f(...arg){
  var sum = 0;
  arg.forEach(item => {// 遍历参数并相加
    sum += item;
  })
  return sum;
}
f(1, 2, 3);// 调用

合并数组：

var arr_1 = [1, 2, 3];
var arr_2 = ['a', 'b', 'c', ...params1];

对象词法扩展：

function getCar(make, model, value) {
  return {
    // 简写变量
    make,  // 等同于 make: make
    model, // 等同于 model: model
    value, // 等同于 value: value
 
    // 属性可以使用表达式计算值
    ['make' + make]: true,
 
    // 忽略 `function` 关键词简写对象函数
    depreciate () {
      this.value -= 2500;
    }
  };
}
let car = getCar('Barret', 'Lee', 40000);
// 输出结果：
// { 
//     make: 'Barret',
//     model:'Lee',
//     value: 40000,
//     makeKia: true,
//     depreciate: function()
// }

二进制和八进制字面量：

ES6 支持二进制和八进制的字面量，通过在数字前面添加 0o 或者0O 即可将其转换为八进制值

let oValue = 0o10;
console.log(oValue); // 8
let bValue = 0b10; // 二进制使用 `0b` 或者 `0B`
console.log(bValue); // 2

对象和数组解构：

解构可以避免在对象赋值时产生中间变量

// 数组解构
function foo() {
  return [1, 2, 3];
}
let [a, b, c] = foo();
console.log(a, b, c); // 1 2 3

// 对象解构
function bar() {
  return {
    x: 4,
    y: 5,
    z: 6
  };
}
let {x: x, y: y, z: z} = bar();
console.log(x, y, z); // 4 5 6

对象超类：

var parent = {
  foo () {
    console.log("Hello from the Parent");
  }
}
var child = {
  foo () {
    super.foo();
    console.log("Hello from the Child");
  }
}

Object.setPrototypeOf(child, parent);
child.foo(); 
// 输出结果：
// Hello from the Parent
// Hello from the Child

模板语法和分隔符：

let user = 'John';
console.log(`Hi ${user}!`); // Hi John!

for...of：

let nicknames = ['Dido', 'Vava', 'Sandy'];
nicknames.size = 3;

for (let nickname of nicknames) {
  console.log(nickname);// Dido, Vava, Sandy
}

Map 和 WeakMap：

Map:
var myMap = new Map();
 
var keyString = "a string",
    keyObj = {},
    keyFunc = function () {};
 
// 设置值
myMap.set(keyString, "value 与 'a string' 关联");
myMap.set(keyObj, "value 与 keyObj 关联");
myMap.set(keyFunc, "value 与 keyFunc 关联");
 
myMap.size; // 3
 
// 获取值
myMap.get(keyString);    // "value 与 'a string' 关联"
myMap.get(keyObj);       // "value 与 keyObj 关联"
myMap.get(keyFunc);      // "value 与 keyFunc 关联"
WeakMap:
let w = new WeakMap();
w.set('a', 'b'); 
// 会报错：Uncaught TypeError: Invalid value used as weak map key
 
var o1 = {},
    o2 = function(){},
    o3 = window;
 
w.set(o1, 37);
w.set(o2, "azerty");
w.set(o3, undefined);
 
w.get(o3); // undefined
 
w.has(o1); // true
w.delete(o1);
w.has(o1); // false

Set 和 WeakSet：

// Set
let mySet = new Set([1, 1, 2, 2, 3, 3]);
mySet.size; // 3
mySet.has(1); // true
mySet.add('strings');
mySet.add({ a: 1, b:2 });

mySet.forEach(item => {
  console.log(item);
});
// 输出结果：
// 1
// 2
// 3
// 'strings'
// Object { a: 1, b: 2 }

Set 同样有 delete() 和 clear() 方法。

// WeakSet
var ws = new WeakSet();
var obj = {};
var foo = {};
 
ws.add(window);
ws.add(obj);
 
ws.has(window); // true
ws.has(foo);    // false, foo 没有添加成功
 
ws.delete(window); // 从结合中删除 window 对象
ws.has(window);    // false, window 对象已经被删除

类：

ES6 中有 class 语法。值得注意是，这里的 class 不是新的对象继承模型，它只是原型链的语法糖表现形式。

class Task {
  constructor () {
    console.log("task instantiated!");
  }
 
  showId () {
    console.log(23);
  }
 
  static loadAll () {
    console.log("Loading all tasks..");
  }
}
 
console.log(typeof Task); // function
let task = new Task(); // "task instantiated!"
task.showId(); // 23
Task.loadAll(); // "Loading all tasks.."
类中的继承和超集：
class Car {
  constructor() {
    console.log("Creating a new car");
  }
}
 
class Porsche extends Car {
  constructor() {
    super();
    console.log("Creating Porsche");
  }
}
 
let c = new Porsche();
// 输出结果：
// Creating a new car
// Creating Porsche

Symbol

Symbol 是一种新的数据类型，它的值是唯一的，不可变的。ES6 中提出 symbol 的目的是为了生成一个唯一的标识符，不过你访问不到这个标识符

var sym = Symbol( "some optional description" );
console.log(typeof sym); // symbol

注意：这里 Symbol 前面不能使用 new 操作符，如果它被用作一个对象的属性，那么这个属性会是不可枚举的。

var o = {
  val: 10,
  [ Symbol("random") ]: "I'm a symbol",
};
console.log(Object.getOwnPropertyNames(o)); // val

如果要获取对象 symbol 属性，需要使用Object.getOwnPropertySymbols(o)。

迭代器（Iterators）：

var arr = [11,12,13];
var itr = arr[Symbol.iterator]();
 
itr.next(); // { value: 11, done: false }
itr.next(); // { value: 12, done: false }
itr.next(); // { value: 13, done: false }
 
itr.next(); // { value: undefined, done: true }

你可以通过 Symbol.iterator 自定义一个对象的迭代器。

Generators：

Generator 函数是 ES6 的新特性，它允许一个函数返回的可遍历对象生成多个值。
在使用中你会看到 * 语法和一个新的关键词 yield:

function *infiniteNumbers() {
  var n = 1;
  while (true){
    yield n++;
  }
}
 
var numbers = infiniteNumbers(); // returns an iterable object
 
numbers.next(); // { value: 1, done: false }
numbers.next(); // { value: 2, done: false }
numbers.next(); // { value: 3, done: false }

Promises：

ES6 对 Promise 有了原生的支持，一个 Promise 是一个等待被异步执行的对象，当它执行完成后，其状态会变成 resolved 或者rejected。

var p = new Promise(function(resolve, reject) {  
  if (/* condition */) {
    // fulfilled successfully
    resolve(/* value */);  
  } else {
    // error, rejected
    reject(/* reason */);  
  }
});

每一个 Promise 都有一个 .then 方法，这个方法接受两个参数，第一个是处理 resolved 状态的回调，一个是处理 rejected 状态的回调：

p.then(val => console.log("Promise Resolved", val),
       err => console.log("Promise Rejected", err));

注意事项：

上一篇下一篇

猜你喜欢

热点阅读