ES6新特性

chaos_G 发布于2019-08-20 17:02 / 807人阅读

摘要：官网官网阮一峰教程简介即是最新版本的标准。是该语言的重大更新。主流的引擎正在对这些新特性提供支持。特性箭头函数箭头函数是函数的简写，使用语法。箭头函数内的与其外部的一致同。

ES6官网 http://www.ecma-international...
Babel官网 https://babeljs.io/learn-es2015/
GitHub http://es6-features.org
GitHub https://github.com/lukehoban/...
阮一峰ES6教程 http://es6.ruanyifeng.com/

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 "
" 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;

kkk

function f(x, y=12) {
  // y is 12 if not passed (or passed as undefined)
  return x + y;
}
f(3) == 15

function f(x, ...y) {
  // y is an Array
  return x * y.length;
}
f(3, "hello", true) == 6

function f(x, y, z) {
  return x + y + z;
}
// f(...[1,2,3]) == 6

GPU云服务器云服务器 es6新特性 es6的新特性新特性新特性整理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83346.html

使用ES6新特性开发微信小程序

摘要：使用新特性开发微信小程序国际化与本地化新特性国际化与本地化新增了很多对于国际化的支持，比如时间格式，货币格式，数字格式等。 ECMAScript 6（简称ES6）是JavaScript语言的最新标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。微信小程序支持绝大部分ES6的新增特性。使用ES6新特性开发微信小程序（1） ES6新特性：Cons...

Backache 2019-08-21 11:26 评论0 收藏0
ES6-前世今生（0）

摘要：更新了个版本，最新正式版是语言的下一代标准，早已在年月正式发布。基本不支持移动端浏览器对的支持情况版起便可以支持的新特性。比较通用的工具方案有，，，等。 1、ECMAScript是什么？和 JavaScript 有着怎样的关系？ 1996 年 11 月，Netscape 创造了javascript并将其提交给了标准化组织 ECMA，次年，ECMA 发布 262 号标准文件（ECMA-...

LeviDing 2019-08-26 13:41 评论0 收藏0
你不知道的JavaScript（ES6与之未来）

摘要：然而，临近规范发布时，有建议提及未来的版本号切换为编年制，比如用同来指代在年末前被定稿的所有版本。总得来说就是版本号不再那么重要了，开始变得更像一个万古长青的活标准。你不知道的JS（下卷）ES6与之未来第一章：ES的今与明在你想深入这本书之前，你应该对（在读此书时）JavaScript的最近标准掌握熟练，也就是ES5（专业来说是ES 5.1）。在此，我们决定全方面地谈论关于将近的...

Julylovin 2019-08-20 16:41 评论0 收藏0
ES6 走马观花（ECMAScript2015 新特性）

摘要：字面上是生成器的意思，在里是迭代器生成器，用于生成一个迭代器对象。当执行的时候，并不执行函数体，而是返回一个迭代器。迭代器具有方法，每次调用方法，函数就执行到语句的地方。也有观点极力反对，认为隐藏了本身原型链的语言特性，使其更难理解。本文为 ES6 系列的第一篇。旨在给新同学一些指引，带大家走近 ES6 新特性。简要介绍：什么是 ES6 它有哪些明星特性它可以运行在哪些环境 ...

wangzy2019 2019-08-21 10:40 评论0 收藏0
ES6特性概述 - ES6 - ECMAScript特性 - Javascript核心

摘要：特性概述比较新特性更多。之后后分篇描述目前已经比较成熟的语法特性例如和。同上，但返回该元素的索引号。和对象的属性行为一致。不将参数强制转行为。判断是否为在范围内的正整数。不少层面的特性可以通过进行兼容性支持。原文： http://pij.robinqu.me/JavaScript_Core/ECMAScript/es6/es6_api_extension.html 源...

Ali_ 2019-08-19 14:50 评论0 收藏0
你需要了解的ES6的新特性（前沿技术）

摘要：年月，的创造者公司，决定将提交给国际标准化组织，希望这种语言能够成为国际标准。这表示外层代码块不受内层代码块的影响。也可以运用于函数及其他文中就简单介绍这么多，想更加了解新特性的可以自寻查看一下阮一峰的一本入门 ES6新特性最近在项目中遇到了很多ES6的语法，遇到了不少坑坑洼洼，因此，在这里就简单介绍一下ES6中的一些新特性如果想真正的了解ES6和ES5有什么不同，这里推荐看一下...

Nino 2019-08-20 18:19 评论0 收藏0