面向对象的 JavaScript – 深入了解 ES6 类

通常我们需要在我们的程序中代表一个想法或概念 —— 也许是一个汽车引擎,电脑文件,路由器或温度读数。在代码中直接表示这些概念分为两部分:数据表示其状态和函数来表示行为。类给我们一个方便的语法来定义对象的状态和行为,来表示我们的这些概念。它们使我们的代码更安全,保证一个初始化函数能被调用,并且它们使得我们能更容易地定义一组固定的函数,来对数据进行操作并保持有效状态。如果你能把某些事物看成一个独立的实体,你可能应该定义一个类来表示你的程序中的“事物”。
继续阅读

ES6 新特性范例大全

ECMAScript6(ECMAScript 2015 ,ES5,ES2016)技术已经在前端圈子很流行了,他给前端开发人员带来了很多惊喜,提供的语法糖使复杂的操作变得简单。

本文没有详细描述这些新特性,因为网上都已经有很多相关的介绍了。主要针对ES6 新特性收集了相关范例代码,他可以让你快速了解这个新的javascript规范。 继续阅读

ECMAScript 6 Modules(模块)系统及语法详解

在2014年7月底,TC39 [1]又召开了一次会议,在此期间ECMAScript 6(ES6)模块语法的最后细节被最终确定。这篇博客文章概述了完整的 ES6 模块系统。 继续阅读

JavaScript: 2016年回顾

翻译自:https://www.sitepoint.com/javascript-2016-in-review/

2016年是意义重大的,奇怪的,欢欣鼓舞 / 可怕的一年,这取决于你的观点。与其他事件相比,只专注于JavaScript可能看起来无关紧要,但它是每个Web开发人员的工作生活的一个巨大的一部分。

JavaScript 人气持续爆涨。不是每个人都喜欢这门语言,但是现在你可能很少听到十年前嘲笑的评论。就个人而言,我一直喜欢JavaScript – 即使在早期,令人沮丧的年头。那些从C++,Java或PHP方向过来使用它的人可能首先会感到困惑:JavaScript看起来似曾相识,却又如此陌生。克服你的推断,你会欣赏它简单的优雅,实用性和灵活性。(That said, date handling is still a nightmare!,这就是说,日期处理仍然是一场噩梦!愚人码头看不懂这句是什么意思。)

JavaScript在五月迎来了它第21个生日,让我们回顾一下它刚成熟的第一年……

ECMAScript演变

ES6 / 2015是这门语言自诞生以来最重要的更新。这份规范花了7年才完成,但现在浏览器和其他运行运行环境终于开始支持箭头函数,let,const,代理和更多令人喜悦的特性。ES6的兼容性也慢慢变得很好

如果你需要支持更老版本的浏览器,完全切换到ES6可能还有点早。更老版本的意思是,一年多前发布的任何东西。您可以使用编译器将ES6转译为ES5,如Babel,但是如果你不引入额外的构建步骤,开发就会变得复杂。

ES7/2016比起革命更像是一种进化。一个令人激动的新特性是async,它允许以同步的方式编写异步代码,而不需要回调或Promise的复杂语法(它让我一直很头疼)。 继续阅读

学习 ES2015 新特性

es6features

这份文档最初取自Luke Hoban 优秀的es6features。 在GitHub,去给它一个star吧!

REPL

请务必在在线的REPL中尝试这些功能。
愚人码头注:你可以将示例代码复制到在线的REPL中,查看Babel转译结果。“读取-求值-输出”循环(英语:Read-Eval-Print Loop,简称REPL)是一个简单的,交互式编程环境。

介绍

ECMAScript 2015是一个ECMAScript标准,于2015年6月批准。

ES2015对于该语言来说是一次重要的更新,自2009年ES5标准化以来的第一个重大更新。自从ES5于2009年标准化以来,该语言的第一次重大更新。现在,主要的JavaScript引擎正在逐渐实现这些功能

有关ECMAScript 2015语言的完整规范,请参阅ES2015标准

ECMAScript 2015 新特性

箭头函数和词法this

箭头函数是使用=>语法对函数定义的简写。它们在语法上类似于 C#,Java 8 和 CoffeeScript 中的相关特性。它们支持表达式(Expression bodies)和函数体(Statement bodies)。与函数不同,箭头函数与其上下文代码共享相同的词法this(愚人码头注:箭头函数并没有自己的this,它的this是派生而来的,根据“词法作用域”派生而来)。如果箭头函数在另一个函数体内,它共享其父函数的 arguments 变量。 继续阅读

ES2015 中的箭头函数和词法 this

箭头函数是使用=>语法对函数定义的简写。它们在语法上类似于 C#,Java 8 和 CoffeeScript 中的相关特性。它们支持表达式(Expression bodies)和函数体(Statement bodies)。与函数不同,箭头函数与其上下文代码共享相同的词法this(愚人码头注:箭头函数并没有自己的this,它的this是派生而来的,根据“词法作用域”派生而来)。如果箭头函数在另一个函数体内,它共享其父函数的 arguments 变量。

// 使用表达式(Expression bodies)
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);

// 使用函数体(Statement bodies)
nums.forEach(v => {
  if (v % 5 === 0)
    fives.push(v);
});

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

// 词法 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]

继续阅读

JavaScript ES6(ES2015)入门-核心特性概述

JavaScript ES6(ES2015)特性概述

JavaScript在过去几年里发生了很大的变化。这里有12个新功能,您今天开始就可以使用他们!

JavaScript历史

新增加的语言称为ECMAScript 6。它也称为ES6或ES2015 +。

自从 1995年提出的JavaScript构想以来,发展进展非常缓慢。每隔几年新增一次。1997年以来 ECMAScript 一直作为JavaScript实现的基础,引导JavaScript 发展。它已经发布了好几个版本,如ES3,ES5,ES6等。 继续阅读

你可能不再需要Underscore

过去几年像 Underscore 和 lodash 等库进入许多JavaScript程序员的工具函数中。虽然这些工具库可以使你的代码写起来更容易,但是他们不一定使代码更简单或更容易理解。

各种工具函数库层出不穷,每个工具库的写法也各有不同,这样给阅读和维护你代码的人也带来了一定的困难,以为他必须了解你使用的这个这个工具库的函数做了什么事情。

JavaScript不断发展,新ES2015和ES2016版本(以前分别称为ES6和ES7)包了一堆新功能特性,并很容易使用它们。这些特性使得工具库以前的一些基本功能已经过时。

所以你可能不再需要Underscore。

例子:

这些例子说明,ES5.1,ES2015和ES2016做这些事情很容易,你可能不需要一个实用程序库了。ES5已经得到了所有现代浏览器和node.js的支持,要是想支持传统浏览器(比如IE8),还需要像es-shim这样的帮助脚本。

Arrays(数组)

Iterate(迭代)

  • Underscore
    _.each(array, iteratee)
  • ES5.1
    array.forEach(iteratee)

Map

  • Underscore
    _.map(array, iteratee)
  • ES5.1
    array.map(iteratee)

继续阅读