100の理論的なJavaScriptの質問

良い一日、友達！



これは、このリポジトリからの上位100のJavaScriptの基本的な質問のリストであり、短い回答とIlyaKantorのModernJavaScript Tutorial（JSR）およびMDNへのリンクが含まれています。



このリストと300以上の練習問題は私のアプリで利用できます。



アプリケーションは、調査した質問を記憶するためのメカニズムを実装し、オフライン作業も提供します。



エラーや誤植の可能性についてお詫び申し上げます。どんな形のフィードバックも歓迎します。



14.09のエディション。ここ



の続きを参照してください。

1.オブジェクトを作成するにはどうすればよいですか？

これを行うにはいくつかの方法があります。それらのいくつかは次のとおりです。

オブジェクトリテラル：

const object = {}

オブジェクトコンストラクター（非推奨）：

const object = new Object()

Object.create（）

メソッドこのメソッドを使用すると、オブジェクトが引数として渡され、新しいオブジェクトのプロトタイプになります。

//     -  
const object = Object.create(null)

コンストラクター

関数コンストラクター関数を作成し、「new」演算子を使用して、この関数のインスタンス（オブジェクト）を作成します。

function Person (name) {
    const object = {}
    object.name = name
    object.age = 30
    return object
}
const user = new Person('')

クラス：

class Person {
    constructor(name) {
        this.name = name
    }
}

const user = new Person('')

JSR

MDN

2.プロトタイプとは何ですか？

プロトタイプは、既存のオブジェクトに基づいて新しいオブジェクトを作成するために使用されます。この手法は、プロトタイプ継承と呼ばれます。オブジェクトのインスタンスのプロトタイプは、Object.getPrototypeOf（オブジェクト）または__proto__プロパティ（[[Prototype]]内部非表示プロパティ）から入手できます。







JSR

MDN

3. call（）、apply（）、bind（）の違いは何ですか？

これらの方法の違いは、例を使用して説明するのが最も簡単です。

call（）メソッドは、指定されたthis値とコンマで区切られた引数を使用して関数を呼び出します。

const employee1 = { firstName: '', lastName: '' }
const employee2 = { firstName: '', lastName: '' }

