zhleven
zhleven

细解JavaScript ES7 ES8 ES9 新特性

导言：ECMAScript的演化不会停止，但是我们完全没必要害怕。除了ES6这个史无前例的版本带来了海量的信息和知识点以外，之后每年一发的版本都仅仅带有少量的增量更新，一年更新的东西花半个小时就能搞懂了，完全没必要畏惧。本文将带您花大约一个小时左右的时间，迅速过一遍ES7,ES8,ES9的新特性。

想追求更好的阅读体验，请移步原文地址

es_16_17_18

题记：本文提供了一个在线PPT版本，方便您浏览 细解JAVASCRIPT ES7 ES8 ES9 新特性 在线PPT ver

本文的大部分内容译自作者Axel Rauschmayer博士的网站，想了解更多关于作者的信息，可以浏览Exploring JS: JavaScript books for programmers

那些与ECMAScript有关的事情

谁在设计ECMAScript?

TC39 (Technical Committee 39)。

TC39 是推进 JavaScript 发展的委员会。其会员都是公司（其中主要是浏览器厂商）。TC39 定期召开会议，会议由会员公司的代表与特邀专家出席。会议纪录都可在网上查看，可以让你对 TC39 如何工作有一个清晰的概念。

很有意思的是，TC39 实行的是协商一致的原则：通过一项决议必须得到每一位会员（公司代表）的赞成。

ECMAScript的发布周期

在2015年发布的 ECMAScript（ES6）新增内容很多，在 ES5 发布近 6 年（2009-11 至 2015-6）之后才将其标准化。两个发布版本之间时间跨度如此之大主要有两大原因：

  • 比新版率先完成的特性，必须等待新版的完成才能发布。
  • 那些需要花长时间完成的特性，也顶着很大的压力被纳入这一版本，因为如果推迟到下一版本发布意味着又要等很久，这种特性也会推迟新的发布版本。

因此，从 ECMAScript 2016（ES7）开始，版本发布变得更加频繁，每年发布一个新版本，这么一来新增内容也会更小。新版本将会包含每年截止时间之前完成的所有特性。

ECMAScript的发布流程

每个 ECMAScript 特性的建议将会从阶段 0 开始， 然后经过下列几个成熟阶段。其中从一个阶段到下一个阶段必须经过 TC39 的批准。

  1. stage-0 - Strawman: just an idea, possible Babel plugin.
    任何讨论、想法、改变或者还没加到提案的特性都在这个阶段。只有TC39成员可以提交。

当前的stage 0列表可以查看这里 --> Stage 0 Proposals

  1. stage-1 - Proposal: this is worth working on.

    什么是 Proposal？一份新特性的正式建议文档。提案必须指明此建议的潜在问题，例如与其他特性之间的关联，实现难点等。

  2. stage-2 - Draft: initial spec.

    什么是 Draft？草案是规范的第一个版本。其与最终标准中包含的特性不会有太大差别。

草案之后，原则上只接受增量修改。这个阶段开始实验如何实现，实现形式包括polyfill, 实现引擎（提供草案执行本地支持），或者编译转换（例如babel）

  1. stage-3 - Candidate: complete spec and initial browser implementations.

候选阶段，获得具体实现和用户的反馈。此后，只有在实现和使用过程中出现了重大问题才会修改。至少要在一个浏览器中实现，提供polyfill或者babel插件。

  1. stage-4 - Finished: will be added to the next yearly release.

已经准备就绪，该特性会出现在下个版本的ECMAScript规范之中。

当前的stage 1-3列表可以查看这里 --> ECMAScript proposals

已经正式发布的特性索引

Proposal Author Champion(s) TC39 meeting notes Expected Publication Year
Array.prototype.includes Domenic Denicola Domenic Denicola
Rick Waldron		 November 2015 2016
Exponentiation operator Rick Waldron Rick Waldron January 2016 2016
Object.values/Object.entries Jordan Harband Jordan Harband March 2016 2017
String padding Jordan Harband Jordan Harband
Rick Waldron		 May 2016 2017
Object.getOwnPropertyDescriptors Jordan Harband
Andrea Giammarchi		 Jordan Harband
Andrea Giammarchi		 May 2016 2017
Trailing commas in function parameter lists and calls Jeff Morrison Jeff Morrison July 2016 2017
Async functions Brian Terlson Brian Terlson July 2016 2017
Shared memory and atomics Lars T Hansen Lars T Hansen January 2017 2017
Lifting template literal restriction Tim Disney Tim Disney March 2017 2018
s (dotAll) flag for regular expressions Mathias Bynens Brian Terlson
Mathias Bynens		 November 2017 2018
RegExp named capture groups Gorkem Yakin
Daniel Ehrenberg		 Daniel Ehrenberg
Brian Terlson
Mathias Bynens		 November 2017 2018
Rest/Spread Properties Sebastian Markbåge Sebastian Markbåge January 2018 2018
RegExp Lookbehind Assertions Gorkem Yakin
Nozomu Katō
Daniel Ehrenberg		 Daniel Ehrenberg
Mathias Bynens		 January 2018 2018
RegExp Unicode Property Escapes Mathias Bynens Brian Terlson
Daniel Ehrenberg
Mathias Bynens		 January 2018 2018
Promise.prototype.finally Jordan Harband Jordan Harband January 2018 2018
Asynchronous Iteration Domenic Denicola Domenic Denicola January 2018 2018
Optional catch binding Michael Ficarra Michael Ficarra May 2018 2019
JSON superset Richard Gibson Mark Miller
Mathias Bynens		 May 2018 2019

ES7新特性（ECMAScript 2016）

ECMAScript 2016

ES7在ES6的基础上主要添加了两项内容：

  • Array.prototype.includes()方法
  • 求幂运算符（**）

Array.prototype.includes()方法

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

var array = [1, 2, 3];

console.log(array.includes(2));
// expected output: true

var pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

Array.prototype.includes()方法接收两个参数：

  • 要搜索的值
  • 搜索的开始索引。

当第二个参数被传入时，该方法会从索引处开始往后搜索（默认索引值为0）。若搜索值在数组中存在则返回true，否则返回false。 且看下面示例：

['a', 'b', 'c', 'd'].includes('b')         // true
['a', 'b', 'c', 'd'].includes('b', 1)      // true
['a', 'b', 'c', 'd'].includes('b', 2)      // false

乍一看，includes的作用跟数组的indexOf重叠，为什么要特意增加这么一个api呢？主要区别有以下几点：

  • 返回值。看一个函数，先看他们的返回值。indexOf的返回数是值型的，includes的返回值是布尔型，所以在if条件判断的时候includes要简单得多，而indexOf 需要多写一个条件进行判断。
