現代のJavascript：過去10年間に見逃してきたすべて

JavaScriptは、DHTMLで「D」の文字として知ってから長い道のりを歩んできました。ポリフィルやトランスパイラーを必要とする可能性のある最新の構文を使用したくない私のような人のために、このチートシートを作成して、最新のブラウザーで広くサポートされているすべての利点を理解できるようにしました。



コンテンツ

• 配列関数
• const / let
• ヌルの合体?? およびオプションの連鎖？..演算子
• 非同期/待機
• 矢印関数（）=> {}
• の
• 待って...の
• クラス
• 取得/設定
• 関数のデフォルトパラメータ
• function named parameters
• function rest… parameter
• Destructuring
• Shorthand functions aka Methods
• Promise.all
• Template literals
• Proxy
• Module import/export

( , , )

Array functions

これらの新しいネイティブ配列関数をすべてチェックしてください。アンダースコアやlodashはもう必要ありません。



Array.every（）

Array.filter（）

Array.find（）

Array.findIndex（）

Array.forEach（）

Array.from（）

Array.includes（）

Array.isArray（）

Array.lastIndexOf（）

Array.map（）

Array.reduce（）

Array.reduceRight（）

Array.some（）



配列ドキュメント

const / let

これらの新しいキーワードは、（グローバルスコープまたは機能スコープではなく）ブロックスコープで変数を宣言します。使用法 const



は、値が変更されるべきではないという値を意味しますが、 let



この機会を与えます。



ドキュメントをしましょう

?? そして？。

??



値がnullまたは未定義かどうかを確認します。もう使用する必要はありません !!



。



?.



次のプロパティまたは関数を呼び出す前に、値がtrueかどうかを確認します。追加の小道具を扱うときに非常に便利です。



オプションの連鎖ドキュメント

let a, b=1
let result = a ?? b
print(result)

result = (a !== null && a !== undefined) ? a : b;
print(result)
      
print({x:1}?.a?.b ?? "not found")
      
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

非同期/待機

async / awaitキーワードは、コールバック地獄からあなたを救うためにあります。await



非同期呼び出しを同期呼び出しのように見せるために使用 します。await fetchUserName()



fetchUserName（）が完了するまで、実行 は次の行に進みません。を使用するにはawait



、非同期として宣言された関数を実行している必要があることに注意してください 。 async function fn () {await fetchUserName ()}.







Async / Awaitdocs。

function fetchUserName() {
  return new Promise(resolve => setTimeout(resolve, 500))
}
      
async function withAsync() {
  print("withAsync: fetching...")
  await fetchUserName()
  print("withAsync: done")
}
await withAsync()
      
function withoutAsync() {
  print("withoutAsync: fetching...")
  fetchUserName().then(()=>print("withoutAsync done"))
}
withoutAsync()
    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

矢印関数（）=> {}

これらは、現在のコンテキストに関連付けられた関数です。野生で見られる主なタイプは3つあります

。1つの引数、1つの行、多くの行です。



単一引数フォームは括弧を必要とせず、単一行フォームは演算子を必要としません return



。無条件で返します。

1 const fn = a => a*2
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

1つの引数。1行。 関数が何かを返すことを意図している場合、



複数行のフォームにはステートメントが必要 return



です。複数の引数には括弧が必要です。

