回归基础:JavaScript 中的数据格式转换一例

常见问题

打个比方,你有一组数据,需要根据拼音首字母字母索引显示在页面上,如图:

这种索引性的展示已经随处可见。对于我们前端开发来说这种展示最喜欢的数据格式可能是这样的: 继续阅读

10分钟学会基本的 Flexbox 布局

愚人码头注:本文在英文原文的基础上加了一些便于理解的注释和示例。

什么是 Flexbox ?

Flexbox 是 flexible box 的简称(愚人码头注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大的方式:

  • 在不同方向排列元素
  • 重新排列元素的显示顺序
  • 更改元素的对齐方式
  • 动态地将元素装入容器

什么情况下不建议使用 Flexbox ?

虽然 Flexbox 非常适合缩放,对齐和重新排序元素,但以下情况应该尽量避免使用 Flexbox 布局: 继续阅读

JavaScript 新书:探索 ES2016 与 ES2017

探索 ES2016 与 ES2017 Exploring ES2016 and ES2017

一本关于 ECMAScript 2016 和 ECMAScript 2017 新版本的 JavaScript 书。

本书目录

继续阅读

关于 《探索 ES2016 与 ES2017》

本书是关于 ECMAScript 2016 和 ECMAScript 2017 新版本的 JavaScript 。

本书只涵盖这两个新版本中的新特性。 有关以前版本的信息,请参考我的以下书籍(可以在线阅读):

  • 写给程序员的 Javascript 入门(涵盖 ES5 内容):“Speaking JavaScript
  • ECMAScript 6 (ES2015) 新特性介绍:“探索 ES6

本书的内容

“探索 ES2016 与 ES2017”是一本“活”的书,许多多内容即将被加入! 购买此书,你将得知 ECMAScript 2016 和 ECMAScript 2017 的最新特性:

  • ES2016 已经完成,这本书介绍了其内容,内容不多。
  • ES2017 现已完成。主要的新特性包括:

TC39 处理 ECMAScript 新特性的工作流程

本章解释了所谓 TC39 的工作流程,它以 ECMAScript 2016(ES7)为起点,阐述了ECMAScript特性的设计。

谁设计了 ECMAScript ?

答案是:TC39(技术委员会39)。

TC39,是一个推动 JavaScript 发展的技术委员会。其成员是公司(其中包括所有主要浏览器厂商)。TC39 定期举行会议,其会议是由成员公司派代表和特邀专家出席。会议纪要可在线获取,以便于我们更好的了解 TC39 工作流程。

偶尔(甚至在这本书中),你会看到 TC39 成员指的是某一个人。 它的意思是:由 TC39 成员公司派出的代表。

有趣的是,TC39 以协商一致方式运作:决定要求大多数人同意,没有人强烈反对以致否决。 对于许多成员来说,一致通过的决议将会产生真正的义务(他们将必须实现这些达成一致的功能等)。 继续阅读

ES2016 和 ES2017 常见问题

ECMAScript 2016 精简表明新版本的发布过程(如上一章所述))有效:

  • 新特性只有在它们完全准备好之后,并且在至少有两个经过充分现场测试的实现之后才会被包含进来。
  • 发布频率更高(每年一次),甚至可以更多。

ES2016将为大家(TC39,引擎实现者,JS开发人员)提供时间来消化 ES6 的内容,并在 ES6 重大发布之后迎来一个可喜的突破。 继续阅读

ES2016 新特性:Array.prototype.includes

本章介绍由 Domenic Denicola 和 Rick Waldron 提议的 ECMAScript 2016 新特性 Array.prototype.includes

概述

> ['a', 'b', 'c'].includes('a')
true
> ['a', 'b', 'c'].includes('d')
false

数组方法 includes

数组方法 includes 有以下签名: 继续阅读

ES2017 新特性:Async Functions (异步函数)

本章介绍 Brian Terlson 提议的 ECMAScript 2017 新特性 Async Functions(异步函数)

概述

async(异步) 函数变体

以下是已经存在的异步函数变体。请注意无处不在的 async 关键字。

  • 异步函数声明: async function foo() {}
  • 异步函数表达式: const foo = async function () {};
  • 异步函数定义:let obj = { async foo() {} }
  • 异步箭头函数: const foo = async () => {};

async(异步) 函数总是返回 Promises

async(异步) 函数的 Promise 完成状态:

async function asyncFunc() {
    return 123;
}

asyncFunc()
.then(x => console.log(x));
    // 123

async(异步) 函数的 Promise 拒绝状态: 继续阅读

ES2017 新特性:共享内存 和 Atomics

ECMAScript 2017 特性 “共享内存 和 atomics”,由Lars T. Hansen设计。它引入了一个新的构造函数 SharedArrayBuffer 和 具有辅助函数的命名空间对象 Atomics 。本章介绍一些细节。

并行(Parallelism) vs. 并发(Concurrency)

在我们开始之前,让我们澄清两个相似但截然不同的术语:并行(Parallelism) 和 并发(Concurrency) 。他们存在许多定义,我使用的定义如下:

  • 并行(Parallelism) (parallel 并行 vs. serial 串行):同时执行多个任务;
  • 并发(Concurrency) (concurrent 并发 vs. sequential 连续):在重叠的时间段内(而不是一个接一个)执行几个任务。

两者密切相关,但不一样: 继续阅读