var ary = [1];
if (ary.indexOf(1) !== -1) {
    console.log("数组存在1")
}
if (ary.includes(1)) {
    console.log("数组存在1")
}
  • NaN的判断。如果数组中有NaN，你又正好需要判断数组是否有存在NaN，这时你使用indexOf是无法判断的，你必须使用includes这个方法。
var ary1 = [NaN];
console.log(ary1.indexOf(NaN))//-1
console.log(ary1.includes(NaN))//true
  • 当数组的有空的值的时候，includes会认为空的值是undefined，而indexOf不会。
var ary1 = new Array(3);
console.log(ary1.indexOf(undefined));//-1
console.log(ary1.includes(undefined))//true

求幂运算符（**）

加/减法我们通常都是用其中缀形式，直观易懂。在ECMAScript2016中，我们可以使用**来替代Math.pow。

4 ** 3           // 64

效果等同于

Math.pow(4,3)

值得一提的是，作为中缀运算符，**还支持以下操作

let n = 4;
n **= 3;
// 64

ES8新特性（ECMAScript 2017）

ECMAScript 2017

在2017年1月的TC39会议上，ECMAScript 2017的最后一个功能“Shared memory and atomics”推进到第4阶段。这意味着它的功能集现已完成。

ECMAScript 2017特性一览

主要新功能：

  • 异步函数 Async Functions（Brian Terlson）
  • 共享内存和Atomics（Lars T. Hansen）

次要新功能：

  • Object.values / Object.entries（Jordan Harband）
  • String padding（Jordan Harband，Rick Waldron）
  • Object.getOwnPropertyDescriptors() （Jordan Harband，Andrea Giammarchi）
  • 函数参数列表和调用中的尾逗号（Jeff Morrison）

Async Functions

Async Functions也就是我们常说的Async/Await，相信大家对于这个概念都已经不陌生了。Async/Await是一种用于处理JS异步操作的语法糖，可以帮助我们摆脱回调地狱，编写更加优雅的代码。

通俗的理解，async关键字的作用是告诉编译器对于标定的函数要区别对待。当编译器遇到标定的函数中的await关键字时，要暂时停止运行，带到await标定的函数处理完毕后，再进行相应操作。如果该函数fulfiled了，则返回值是fulfillment value，否则得到的就是reject value。

下面通过拿普通的promise写法来对比，就很好理解了：

async function asyncFunc() {
    const result = await otherAsyncFunc();
    console.log(result);
}

// Equivalent to:
function asyncFunc() {
    return otherAsyncFunc()
    .then(result => {
        console.log(result);
    });
}

按顺序处理多个异步函数的时候优势更为明显：

async function asyncFunc() {
    const result1 = await otherAsyncFunc1();
    console.log(result1);
    const result2 = await otherAsyncFunc2();
    console.log(result2);
}

// Equivalent to:
function asyncFunc() {
    return otherAsyncFunc1()
    .then(result1 => {
        console.log(result1);
        return otherAsyncFunc2();
    })
    .then(result2 => {
        console.log(result2);
    });
}

并行处理多个异步函数：

async function asyncFunc() {
    const [result1, result2] = await Promise.all([
        otherAsyncFunc1(),
        otherAsyncFunc2(),
    ]);
    console.log(result1, result2);
}

// Equivalent to:
function asyncFunc() {
    return Promise.all([
        otherAsyncFunc1(),
        otherAsyncFunc2(),
    ])
    .then([result1, result2] => {
        console.log(result1, result2);
    });
}

处理错误：

async function asyncFunc() {
    try {
        await otherAsyncFunc();
    } catch (err) {
        console.error(err);
    }
}

// Equivalent to:
function asyncFunc() {
    return otherAsyncFunc()
    .catch(err => {
        console.error(err);
    });
}

Async Functions若是要展开去讲，可以占用很大段的篇幅。鉴于本文是一篇介绍性文章，再次不再进行深入。

SharedArrayBuffer和Atomics

注，如果之前您没有接触过ArrayBuffer相关知识的话，建议您从内存管理速成教程系列漫画解说入门，强推：
A crash course in memory management
A cartoon intro to ArrayBuffers and SharedArrayBuffers

Avoiding race conditions in SharedArrayBuffers with Atomics

ECMAScript 2017 特性 SharedArrayBuffer 和 atomics”，由Lars T. Hansen设计。它引入了一个新的构造函数 SharedArrayBuffer 和 具有辅助函数的命名空间对象 Atomics。

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

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

JS并行的历史

  • JavaScript 在单线程中执行。某些任务可以异步执行：浏览器通常会在单线程中运行这些任务，然后通过回调将结果重新加入到单线程中。
  • Web workers 将任务并行引入了 JavaScript ：这些是相对重量级的进程。每个 workers 都有自己的全局环境。默认情况下，不共享任何内容。 workers 之间的通信（或在 workers 和主线程之间的通信）发展：
    • 起初，你只能发送和接收字符串。
    • 然后，引入结构化克隆：可以发送和接收数据副本。结构化克隆适用于大多数数据（JSON 数据，TypedArray，正则表达式，Blob对象，ImageData对象等）。它甚至可以正确处理对象之间的循环引用。但是，不能克隆 error 对象，function 对象和 DOM 节点。
    • 可在 workers 之间的转移数据:当接收方获得数据时，发送方失去访问权限。
  • 通过 WebGL 使用 GPU 计算(它倾向于数据并行处理)

共享数组缓冲区（Shared Array Buffers）

共享阵列缓冲区是更高并发抽象的基本构建块。它们允许您在多个 workers 和主线程之间共享 SharedArrayBuffer 对象的字节(该缓冲区是共享的，用于访问字节，将其封装在一个 TypedArray 中)这种共享有两个好处：

你可以更快地在 workers 之间共享数据。
workers 之间的协调变得更简单和更快（与 postMessage() 相比）。

// main.js
const worker = new Worker('worker.js');

// 要分享的buffer
const sharedBuffer = new SharedArrayBuffer( // (A)
    10 * Int32Array.BYTES_PER_ELEMENT); // 10 elements

// 使用Worker共用sharedBuffer
worker.postMessage({sharedBuffer}); // clone

// 仅限本地使用
const sharedArray = new Int32Array(sharedBuffer); // (B)

创建一个共享数组缓冲区（Shared Array Buffers）的方法与创建普通的数组缓冲区(Array Buffer)类似：通过调用构造函数，并以字节的形式指定缓冲区的大小(行A)。你与 workers 共享的是 缓冲区（buffer） 。对于你自己的本地使用，你通常将共享数组缓冲区封装在 TypedArray 中(行B)。

workers的实现如下所列。

// worker.js
self.addEventListener('message', function (event) {
    const {sharedBuffer} = event.data;
    const sharedArray = new Int32Array(sharedBuffer); // (A)
    // ···
});

sharedArrayBuffer 的 API

