ecmascriptにはどのような機能がありますか?

ecmascript の特徴は、1. class (クラス)、2. モジュール性、3. アロー関数、4. テンプレート文字列、5. 代入の構造化、6. 拡張演算子、7. Promise、8 、let です。および const; 9. 指数演算子 "**"; 10. "async/await" など。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

ECMAScript とは

ECMAScript は、ECMA International (旧欧州コンピュータ製造者協会) によって ECMA-262 を通じて標準化されたスクリプト プログラミング言語です。

Ecma International (Ecma International) は、国際的な会員制情報通信標準化団体です。 1994 年以前は、欧州コンピュータ製造者協会と呼ばれていました。コンピュータの国際化により、この組織の標準には他の多くの国が関係しているため、この組織はその国際性を示すために名前を変更することにしました。この名前はもはや略語ではありません。

各国政府の標準化機関とは異なり、Ecma International は企業会員組織です。この組織の標準化プロセスはより商業的であり、この運営方法により官僚的な結果の追求が軽減されると主張しています。

実際、Ecma International は、次の仕様などの多くの標準の策定を担当しています。今日の主役は、ECMAScript 仕様、C# 言語仕様、C/CLI 言語仕様などであることがわかります。

ECMAScript JavaScript との関係

1996 年 11 月、JavaScript の作成者である Netscape は、JavaScript を標準化団体 ECMA に提出することを決定しました。この言語が国際標準になることが期待されています。翌年、ECMA はブラウザ スクリプト言語の標準を規定する標準文書 262 (ECMA-262) の最初のバージョンをリリースし、この言語を ECMAScript と呼びました (バージョン 1.0)。

この標準は当初から JavaScript 言語用に開発されましたが、JavaScript と呼ばれない理由は 2 つあります。 1 つは商標です。Java は Sun の商標です。ライセンス契約によれば、JavaScript という名前を合法的に使用できるのは Netscape だけであり、JavaScript 自体は Netscape によって商標登録されています。次に、この言語の開発者が Netscape ではなく ECMA であることを示したいと思います。これは、この言語のオープン性と中立性を確保するのに役立ちます。

したがって、ECMAScript と JavaScript の関係は、前者は後者の仕様であり、後者は前者の実装です。

ES6とECMAScript 2015の関係

ECMAScript 2015（略してES2015）という言葉もよく見かけます。 ES6とどう関係するのでしょうか？

ECMAScript バージョン 5.1 が 2011 年にリリースされた後、バージョン 6.0 の作業が始まりました。したがって、ES6 という言葉の本来の意味は、JavaScript 言語の次のバージョンを指します。

ただし、このバージョンでは文法上の機能が多すぎるため、策定プロセス中に多くの組織や個人が新しい機能を提出し続けています。 1 つのリリースに導入されるすべての機能を含めることは不可能であることがすぐに明らかになりました。従来のアプローチでは、最初にバージョン 6.0 をリリースし、しばらくしてからバージョン 6.1、次にバージョン 6.2、バージョン 6.3 というようにリリースします。

標準委員会は最終的に、この標準をその年の正式バージョンとして毎年 6 月に正式にリリースすることを決定しました。次回以降はこのバージョンをベースに修正が加えられ、翌年6月までは当然新年版となります。この方法では、前のバージョン番号は必要なく、年のスタンプだけが必要になります。

したがって、ES6 は歴史的な用語であると同時に一般的な用語でもあり、ES2015、ES2016、ES2017 などを含むバージョン 5.1 以降の JavaScript の次世代標準を意味しますが、ES2015 は正式名称であり、具体的には以下のことを指します。その年にリリースされた言語標準の正式バージョン。

ECMAScript 歴史

1996 年 11 月、Netscape は JS を国際標準化団体 ECMA に提出し、この言語は国際標準となることができました。 。
1997 年に、ECMAScript バージョン 1.0 がリリースされました。 (この年、ECMA はブラウザ スクリプト言語の標準を規定した標準文書 No. 262 (ECMA-262) の最初のバージョンをリリースし、この言語を ECMAScript と呼びました。これが ES1.0 バージョンです。)
1998 In今年 6 月、ES バージョン 2.0 がリリースされました。
1999 年 12 月に ES バージョン 3.0 がリリースされ、JS の共通標準となり、広くサポートされました。
2007 年 10 月に、ES のドラフト バージョン 4.0 がリリースされました。
2008 年 7 月、ECMA は、当事者間の相違が大きすぎるため、ES 4.0 の開発を終了することを決定しました。代わりに、既存の機能に対する小規模な改善セットが ES 3.1 としてリリースされます。ただし、復帰後すぐに ES バージョン 5.0 に名前が変更されました。
2009 年 12 月に、ES バージョン 5.0 が正式にリリースされました。