function invite (greet1, greet2) {
    console.log(\`${greet1}, ${this.firstName} ${this.lastName}. ${greet2}\`)
}

invite.call(employee1, '', ' ?') // ,  .  ?
invite.call(employee2, '', ' ?') // ,  .  ?

apply（）メソッドは、指定されたthis値と配列引数を使用して関数を呼び出します。

const employee1 = { firstName: '', lastName: '' }
const employee2 = { firstName: '', lastName: '' }

function invite (greet1, greet2) {
    console.log(\`${greet1}, ${this.firstName} ${this.lastName}. ${greet2}\`)
}

invite.apply(employee1, ['', ' ?']) // ,  .  ?
invite.apply(employee2, ['', ' ?']) // ,  .  ?

bind（）メソッドは、指定されたthis値を持つ新しい関数を返し、配列またはコンマで区切られた任意の数の引数をそれに渡すことができます。

const employee1 = { firstName: '', lastName: '' }
const employee2 = { firstName: '', lastName: '' }

function invite (greet1, greet2) {
    console.log(\`${greet1}, ${this.firstName} ${this.lastName}. ${greet2}\`)
}

const inviteEmployee1 = invite.bind(employee1)
const inviteEmployee2 = invite.bind(employee2)
inviteEmployee1('', ' ?') // ,  .  ?
inviteEmployee2('', ' ?') // ,  .  ?

したがって、call（）メソッドとapply（）メソッドは、オブジェクトにバインドされた後に関数を呼び出します。2つの違いは、引数の受け渡し方法です。この違いは、メソッドの最初の文字で簡単に覚えることができます。callはコンマ（comma、c）、applyは配列（array、a）です。bind（）メソッドは、指定されたオブジェクトにバインドされた新しい関数を返します。



JSR-呼び出し/適用

JSR-バインド

MDN-呼び出し

MDN-適用

MDN-バインド

4. JSONとは何ですか、またどのようなメソッドがありますか？

JSONは、DouglasCrockfordによって発明されたJavaScriptオブジェクト構文に基づくテキストデータ形式です。これは、ネットワークを介してデータを転送するために使用され、通常、拡張子は.jsonで、MIMEタイプはapplication / jsonです。

解析：JSON文字列をオブジェクトに変換します。

JSON.parse(text)

文字列化：ネットワークを介して送信するために、オブジェクトをJSON文字列に変換します。

JSON.stringify(object)

JSR

MDN

5. Array.slice（）メソッドは何をしますか？

スライス（）メソッドは、選択した配列要素を新しい配列として返します。最初の引数で指定されたインデックスで始まり、2番目のオプションの引数で指定されたインデックスで終わるが含まないアイテムを返します。2番目の引数がない場合、最初の引数で指定されたインデックスで始まるすべての要素が取得されます。

const arrayIntegers = [1, 2, 3, 4, 5]
const arrayIntegers1 = arrayIntegers.slice(0, 2) // [1, 2]
const arrayIntegers2 = arrayIntegers.slice(2, 3) // [3]
const arrayIntegers3 = arrayIntegers.slice(4) // [5]

このメソッドは元の配列を変更せず、そのサブセットのみを新しい配列として返すことに注意してください。



JSR

MDN

6. Array.splice（）メソッドは何をしますか？

splice（）メソッドは、要素を配列に追加したり、配列から削除したりするために使用されます。最初の引数は要素を追加または削除するための開始位置を指定し、2番目のオプションの引数は削除する要素の数を指定します。後続の各引数（3番目など）が配列に追加されます。

let arrayOriginal1 = [1, 2, 3, 4, 5]
let arrayOriginal2 = [1, 2, 3, 4, 5]
let arrayOriginal3 = [1, 2, 3, 4, 5]

let array1 = arrayOriginal1.splice(0, 2) //  [1, 2];   = [3, 4, 5]
let array2 = arrayOriginal2.slice(3) //  [4, 5];   = [1, 2, 3]
let array3 = arrayOriginal3.slice(3, 1, 'a', 'b', 'c') //  [4];   = [1, 2, 3, 'a', 'b', 'c']

splice（）メソッドは元の配列を変更し、抽出された要素の配列を返すことに注意してください。



JSR

MDN

7.スライス（）とスプライス（）の違いは何ですか？

主な違いは次のとおりです。



JSR

MDN -スライス

MDN -スプライス

8.オブジェクトとマップはどのように比較されますか？

オブジェクトは、値にキーを設定したり、値を取得したり、キーを削除したり、キーごとに値が存在するかどうかを判断したりできるという点で、マップに似ています。このため、以前はオブジェクトがマップとして使用されていました。ただし、それらの間にはいくつかの違いがあり、場合によってはカードの使用がより好ましいものになります。

• オブジェクトキーは文字列とシンボルのみにすることができ、マップキーは関数やオブジェクトを含む任意の値にすることができます
• マップキーは順序付けられていますが、オブジェクトキーは順序付けられていません。したがって、反復すると、マップキーは追加された順序で返されます。
• sizeプロパティを使用してマップのサイズを取得でき、オブジェクトプロパティの数は手動で定義されます
• マップは反復可能なエンティティであり、オブジェクトを反復するには、最初に何らかの方法でそのキーを取得してから、それらを反復する必要があります。
• オブジェクトをマップとして使用する場合、どのオブジェクトにもプロトタイプがあるため、マップ自体のキーがユーザー定義のキーとオーバーラップする可能性があることに注意してください。したがって、マップオブジェクトの作成にはObject.create（null）を使用する必要がありますが、現在、このメソッドはほとんど使用されていません。
• キーの迅速な追加/削除に関しては、オブジェクトはパフォーマンスの点でマップより劣っています

JSR

MDN

9。「==」演算子と「===」演算子の違いは何ですか？

JavaScriptには、値を比較する2つの方法があります。厳密（===、！==）と抽象（==、！==）です。厳密な比較では、値はそのまま比較され、緩い比較では、必要に応じて、値タイプの暗黙的な変換（キャスト）が実行されます。厳密な演算子は、さまざまなタイプの値を比較するために次のルールを使用します。

• 2つの文字列は、同じ文字セット、同じ長さ、同じ位置に同じ文字がある場合、厳密に等しくなります。
• それらの値が等しい場合、2つの数値は厳密に等しくなります。2つの特殊なケースがあります。
  
  
  
  
  • NaNは、NaNを含め、何にも等しくありません
  • 正と負のゼロは互いに等しい
  
  
  
• ブール値は、両方がtrueまたはfalseの場合、つまり、厳密に等しくなります。正しいか間違っているか
• 2つのオブジェクトが同じオブジェクト（メモリの場所）を参照している場合、それらは厳密に等しいです。
• null === undefinedはfalseを返し、null == undefinedはtrueを返します

いくつかの例：

0 == false // true
0 === false // false
1 == "1" // true
1 === "1" // false
null == undefined // true
null === undefined // false
'0' == false // true
'0' === false // false
[] == [] // 
[] === [] // false,      
{} == {} // 
{} === {} // false,      

JSR

MDN

10.ラムダ関数または矢印関数とは何ですか？

矢印関数は、関数式を記述する簡単な方法です。彼らは独自のthis、arguments、super、new.targetを持っていません。これらの関数は、メソッドを持たないがコンストラクターとして使用できない関数の優れた代替手段として機能します。

function regularSum (x, y) {
    return x + y
}

const arrowSum = (x, y) => x + y

JSR

MDN

11.関数がファーストクラスオブジェクトと呼ばれるのはなぜですか？

JavaScriptでは、関数はファーストクラスのオブジェクトです。これは、関数を通常の変数のように使用できることを意味します。

たとえば、関数を引数として別の関数に渡し、別の関数から値として返し、変数に割り当てることができます。次の例では、ハンドラーに関数を割り当てます。

const handler = () => console.log(' -   ')
document.addEventListener('click', handler)

JSR

MDN

12.一次関数とは何ですか？

一次関数は、別の関数を引数として受け取らず、関数を値として返さない関数です。

const firstOrder = () => console.log(' -   ')

JSR

MDN

13.高次関数とは何ですか？

高次関数は、別の関数を引数として受け取るか、別の関数を値として返す関数です。

const firstOrderFun = () => console.log(' -   ')
const higherOrder = returnFirstOrderFun => returnFirstOrderFun()
higherOrder(firstOrderFunc)

JSR

MDN

14. unary関数とは何ですか？

unary関数（monad関数）は、次の1つの引数のみを取る関数です。

const unaryFun = a => console.log(a + 10) //  10        

JSR

MDN

15.カレーとは何ですか？

カレーは、複数のパラメーターを持つ関数を1つのパラメーターを持つ複数の関数に変換するプロセスです。このプロセスは、数学者HaskellCurryにちなんで名付けられました。カレーは、1つのn-ary関数をいくつかのunary関数に変換します（関数のarityを減らします）：

const sum = (a, b, c) => a + b + c
const currySum = a => b => c => a + b + c

currySum(1) //  : b => c => 1 + b + c
currySum(1)(2) //  : c => 3 + c
currySum(1)(2)(3) //   6

カレーは、コードの再利用（部分関数アプリケーション）を有効にし、関数の構成を作成するために使用されます。



JSR

16.純粋な関数とは何ですか？

純粋な関数は、戻り値が渡された引数のみに依存し、副作用がない関数です。簡単に言えば、n個の引数を使用して関数をn回呼び出し、関数が常に同じ値を返す場合、それはクリーンです。

//  
let numberArray = []
const impureAddNumber = number => numberArray.push(number)
// 
const pureAddNumber = number => argNumberArray => argNumberArray.concat([number])

console.log(impureAddNumber(1)) // 1
console.log(numberArray) // [1]
console.log(pureAddNumber(2)(numberArray)) // [1, 2]
console.log(numberArray) // [1]

上記の例では、push（）メソッドが渡された引数に依存しない配列の新しい長さを返すため、impureAddNumberは純粋な関数ではありません。concat（）メソッドは副作用なしに2つの配列を連結し、新しい配列を返すため、2番目の関数は純粋です。純粋な関数はユニットテストに不可欠であり、依存関係の注入は必要ありません。副作用がないため、要素間の接続が弱くなるため、アプリケーションの信頼性が向上します。この原則の具体化の1つは、ES6で導入された不変性の概念であり、letよりもconstを優先します。



JSR

MDN

17.「let」キーワードは何に使用されますか？

「let」キーワードは、ブロックスコープのローカル変数を宣言するために使用されます。このような変数の範囲は、それが使用されるブロック、演算子、または式によって制限されます。「var」キーワードで宣言された変数には、それらが定義されているグローバルスコープまたは関数スコープがあります。

let counter = 1
if (counter === 1) {
    let counter = 2
    console.log(counter) // 2
}
console.log(counter) // 1 ( counter,   ,   )

JSR

MDN

18. letとvarの違いは何ですか？

主な違いは次のとおりです。



いくつかの例：

function userDetails(username) {
    if (username) {
        console.log(salary)
        console.log(age)
        let age = 30
        var salary = 10000
    }
    console.log(salary) // 10000 (  )
    console.log(age) // SyntaxError: "age" is not defined (  )
}

JSR

MDN-

MDN-var

19.なぜ「let」という言葉がキーワードに選ばれたのですか？

は、SchemeやBasicなどの初期のプログラミング言語で使用されていた数学演算子です。現在、letは多くのプログラミング言語で使用されているため、この単語は略語「var」（変数）に最も近い代替手段です。



JSR

MDN

20.スイッチブロックの変数をオーバーライドするにはどうすればよいですか？

スイッチブロックで「let」キーワードで宣言された変数をオーバーライドしようとすると、エラーが発生します。

let counter = 1
switch(x) {
    case 0:
        let name
        break
    case 1:
        let name // SyntaxError
        break
}

この問題を解決するには、ケース内に新しいブロックを作成する必要があります-新しい字句スコープ：

let counter = 1
switch(x) {
    case 0: {
        let name
        break
    }
    case 1: {
        let name
        break
    }
}

JSR

MDN

21.一時的なデッドゾーンとは何ですか？

キーワード「let」または「const」（「var」ではない）で宣言された変数に、定義される前（つまり、現在のスコープ内の値が割り当てられる前）にアクセスしようとすると、ReferenceError例外がスローされます。 ）。言い換えると、タイムデッドゾーンは、変数のコンテキスト（スコープ）の作成とその定義の間の時間です。

function someMethod () {
    console.log(counter1) // undefined
    console.log(counter2) // ReferenceError
    var counter1 = 1
    const counter2 = 2
}

MDN

22.即時呼び出し関数式（IIFE）とは何ですか？

IIFEは、定義の直後に呼び出される関数です。このような関数の構文は次のようになります（オプションの1つで、最も一般的です）。

(function () {
    // 
})()

// ,      
(() => {
    // 
})()

IIFEを使用する主な理由は、IIFE内で宣言された変数に外部環境からアクセスできないため、変数をプライベートに保つことです。

(function () {
    var message = 'IIFE'
    console.log(message)
})()
console.log(message) // SyntaxError: "message" is not defined

JSR

MDN

23.モジュールを使用する利点は何ですか？

とりわけ、以下が言及することができます：

• 読みやすさの向上とコードメンテナンスの容易化
• 再利用可能なコード
• グローバルネームスペースをクリーンに保つ

JSR

MDN

24.暗記または暗記とは何ですか？

メモ化は、以前に取得した関数の結果をキャッシュに保存することにより、関数のパフォーマンスを向上させる方法です。関数が呼び出されるたびに、関数に渡された引数がキャッシュインデックスになります。データがキャッシュにある場合、関数を再実行せずに返されます。それ以外の場合、関数が実行され、結果がキャッシュに書き込まれます。

const memoAdd = () => {
    let cache = {}
    return value => {
        if (value in cache) {
            console.log('   ')
            return cache[value] //   , cache.value        ,     JavaScript     .    
        } else {
            console.log(' ')
            let result = value + 20
            cache[value] = result
            return result
        }
    }
}
//    memoAdd
const add = memoAdd()
console.log(add(20)) //   40
console.log(add(20)) //     40

25.巻き上げとは何ですか？

巻き上げは、コードを実行する前に、変数と関数式をスコープの先頭に移動するプロセスです。注意：初期化ではなく、変数と式自体のみが引き上げられます（つまり、変数宣言は引き上げられ、値の割り当ては行われません）：

console.log(message) // undefined
var message = '!'

インタプリタの場合、このコードは次のようになります。

var message
console.log(message)
message = '!'

JSR

MDN

26.クラスとは何ですか？

ES6で導入されたクラスは、プロトタイプ継承（コンストラクター関数プロトタイプ用）の構文シュガー（ラッパー、抽象化、またはアドオン）です。コンストラクター関数の例：

function Bike(model, color) {
    this.model = model
    this.color = color
}

Bike.prototype.getDetails = function () {
    return ' ' + this.model + '   ' + this.color + ' .'
}

クラスを使用した同じ例：

class Bike {
    constructor (color, model) {
        this.color = color
        this.model = model
    }

    getDetails () {
        return \` ${this.model}   ${this.color} .\`
    }
}

JSR

MDN

27.閉鎖とは何ですか？

クロージャーは、関数とその字句環境の組み合わせです。簡単に言うと、クロージャとは、内部関数が外部関数で宣言された変数にアクセスできる場合です。クロージャーには、次の3つのスコープのチェーンがあります。

• 独自のスコープ
• 外部機能スコープ
• グローバルスコープ

const welcome = name => {
    const greet = message => {
        console.log(\`${message}, ${name}!\`)
    }
    return greet
}

const fun = welcome('')
fun('') // , !

JSR

MDN

28.モジュールとは何ですか？

モジュールは、多くの設計パターンの根底にある、独立した再利用可能なコードの小さな断片です。ほとんどのモジュールは、オブジェクト、関数、またはコンストラクターとしてエクスポートされます。



JSR

MDN

29.スコープとは何ですか？

スコープは、実行中のコード内のさまざまな場所での変数、関数、およびオブジェクトの可用性を定義します。言い換えると、スコープは、コード実行の現在のコンテキストにおける変数およびその他のリソースの可視性です。



MDN

30.サービスワーカーとは何ですか？

Service Workerは、実行するWebページやユーザーのアクションとは独立して実行されるスクリプトです。実際、Service Workerは、アプリケーションとブラウザの間のプロキシサーバーとして機能します。Service Workerの主な機能は次のとおりです。アプリケーションがオフラインであることの確認、定期的なバックグラウンド同期、プッシュ通知、ネットワークリクエストの傍受と処理、およびプログラムによるキャッシュの管理。



MDN

31. Service Workerを使用してドキュメントオブジェクトモデル（DOM）とどのようにやり取りしますか？

サービスワーカーは、DOMに直接アクセスできません。ただし、postMessageインターフェイスを介してページと対話でき、ページはDOMを変更できます。



MDN-ServiceWorkerMDN

-postMessage

32. Service Workerを再起動するときに情報を再利用するにはどうすればよいですか？

サービスワーカーの問題の1つは、使用していないときに実行を停止し、必要に応じて再起動することです。これにより、フェッチおよびメッセージイベントハンドラーをグローバルに追加できなくなります。情報を再利用するには、サービスワーカーがインデックス付きデータベース（IndexedDB）またはローカルストレージ（ローカルストレージ）と対話するようにする必要があります。



MDN

33.インデックス付きデータベース（IndexedDB）とは何ですか？

IndexedDBは、ファイルやblobなどの大量の構造化データをクライアント側に格納するための低レベルAPIです。このインターフェイスは、インデックスを使用してデータ取得の速度を向上させます。



JSR

MDN

34. Webストレージとは何ですか？

Webストレージは、データをキーと値のペアとしてローカルに保存できるようにするインターフェイスです。ユーザーのブラウザーで、Cookieを使用するよりも便利な方法で。Webストレージは、次の2つのストレージメカニズムを提供します。

• ローカルストレージ（ローカルストレージ）-現在のユーザーのデータを無制限に保存します
• セッションストレージ-現在のセッション全体でデータを保存します。ブラウザタブを閉じると、データが失われます

JSR

MDN

35. postMessageとは何ですか？

postMessageは、ウィンドウオブジェクトのさまざまなソース（たとえば、ページとそれが生成するポップアップ（ポップアップウィンドウ）、またはページと埋め込みiframe）の間で通信する方法です。通常、あるページのスクリプトは、そのページが共通オリジンまたは単一ソースポリシー（ソース-プロトコル、ホスト、およびポート）に従っている場合、別のページにアクセスできません。



MDN-postMessage

36.クッキーとは何ですか？

Cookieは、後でブラウザで使用するためにユーザーのコンピュータに保存される小さなデータです。Cookieは、キーと値のペアとして保存されます。

document.cookie = 'username='

JSR

MDN

37.なぜCookieが必要なのですか？

Cookieは、ユーザーに関する情報を保存するために使用されます（機密情報の保存にはお勧めしません）。通常、このプロセスは2つの段階で構成されます。

• このページに最初にアクセスすると、ユーザープロファイルがCookieに保存されます。
• ページに再度アクセスすると、ユーザープロファイルがCookieから取得されます

JSR

MDN

38. Cookieの機能は何ですか？

デフォルトでは、ブラウザを閉じるとCookieが削除されますが、これはUTCで有効期限を設定することで変更できます。

document.cookie = 'username=; expires=Sat, 5 Sep 2020 12:00:00 UTC'

デフォルトでは、Cookieは現在のページに属しますが、パスを設定することで変更することもできます。

document.cookie = 'username=; path=/services'

JSR

MDN

39. Cookieを削除するにはどうすればよいですか？

経過時間をライフタイムとして設定することで、Cookieを削除できます。この場合、Cookie値を定義する必要はありません。

document.cookie = 'username=; expires=Sat, 05 Jun 2020 00:00:00 UTC; path=/;'

この場合、正しいCookieを削除するためのパスを決定する必要があることに注意してください。一部のブラウザでは、このパラメータを指定せずにCookieを削除することはできません。



JSR

MDN

40. Cookie、ローカルストレージ、セッションストレージの違いは何ですか？

主な違いは次のとおりです。



JSR-Cookies

MDN-Cookie

JSR-LocalStorage、SessionStotageMDN

-Webストレージ

41.ローカルストレージとセッションストレージの主な違いは何ですか？

ローカルストレージはセッションストレージと同じですが、最初はブラウザを閉じて再起動してもデータが保存され、2番目はセッションの終了時にデータが削除される（[ブラウザ]タブを閉じる）点が異なります。



JSR

MDN

42. Webストレージにアクセスするにはどうすればよいですか？

windowオブジェクトは、localStorageプロパティとsessionStorageプロパティをそれぞれ持つWindowLocalStorageオブジェクトとWindowSessionStorageオブジェクトを提供します。これらのプロパティは、特定のドメインおよびストレージタイプ（セッションまたはローカル）のデータを書き込み、取得、および削除できるStorageオブジェクトのインスタンスを作成します。

//  
localStorage.setItem('data', document.querySelector('.data').value)
//  
localStorage.getItem('data')

JSR

MDN

43.セッションストレージにはどのような方法がありますか？

セッションストレージは、データの読み取り、書き込み、および削除の方法を提供します。

//  
sessionStorage.setItem('key', 'value')

//  
const data = sessionStorage.getItem('key')

//   
sessionStorage.removeItem('key')

//   
sessionStorage.clear()

JSR

MDN

44. Webストレージを操作すると、どのようなイベントが発生しますか？

別のドキュメントのコンテキストでストレージが変更されると、ストレージイベントが発生します。

window.onstorage = function () {}

このイベントの処理例：

window.onstorage = event => {
    console.log(\`${event.key}  .
     : ${event.oldValue}.
     : ${event.newValue}.\`)
}

このイベントでは、一種のチャットを実装できます。



JSR

MDN

45. Webストレージは何に使用されますか？

Webストレージはより安全で、パフォーマンスに影響を与えることなく、Cookieよりも多くのデータを保存できます。さらに、データはサーバーに送信されません（Cookieの場合、クライアントがサーバーにアクセスするたびに、データは要求ヘッダーと応答ヘッダーに含まれます）。したがって、データを保存するこの方法は、Cookieよりも適しています。



JSR

MDN

46.ブラウザがWebストレージをサポートしているかどうかを確認するにはどうすればよいですか？

Webストレージを使用する前に、このインターフェイスのブラウザーサポートを確認することをお勧めします。

if (typeof(Storage) !== 'undefined') {
    // 
} else {
    // -  
}

// 
if ('Storage' in window) {
    console.log('ok')
} else {
    console.warn(' ok')
}

CanIUseに よると、今日のWebストレージサポートは98％です。



JSR

MDN

47.ブラウザがサービスワーカーをサポートしているかどうかを確認するにはどうすればよいですか？

Service Workerを使用する前に、このインターフェイスのブラウザサポートを確認することをお勧めします。

if (typeof(Worker) !== undefined) {
    // 
} else {
    // -  
}
// 
if ('Worker' in window) {
    console.log('ok')
} else {
    console.warn(' ok')
}

CanIUseに よると、サービスワーカーのサポートは現在94％です。



MDN

48.Webワーカーの例を挙げてください

Webワーカーを使用するには、次のことを行う必要があります。

ワーカー用のファイルを作成します（例：get-current-time.js）。

const getCurrentTime = () => {
    let time = new Date().toLocaleTimeString()
    postMessage(time)
    setTimeout(() => getCurrentTime(), 1000)
}

getCurrentTime()

postMessage（）メソッドは、ページにメッセージを送信するために使用されます。

ワーカーオブジェクトを作成します。

const worker = new Worker('get-current-time.js')

その後、ワーカーからのメッセージの受信を処理します。

<output></output>
<button></button>

worker
    .addEventListener('message', event => document.querySelector('output')
    .textContent = event.data)

ワーカーは、外部スクリプトが作業を完了した後もメッセージイベントを処理し続けるため、強制的に停止する必要があります。

document.querySelector('button')
    .addEventListener('click', () => worker.terminate())

ワーカーを未定義に設定すると、次のように再利用できます。

worker = undefined

MDN

49.DOMを操作するためのWebワーカーの制限は何ですか

Webワーカーは別のファイルで作成されるため、次のオブジェクトにアクセスできません。

• 窓
• 資料
• 親オブジェクト-ワーカーを開始したオブジェクト

MDN

50.約束とは何ですか？

promise（通信）は、何らかの値で実行されるか、エラーで拒否されるオブジェクトです。約束は、特定の時間が経過した後、または特定のイベントが発生した後に解決されます。約束には、保留中、履行済み、拒否の3つの状態のいずれかがあります。

約束の構文：

const promise = new Promise((resolve, reject) => {
    // 
})

// ,   ,    
const promise = Promise.resolve(value)
promise.then(value => {
    // 
})

promiseの使用例：

const promise = new Promise(resolve => {
    const timer = setTimeout(() => {
        resolve('  !')
        clearTimeout(timer)
    }, 5000);
}, reject => {
    reject('-   ')
})

promise
    .then(value => console.log(value))
    .catch(error => console.error(error))
    .finally(() => console.log(' ')) //     "  !"  5    " "

プロミス解決アルゴリズム：







JSR

MDN

51.なぜ約束が必要なのですか？

Promiseは、非同期コードを操作するために使用されます。これらはコールバック関数の代替であり、いわゆる「コールバック地獄」を回避し、コードをよりクリーンで読みやすくします。



JSR

MDN

52.約束の3つの可能な状態を挙げてください

約束には3つの状態があります。

• 保留中：操作を開始する前の段階
• 実行済み：操作は正常に完了しました
• 拒否：操作は失敗しました。例外がスローされます

JSR

MDN

53.コールバック関数とは何ですか？

コールバックは、引数として別の関数に渡される関数です。この関数（内部）は、特定のイベントが発生したときに操作を実行するために、親（外部）内で呼び出されます。簡単な例を見てみましょう。

function callback(name) {
    alert(\`, ${name}!\`)
}

function outer(cb) {
    const name = prompt(',   ')
    cb(name)
}
outer(callback)

上記の例では、外部関数はユーザーの名前を要求し、それをname変数に格納します。次に、この関数は名前をコールバック関数に渡します。コールバック関数は、ユーザーの名前で挨拶を出力します。



JSR

MDN

54.なぜコールバックが必要なのですか？

JavaScriptはイベント駆動型言語であるため、コールバックが必要です。これは、たとえば、リクエストへの応答や特定のイベントの処理を待つ代わりに、JavaScriptが他のイベントに応答し続けることを意味します。1つの関数がインターフェイスにアクセスし、もう1つの関数がコンソールにメッセージを出力する例を考えてみます。

function first () {
    //    API
    setTimeout(() => console.log('  '), 1000)
}

function second () {
    console.log('  ')
}

first()
second()
//    "  ",  "  "

ご覧のとおり、JavaScriptは最初の関数が完了するのを待たずに、コードを実行し続けます。したがって、コールバックは非同期をシミュレートするために使用され、メインプログラムスレッドのブロックを防ぎます。



JSR

MDN

55.コールバック地獄とは何ですか？

コールバック地獄は、非同期ロジックを実装するために複数のコールバック関数が相互にネストされるアンチパターンです。このコード構造を理解して維持することは困難です。次のようになります。

function first () {
    return function second () {
        return function third () {
            return function fourth () {
                //  ..
            }
        }
    }
}

コーディングへのこのアプローチは、カレー、部分的な適用、または機能の構成の場合を除いて、悪い習慣と見なされます。



JSR

MDN

56.サーバー送信イベント（SSE）とは何ですか？

サーバー送信イベントは、ブラウザーが要求を送信せずにHTTP接続を介してサーバーから更新されたデータを受信できるようにするプッシュ通知テクノロジーです。これは、メッセージがサーバーによってのみ送信される場合の、クライアントとサーバー間の通信方法の1つです。このテクノロジーは、Facebook / Twitter、ストア価格、ニュースフィードなどを更新するために使用されます。



JSR

MDN

57.サーバーから送信されたメッセージ（通知またはイベント）を受信するにはどうすればよいですか？

EventSourceオブジェクトはこれに使用されます：

if('EventSource' in window) {
    const source = new EventSource('sse.js')
    source.addEventListener('message', event => document.querySelector('output')
        .textContent = event.data)
}

JSR

MDN

58. SSEのブラウザサポートを確認するにはどうすればよいですか？

これは次のように行われます。

if (typeof EventSource !== 'undefined') {
    // 
} else {
    // SSE  
}

// 
('EventSource' in window)
    ? console.log('ok')
    : console.warn('! ok')

CanIUseに よると、現在、ブラウザの95％がSSEでサポートされています。



JSR

MDN

59. SSEを使用すると、どのようなイベントが発生しますか？

これらのイベントのリストは次のとおりです。



JSR

MDN

60.プロミスを扱うための基本的なルールは何ですか？

promiseを操作するための基本的なルールは次のとおりです。

• promiseは、組み込みまたは標準のthen（）メソッドを含むオブジェクトです。
• 約束を待つ段階は、通常、その履行または拒否の段階で終了します
• 履行または拒否された約束のステータスは、解決された後は変更しないでください
• 約束を解決した後、その値も変更されるべきではありません。

JSR

MDN

61.コールバックのコールバックとは何ですか？

特定の操作を順番に実行するために、コールバックを相互にネストできます。

loadScript('/script1.js', script => {
    console.log(\` ${script} \`)

    loadScript('/script2.js', script => {
        console.log(\` ${script} \`)

        loadScript('/script3.js', script => {
            console.log(\` ${script} \`)
        })
    })
})

JSR

MDN

62.プロミスチェーンとは何ですか？

promiseを使用した複数の非同期タスクの順次実行は、promiseチェーンと呼ばれます。例を考えてみましょう：

new Promise((resolve, reject) => {
    const id = setTimeout(() => {
        resolve(1)
        clearTimeout(id)
    }, 1000)
}).then(result => {
    console.log(result) // 1
    return result * 2
}).then(result2 => {
    console.log(result2) // 2
    return result2 * 3
}).then(result3 => {
    console.log(result3) // 6
}).catch(error => console.error(error))

実行アルゴリズム：

• 最初のpromiseは値1で解決されます
• その後、最初のthen（）メソッドはこの値をコンソールに出力し、2を掛けた値を返します。
• 2番目のthen（）は、最初のthen（）の結果をコンソール（2）に出力し、3を掛けた結果を返します。
• 最後のthen（）は、2番目のthen（）の結果をコンソール（6）に出力します。
• キャッチブロックはエラーを処理するために使用されます

JSR

MDN

63. Promise.all（）とは何ですか？

Promise.all（）は、他のpromiseの配列を引数として受け取り、実行されたpromiseの結果、または1つが拒否された場合はエラーを返すPromiseです。構文：

Promise.all([Promise1, Promise2, Promise3])
    .then(results => console.log(results))
    .catch(error => console.error(error))

結果が発生する順序は、アレイ内のPromiseの順序によって異なることに注意してください。



JSR

MDN

64. Promise.race（）とは何ですか？

Promise.race（）は、最初に実行または拒否されたプロミスの結果をプロミスの配列として返します。

const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 500, ''))

const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, ''))

Promise.race([promise1, promise2]).then(value => console.log(value)) // ""

JSR

MDN

65.厳格な体制とは何ですか？

strictモードを有効にするには、すべてのコードまたは個々の関数の先頭で「usestrict」（または「usestrict」）ステートメントを使用します。厳密モードはES5で導入されました。このモードでは、一部のアクションが禁止され、さらに多くの例外がスローされます。



JSR

MDN

66.なぜ厳格な体制が必要なのですか？

厳密モードでは、多くのエラーの発生を防ぐことで、より安全なコードを記述できます。たとえば、グローバル変数の偶発的な作成（キーワードなし、variable = value）、読み取り専用プロパティへの値の割り当て、ゲッターを使用してのみ取得できるプロパティ、存在しないプロパティ、および存在しない変数またはオブジェクトを禁止します。非厳密モードでは、これらすべての場合に例外はスローされません。



JSR

MDN

67.厳密なセキュリティを有効にするにはどうすればよいですか？

厳密モードは、コードまたは関数の先頭にある「usestrict」（または「usestrict」）ステートメントによって有効になります。通常、この命令はスクリプトの最初に示されます。グローバル名前名：

'use strict'
x = 3.14 // ReferenceError: "x" is not defined

関数で「usestrict」が指定されている場合、strictモードはその関数にのみ適用されます。

x = 3.14 //   
f() // ReferenceError: "y" is not defined

function f () {
    'use strict'
    y = 3.14
}

JSR

MDN

68.二重否定は何に使用されますか？

二重否定（!!）は、値をブール値に変換します。値がfalseの場合、falseが返されます。それ以外の場合、-true：

const x = 1
console.log(x) // 1
console.log(!!x) // true
const y = ''
console.log(y) // ''
console.log(!!str) // false

注意：！！！個別の演算子ではなく、2つの演算子です！..



MDN

JSR

69.削除演算子は何に使用されますか？

この演算子は、オブジェクトのプロパティとこれらのプロパティの値を削除するために使用されます：

'use strict'
const user = {
    name: '',
    age: 30
}

delete user.age

console.log(user) // { name: "" }

delete user // SyntaxError: Delete of an unqualified identifier in strict mode

非厳密モードでは、オブジェクトを削除しようとするとサイレントに失敗することに注意してください。

配列もオブジェクトであるため、配列の要素にdeleteを適用すると、その値が削除され、未定義が書き込まれます。配列の削除された要素のインデックスは保持され、配列の長さは変更されません。



JSR

MDN

70.使用される演算子のタイプは何ですか？

この演算子は、変数または式のタイプを定義するために使用されます。

typeof 1 // number
typeof [] // object
typeof '' // string
typeof (1 + 2) // number

typeof null // object
typeof NaN // number

JSR

MDN

71.未定義とは何ですか？

undefinedは、値が割り当てられていない変数の未定義（ただし欠落していない）標準値（デフォルト値）、および宣言されていない変数です。これは、プリミティブデータタイプの1つです。

let name
console.log(typeof name) // undefined
console.log(typeof age) // undefined

この値は、変数に明示的に割り当てることができます。

user = undefined

JSR

MDN

72. nullとは何ですか？

nullは、明示的に設定された値がないことを表す値です。これは、プリミティブデータタイプの1つです。nullを使用すると、変数の値を削除できます。

const user = null
console.log(typeof user) // object

JSR

MDN

73. nullとundefinedの違いは何ですか？

主な違いは次のとおりです。



JSR-未定義

JSR-

nullMDN-未定義

MDN-null

74.評価とは何ですか？

eval（）関数は、渡された文字列を評価します。文字列は、式、変数、1つ以上の演算子にすることができます。

console.log(eval('1 + 2')) // 3

//   
const curryCalc = x => operator => y =>
    new Promise((resolve, reject) =>
        resolve(eval(\`x${operator}y\`))
    ).then(
        result => console.log(result),
        error => console.error(' !')
    )

curryCalc(1)('+')(2) // 3
curryCalc(4)('-')(3) // 1
curryCalc(5)('x')(6) //  !

使用はお勧めしません。



JSR

MDN

75.ブラウザの履歴にアクセスするにはどうすればよいですか？

ブラウザのページ間の移動の履歴に関する情報には、ウィンドウオブジェクトのhistoryプロパティが含まれています。前または次のページに移動するには、back（）、next（）、またはgo（）メソッドを使用します。

const goBack = () => {
    history.back()
    // 
    history.go(-1)
}

const goForward = () => history.forward()

MDN

76. JavaScriptにはどのようなデータタイプがありますか？

JavaScriptには主に8つのタイプがあります。

• 任意の数の番号：整数または浮動小数点、整数値が±2に限定されている⁵³
• 任意の長さの整数のbigint
• 文字列の文字列。文字列には1つ以上の文字を含めることができ、個別の文字タイプはありません
• true / falseのブール値
• 不明な値の場合はnull-単一のnull値を持つ個別のタイプ
• 割り当てられていない値の場合は未定義-1つの未定義の値を持つ別のタイプ
• より複雑なデータ構造のオブジェクト
• 一意の識別子の記号

JSR

MDN

77. isNaN（）は何をしますか？

isNaN（）関数は、値を数値に変換し、それがNaNであるかどうかを確認します。

isNaN('hello') // true
isNaN(100) // false

この機能のより堅牢なバージョンは、ES6で導入されたNumber.isNaN（）メソッドです。



JSR

MDN

78.未宣言の変数と未定義の変数の違いは何ですか？

主な違いは次のとおりです。



JSR

MDN

79.グローバル変数とは何ですか？

ブラウザでは、「var」キーワードを使用して、またはキーワードを使用せずに（laxモードで）宣言されたグローバル関数と変数が、グローバルウィンドウオブジェクトのプロパティになります（モジュールでは機能しません）。このような変数には、プログラムのどこからでもアクセスできます。グローバル変数の使用はお勧めしません。グローバル変数を作成する必要がある場合は、明示的に作成することをお勧めします。

window.currentUser = {
    name: ''
}

// 
globalThis.currentUser = {
    name: ''
}

console.log(currentUser.name) // 

JSR

80.グローバル変数の作成にはどのような問題が伴いますか？

グローバル変数を作成すると、グローバルネームスペースが汚染され、変数名間の競合が発生する可能性があります。また、コードのデバッグとテストが難しくなります。



JSR

81. NaNとは何ですか？

グローバルNaNプロパティはNot-a-Number値です。より正確には、NaNは値が正しくないことを示しますが、それでも数値です。したがって、typeofNaNは数値を返します。

parseInt('bla') // NaN
Math.sqrt(-1) // NaN

MDN

82. isFinite（）は何をしますか？

グローバル関数isFinite（）は、引数を数値に変換し、それが通常の（有限の）数値である場合、つまりtrueを返します。NaN、Infinity（正の無限大）、-Infinity（負の無限大）ではありません。それ以外の場合は、falseが返されます。

isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false

isFinite(100) // true

Number.isFinite（）メソッドもあります。これは、isFinite（）とは異なり、チェックする前に引数を数値に変換しません。



MDN

JSR

83.イベントフロー/伝播とは何ですか？

イベントのフロー（イベント伝播）は、ページ上でイベントが発生する順序です。他の要素内にネストされた要素をクリックすると、イベントがターゲット要素に到達する前に、グローバルウィンドウオブジェクトから始めて、そのすべての祖先を順番に通過します。イベント伝播には3つの段階があります。

• 上から下へ-キャプチャまたはダイビングステージ
• ターゲットステージ
• ボトムアップ-上昇または上昇の段階（変数の上昇と混同しないでください-巻き上げ）

JSR

84.イベントバブリングとは何ですか？

バブリングは、イベントが最初にターゲット要素に登録され、次にこの要素の祖先から最上位（外側）の要素（グローバルウィンドウオブジェクト）までのチェーンを上る、イベントの伝播の段階です。



JSR

85.イマージョンまたはイベントキャプチャとは何ですか？

イマージョンは、イベントが最初に最上位（外側）の要素（グローバルウィンドウオブジェクト）に登録され、次に祖先のチェーンを下ってターゲット要素に下がったときに発生する段階です。



JSR

86.処理のためにフォームを送信するにはどうすればよいですか？

これはさまざまな方法で実行できます。

function submitForm() {
    document.forms[0].submit()
}

form.onsubmit = function(event) {
    event.preventDefault()
    // 
}

form.addEventListener('submit', event => {
    event.preventDefault()
    // 
})

フォームのボタンはデフォルトで送信されます。フォームを送信するのに役立ちます。



JSR

MDN

87.オペレーティングシステムに関する情報を取得するにはどうすればよいですか？

この情報は、グローバルナビゲーターオブジェクトに含まれています。この情報の一部は、プラットフォームプロパティから取得できます。

console.log(navigator.platform)

MDN

88. DOMContentLoadedイベントとloadイベントの違いは何ですか？

DOMContentLoadedイベントは、スタイルシート、画像、またはフレームが完全に読み込まれるのを待たずに、元のHTMLドキュメントが完全に読み込まれ、解析されたときに発生します。loadイベントは、追加のリソースを含め、ページが完全に読み込まれた後に発生します。



JSR

MDN-DOMContentLoadedMDN-

ロード

89.ネイティブ、ホスト（コードランタイムが所有）、およびカスタムオブジェクトの違いは何ですか？

ネイティブオブジェクトは言語の一部であり、ECMAScript仕様で定義されています。このようなオブジェクトは、たとえば、Number、String、Function、Object、Math、RegExp、Dateなどです。ホストオブジェクトは、ブラウザまたはNode.jsなどの別のランタイムによって提供されます。このようなオブジェクトは、たとえば、ウィンドウ、ドキュメント（DOM）、XMLHttpRequest、Web API（呼び出しスタック、タスクキュー）などです。ユーザーオブジェクトは、コードで作成されたオブジェクト、たとえばオブジェクトです。ユーザーに関する情報を含む：

const user = {
    name: '',
    age: 30
}

JSR

MDN

90.コードを延期するために使用されるツールは何ですか？

そのような手段は次のとおりです。

• ChromeDevToolsなどのブラウザ内開発者ツール
• デバッガー式
• 古き良きconsole.log（）

JSR

MDN -デバッガ

MDN -コンソール

91.プロミスとコールバックの長所と短所は何ですか？

利点：

• コールバックの地獄を防ぐ
• then（）を使用して非同期コードを順次実行できます
• Promise.all（）を使用して非同期コードを並行して実行できるようにする
• 多くのコールバックの問題を解決します（呼び出しが遅すぎるか早すぎる、1つではなく複数の呼び出し、エラーの非表示）

短所

• コードの記述が難しくなる
• 古いブラウザのサポートを提供するには、ポリフィルが必要です（現在、そのようなブラウザはほとんど残っていません）

JSR-約束

JSR-コールバック

MDN-約束

MDN-コールバック

92.属性と要素プロパティの違いは何ですか？

ブラウザがページをロードすると、HTMLが解析され、そこからDOMオブジェクトが生成されます。要素ノードの場合、ほとんどの標準HTML属性は自動的にDOMオブジェクトのプロパティになります。それら。要素の属性はマークアップで指定され、そのプロパティはDOMにあります。たとえば、id = "page"属性を持つbodyタグの場合、DOMオブジェクトにはbody.id = "page"プロパティがあります。

<input type="text" value=" !">
//     : type  value

const input = document.querySelector('input')
//  
console.log(input.getAttribute('value'))
//  
console.log(input.value)

//   
input.setAttribute('value', ' !')
//   
input.value = ' !'

ECMAScript仕様では、オブジェクトプロパティの属性（[[Value]]、[[Writable]]、[[Enumerable]]、および[[Configurable]]）も定義されていることに注意してください。



JSR

93.同じ起源のポリシー（SOP）とは何ですか？

共有オリジン（同じソース）ポリシーは、別のソースからのデータへのアクセスをブロックします。ソースは、プロトコル、ホスト、およびポートの組み合わせです。デフォルトでは、クロスオリジンリソース共有（CORS）は禁止されています。データは、データが配置されているのと同じソースからの要求に応答してのみ提供されます。この動作は、特別なHTTPヘッダーを使用して変更できます。



JSR

MDN-SOP

MDN-CORS

94. void 0は何をしますか？

void演算子は、渡された式を評価し、undefinedを返します。通常、リンクをクリックすると、ブラウザは新しいページをロードするか、現在のページをリロードします。「void（0）」という式を使用すると、これを回避できます。

<a href="javascript:void(0)" onclick="alert('!')">  !
</a>

ページの再読み込みは、単純なスタブで防ぐこともできます。

<a href="#"> </a>
//     "#"   URL   

MDN

95. JavaScriptはコンパイルまたは解釈されたプログラミング言語ですか？

JavaScript自体は解釈されたプログラミング言語です。エンジンはコードを解析し、各行を解釈して実行します。ただし、最近のブラウザは、実行前にコードがコンパイル（最適化）されるジャストインタイム（JITコンパイル）と呼ばれるテクノロジを使用しています。これにより、コード実行の準備時間が長くなりますが、実行自体が大幅に高速化されます。たとえば、ChromeとNode.jsで使用されるエンジンであるV8は、Ignitionインタープリターを使用してコードを解析し、TurboFanコンパイラーを使用してコードを最適化します。



JSR

MDN

96. JavaScriptは大文字と小文字を区別しますか？

はい、JavaScriptは大文字と小文字を区別します。したがって、キーワード、変数の名前、関数、およびオブジェクトは、それらを使用するときに同一である必要があります。たとえば、constsomenameとconstsomeNameは異なる変数、typeof（1）は数値、typeOf 1はReferenceError：typeOfは定義されていません。



JSR

MDN

97. JavaとJavaScriptは関連していますか？

いいえ、2つの異なるプログラミング言語です。ただし、どちらもオブジェクト指向の言語に属しており、他の多くの言語と同様に、同様の構文を使用します（if、else、for、switch、break、continueなど）。基本的に、JavaからJavaScriptはマーケティングの策略です。



JSR

MDN

98.イベントとは何ですか？

イベントは、特定のアクションに対するブラウザの反応です。このアクションは、ボタンのクリックやテキストの入力、ページの読み込み、リクエストへの応答の受信などのユーザーアクションにすることができます。（イベントをトリガーするアクションは、必ずしもユーザー固有ではありません）。イベントは、さらに処理するためにログに記録されます。

button.onclick = () => alert('!')

input.addEventListener('change', function() {
    p.textContent = this.value
})

window.onload = () => console.log('  ')

MDN

JSR

99. JavaScriptを発明したのは誰ですか？

ダウンロードJavaScriptで作成されたブレンダン・アイクネットスケープ・コミュニケーションズで彼の時間の間に。この言語は元々Mochaと呼ばれていましたが、LiveScriptに名前が変更され、クライアント側のプログラミングとサーバー側のプログラミング（LiveWireと呼ばれるべき）の両方を対象としていました。



JSR

MDN