构造函数：

  • new SharedArrayBuffer(length)
    创建一个 length 字节的 buffer(缓冲区)。

静态属性：

  • get SharedArrayBuffer[Symbol.species]
    默认情况下返回 this。 覆盖以控制 slice() 的返回。

实例属性：

  • get SharedArrayBuffer.prototype.byteLength()
    返回 buffer(缓冲区) 的字节长度。

  • SharedArrayBuffer.prototype.slice(start, end)
    创建一个新的 this.constructor[Symbol.species] 实例，并用字节填充从（包括）开始到（不包括）结束的索引。

Atomics: 安全访问共享数据

举一个例子

// main.js
sharedArray[1] = 11;
sharedArray[2] = 22;

在单线程中，您可以重新排列这些写入操作，因为在中间没有读到任何内容。 对于多线程，当你期望以特定顺序执行写入操作时，就会遇到麻烦：

// worker.js
while (sharedArray[2] !== 22) ;
console.log(sharedArray[1]); // 0 or 11

Atomics 方法可以用来与其他 workers 进行同步。例如，以下两个操作可以让你读取和写入数据，并且不会被编译器重新排列：

  • Atomics.load(ta : TypedArray, index)
  • Atomics.store(ta : TypedArray, index, value : T)

这个想法是使用常规操作读取和写入大多数数据，而 Atomics 操作（load ，store 和其他操作）可确保读取和写入安全。通常，您将使用自定义同步机制，例如锁，其实现基于Atomics。

这是一个非常简单的例子，它总是有效的：

// main.js
console.log('notifying...');
Atomics.store(sharedArray, 0, 123);

// worker.js
while (Atomics.load(sharedArray, 0) !== 123) ;
console.log('notified');

Atomics 的 API

Atomic 函数的主要操作数必须是 Int8Array ，Uint8Array ，Int16Array ，Uint16Array ，Int32Array 或 Uint32Array 的一个实例。它必须包裹一个 SharedArrayBuffer 。

所有函数都以 atomically 方式进行操作。存储操作的顺序是固定的并且不能由编译器或 CPU 重新排序。

加载和存储

  • Atomics.load(ta : TypedArray, index) : T
    读取和返回 ta[index] 上的元素，返回数组指定位置上的值。
  • Atomics.store(ta : TypedArray, index, value : T) : T
    在 ta[index] 上写入 value，并且返回 value。
  • Atomics.exchange(ta : TypedArray, index, value : T) : T
    将 ta[index] 上的元素设置为 value ，并且返回索引 index 原先的值。
  • Atomics.compareExchange(ta : TypedArray, index, expectedValue, replacementValue) : T
    如果 ta[index] 上的当前元素为 expectedValue , 那么使用 replacementValue 替换。并且返回索引 index 原先（或者未改变）的值。

简单修改 TypeArray 元素

以下每个函数都会在给定索引处更改 TypeArray 元素：它将一个操作符应用于元素和参数，并将结果写回元素。它返回元素的原始值。

  • Atomics.add(ta : TypedArray, index, value) : T
    执行 ta[index] += value 并返回 ta[index] 的原始值。
  • Atomics.sub(ta : TypedArray, index, value) : T
    执行 ta[index] -= value 并返回 ta[index] 的原始值。
  • Atomics.and(ta : TypedArray, index, value) : T
    执行 ta[index] &= value 并返回 ta[index] 的原始值。
  • Atomics.or(ta : TypedArray, index, value) : T
    执行 ta[index] |= value 并返回 ta[index] 的原始值。
  • Atomics.xor(ta : TypedArray, index, value) : T
    执行 ta[index] ^= value 并返回 ta[index] 的原始值。

等待和唤醒

  • Atomics.wait(ta: Int32Array, index, value, timeout=Number.POSITIVE_INFINITY) : ('not-equal' | 'ok' | 'timed-out')
    如果 ta[index] 的当前值不是 value ，则返回 'not-equal'。否则继续等待，直到我们通过 Atomics.wake() 唤醒或直到等待超时。 在前一种情况下，返回 'ok'。在后一种情况下，返回'timed-out'。timeout 以毫秒为单位。记住此函数执行的操作：“如果 ta[index] 为 value，那么继续等待” 。
  • Atomics.wake(ta : Int32Array, index, count)
    唤醒等待在 ta[index] 上的 count workers。

Object.values and Object.entries

Object.values() 方法返回一个给定对象自己的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同 ( 区别在于for-in循环枚举原型链中的属性 )。

obj参数是需要待操作的对象。可以是一个对象，或者一个数组（是一个带有数字下标的对象，[10,20,30] -> {0: 10,1: 20,2: 30})。

const obj = { x: 'xxx', y: 1 };
Object.values(obj); // ['xxx', 1]

const obj = ['e', 's', '8']; // 相当于 { 0: 'e', 1: 's', 2: '8' };
Object.values(obj); // ['e', 's', '8']

// 当我们使用数字键值时，返回的是数字排序
// 根据键值排序
const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.values(obj); // ['yyy', 'zzz', 'xxx']

Object.values('es8'); // ['e', 's', '8']

Object.entries 方法返回一个给定对象自身可遍历属性 [key, value] 的数组， 排序规则和 Object.values 一样。这个方法的声明比较琐碎:

const obj = { x: 'xxx', y: 1 };
Object.entries(obj); // [['x', 'xxx'], ['y', 1]]

const obj = ['e', 's', '8'];
Object.entries(obj); // [['0', 'e'], ['1', 's'], ['2', '8']]

const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.entries(obj); // [['1', 'yyy'], ['3', 'zzz'], ['10': 'xxx']]

Object.entries('es8'); // [['0', 'e'], ['1', 's'], ['2', '8']]

String padding

为 String 对象增加了 2 个函数：padStart 和 padEnd。

像它们名字那样，这几个函数的主要目的就是填补字符串的首部和尾部，为了使得到的结果字符串的长度能达到给定的长度。你可以通过特定的字符，或者字符串，或者默认的空格填充它。下面是函数的声明：

str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])

这些函数的第一个参数是 targetLength（目标长度），这个是结果字符串的长度。第二个参数是可选的 padString（填充字符），一个用于填充到源字符串的字符串。默认值是空格。

'es8'.padStart(2);          // 'es8'
'es8'.padStart(5);          // '  es8'
'es8'.padStart(6, 'woof');  // 'wooes8'
'es8'.padStart(14, 'wow');  // 'wowwowwowwoes8'
'es8'.padStart(7, '0');     // '0000es8'

'es8'.padEnd(2);            // 'es8'
'es8'.padEnd(5);            // 'es8  '
'es8'.padEnd(6, 'woof');    // 'es8woo'
'es8'.padEnd(14, 'wow');    // 'es8wowwowwowwo'
'es8'.padEnd(7, '6');       // 'es86666'