2011 年 6 月に ES バージョン 5.1 がリリースされ、ISO 国際標準 (ISO/IEC 16262:2011) になりました。
2013 年 3 月に ES 6 ドラフトは終了し、新しい機能は追加されません。
2013 年 12 月に、ES 6 ドラフトがリリースされました。
2015 年 6 月に、ES 6 の正式版がリリースされました。

今後は毎年6月に正式版がリリースされるため、最新バージョンは2021年6月にリリースされたES12となります。

ECMAScript の各バージョンの新機能

ES6 の新機能

1、クラス

ES6 では、JavaScript でのオブジェクト指向プログラミングをよりシンプルかつ理解しやすくするためのクラスが導入されています。

class Student {
  constructor() {
    console.log("I'm a student.");
  }
 
  study() {
    console.log('study!');
  }
 
  static read() {
    console.log("Reading Now.");
  }
}
 
console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."

2. モジュール化

ES5 はネイティブのモジュール化をサポートしており、モジュールは ES6 の重要なコンポーネントとして追加されます。モジュールの機能は主にエクスポートとインポートで構成されます。各モジュールは独自のスコープを持ち、モジュール間の相互呼び出し関係は、エクスポートによってモジュールが公開するインターフェースを指定し、インポートによって他のモジュールが提供するインターフェースを参照することになります。同時に、関数の名前の競合を防ぐために、モジュールの名前空間が作成されます。

export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));

import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));

3. アロー関数

=> はキーワード関数の略称であるだけでなく、他の利点ももたらします。アロー関数は、それを囲むコードと同じものを共有するため、このポインティングの問題を解決するのに役立ちます。たとえば、var self = this; または var that =this は周囲の this モードを参照します。しかし、=> を使用すると、このパターンは不要になります。

() => 1

v => v+1

(a,b) => a+b

() => {
  alert("foo");
}

e => {
  if (e == 0){
    return 0;
  }
  return 1000/e;
}

4. テンプレート文字列

ES6 はテンプレート文字列をサポートし、文字列の結合をより簡潔かつ直感的にします。

//不使用模板字符串
var name = 'Your name is ' + first + ' ' + last + '.'
//使用模板字符串
var name = `Your name is ${first} ${last}.`

ES6 では、文字列の連結は ${} で変数を中括弧で囲むだけで完了できます。

5. 構造化代入

構造化代入構文は、配列またはオブジェクトから値をすばやく抽出し、定義された変数に割り当てることができる JavaScript 式です。

// 对象
const student = {
    name: 'Sam',
    age: 22,
    sex: '男'
}
// 数组
// const student = ['Sam', 22, '男'];

// ES5；
const name = student.name;
const age = student.age;
const sex = student.sex;
console.log(name + ' --- ' + age + ' --- ' + sex);

// ES6
const { name, age, sex } = student;
console.log(name + ' --- ' + age + ' --- ' + sex);

6. 拡張演算子

拡張演算子は...関数呼び出し/配列構築中に構文レベルで配列式または文字列を展開できます。オブジェクトを構築するときは、キーと値の方法でオブジェクト式を展開します。

//在函数调用时使用延展操作符
function sum(x, y, z) {
  return x + y + z
}
const numbers = [1, 2, 3]
console.log(sum(...numbers))

//数组
const stuendts = ['Jine', 'Tom']
const persons = ['Tony', ...stuendts, 'Aaron', 'Anna']
conslog.log(persions)

7. Promise

Promise は、従来のソリューション コールバックよりも洗練された非同期プログラミングのソリューションです。これは最初にコミュニティによって提案および実装され、ES6 によって言語標準に組み込まれ、その使用法が統一され、Promise オブジェクトがネイティブに提供されました。

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});

8. let と const

以前は、JS にはブロックレベルのスコープがありませんでした。const と let がこの便利なギャップを埋めました。const と let の両方がブロックレベルです範囲。

function f() {
  {
    let x;
    {
      // 正确
      const x = "sneaky";
      // 错误，常量const
      x = "foo";
    }
    // 错误，已经声明过的变量
    let x = "inner";
  }
}

ES7 の新機能

1. Array.prototype.includes()

includes() 関数が使用される配列に指定された値が含まれているかどうか、含まれている場合は true を返し、そうでない場合は false を返します。

[1, 2, 3].includes(-1)                   // false
[1, 2, 3].includes(1)                    // true
[1, 2, 3].includes(3, 4)                 // false
[1, 2, 3].includes(3, 3)                 // false
[1, 2, NaN].includes(NaN)                // true
['foo', 'bar', 'quux'].includes('foo')   // true
['foo', 'bar', 'quux'].includes('norf')  // false