const fn = (a,b) => {
  console.log(a,b)
  return a*b
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

複数の引数、複数の行。



矢印関数のドキュメント

の

イテレータを反復処理するために使用されます。同様に for...in



、チェックする必要がないことを除いて hasOwnProperty



。オブジェクトにはイテレータがないため、このループ構文をオブジェクトで直接使用することはできません。代わりObject.entries ({})



に反復を取得するために使用 します。



ドキュメントの...

const x = {a: 1, b: 2}
for (const [key, value] of Object.entries(x)) {
  print(`${key}=${value}`)
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

待って...の

非同期反復は2018年に導入されました。また Promise.all



、多くの非同期タスクを同期するために使用できます。以下の例は、非同期で実行される3つのタスクを示しています。ループは、一度に1つの結果を順番に処理します。この場合、完了する最速のタスクは、反復の最後にのみ明らかになります。



待って...のドキュメント

const delay = (n) => {
  return new Promise((resolve) => {
    setTimeout(()=>{
      print("resolve "+n)
      resolve(n)
    }, n)
  })
}

const delays = [
  delay(150),
  delay(50),
  delay(25)
]

for await (const ret of delays) {
  print("for loop await "+ret)
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

クラス

2015年、ES6はクラスをJavascriptに移植しました。Javascriptクラスは、あなたが知っていて大好きな他の言語のクラスのようなものです。継承、クラスメソッド、ゲッターとセッター、プロパティなど。



クラスのドキュメント

class A {
  constructor(name) {
    this.name = name
  }
  myProp = "myProp"
  static foo() {
    print("Static method says foo")
  }
}
class B extends A {
  constructor(name, age) {
    super(name)
    this.age = age
  }
  toString() {
    return `${this.name} ${this.age}`
  }
}
A.foo()
const b = new B("Catch", 22)
print(b)
print(b.myProp)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

取得/設定

Getとsetは、たとえばプロパティと呼ばれる関数 person.age = 16; person.age> 18



です。これは、動的プロパティまたは計算プロパティが必要な場合に非常に便利です。また、クラスと通常のオブジェクトの両方で使用できます。



get / setドキュメント



ゲッターとセッターを使用したクラス

class A {
  constructor() {
    this._firstName = "Jane"
    this._lastName = "Smith"
  }
  get fullName() {
    return `${this._firstName} ${this._lastName}`
  }
  set firstName(v) {
    this._firstName = v
  }
}
const a = new A()
print(a.fullName)
a.firstName = "John"
print(a.fullName)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

ゲッターとセッターを持つオブジェクト

const x = {
  get now() { return new Date() }
}
print(x.now)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

関数のデフォルトパラメータ

やったー！これで、関数定義でデフォルトのパラメーターを指定できます。期待どおりに機能します。



デフォルトのパラメータドキュメント

function greet(msg="Hello world") {
  print(msg)
}
greet()
greet("hi")
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

パラメータという名前の関数

オブジェクト破壊の魔法により、関数は名前付きパラメーターを持つことができるようになりました。



名前付きパラメータドキュメント

function greet({name = "Jane", age = 42} = {}){
  print(name + " " +age)
}
greet()
greet({name: "John", age: 21})
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

関数rest ...パラメーター

リセットパラメータを使用すると、関数は任意の数の引数を配列として受け入れることができます。代わりにこれを使用することをお勧めします arguments



。



残りのパラメータドキュメント

function greet(msg1, ...msgs) {
  print(msg1)
  msgs.forEach(s => print(s))
}
greet("hi", "hello", "world")
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Object.assignおよびspread演算子

Object.assign(target, source)



2つ以上のオブジェクトを1つに結合します。ターゲットを適切に変更するため、新しいオブジェクトを作成する場合は、最初の引数として空のオブジェクトリテラルを渡します。



または、spread演算子...



を使用し て、複数のオブジェクトを組み合わせることができます。 オブジェクトのセッターを呼び出さない{... obj1, ... obj2}



ことに注意し spread



てくださいObject.assign



。最も移植性が高いため、を検討してください 。最後のコード例に示すように、Spread演算子は配列でも使用できます。



構文ドキュメントを広める

const source = {x: 1, y: 4}
const target = Object.assign({}, source)
print(JSON.stringify(target))

const spread = {a: 1, b: 2, ...source}
print(JSON.stringify(spread))

const ary1 = [1]
const ary = [...ary1, [2,3]]
print(ary)
      
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

破壊

デストラクチャリングを使用すると、テンプレートを使用してオブジェクトや配列から値を取得できます。これは多くのアプリケーションを含む複雑なトピックです...リストするには多すぎますが、私が考えることができるより一般的な使用法のいくつかを示しました。



破壊ドキュメントと MDNドキュメント

function f() {
  return [1, 2];
}
let [a, b] = f()
print("a="+a + " b=" + b)

const obj = {state: {id: 1, is_verified: false}}
const {id, is_verified: verified} = obj.state
print("id = " + id)
print("verified = " + verified)

for (const [key, value] of Object.entries({a: 1, b: 2, c: 3})) {
  print(key + " is " + value);
}
      
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

速記関数別名メソッド

オブジェクトに対して宣言された関数は、functionキーワードがない新しい省略形を使用できます。



次の例では、2つの関数（fn1、fn2）は同等です。



メソッドガイド

const x = {
  type: "x",
  shorthand() {
    print("shorthand "+this.type)
  },
  long: function() {
    print("long "+this.type)
  }
}
x.shorthand()
x.long()

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Promise.all

async / awaitが優先されるため、promiseはほとんどスキップしましたが、複数の非同期呼び出しを同期する必要がある場合があり、Promise.allが最も簡単な方法です。



Promise.allドキュメント

const delay = (n) => {
  return new Promise((resolve) => {
    setTimeout(()=> resolve(n), n)
  })
}
async function main() {
  const delays = [100, 200, 300].map(n => delay(n))
  print("waiting…")
  const res = await Promise.all(delays)
  print("done. result is " + res)
}
main()
      
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

テンプレートリテラル

この新しい構文は、テンプレート文字列とも呼ばれ、単純な文字列補間と複数行の文字列を提供します。



テンプレートリテラルドキュメント

let x = `multi
      line
string`
print(x)

x = `1+1=${1+1}`
print(x)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

プロキシ

プロキシを使用すると、別のオブジェクトに対するget / set呼び出しをインターセプトできます。これは、プロパティの変更を追跡したり、後でDOMを更新したり、以下のwwwプロキシのような革新的なAPIを作成したりする場合に役立ち ます。 プロキシドキュメント

let _nums = [1,2,3]
let nums = new Proxy(_nums, {
  set(target, key, value) {
    target[key] = value
    print("set called with " + key + "=" + value)
    print("update DOM")
    return true
  }
})
nums.push(4)
print("nums: " + nums)
print("_nums: " + _nums)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

モジュールのインポート/エクスポート

モジュールを使用すると、コードの名前空間を作成し、機能を小さなファイルに分割できます。以下の例では、index.htmlに含まれているgreet.jsという名前のモジュールがあります。モジュールの読み込みは常に延期されるため、HTMLレンダリングがブロックされないことに注意してください。jsファイルから機能をインポート/エクスポートする方法はたくさんあります。詳細については、エクスポートのドキュメントをお読みください 。



ドキュメントをインポートする

function greet(msg) {
  console.log("greet:", msg)
}
export default greet
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

「/ js」ディレクトリにある「greet.js」という名前のファイル。

<script type="module">
  import greet from "/js/greet.js"
  greet("hi")
</script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

index.html

続きを読む

ですから、私は過去10年間に変わったすべてについて話しませんでしたが、私が最も役立つと思うことだけについて話しました。これらの他のトピックをチェックしてください。



参考文献

• 地図
• セットする
• 発生器
• 厳密モード
• 配列メソッド
• オブジェクト静的メソッド
• 反射する
• URL

ガイド

• Javascript.info
• ES6の探索
• Javascriptの歴史
• async / deferを使用したノンブロッキングJSロード