Object.getOwnPropertyDescriptors

getOwnPropertyDescriptors 方法返回指定对象所有自身属性的描述对象。属性描述对象是直接在对象上定义的，而不是继承于对象的原型。ES2017加入这个函数的主要动机在于方便将一个对象深度拷贝给另一个对象，同时可以将getter/setter拷贝。声明如下：

Object.getOwnPropertyDescriptors(obj)

obj 是待操作对象。返回的描述对象键值有：configurable, enumerable, writable, get, set and value。

const obj = { 
  get es7() { return 777; },
  get es8() { return 888; }
};
Object.getOwnPropertyDescriptor(obj);
// {
//   es7: {
//     configurable: true,
//     enumerable: true,
//     get: function es7(){}, //the getter function
//     set: undefined
//   },
//   es8: {
//     configurable: true,
//     enumerable: true,
//     get: function es8(){}, //the getter function
//     set: undefined
//   }
// }

结尾逗号

结尾逗号用代码展示非常明了：

// 参数定义时
function foo(
    param1,
    param2,
) {}

// 函数调用时
foo(
    'abc',
    'def',
);

// 对象中
let obj = {
    first: 'Jane',
    last: 'Doe',
};

// 数组中
let arr = [
    'red',
    'green',
    'blue',
];

这个改动有什么好处呢？

  • 首先，重新排列项目更简单，因为如果最后一项更改其位置，则不必添加和删除逗号。
  • 其次，它可以帮助版本控制系统跟踪实际发生的变化。例如，从：
[
    'foo'
]

修改为

[
    'foo',
    'bar'
]

导致线条'foo'和线条'bar'被标记为已更改，即使唯一真正的变化是后一条线被添加。

ES9新特性（ECMAScript 2018）

ECMAScript 2018

ES9的新特性索引如下：

主要新功能：

  • 异步迭代（Domenic Denicola，Kevin Smith）
  • Rest/Spread 属性（SebastianMarkbåge）

新的正则表达式功能：

  • RegExp named capture groups（Gorkem Yakin，Daniel Ehrenberg）
  • RegExp Unicode Property Escapes（Mathias Bynens）
  • RegExp Lookbehind Assertions（Gorkem Yakin，NozomuKatō，Daniel Ehrenberg）
  • s (dotAll) flag for regular expressions（Mathias Bynens）

其他新功能：

  • Promise.prototype.finally() （Jordan Harband）
  • 模板字符串修改（Tim Disney）

异步迭代

首先来回顾一下同步迭代器：

ES6引入了同步迭代器，其工作原理如下：

  • Iterable：一个对象，表示可以通过Symbol.iterator方法进行迭代。
  • Iterator：通过调用iterable [Symbol.iterator] ()返回的对象。它将每个迭代元素包装在一个对象中，并通过其next()方法一次返回一个。
  • IteratorResult：返回的对象next()。属性value包含一个迭代的元素，属性done是true 后最后一个元素。

示例：

const iterable = ['a', 'b'];
const iterator = iterable[Symbol.iterator]();
iterator.next()
// { value: 'a', done: false }
iterator.next()
// { value: 'b', done: false }
iterator.next()
// { value: undefined, done: true }

异步迭代器

先前的迭代方式是同步的，并不适用于异步数据源。例如，在以下代码中，readLinesFromFile()无法通过同步迭代传递其异步数据：

for (const line of readLinesFromFile(fileName)) {
    console.log(line);
}

异步迭代器和常规迭代器的工作方式非常相似，但是异步迭代器涉及promise:

async function example() {
  // 普通迭代器:
  const iterator = createNumberIterator();
  iterator.next(); // Object {value: 1, done: false}
  iterator.next(); // Object {value: 2, done: false}
  iterator.next(); // Object {value: 3, done: false}
  iterator.next(); // Object {value: undefined, done: true}

  // 异步迭代器:
  const asyncIterator = createAsyncNumberIterator();
  const p = asyncIterator.next(); // Promise
  await p;// Object {value: 1, done: false}
  await asyncIterator.next(); // Object {value: 2, done: false}
  await asyncIterator.next(); // Object {value: 3, done: false}
  await asyncIterator.next(); // Object {value: undefined, done: true}
}