2. 指数演算子

指数演算子**は ES7 で導入され、 ** Math.pow(...) と同等の計算結果があります。 、 - 、および他の演算子と同様に、べき乗演算子 ** を使用します。

//之前的版本
Math.pow(5, 2)

// ES7
5 ** 2
// 5 ** 2 === 5 * 5

ES8 の新機能

1. async/await

非同期関数は AsyncFunction オブジェクトを返し、イベント ループ 非同期操作。

const resolveAfter3Seconds = function() {
  console.log('starting 3 second promsise')
  return new Promise(resolve => {
    setTimeout(function() {
      resolve(3)
      console.log('done in 3 seconds')  
    }, 3000)  
  })  
}

const resolveAfter1Second = function() {
  console.log('starting 1 second promise')
  return new Promise(resolve => {
      setTimeout(function() {
        resolve(1) 
        console.log('done, in 1 second') 
      }, 1000)
  })  
}

const sequentialStart = async function() {
  console.log('***SEQUENTIAL START***')
  const one = await resolveAfter1Second()
  const three = await resolveAfter3Seconds()

  console.log(one)
  console.log(three)
}

sequentialStart();

2. Object.values()

Object.values() は Object.keys() に似た新しい関数ですが、返される関数は次のとおりです。継承された値を除く、オブジェクト自体のプロパティの値。

const obj = { a: 1, b: 2, c: 3 }
//不使用 Object.values()
const vals = Object.keys(obj).map((key) => obj[key])
console.log(vals)
//使用 Object.values()
const values = Object.values(obj1)
console.log(values)

上記のコードから、Object.values() により、キーを走査し、これらのキーに基づいて値を取得する手順が省略できることがわかります。

3. Object.entries()

Object.entries() 関数は、指定されたオブジェクト自体の列挙可能なプロパティのキーと値のペアの配列を返します。

//不使用 Object.entries()
Object.keys(obj).forEach((key) => {
  console.log('key:' + key + ' value:' + obj[key])
})
//key:b value:2

//使用 Object.entries()
for (let [key, value] of Object.entries(obj1)) {
  console.log(`key: ${key} value:${value}`)
}
//key:b value:2

4. 文字列パディング

ES8 では、String に、null 文字を許可する 2 つの新しいインスタンス関数 String.prototype.padStart と String.prototype.padEnd が追加されました。 String または元の文字列の先頭または末尾に追加される他の文字列になります。

console.log('0.0'.padStart(4, '10'))
console.log('0.0'.padStart(20))

console.log('0.0'.padEnd(4, '0'))
console.log('0.0'.padEnd(10, '0'))

5. Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors() 関数は、オブジェクトのすべての独自プロパティの記述子を取得するために使用されます。独自のプロパティがない場合は、空のオブジェクトが返されます。

let myObj = {
  property1: 'foo',
  property2: 'bar',
  property3: 42,
  property4: () => console.log('prop4')  
}

Object.getOwnPropertyDescriptors(myObj)

/*
{ property1: {…}, property2: {…}, property3: {…}, property4: {…} }
  property1: {value: "foo", writable: true, enumerable: true, configurable: true}
  property2: {value: "bar", writable: true, enumerable: true, configurable: true}
  property3: {value: 42, writable: true, enumerable: true, configurable: true}
  property4: {value: ƒ, writable: true, enumerable: true, configurable: true}
  __proto__: Object
*/

ES9 の新機能

1. 非同期イテレータ

ES9 では非同期イテレータが導入されています)、await はfor...of ループとともに使用して、非同期操作をシリアル方式で実行します。

//如果在 async/await中使用循环中去调用异步函数，则不会正常执行
async function demo(arr) {
  for (let i of arr) {
    await handleDo(i);
  }
}

//ES9
async function demo(arr) {
  for await (let i of arr) {
    handleDo(i);
  }
}

2. Promise.finally()

Promise 呼び出しチェーンが最後の .then() に正常に到達するか、.catch() のトリガーに失敗します。場合によっては、Promise の実行が成功したか失敗したかに関係なく、クリア、会話の削除、データベース接続の終了など、同じコードを実行したいことがあります。

.finally() を使用すると、最終ロジックを指定できます。

function doSomething() {
  doSomething1()
    .then(doSomething2)
    .then(doSomething3)
    .catch((err) => {
      console.log(err)
    })
    .finally(() => {})
}

3. 残り/スプレッド属性

残り: オブジェクト分割割り当ての残りの属性。

Spread: オブジェクト分割代入の Spread 属性。

