JavaScript : ES 2016からES 2019へのすべて

こんにちは、私はAlberto Montalesi、完全なスタック自習開発者です.JavaScriptチュートリアルとチュートリアルをinspiredwebdev.com 他の開発者を刺激し、彼らが望むキャリアを構築する.JavaScript 一定の進化の言語は、過去数年では、多くの新機能が追加されているECMAScript 仕様.
この記事は私の本の抜粋ですComplete Guide to Modern JavaScript そして、それはES 2016、ES 2017、ES 2018、ES 2019の新しい追加をカバーして、当初私のブログに掲示されましたinspiredWebDev .
記事の最後には、すべてをまとめたカンニングペーパーをダウンロードするリンクを見つけるでしょう.

ES 2016で新しいすべて
ES 2016は2つの新機能だけを導入しました

Array.prototype.includes()

指数演算子

Array.prototype.includes()The includes() メソッドはtrue を返します.false そうでなければ.

let array = [1,2,4,5];

array.includes(2);
// true
array.includes(3);
// false

組み合わせincludes() with fromIndex我々は提供する.includes() 要素の検索を開始するインデックスを指定します.デフォルト値は0ですが、負の値を渡すこともできます.
最初の値は、検索する要素で、2番目の要素はインデックスです.

let array = [1,3,5,7,9,11];

array.includes(3,1);
// find the number 3 starting from array index 1
// true
array.includes(5,4);
//false
array.includes(1,-1);
// find the number 1 starting from the ending of the array going backwards
// false
array.includes(11,-3);
// true

array.includes(5,4); 返されるfalse 番号5を含む配列にもかかわらず、インデックス2で見つかりますが、位置4を見始めました.だからこそ、我々はそれを見つけることができなかったのですがfalse .array.includes(1,-1); 返されるfalse なぜなら、インデックス- 1を見ることができたからです.array.includes(11,-3); 返されるtrue 私たちはインデックス- 3に戻って、私たちのパスに値11を見つけるまで移動したので.

指数演算子
ES 2016に先立って、次のようにしたでしょう.

Math.pow(2,2);
// 4
Math.pow(2,3);
// 8

新しい指数演算子を使うと、次のようになります.

2**2;
// 4
2**3;
// 8

この例のように複数の操作を組み合わせると、とても便利になります.

2**2**2;
// 16
Math.pow(Math.pow(2,2),2);
// 16

使用Math.pow() あなたは継続的にそれらを連結する必要があり、それはかなり長いと乱雑を得ることができます.指数演算子は、同じことを行うの高速かつクリーンな方法を提供します.

ES 2017文字列パディングObject.entries() , Object.values() その他
ES 2017は、我々がここで見るつもりである多くのクールな新機能を導入しました.

文字列パディング.padStart() and .padEnd() )
最後に、文字列にパディングを追加することができます.padEnd() ) または最初に.padStart() ) それらの

"hello".padStart(6);
// " hello"
"hello".padEnd(6);
// "hello "

私たちは、我々が6を我々のパディングとして欲しいと指定したので、両方のケースで、我々はなぜ1つのスペースだけを得ましたか?
それは起こりましたpadStart and padEnd 移動し、空のスペースを入力します.私たちの例では“hello”は5文字で、パッドは6です.
次の例を見てください.

"hi".padStart(10);
// 10 - 2 = 8 empty spaces
// "        hi"
"welcome".padStart(10);
// 10 - 6 = 4 empty spaces
// "   welcome"

右揃えるpadStart私たちはpadStart 我々が正しい何かを整列させたいならば.

const strings = ["short", "medium length", "very long string"];

const longestString = strings.sort(str => str.length).map(str => str.length)[0];

strings.forEach(str => console.log(str.padStart(longestString)));

// very long string
//    medium length
//            short

最初に、我々は我々のストリングの最も長いものをつかみ、その長さを測定しました.そこで、我々はpadStart すべての文字列には、最長の長さに基づいているので、私たちは現在、すべての右側に完全に整列している.

パッドにカスタム値を追加する
パッドとして空白を加えるだけではなく、文字列と数字の両方を渡すことができます.

"hello".padEnd(13," Alberto");
// "hello Alberto"
"1".padStart(3,0);
// "001"
"99".padStart(3,0);
// "099"

Object.entries() and Object.values()まず最初にオブジェクトを作りましょう.

const family = {
  father: "Jonathan Kent",
  mother: "Martha Kent",
  son: "Clark Kent",
}

以前のバージョンではJavaScript このようなオブジェクト内の値にアクセスしたでしょう.

Object.keys(family);
// ["father", "mother", "son"]
family.father;
"Jonathan Kent"

Object.keys() その後、値にアクセスするために使用しなければならなかったオブジェクトのキーだけを返しました.
ここでは、2つ以上のオブジェクトにアクセスする方法があります.

Object.values(family);
// ["Jonathan Kent", "Martha Kent", "Clark Kent"]

