快速掌握ECMAScript 6新特性

栏目: JavaScript · 发布时间: 6年前

内容简介:快速掌握ECMAScript 6新特性

ES6简介

ES6(即ES2015)是最新版本的ECMAScript标准。

ES6是该语言的重大更新。

主流的JS引擎正在对这些新特性 提供支持

ES6特性

箭头函数(Arrows)

箭头函数是函数的简写,使用=>语法。

箭头函数可以写在块语句内也可以写在表达式内。

箭头函数内的this与其外部的this一致(arguments同)。(看过编译后的ES5就可以发现其实是在外部将this存为_this,然后箭头函数内使用_this)

// Expression bodies
var evens = [1,3,5,7,9];
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
var pairs = evens.map(v => ({even: v, odd: v + 1}));// 如返回对象则必须使用()将对象包裹

// Statement bodies
var fives = [];
nums.forEach(v => {
  if (v % 5 === 0)
    fives.push(v);
});

// Lexical this
var bob = {
  _name: "Bob",
  _friends: ["cuiyang"],
  printFriends() {
  var cythis = this;
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
      console.log(cythis === this);
  }
}

// Lexical arguments
function square() {
  let example = () => {
    let numbers = [];
    for (let number of arguments) {
      numbers.push(number * number);
    }
    return numbers;
  };
  return example();
}

square(2, 4, 7.5, 8, 11.5, 21); // returns: [4, 16, 56.25, 64, 132.25, 441]

类(Classes)

ES6的类是基于原型继承语法的语法糖。

除了支持原型继承外,还支持super调用,实例,静态方法,构造器

// constructor,super,getter,setter,method
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

class ColorPoint extends Point {
  constructor(x, y, color) {
    // this.color = color; // ReferenceError.因为子类实例的构建,是基于对父类实例加工,只有super方法才能返回父类实例。
    super(x, y);
    this.color = color; // 正确
  }
  update(camera) {
    //...
    super.update();  // setter: 123
  }
  get color() {
    return 'getter';  //getter
  }
  set color(value) {
    console.log('setter: '+value);
  }
}

// static method
class Foo {
    static classMethod() {
        return 'hello';
    }
}
Foo.classMethod() // 'hello'
var foo = new Foo();
// foo.classMethod(); // TypeError: foo.classMethod is not a function

增强的对象字面量(Enhanced Object Literals)

对象字面量新增支持:指定原型,简写属性赋值,定义方法,调用super,计算属性名

var obj = {
    // __proto__
    __proto__: theProtoObj,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
     // Super calls
     return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ 'prop_' + (() => 42)() ]: 42
};

模板字符串(Template Strings)

模板字符串提供了构建字符串的语法糖,可在字符串模板内添加标记以定制生成不同的字符串。

// Basic literal string creation
`In JavaScript '\n' is a line-feed.`

// Multiline strings
`In JavaScript this is
 not legal.`

// String interpolation
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

// Construct an HTTP request prefix is used to interpret the replacements and construction
POST`http://foo.org/bar?a=${a}&b=${b}
     Content-Type: application/json
     X-Credentials: ${credentials}
     { "foo": ${foo},
       "bar": ${bar}}`(myOnReadyStateChangeHandler);

解构(Destructuring)

解构语法是一个Javascript表达式,可以将值从数组或对象提取到不同的变量中。

// list matching
var [a, , b] = [1,2,3];

// object matching
var { op: a, lhs: { op: b }, rhs: c }
       = getASTNode()

// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()

// Can be used in parameter position
function g({name: x}) {
  console.log(x);
}
g({name: 5})

// Fail-soft destructuring
var [a] = [];
a === undefined;

// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

上瘾

上瘾

[美] 尼尔·埃亚尔、[美] 瑞安·胡佛 / 钟莉婷、杨晓红 / 中信出版集团 / 2017-5 / 49.00元

——为什么我们会习惯性地点开某个App? ——这种使用习惯到底是如何养成的? ——为什么有些产品能让我们戒不掉,而其他的产品却不行? ——是否有什么秘诀能让用户对你的产品形成使用习惯,欲罢不能? 《上瘾》揭示了很多让用户形成使用习惯,甚至“上瘾”的互联网产品服务背后的基 本设计原理,告诉你怎样打造一款让用户欲罢不能的产品。作者根据自己多年的研究、咨询及实际经验,提出了新颖而......一起来看看 《上瘾》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器