异步迭代器对象的next()方法返回了一个Promise，解析后的值跟普通的迭代器类似。
用法：iterator.next().then(({ value, done })=> {//{value: ‘some val’, done: false}}

const promises = [
    new Promise(resolve => resolve(1)),
    new Promise(resolve => resolve(2)),
    new Promise(resolve => resolve(3)),
];

async function test() {
    for await (const p of promises) {
        console.log(p);
    }
}
test(); //1 ,2 3

Rest/Spread 属性

这个就是我们通常所说的rest参数和扩展运算符，这项特性在ES6中已经引入，但是ES6中的作用对象仅限于数组：

restParam(1, 2, 3, 4, 5);

function restParam(p1, p2, ...p3) {
  // p1 = 1
  // p2 = 2
  // p3 = [3, 4, 5]
}

const values = [99, 100, -1, 48, 16];
console.log( Math.max(...values) ); // 100

在ES9中，为对象提供了像数组一样的rest参数和扩展运算符：

const obj = {
  a: 1,
  b: 2,
  c: 3
}
const { a, ...param } = obj;
  console.log(a)     //1
  console.log(param) //{b: 2, c: 3}

function foo({a, ...param}) {
  console.log(a);    //1
  console.log(param) //{b: 2, c: 3}
}

正则表达式命名捕获组

编号的捕获组

//正则表达式命名捕获组
const RE_DATE = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj[1]; // 1999
const month = matchObj[2]; // 12
const day = matchObj[3]; // 31

通过数字引用捕获组有几个缺点：

  • 找到捕获组的数量是一件麻烦事：必须使用括号。
  • 如果要了解组的用途，则需要查看正则表达式。
  • 如果更改捕获组的顺序，则还必须更改匹配代码。

命名的捕获组

ES9中可以通过名称来识别捕获组：(?[0-9]{4})

在这里，我们用名称标记了前一个捕获组year。该名称必须是合法的JavaScript标识符（认为变量名称或属性名称）。匹配后，您可以通过访问捕获的字符串matchObj.groups.year来访问。

让我们重写前面的代码：

const RE_DATE = /(?[0-9]{4})-(?[0-9]{2})-(?[0-9]{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj.groups.year; // 1999
const month = matchObj.groups.month; // 12
const day = matchObj.groups.day; // 31

// 使用解构语法更为简便
const {groups: {day, year}} = RE_DATE.exec('1999-12-31');
console.log(year); // 1999
console.log(day); // 31

可以发现，命名捕获组有以下优点：

  • 找到捕获组的“ID”更容易。
  • 匹配代码变为自描述性的，因为捕获组的ID描述了正在捕获的内容。
  • 如果更改捕获组的顺序，则无需更改匹配代码。
  • 捕获组的名称也使正则表达式更容易理解，因为您可以直接看到每个组的用途。

正则表达式 Unicode 转义

该特性允许您使用\p{}通过提及大括号内的Unicode字符属性来匹配字符,在正则表达式中使用标记 u (unicode) 设置。

/^\p{White_Space}+$/u.test('\t \n\r')
// true
/^\p{Script=Greek}+$/u.test('μετά')
// true

新方法匹配中文字符

由于在Unicode里面，中文字符对应的Unicode Script是Han，于是我们就可以用这个reg来匹配中文：

/\p{Script=Han}/u

这样我们就可以不用记忆繁琐又不好记的/[\u4e00-\u9fa5]/了，况且这个表达式已经有些年头了，说实话，后来又新增的属性为Han的字符并不在这个范围内，因此这个有年头reg并不一定好使。

我随便从网上找了一个Unicode8.0添加的中文字符“”,我测了一下两种reg的兼容性：

oldReg=/[\u4e00-\u9fa5]/
newReg=/\p{Script=Han}/u

oldReg.test('abc')
// false
newReg.test('abc')
// false

oldReg.test('地平线')
// true
newReg.test('地平线')
// true

oldReg.test('')
// false
newReg.test('')
// true

http://www.unicode.org/charts/PDF/U4E00.pdf

可以参考一下这个PDF，是Unicode的汉字全集，从524页9FA6至526页（最后一页）用旧匹配方式都无法生效。

Unicode

一些对于Unicode的科普

  • Name：唯一名称，由大写字母，数字，连字符和空格组成。例如：

    • A： Name = LATIN CAPITAL LETTER A
    • ： Name = GRINNING FACE

  • General_Category：对字符进行分类。例如：

    • X： General_Category = Lowercase_Letter
    • $： General_Category = Currency_Symbol

  • White_Space：用于标记不可见的间距字符，例如空格，制表符和换行符。例如：

    • \ T： White_Space = True
    • π： White_Space = False

  • Age：引入字符的Unicode标准版本。例如：欧元符号€在Unicode标准的2.1版中添加。

    • €： Age = 2.1

  • Script：是一个或多个书写系统使用的字符集合。

    • 有些脚本支持多种写入系统。例如，拉丁文脚本支持英语，法语，德语，拉丁语等书写系统。
    • 某些语言可以用多个脚本支持的多个备用写入系统编写。例如，土耳其语在20世纪初转换为拉丁文字之前使用了阿拉伯文字。
    • 例子：
      • α： Script = Greek
      • Д： Script = Cyrillic

正则表达式的Unicode属性转义

  • 匹配其属性prop具有值的所有字符value：

    \p{prop=value}

  • 匹配所有没有属性prop值的字符value：

    \P{prop=value}

  • 匹配二进制属性bin_prop为True的所有字符：

    \p{bin_prop}

  • 匹配二进制属性bin_prop为False的所有字符：

    \P{bin_prop}

  • 匹配空格：

/^\p{White_Space}+$/u.test('\t \n\r')
//true

匹配字母：

/^\p{Letter}+$/u.test('πüé')
//true

匹配希腊字母：

/^\p{Script=Greek}+$/u.test('μετά')
//true

匹配拉丁字母：

/^\p{Script=Latin}+$/u.test('Grüße')
//true

正则表达式反向断言

先来看下正则表达式先行断言是什么：

如获取货币的符号

const noReLookahead = /\D(\d+)/,
      reLookahead = /\D(?=\d+)/,
      match1 = noReLookahead.exec('$123.45'),
      match2 = reLookahead.exec('$123.45');
console.log(match1[0]); // $123   
console.log(match2[0]); // $

在ES9中可以允许反向断言：

const reLookahead = /(?<=\D)[\d\.]+/;
      match = reLookahead.exec('$123.45');
console.log(match[0]); // 123.45

使用?<=进行反向断言，可以使用反向断言获取货币的价格，而忽略货币符号。

正则表达式dotAll模式

正则表达式中点.匹配除回车外的任何单字符，标记s改变这种行为，允许行终止符的出现，例如：

/hello.world/.test('hello\nworld');  // false
/hello.world/s.test('hello\nworld'); // true

Promise.prototype.finally()

这个基本没什么好讲的，看名字就能看懂了。其用法如下：

promise
  .then(result => {···})
  .catch(error => {···})
  .finally(() => {···});

finally的回调总会被执行。

模板字符串修改

ES2018 移除对 ECMAScript 在带标签的模版字符串中转义序列的语法限制。
之前，\u开始一个 unicode 转义，\x开始一个十六进制转义，\后跟一个数字开始一个八进制转义。这使得创建特定的字符串变得不可能，例如Windows文件路径 C:\uuu\xxx\111。

要取消转义序列的语法限制，可在模板字符串之前使用标记函数String.raw:

`\u{54}`
// "T"
String.raw`\u{54}`
// "\u{54}"

尾声

ECMAScript的演化不会停止，但是我们完全没必要害怕。除了ES6这个史无前例的版本带来了海量的信息和知识点以外，之后每年一发的版本都仅仅带有少量的增量更新，一年更新的东西花半个小时就能搞懂了，完全没必要畏惧。

Stay hungry. Stay foolish.

你可能感兴趣的:(细解JavaScript ES7 ES8 ES9 新特性)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 今日联对0306 诗图佳得
    自对联：烟销皓月临江浒，水漫金山荡塔裙。一一肖士平2020.3.6.1、试对肖老师联：烟销皓月临江浒，夜笼寒沙梦晚舟。耀哥求正2、试对萧老师联:烟销浩月临江浒，雾散乾坤解汉城。秀霞习作请各位老师校正3、自对联：烟销皓月临江浒，水漫金山荡塔裙。一一肖士平2020.3.6.4、试对肖老师垫场联：烟销皓月临江浒，雾锁寒林缈葉丛。小智求正[抱拳]5、试对肖老师联：烟销皓月临江浒；风卷乱云入峰巅。一一五品6
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 日常演播练习0822 开阳春天
    日常演播练习0822一、绕口令练习司小四和史小世，四月十四日十四时四十上集市，司小四买了四十四斤四两西红柿，史小世买了十四斤四两细蚕丝。司小四要拿四十四斤四两西红柿换史小世十四斤四两细蚕丝。史小世十四斤四两细蚕丝不换司小四四十四斤四两西红柿。司小四说我四十四斤四两西红柿可以增加营养防近视，史小世说我十四斤四两细蚕丝可以织绸织缎又抽丝。二、文本练习狗熊是动物街有名的美食家，它吃得多所以长得胖，它能吃
  • 古风原创 慕白漓
    【江南月】词:慕白漓曲:《庐州月》西厢一语惊醒梦中月光佳人为何素眉不添淡妆抚帕刺秀绵缎一缕清香南望飞雁又归西方城外又闻秋稻泛黄成殇细雨纷飞里春又归乡离家而去的你是否迷失彷徨一句诺言永记心上家书一封道尽咏平常青草才青暮色又飘扬等也难当回又何妨古拙的山水今又细水流长江南月光照耀湖旁如今的情也已不在心上十载月晃容颜覆黄问一句你今在他乡何方江南月光苏州城隍孤单的你可还记得夜凉西厢人忘你是否还在独唱却唱不出
  • linux 发展史 种树的猴子 内核java操作系统linux大数据
    linux发展史说明此前对linux认识模糊一知半解，近期通过学习将自己对于linux的发展总结一下方便大家日后的学习。那Linux是目前一款非常火热的开源操作系统，可是linux是什么时候出现的，又是因为什么样的原因被开发出来的呢。以下将对linux的发展历程进行详细的讲解。目录一、Linux发展背景二、UINIX的诞生三、UNIX的重要分支-BSD的诞生四、Minix的诞生五、GNU与Free
  • 《吹牛大王历险记》读书随笔 赵炳森
    这本书的作者是埃·拉斯伯戈·毕尔格。（没查到相关内容，好像他只写过《吹牛大王历险记》。）最让人百思不得其解的是他居然能自己拉自己的辫子出泥潭？！我觉得自己拉自己的辫子只会把自己的辫子拉断，而不会飞出泥潭。（问:图片中底下的屁股为什么插了一根钢针？）屁股底下居然有根钢针？在泥潭应该是滑滑的吧，可是他怎么能夹紧马肚呢？马肚子应该是在马的下方。还有如果能从泥潭里把连人带马都给拽出来的话，他力气肯定很大，
  • 语文主题教学学习笔记之87 东哥杂谈
    “语文主题教学”学习笔记之八十七（0125）今天继续学习小学语文主题教学的实践样态。板块三：教学中体现“书艺”味道。作为四大名著之一的《水浒传》，堪称我国文学宝库之经典。对从《水浒传》中摘选的单元，教师就要了解其原生态，即评书体特点。这也要求教师要了解一些常用的评书行话术语，然后在教学时适时地加入一些，让学生体味其文本中原有的特色。学生也要尽可能地通过朗读的方式，而不单是分析讲解的方式进行学习。细
  • Python算法L5：贪心算法 小熊同学哦 Python算法算法python贪心算法
    Python贪心算法简介目录Python贪心算法简介贪心算法的基本步骤贪心算法的适用场景经典贪心算法问题1.**零钱兑换问题**2.**区间调度问题**3.**背包问题**贪心算法的优缺点优点：缺点：结语贪心算法（GreedyAlgorithm）是一种在每一步选择中都采取当前最优或最优解的算法。它的核心思想是，在保证每一步局部最优的情况下，希望通过贪心选择达到全局最优解。虽然贪心算法并不总能得到全
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • C++八股 Petrichorzncu 八股总结c++开发语言
    这里写目录标题C++内存管理C++的构造函数，复制构造函数，和析构函数深复制与浅复制：构造函数和析构函数哪个能写成虚函数，为什么？C++数据结构内存排列结构体和类占用的内存：==虚函数和虚表的原理==虚函数虚表（Vtable）虚函数和虚表的实现细节==内存泄漏==指针的工作原理函数的传值和传址new和delete与malloc和freeC++内存区域划分C++11新特性C++常见新特性==智能指针
  • 第二十五辑-安尘乱物 wallowed
    1、《劳犁》作犁耕土解炎林，劳碌秋丰四两金。挥汗佝偻衣褴褛，卖得如洗衬寒贫。春种南山锄造力，傍老倚仗体民心。颗籽无收黍稷尘，农田饥劬苦疫病。牛羊冷炙食蚕桑，丁壮耒耜宿闲勤。归来未已开红豆，篱落花稀麦苗青。米贵征徭生柴火，荒草凄清渐鸡鸣。谷雨时节方期许，择日又是复曾经。2、《忘言》久别似相识，对酒客长安。嘘唏一仗夜，临行却忘言。江雪空投岸，梨花淡云烟。若问有缘人，相窥两不厌。莫作酒魂归，窗台结生寒。
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 2022-06-29 感恩学习相信小陶
    感恩！六点签到相信很多人都有过这样的经验，拼命想的时候答案怎么都想不出来，不去想的时候，答案却自动冒出来了。为什么？这是因为潜意识也会工作，它非常神奇。你要相信，那些百思不得其解的问题早已扎根在你的头脑中，即使你不再刻意去想，潜意识也会自动围着它转。或许有一天，你会突然得到答案。这也是为什么有时我们会有顿悟的感觉。学会等待，也是进行持续思考的一个重要方法。
  • 今夜的雨欠费了？ 洛小简
    文/洛小简这里是醉人的宜宾，这是枫叶的十月。是不是得罪了龙王爷，让这雨肆无忌惮，却也毫无章法。那雨声暴躁，或早晨，或是午后，更多的在夜里。可今夜它睡着了，我看怕是欠费了，还未充值。但偏偏我醒了，醒在以往下雨的凌晨。耳边还有车声，最恨那乌鸦，又在远处偷鸣。就让龙王息怒吧，雨神也要歇一歇，持久的战斗体力无存，怎么给冬天一个雪的交待？那我的梦里还会不会下雪，是否如我所愿，这又是未解的谜题。幸好这雨也会欠
  • 华为云分布式缓存服务DCS 8月新特性发布 华为云PaaS服务小智 华为云分布式缓存
    分布式缓存服务（DistributedCacheService，简称DCS）是华为云提供的一款兼容Redis的高速内存数据处理引擎，为您提供即开即用、安全可靠、弹性扩容、便捷管理的在线分布式缓存能力，满足用户高并发及数据快速访问的业务诉求。此次为大家带来DCS8月的特性更新内容，一起来看看吧！
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 好运来 是露漫漫呀
    4月9日下午17.45分晴此时学校里广播站放着激情热烈的歌曲——《好运来》。“好运来，祝你好运来……”第一瞬间，我想到了他们是放这首歌是为补考的同学招来好运气的。然后我思绪飞扬，飘到了高中考试前同学放这首歌来抚平心态。飘到了高考前整理班级课桌时，学校喇叭里大大咧咧放着《好运来》……疲惫的我会心一笑。飘到了上学期考细解实验试卷时的那个中午青春小胖放这首歌来招好运，祈祷考的都会…………关于《好运来》的
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 剧本杀《暗黑者·七宗欲》复盘详细解析+凶手角色剧透答案真相 VX搜_小燕子复盘
    为了你获得更好的游戏体验，本文仅显示《暗黑者·七宗欲》剧本杀部分真相复盘，获取完整真相复盘只需两步①【微信关注公众号：集美复盘】②回复【暗黑者·七宗欲】即可查看获取哦﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎﹎1、剧本杀《暗黑者·七宗欲》角色介绍朱思俊沙害杜光荣的手法：接到杜光荣的电话之后，朱思俊约对方在地下室见面细聊。朱思俊出门时携带了老冰棍（放在保温杯中）、白砂糖、鱼线
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • 2023-05-25 季风2026
    育人细无声，光影文传情------南校区射灯投影内容为了丰富校园文化建设，打造全方位、多角度、光影文的育人环境，宣教科特出具“育人细无声，光影文传情”的射灯文化建设方案，拟定投射内容若干，请领导审阅。第一阶段投射内容：校风校训等学校精神。1.南校区大门口：校风：诚朴自信知行合一校训：厚德精技励学创新2.教学楼门口：教风：因材施教德技双馨学风：博学慎思明辨笃行3.宿舍楼门口：团结友善互帮互助包容大度
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 滑动窗口+动态规划 wniuniu_ 算法动态规划算法
    前言：分析这个题目的时候，就知道要这两个线段要分开，但是要保证得到最优解，那么我们在选取第二根线段的时候，要保证我们第一根线段是左边最优解并且我们选的两根线段的右端点一定是我们的数组的点（贪心思想）classSolution{public:intmaximizeWin(vector&prizePositions,intk){intn=prizePositions.size();vectormx(n
  • java解析APK 3213213333332132 javaapklinux解析APK
    解析apk有两种方法 1、结合安卓提供apktool工具，用java执行cmd解析命令获取apk信息 2、利用相关jar包里的集成方法解析apk 这里只给出第二种方法，因为第一种方法在linux服务器下会出现不在控制范围之内的结果。 public class ApkUtil { /** * 日志对象 */ private static Logger
  • nginx自定义ip访问N种方法 ronin47 nginx 禁止ip访问
    　　　因业务需要，禁止一部分内网访问接口，　由于前端架了F5，直接用deny或allow是不行的，这是因为直接获取的前端Ｆ５的地址。 　　　所以开始思考有哪些主案可以实现这样的需求，目前可实施的是三种： 　　　一：把ip段放在redis里，写一段lua           二：利用geo传递变量，写一段
  • mysql timestamp类型字段的CURRENT_TIMESTAMP与ON UPDATE CURRENT_TIMESTAMP属性 dcj3sjt126com mysql
    timestamp有两个属性，分别是CURRENT_TIMESTAMP 和ON UPDATE CURRENT_TIMESTAMP两种，使用情况分别如下：   1.   CURRENT_TIMESTAMP    当要向数据库执行insert操作时，如果有个timestamp字段属性设为   CURRENT_TIMESTAMP，则无论这
  • struts2+spring+hibernate分页显示 171815164 Hibernate
    分页显示一直是web开发中一大烦琐的难题，传统的网页设计只在一个JSP或者ASP页面中书写所有关于数据库操作的代码，那样做分页可能简单一点，但当把网站分层开发后，分页就比较困难了，下面是我做Spring+Hibernate+Struts2项目时设计的分页代码，与大家分享交流。 　　1、DAO层接口的设计，在MemberDao接口中定义了如下两个方法： public in
  • 构建自己的Wrapper应用 g21121 rap
            我们已经了解Wrapper的目录结构，下面可是正式利用Wrapper来包装我们自己的应用，这里假设Wrapper的安装目录为:/usr/local/wrapper。           首先，创建项目应用   &nb
  • [简单]工作记录_多线程相关 53873039oycg 多线程
         最近遇到多线程的问题,原来使用异步请求多个接口(n*3次请求)     方案一 使用多线程一次返回数据,最开始是使用5个线程,一个线程顺序请求3个接口,超时终止返回     缺点       测试发现必须3个接
  • 调试jdk中的源码，查看jdk局部变量 程序员是怎么炼成的 jdk 源码
    转自：http://www.douban.com/note/211369821/    学习jdk源码时使用--   学习java最好的办法就是看jdk源代码，面对浩瀚的jdk（光源码就有40M多，比一个大型网站的源码都多）从何入手呢，要是能单步调试跟进到jdk源码里并且能查看其中的局部变量最好了。 可惜的是sun提供的jdk并不能查看运行中的局部变量
  • Oracle RAC Failover 详解 aijuans oracle
    Oracle RAC 同时具备HA(High Availiablity) 和LB(LoadBalance). 而其高可用性的基础就是Failover(故障转移). 它指集群中任何一个节点的故障都不会影响用户的使用，连接到故障节点的用户会被自动转移到健康节点，从用户感受而言， 是感觉不到这种切换。 Oracle 10g RAC 的Failover 可以分为3种： 1. Client-Si
  • form表单提交数据编码方式及tomcat的接受编码方式 antonyup_2006 JavaScripttomcat浏览器互联网servlet
    原帖地址：http://www.iteye.com/topic/266705 form有2中方法把数据提交给服务器，get和post,分别说下吧。 （一）get提交 1.首先说下客户端（浏览器）的form表单用get方法是如何将数据编码后提交给服务器端的吧。    对于get方法来说，都是把数据串联在请求的url后面作为参数，如：http://localhost:
  • JS初学者必知的基础 百合不是茶 js函数js入门基础
    JavaScript是网页的交互语言,实现网页的各种效果, JavaScript 是世界上最流行的脚本语言。 JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。 JavaScript 被设计为向 HTML 页面增加交互性。 许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的
  • iBatis的分页分析与详解 bijian1013 javaibatis
            分页是操作数据库型系统常遇到的问题。分页实现方法很多，但效率的差异就很大了。iBatis是通过什么方式来实现这个分页的了。查看它的实现部分，发现返回的PaginatedList实际上是个接口，实现这个接口的是PaginatedDataList类的对象，查看PaginatedDataList类发现，每次翻页的时候最
  • 精通Oracle10编程SQL(15)使用对象类型 bijian1013 oracle数据库plsql
    /* *使用对象类型 */ --建立和使用简单对象类型 --对象类型包括对象类型规范和对象类型体两部分。 --建立和使用不包含任何方法的对象类型 CREATE OR REPLACE TYPE person_typ1 as OBJECT( name varchar2(10),gender varchar2(4),birthdate date ); drop type p
  • 【Linux命令二】文本处理命令awk bit1129 linux命令
    awk是Linux用来进行文本处理的命令，在日常工作中，广泛应用于日志分析。awk是一门解释型编程语言，包含变量，数组，循环控制结构，条件控制结构等。它的语法采用类C语言的语法。   awk命令用来做什么？ 1.awk适用于具有一定结构的文本行，对其中的列进行提取信息 2.awk可以把当前正在处理的文本行提交给Linux的其它命令处理，然后把直接结构返回给awk 3.awk实际工
  • JAVA(ssh2框架)+Flex实现权限控制方案分析 白糖_ java
      目前项目使用的是Struts2+Hibernate+Spring的架构模式，目前已经有一套针对SSH2的权限系统，运行良好。但是项目有了新需求：在目前系统的基础上使用Flex逐步取代JSP，在取代JSP过程中可能存在Flex与JSP并存的情况，所以权限系统需要进行修改。 【SSH2权限系统的实现机制】 权限控制分为页面和后台两块：不同类型用户的帐号分配的访问权限是不同的，用户使
  • angular.forEach boyitech AngularJSAngularJS APIangular.forEach
    angular.forEach 描述: 循环对obj对象的每个元素调用iterator, obj对象可以是一个Object或一个Array. Iterator函数调用方法: iterator(value, key, obj), 其中obj是被迭代对象，key是obj的property key或者是数组的index，value就是相应的值啦. (此函数不能够迭代继承的属性.)
  • java-谷歌面试题-给定一个排序数组，如何构造一个二叉排序树 bylijinnan 二叉排序树
    import java.util.LinkedList; public class CreateBSTfromSortedArray { /** * 题目:给定一个排序数组，如何构造一个二叉排序树 * 递归 */ public static void main(String[] args) { int[] data = { 1, 2, 3, 4,
  • action执行2次 Chen.H JavaScriptjspXHTMLcssWebwork
    xwork 写道 <action name="userTypeAction" class="com.ekangcount.website.system.view.action.UserTypeAction"> <result name="ssss" type="dispatcher">
  • [时空与能量]逆转时空需要消耗大量能源 comsci 能源
            无论如何,人类始终都想摆脱时间和空间的限制....但是受到质量与能量关系的限制,我们人类在目前和今后很长一段时间内,都无法获得大量廉价的能源来进行时空跨越.....         在进行时空穿梭的实验中,消耗超大规模的能源是必然
  • oracle的正则表达式(regular expression)详细介绍 daizj oracle正则表达式
        正则表达式是很多编程语言中都有的。可惜oracle8i、oracle9i中一直迟迟不肯加入，好在oracle10g中终于增加了期盼已久的正则表达式功能。你可以在oracle10g中使用正则表达式肆意地匹配你想匹配的任何字符串了。 正则表达式中常用到的元数据(metacharacter)如下： ^ 匹配字符串的开头位置。 $ 匹配支付传的结尾位置。 *
  • 报表工具与报表性能的关系 datamachine 报表工具birt报表性能润乾报表
    在选择报表工具时，性能一直是用户关心的指标，但是，报表工具的性能和整个报表系统的性能有多大关系呢？ 要回答这个问题，首先要分析一下报表的处理过程包含哪些环节，哪些环节容易出现性能瓶颈，如何优化这些环节。   一、报表处理的一般过程分析 1、用户选择报表输入参数后，报表引擎会根据报表模板和输入参数来解析报表，并将数据计算和读取请求以SQL的方式发送给数据库。   2、
  • 初一上学期难记忆单词背诵第一课 dcj3sjt126com wordenglish
    what 什么  your 你 name 名字 my 我的 am 是 one 一 two 二 three 三 four 四 five 五 class 班级，课   six 六 seven 七 eight 八 nince 九 ten 十 zero 零 how 怎样 old 老的 eleven 十一 twelve 十二 thirteen
  • 我学过和准备学的各种技术 dcj3sjt126com 技术
    语言VB https://msdn.microsoft.com/zh-cn/library/2x7h1hfk.aspxJava http://docs.oracle.com/javase/8/C# https://msdn.microsoft.com/library/vstudioPHP http://php.net/manual/en/Html 
  • struts2中token防止重复提交表单 蕃薯耀 重复提交表单struts2中token
    struts2中token防止重复提交表单   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月12日 11:52:32 星期日 ht
  • 线性查找二维数组 hao3100590 二维数组
    1.算法描述 有序（行有序，列有序，且每行从左至右递增，列从上至下递增）二维数组查找，要求复杂度O(n)   2.使用到的相关知识： 结构体定义和使用，二维数组传递（http://blog.csdn.net/yzhhmhm/article/details/2045816）   3.使用数组名传递 这个的不便之处很明显，一旦确定就是不能设置列值 //使
  • spring security 3中推荐使用BCrypt算法加密密码 jackyrong Spring Security
    spring security 3中推荐使用BCrypt算法加密密码了，以前使用的是md5， Md5PasswordEncoder 和 ShaPasswordEncoder，现在不推荐了，推荐用bcrpt Bcrpt中的salt可以是随机的，比如： int i = 0; while (i < 10) { String password = "1234
  • 学习编程并不难,做到以下几点即可! lampcy javahtml编程语言
    不论你是想自己设计游戏，还是开发iPhone或安卓手机上的应用，还是仅仅为了娱乐，学习编程语言都是一条必经之路。编程语言种类繁多，用途各 异，然而一旦掌握其中之一，其他的也就迎刃而解。作为初学者，你可能要先从Java或HTML开始学，一旦掌握了一门编程语言，你就发挥无穷的想象，开发 各种神奇的软件啦。 1、确定目标 学习编程语言既充满乐趣，又充满挑战。有些花费多年时间学习一门编程语言的大学生到
  • 架构师之mysql----------------用group+inner join,left join ,right join 查重复数据（替代in) nannan408 right join
    1.前言。   如题。 2.代码 (1)单表查重复数据,根据a分组   SELECT m.a,m.b, INNER JOIN （select a,b,COUNT(*) AS rank FROM test.`A` A GROUP BY a HAVING rank>1 )k ON m.a=k.a （2）多表查询 ， 使用改为le
  • jQuery选择器小结 VS 节点查找（附css的一些东西） Everyday都不同 jquerycssname选择器追加元素查找节点
    最近做前端页面，频繁用到一些jQuery的选择器，所以特意来总结一下：   测试页面： <html> <head> <script src="jquery-1.7.2.min.js"></script> <script> /*$(function() { $(documen
  • 关于EXT tntxia ext
      ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。ExtJS是一个用 javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。       ExtJs最开始基于YUI技术，由开发人员Jack
  • 一个MIT计算机博士对数学的思考 xjnine Math
     在过去的一年中，我一直在数学的海洋中游荡，research进展不多，对于数学世界的阅历算是有了一些长进。为什么要深入数学的世界？作为计算机的学生，我没有任何企图要成为一个数学家。我学习数学的目的，是要想爬上巨人的肩膀，希望站在更高的高度，能把我自己研究的东西看得更深广一些。说起来，我在刚来这个学校的时候，并没有预料到我将会有一个深入数学的旅程。我的导师最初希望我去做的题目，是对appe
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他