Object.entries(family);
// ["father", "Jonathan Kent"]
// ["mother", "Martha Kent"]
// ["son", "Clark Kent"]

Object.values() すべての値の配列を返しますObject.entries() キーと値の両方を含む配列の配列を返します.
Object.getOwnPropertyDescriptors()このメソッドは、オブジェクトのすべてのプロパティ記述子を返します.
返される属性はvalue , writable , get , set , configurable and enumerable .

const myObj = {
  name: "Alberto",
  age: 25,
  greet() {
    console.log("hello");
  },
}
Object.getOwnPropertyDescriptors(myObj);
// age:{value: 25, writable: true, enumerable: true, configurable: true}

// greet:{value: ƒ, writable: true, enumerable: true, configurable: true}

// name:{value: "Alberto", writable: true, enumerable: true, configurable: true}

関数パラメータリストとコールにおける後のコンマ
これは構文へのわずかな変更です.今、オブジェクトを書くとき、最後の1つであるかどうかにかかわらず、各々のパラメタの後に後のコンマを残すことができます.

// from this
const object = {
  prop1: "prop",
  prop2: "propop"
}

// to this
const object = {
  prop1: "prop",
  prop2: "propop",
}

2番目のプロパティの最後にコンマをどのように書きましたか.
あなたがそれを置かないならば、それはどんなエラーも投げません、しかし、それがあなたの同僚またはチームメンバーの人生をより簡単にするように、それは従うことはより良い習慣です.

// I write
const object = {
  prop1: "prop",
  prop2: "propop"
}

// my colleague updates the code, adding a new property
const object = {
  prop1: "prop",
  prop2: "propop"
  prop3: "propopop"
}
// Suddenly, he gets an error because he did not notice that I forgot to leave a comma at the end of the last parameter.

共有メモリとAtomicsからMDN :

When memory is shared, multiple threads can read and write the same data in memory. Atomic operations make sure that predictable values are written and read, that operations are finished before the next operation starts and that operation is not interrupted.

Atomics はコンストラクタではなく、そのプロパティとメソッドの全てが静的ですMath ) したがって、我々は新しい演算子を使用したり、Atomics 関数としてのオブジェクト.
メソッドの例は以下の通りです:

追加/サブ

および/またはXOR

ロード／ストア

アトミックはSharedArrayBuffer (一般的な固定長バイナリデータバッファ)汎用で、固定長の生のバイナリデータバッファを表すオブジェクト.
の例を見てみましょうAtomics メソッド:
Atomics.add() , Atomics.sub() , Atomics.load() and Atomics.store() Atomics.add() は、3つの引数、配列、インデックス、および値を受け取り、加算を実行する前に、そのインデックスで前の値を返します.

// create a `SharedArrayBuffer`
const buffer = new SharedArrayBuffer(16);
const uint8 = new Uint8Array(buffer);

// add a value at the first position
uint8[0] = 10;

console.log(Atomics.add(uint8, 0, 5));
// 10

// 10 + 5 = 15
console.log(uint8[0])
// 15
console.log(Atomics.load(uint8,0));
// 15

ご覧の通り、呼び出しAtomics.add() を返します.我々が再び呼ぶときuint8[0] 追加を行い、15を得た.
配列から特定の値を取得するにはAtomics.load と2つの引数、配列、およびインデックスを渡します.Atomics.sub() 同じように動作するAtomics.add() しかし、それは値を減算します.

// create a `SharedArrayBuffer`
const buffer = new SharedArrayBuffer(16);
const uint8 = new Uint8Array(buffer);

// add a value at the first position
uint8[0] = 10;

console.log(Atomics.sub(uint8, 0, 5));
// 10

// 10 - 5 = 5
console.log(uint8[0])
// 5
console.log(Atomics.store(uint8,0,3));
// 3
console.log(Atomics.load(uint8,0));
// 3

ここではAtomics.sub() を返します.uint8[0] これは10 - 5に相当する.
と同じAtomics.add() , このメソッドは、このインデックスの場合、前の値を返します.
私たちはその後Atomics.store() 特定の値を格納するには、この場合、配列の特定のインデックスにおいて、この場合、0、第1の位置.Atomics.store() を返します.我々が呼ぶとき、あなたはそれを見ることができますAtomics.load() その特定のインデックスで、我々は3を得て、もう5を得ません.
Atomics.and() , Atomics.or() and Atomics.xor()これらの3つのメソッドは、配列の与えられた位置において、ビット単位AND AND OR XOR演算を実行します.ビット単位の操作についてもっと読み込むことができますWikipedia このリンクでhttps://en.wikipedia.org/wiki/Bitwise_operation

非同期で待つ
Keep reading... それともget the cheatsheets .
読書ありがとうございます.私のブログの上で、または、私の後を追ってくださいinspiredwebdev または
免責事項:アマゾンへのリンクと教育的なアフィリエイトのリンクは、あなたが私のための余分な手数料を生成する購入を購入します.ありがとう



私の電子ブックを得るAmazon and Leanpub