//Rest
let { fname, lname, ...rest } = { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" };
fname; //"Hemanth"
lname; //"HM"
rest; // {location: "Earth", type: "Human"}

//Spread
let info = {fname, lname, ...rest};
info; // { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" }

ES10 の新機能

1. 配列の flat() メソッドと flatMap() メソッド

flat( ) メソッド指定可能な深さに従って配列を再帰的に走査し、すべての要素を走査された部分配列内の要素とマージして新しい配列を返します。

flatMap() メソッドは、まずマッピング関数を使用して各要素をマップし、次に結果を新しい配列に圧縮します。これは、深さの値が 1 の map および flat とほぼ同じですが、通常、 flatMap を 1 つのメソッドに組み合わせるとわずかに効率的になります。

let arr = ['a', 'b', ['c', 'd']];
let flattened = arr.flat();

console.log(flattened);    // => ["a", "b", "c", "d"]

arr = ['a', , , 'b', ['c', 'd']];
flattened = arr.flat();

console.log(flattened);    // => ["a", "b", "c", "d"]

arr = [10, [20, [30]]];

console.log(arr.flat());     // => [10, 20, [30]]
console.log(arr.flat(1));    // => [10, 20, [30]]
console.log(arr.flat(2));    // => [10, 20, 30]
console.log(arr.flat(Infinity));    // => [10, 20, 30]

2. 文字列のtrimStart()メソッドとtrimEnd()メソッド

分别去除字符串首尾空白字符

const str = "   string   ";

console.log(str.trimStart());    // => "string   "
console.log(str.trimEnd());      // => "   string"

3、Object.fromEntries()

Object.entries()方法的作用是返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for…in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。

而 Object.fromEntries() 则是 Object.entries() 的反转，Object.fromEntries() 函数传入一个键值对的列表，并返回一个带有这些键值对的新对象。

const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Object.fromEntries(myArray);

console.log(obj);    // => {one: 1, two: 2, three: 3}

ES11新增特性

1、Promise.allSettled

Promise.all最大问题就是如果其中某个任务出现异常(reject)，所有任务都会挂掉，Promise 直接进入 reject 状态。

Promise.allSettled在并发任务中，无论一个任务正常或者异常，都会返回对应的的状态（fulfilled 或者 rejected）与结果（业务 value 或者 拒因 reason），在 then 里面通过 filter 来过滤出想要的业务逻辑结果，这就能最大限度的保障业务当前状态的可访问性。

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).
  then((results) => results.forEach((result) => console.log(result.status)));

// expected output:
// "fulfilled"
// "rejected"

2、String.prototype.matchAll

matchAll() 方法返回一个包含所有匹配正则表达式及分组捕获结果的迭代器。 在 matchAll出现之前，通过在循环中调用 regexp.exec来获取所有匹配项信息（regexp需使用 /g 标志)。如果使用 matchAll，就可以不必使用 while 循环加 exec 方式（且正则表达式需使用／g标志）。使用 matchAll会得到一个迭代器的返回值，配合 for…of, array spread, or Array.from() 可以更方便实现功能。

const regexp = /t(e)(st(\d?))/g;
const str = 'test1test2';

const array = [...str.matchAll(regexp)];

console.log(array[0]);
// expected output: Array ["test1", "e", "st1", "1"]

console.log(array[1]);
// expected output: Array ["test2", "e", "st2", "2"]

ES12新增特性

1、Promise.any

Promise.any() 接收一个Promise可迭代对象，只要其中的一个 promise 成功，就返回那个已经成功的 promise 。如果可迭代对象中没有一个 promise 成功（即所有的 promises 都失败/拒绝），就返回一个失败的 promise。

const promise1 = new Promise((resolve, reject) => reject('我是失败的Promise_1'));
const promise2 = new Promise((resolve, reject) => reject('我是失败的Promise_2'));
const promiseList = [promise1, promise2];
Promise.any(promiseList)
.then(values=>{
  console.log(values);
})
.catch(e=>{
  console.log(e);
});

2、逻辑运算符和赋值表达式

逻辑运算符和赋值表达式，新特性结合了逻辑运算符（&&=，||=，??=）。

a ||= b
//等价于
a = a || (a = b)

a &&= b
//等价于
a = a && (a = b)

a ??= b
//等价于
a = a ?? (a = b)

3、replaceAll

返回一个全新的字符串，所有符合匹配规则的字符都将被替换掉。

const str = 'hello world';
str.replaceAll('l', ''); // "heo word"

4、数字分隔符

数字分隔符，可以在数字之间创建可视化分隔符，通过_下划线来分割数字，使数字更具可读性。

const money = 1_000_000_000;
//等价于
const money = 1000000000;

1_000_000_000 === 1000000000; // true

【相关推荐：javascript学习教程】

以上がecmascriptにはどのような機能がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。