理論上のJavaScriptに関する200の質問

良い一日、友達！これは



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



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



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



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



14.09からのエディション。ここで



最初の100の質問を参照してください。

101. stopPropagation（）は何に使用されますか？

このメソッドは、イベントがターゲット要素の祖先からチェーンを上下にバブリングするのを防ぐために使用されます。つまり、ターゲット要素からその祖先へのイベントの送信を停止します。例を考えてみましょう：

<div onclick="f2()">
    <div onclick="f1()"></div>
</div>

function f1(event) {
    event.stopPropagation()
    console.log(' ')
}

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

ネストされたコンテナをクリックすると、コンソールに「内部コンテナ」というメッセージが表示されます。event.stopPropagation（）を削除した場合、ネストされたコンテナをクリックすると、両方のメッセージがコンソールに表示されます。



JSR

MDN

102. return falseは何をしますか？

このステートメントは、イベントハンドラーで次の目的で使用されます。

• デフォルトのブラウザの動作をキャンセルする
• DOMを介したイベントの伝播の防止
• コールバックの実行を停止し、呼び出し元の関数に制御を戻します

戻り値を指定しない場合、returnステートメントは未定義を返すことに注意してください。



JSR

MDN

103. BOMとは何ですか？

BOMまたは（ブラウザオブジェクトモデル）を使用すると、JavaScriptでブラウザを操作できます。このモデルには、ナビゲーター、場所、履歴、画面、XMLHttpRequestなどのオブジェクトが含まれます。言い換えると、BOMは、ドキュメント以外のすべてを処理するためにブラウザによって提供される追加のオブジェクトです。

BOMは標準化されていないため、ブラウザによって実装が異なる場合があることに注意してください。







JSR

104. setTimeout（）は何に使用されますか？

このメソッドは、タスクの遅延実行に使用されます。つまり、関数の実行または式の評価を特定の時間（ミリ秒単位）後に実行できます。次の例では、2秒後にコンソールにメッセージを出力します。

setTimeout(() => console.log('!'), 2000)

//    ,   
const timer = setTimeout(() => {
    console.log('!')
    clearTimeout(timer)
}, 2000)

JSR

MDN

105. setInterval（）は何に使用されますか？

このメソッドは、タスクを定期的に実行するために使用されます。つまり、一定期間（ミリ秒単位）後に関数の実行や式の評価を実行することができます。次の例では、2秒ごとにコンソールにメッセージを出力します。

setInterval(() => console.log('!'), 2000)

//    ,    
//    
let i = 0
const timer = setInterval(() => {
    console.log('!')
    i++

    if (i == 2) {
        clearInterval(timer)
    }
}, 2000)

2番目の例では、メッセージ「Hello！」コンソールに2回出力され、その後タイマーが停止します



JSR

MDN

106.なぜJavaScriptは単一脅威と呼ばれるのですか？

JavaScriptは、シングルスレッドまたは同期プログラミング言語です。これは、一度に1つのタスクしか実行できないことを意味します。タスクが複雑な場合、完了するまでに長い時間がかかる可能性があり、その間、コード実行のメインスレッドがブロックされます。ストリームをブロックすると、ページにインタラクティブ機能がなくなります。ブラウザは、ユーザーの操作やその他のイベントへの応答を停止します。この問題を解決するために、コールバック、promise、async / await、ワーカー、および非同期コードを操作するための他のツールが使用されます。JavaScriptでは、たとえばJava、Go、C ++とは異なり、追加のスレッドやプロセスを作成する方法はありません。



JSR

MDN

107.イベントの委任とは何ですか？

イベント委任は、子によって発生したイベントを処理するために、イベントを親に登録する手法です。

多くの場合、グループ化コンテナのボタンクリックを処理したり、フォームのテキスト入力フィールドを変更したりするために使用されます。次に例を示します。

<form>
    <input type="text" class="first-input">
    <input type="text" class="second-input">
</form>

<div>
    <button class="first-button">click</button>
    <button class="second-button">click</button>
</div>

const form = document.querySelector('form')
const buttons = document.querySelector('div')

form.addEventListener('input', event => {
    console.log(event.target.className)
})

buttons.addEventListener('click', event => {
    console.log(event.target.className)
})

上記の例では、子要素にハンドラーを登録する代わりに、親要素にハンドラーを登録します。フィールドにテキストを入力するか、ボタンをクリックすると、対応する要素のクラス名がコンソールに出力されます。



JSR

108. ECMAScriptとは何ですか？

ECMAScriptは、JavaScriptの背後にあるプログラミング言語です。これは、JavaScriptが「構築」される一種のパターンまたは青写真です。ECMAScriptは、標準化組織EcmaInternationalによってECMA-262仕様で標準化されています。



JSR

MDN

109.JSON構文の機能に名前を付ける

JSON構文には次の機能があります。

• データはキー/値のペアです
• 値が数値でない限り、キーと値は二重引用符で囲まれます（ "key"： "value"）
• データはコンマで区切られます
• オブジェクトは中括弧で囲まれています
• 配列-正方形に

JSR

MDN

110. JSON.stringify（）は何をしますか？

サーバーにデータを送信するときは、特別な文字列形式である必要があります。JSON.stringify（）メソッドは、オブジェクトをJSON文字列に変換するために使用されます。

const user = { name: '', age: 30 }
const str = JSON.stringify(user)
console.log(str) // {"name":"","age":30}

JSR

MDN

111. JSON.parse（）は何をしますか？

サーバーからデータを受信するとき、それらは特別な文字列形式を持っています。JSON.parse（）メソッドは、このデータをJavaScriptオブジェクトに変換するために使用されます。

const str = { "name":"","age":30 }
const user = JSON.parse(str)
console.log(user) // {name: "", age: 30}

JSR

MDN

112. JSONとは何ですか？

クライアントとサーバー間でデータを交換する場合、このデータは文字列のみにすることができます。JSONはテキストなので、これに最適です。また、XMLやProtobufなどの他の形式とともに、任意のプログラミング言語でデータ形式として使用することもできます。



JSR

MDN

113. PWA（プログレッシブWebアプリケーション-プログレッシブWebアプリケーション）とは何ですか？

つまり、PWAはネイティブアプリケーションのように動作するWebサイトです。これらは電話またはコンピューターにインストールでき、通常はオフラインで動作します。後者の場合、サービスワーカーとキャッシングインターフェイスが使用されます。モバイルアプリケーションに対するPWAの利点は、そのサイズと開発の比較的容易さです。また、1つのサイトに2つのアプリケーション（Webとモバイル）を作成するためにリソースを費やす必要はありません。また、優れたユーザーエクスペリエンスを維持します。



MDN

114. clearTimeout（）は何に使用されますか？

このメソッドは、setTimeout（）によって開始されたタイマーを停止するために使用されます。これを行うには、タイマー識別子が変数に書き込まれ、それが引数としてclearTimeout（）に渡されます。

const timer = setTimeout(() => {
    console.log('!')
    clearTimeout(timer)
}, 2000)

上記の例では、2秒後、コンソールに「Hello！」というメッセージが表示され、その後タイマーが停止します。これは、ガベージコレクターが実行されたタイマーを削除できるようにするために行われます。



JSR

MDN

115. clearInterval（）は何に使用されますか？

このメソッドは、setInterval（）で開始されたタイマーを停止するために使用されます。これを行うには、タイマー識別子が変数に書き込まれ、それが引数としてclearInterval（）に渡されます。

let i = 1
const timer = setInterval(() => {
    console.log(i)
    i++

    if (i === 3) clearInterval(timer)
}, 1000)

上記の例では、変数iの値が毎秒コンソールに出力され、毎秒1（1、2）ずつ増加します。iが3になると、タイマーが停止します。



JSR

MDN

116.リダイレクトするにはどうすればよいですか？

これを行うには、ウィンドウオブジェクトのlocationプロパティを使用できます。

location.href = 'newPage.html'
// 
location.replace('newPage.html')
// 
location.assign('newPage.html')

MDN

117.サブストリングがストリングに存在するかどうかを確認するにはどうすればよいですか？

これを行うには、少なくとも3つの方法があります。

String.prototype.includes（）

const mainStr = 'hello'
const subStr = 'hel'
mainStr.includes(subStr) // true

String.prototype.indexOf（）

const mainStr = 'hello'
const subStr = 'hel'
mainStr.indexOf(subStr) !== -1 // true

RegExp

const mainStr = 'hello'
const regex = /hel/
regex.test(mainStr) // true

JSR

MDN -含んで

MDNを-のindexOf

MDN -テスト

118.メールアドレスの正確さを確認するにはどうすればよいですか？

これは、HTMLを使用して、入力フィールドのタイプを値email（<input type = "email">）に設定することで実行できます。ただし、この方法はあまり信頼できるとは考えられていません。したがって、通常、電子メールは通常の式で検証されます。クライアントでJavaScriptが無効になっている可能性があるため、サーバー側でこれを行うことをお勧めします。

const validateEmail = email =>
    /\S+@\S+.\S+/
        .test(email.toString()
        .toLowerCase())
const email = 'myemail@example.com'
validateEmail(email) // true

この例では、最も単純な正規表現の1つを使用して電子メールアドレスを検証します。より信頼性の高い式は次のようになります（RFC 2822）：[a-z0-9！＃$％＆ '* + / =？^ _ \ `{|} 〜-] +（？：。[A-z0-9！＃ $％＆ '* + / =？^ _ \ `{|} 〜-] +）* @（？：[a-z0-9]（？：[a-z0-9-] * [a-z0- 9]）？。）+ [A-z0-9]（？：[A-z0-9-] * [a-z0-9]）？

119.現在のURLを取得するにはどうすればよいですか？

これを行うには、ウィンドウオブジェクトのlocationプロパティまたはドキュメントオブジェクトのURLプロパティを使用できます。

console.log(' URL', location.href)
console.log(' URL', document.URL) //  Chrome     " URL chrome-search://local-ntp/local-ntp.html"

MDN-場所

MDN-document.URL

120.ロケーションオブジェクトにはどのようなプロパティがありますか？

ロケーションオブジェクトのプロパティを使用して、現在のページのURLの一部を取得できます。

• href-完全なURL
• オリジン-プロトコル、ホスト、およびポート（オリジン、共通オリジンポリシー（SOP）およびリソース共有（CORS）で使用）
• プロトコル
• ホスト-ホストとポート
• ホストホスト-ホスト
• ポート
• パス名-パス
• 検索-後のクエリ文字列？
• hash-＃（アンカー）の後のクエリ文字列
• username-ドメインの前のユーザー名
• password-ドメインの前のパスワード

MDN

121.クエリ文字列を取得するにはどうすればよいですか？

これにはURLコンストラクターを使用できます。

const url = new URL('https://example.com?foo=1&bar=2')
console.log(url.search) // ?foo=1&bar=2
console.log(url.searchParams.get('foo')) // 1

MDN

122.プロパティがオブジェクトに存在するかどうかを確認するにはどうすればよいですか？

これを行うには、少なくとも3つの方法があります。

オペレーター内

const user = { name: '' }
console.log('name' in user) // true
console.log(!('age' in user)) // true

HasOwnProperty（）メソッド

const user = { name: '' }
console.log(user.hasOwnProperty('name')) // true
console.log(!user.hasOwnProperty('age')) // true

未定義との比較

const user = { name: '' }
console.log(user.name !== undefined) // true
console.log(user.age === undefined) // true

JSR

MDN-MDNの...の場合

-hasOwnProperty

123.オブジェクトの列挙されたプロパティを反復処理するにはどうすればよいですか？

これを行うには、hasOwnProperty（）メソッドでfor ... inループを使用して、継承されたプロパティを除外できます。

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

for (key in user) {
    if (user.hasOwnProperty(key)) {
        console.log(\`${key}: ${user[key]}\`) // name:  age: 30
    }
}

JSR

MDN

124.オブジェクトが空であることを確認するにはどうすればよいですか？

これを行うには、少なくとも3つの方法があります。

Object.entries（）メソッド

const obj = {}
console.log(Object.entries(obj).length === 0) // true
//      Date
const obj2 = new Date()
console.log(Object.entries(obj2).length === 0 && obj2.constructor === Object) // false

Object.keys（）メソッド

const obj = {}
console.log(Object.keys(obj).length === 0) // true
//      Date
const obj2 = new Date()
console.log(Object.keys(obj2).length === 0 && obj2.constructor === Object) // false

For ... in loopおよびObject.hasOwnProperty（）メソッド

const obj = {}
const obj2 = {key: 'value'}

const isEmpty = obj => {
    for (key in obj) {
        if (obj.hasOwnProperty(key)) return false
    }
    return true
}

console.log(isEmpty(obj)) // true
console.log(isEmpty(obj2)) // false

JSR-JSRオブジェクト

-Object.keys、値、エントリ

MDN-Object.entries

MDN-Object.keys

MDN-for ... in

MDN-Object.hasOwnProperty

125.引数オブジェクトとは何ですか？

引数は、関数に渡される引数を含む配列のようなオブジェクト（疑似配列）です。

function sum () {
    let total = 0
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i]
    }
    return total

    // 
    let total = 0
    for (const i of arguments) {
        total += i
    }
    return total

    // 
    return Array.from(arguments).reduce((acc, cur) => acc + cur)

}

sum(1, 2, 3) // 6

矢印関数には引数がないことに注意してください。引数の代わりに、通常の関数と矢印関数の両方で機能するrest演算子...（その他のパラメーター）を使用することをお勧めします。

const sum = (...rest) => rest.reduce((acc, cur) => acc + cur)

sum(1, 2, 3) // 6

JSR

MDN

126.文字列の最初の文字を大文字にする方法は？

これは、charAt（）、toUpperCase（）、およびslice（）メソッドを使用して実行できます。

String.prototype.capitilize = function () {
    return this.charAt(0).toUpperCase() + this.slice(1)
}

console.log('hello'.capitilize()) // Hello

JSR

MDN-charAt

MDN-toUpperCaseMDN-

スライス

127.現在の日付を取得するにはどうすればよいですか？

これは、DateオブジェクトまたはIntl.DateTimeFormatコンストラクターを使用して実行できます。

console.log(new Date().toLocaleDateString()) // 02.09.2020

console.log(new Intl.DateTimeFormat(
    'ru-Ru',
    {
        weekday: 'long',
        day: 'numeric',
        month: 'long',
        year: 'numeric'
    }
).format(new Date())) // , 2  2020 .

JSR-日付

JSR = IntlMDN-

日付

MDN-Intl.DateTimeFormat

128. 2つのDateオブジェクトを比較するにはどうすればよいですか？

これを行うには、オブジェクト自体を比較するのではなく、たとえば、getTime（）メソッドによって返される値を比較する必要があります：

const d1 = new Date()
const d2 = new Date(d1)

console.log(d1.getTime() === d2.getTime()) // true
console.log(d1 === d2) // false

JSR

MDN

129.行が別の行で始まることを確認するにはどうすればよいですか？

組み込みのstartsWith（）メソッドを使用してこれを行うことができます。

console.log('Good morning'.startsWith('Good')) // true
console.log('Good morning'.startsWith('morning')) // false

CanIUseに よると、



JSR MDNブラウザーのほぼ94％がこの方法をサポートしています。

130.行の問題を取り除く方法は？

これを行うには、組み込みメソッドtrimStart（）（行の開始）、trimEnd（）（行の終わり）、およびtrim（）（行の開始と終了）を使用できます。

console.log('  hello world   '.trim()) // hello world

トリムは、単語間のスペースでは機能しません。この場合、replace（）メソッドと通常の式を使用できます。

console.log('hello   world'.replace(/s+/, ' ')) // hello world
//    
console.log('hello   world'.replace(/s{2,}/, ' ')) // hello world
console.log('key   value'.replace(/s{2,}/, ' -> ')) // key -> value

CanIUseに よると、trimStart（）メソッドとtrimEnd（）メソッドは93％のブラウザーでサポートされています。



MDN

131.オブジェクトに新しいプロパティを追加するにはどうすればよいですか？

これを行うには2つの方法があります。次のようなオブジェクトがあるとしましょう。

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

ドット表記またはブラケット表記を使用して、新しいプロパティを追加できます。

obj.job = ''
obj['job'] = ''

これらの方法の違いの1つは、括弧表記を使用する場合、追加されるキーは数字になる可能性があることです。

const obj = {}
obj[1] = ''
console.log(obj) // { 1: '' }
obj.2 = '' // SyntaxError: Unexpected number

JSR

MDN

132.式は！-特別な演算子ですか？

いいえ、ちがいます。これは、2つの演算子の組み合わせです：演算子！（論理的ではない）および演算子-（減少）。指定された式を任意の値で使用する場合、最初にこの値が1つ減り、次にブール型に変換されて反転されます。

const fun = val => !--val
const a = 1
const b = 2
console.log(fun(a)) // !0 -> not false -> true
console.log(fun(b)) // !1 -> not true -> false

JSR

MDN -論理否定

MDN -デクリメント

133.変数にデフォルト値を割り当てる方法は？

これを行うには、||を使用できます （ブールまたは）：

const a = b || 'default'

この場合、変数bの値がfalse（false、undefined、null、NaN、0、 ''）の場合、変数aにはデフォルト値が割り当てられます。

関数パラメーターの標準値について話している場合、それらは次のように割り当てることができます：

const greet = (name = '') => \`, ${name}!\`
console.log(greet('')) // , !
console.log(greet()) // , !

さらに、後続のパラメーターは、前のパラメーターの値を標準値として使用できます：

const sum = (a = 1, b = a + 2) => a + b
console.log(sum()) // 4

JSR

MDN

134.複数行の文字列を作成するにはどうすればよいですか？

以前は、次のように実行されていました（連結および改行制御文字）。

const str =
    ' ' + ' ' +
    ' ' + ' ' +
    '!'

// 
const str = '  a
  
 !'
console.log(str)
/*
     
     
    !
*/

今、彼らはこのようにそれをします（テンプレートリテラル）：

const str =
    \` 
     
    !\`

JSR

MDN

135.関数にプロパティを追加できますか？

関数もオブジェクトであるため、プロパティを簡単に追加できます。関数プロパティ値は別の関数にすることができます。

function someFun () {}
someFun.somePropName = 'somePropValue'

console.log(someFun.somePropName) // somePropValue
//  
console.log(someFun.name) // someFun

const sum = (x, y) => x + y
console.log(sum(1, 2)) // 3

sum.curry = x => y => x + y
console.log(sum.curry(1)(2)) // 3

JSR

MDN

136.関数が受け取ると予想される引数の数を調べる方法は？

lengthプロパティは、次の目的で使用できます。

const sum = (a, b, c) => +a + +b + +c
console.log(sum(1, '1', true)) // 3
console.log(sum(0, '', [])) // 0

console.log(sum.length) // 3

MDN

137.ポリフィルとは何ですか？

ポリフィルは、最新のJavaScriptを古いブラウザーで機能させるために使用されます。これは、古い構文を使用して言語の新しい機能を実装することによって行われます。新しいコードを古いコードに変換するプロセスそのものが、変換と呼ばれます。JavaScriptコードで最も人気のあるトランスパイラーはBabelです。

たとえば、最新のJavaScript機能の1つはPromise.allSettled（）メソッドです。これは、Promise.all（）とは異なり、渡されたpromiseのいずれかが拒否されても終了しません。

ただし、今日の時点で、CanIUseデータによるブラウザサポートは80％であるため、ポリフィルが必要です。

const promise1 = Promise.resolve('promise1')
const promise2 = Promise.reject('promise2')
const promise3 = Promise.resolve('promise3')

//     Promise.allSettled()
Promise
    .allSettled([promise1, promise2, promise3])
    .then(console.log)
/*
    [
        {status: "fulfilled", value: "promise1"},
        {status: "rejected", reason: "promise2"},
        {status: "fulfilled", value: "promise3"},
    ]
*/

//    
//  Promise.all() = 94%
const allSettled = promises => {
    const wrappedPromises = promises
        .map(p => Promise.resolve(p)
        .then(
            val => ({
                status: 'fulfilled',
                value: val
            }),
            err => ({
                status: 'rejected',
                reason: err
            })))
    return Promise.all(wrappedPromises)
}
allSettled([promise1,promise2,promise3])
    .then(console.log)

JSR

MDN

138.continueおよびbreakステートメントは何に使用されますか？

breakステートメントは、ループから抜け出すために使用されます。反復を停止した後、コードは続行します。

const obj = {
    1: 'Everything',
    2: 'is',
    3: 'impossible'
}

for (key in obj) {
    if (obj[key] === 'impossible') break

    console.log(obj[key]) // Everything is
}

console.log('possible') // possible

継続ステートメントは、反復をスキップするために使用されます。

const obj = {
    1: 'Everything',
    2: 'is',
    3: 'impossible',
    4: 'possible'
}

for (key in obj) {
    if (obj[key] === 'impossible') continue

    console.log(obj[key]) // Everything is possible
}

MDN-MDNを破る

-続行

139.ラベルとは何ですか？

ラベルを使用すると、ループやコードブロックに名前を付けることができます。これらは、たとえば、ループを終了するため、またはコードを実行するための条件として使用できます。

loop1:
for (let i = 0; i < 3; i++) {
    loop2:
    for (let j = 0; j < 3; j++) {
        if (i === j) continue loop1

        console.log(\`i = ${i}, j = ${j}\`)
    }
}

/*
    i = 1, j = 0
    i = 2, j = 0
    i = 2, j = 1
*/

ラベルを使用することは悪い習慣と見なされます。



MDN

140.コードの最初で変数を宣言することの利点は何ですか？

各スクリプトまたは関数の先頭で変数を宣言することをお勧めします。これには、次の利点があります。

• コードをクリーンに保つ
• すべての変数が1か所にあります
• 誤ってグローバル変数を作成することを回避します
• 不要な変数のオーバーライドを防止します

JSR

MDN

141.宣言時に変数を初期化する利点は何ですか？

宣言時にすべての変数を初期化することをお勧めします。これには、次の利点があります。

• コードをクリーンに保つ
• 変数とその値は1か所にあります
• 初期化されていない変数が未定義に割り当てられるのを防ぎます

JSR

MDN

142.オブジェクトを作成するための主な推奨事項は何ですか

オブジェクトを作成するには、オブジェクトコンストラクターのnew Object（）の代わりに、括弧表記{}を使用することをお勧めします。また、値のタイプに応じて、以下を使用することをお勧めします。

• 新しい文字列（）の代わりに ''のような文字列
• 番号、たとえば新しい番号の代わりに0（）
• 新しいブール値（）の代わりにfalseのようなブール値
• []新しい配列の代わりに（）
• //新しいRegExp（）の代わりに
• 新しいFunction（）の代わりにfunction（）{}

JSR

MDN

143. JSON形式で配列を定義するにはどうすればよいですか？

JSON配列は、次のようなJSONオブジェクトの配列です。

[
    { "name": "", "age": 30 },
    { "name": "", "age": 20 }
]

JSR

MDN

144.指定された範囲のランダムな整数を返す関数を実装するにはどうすればよいですか？

このような関数は、MathオブジェクトのMath.random（）メソッドとMath.floor（）メソッドを使用して実装できます。

const getRandomInteger = (min, max) => Math.floor(min + Math.random() * (max + 1 - min))

JSR

MDN-Math.random（）

MDN-Math.floor（）

145.木の揺れとは何ですか？

ツリーシェイクは、未使用のモジュールのコードを削除することです。このようなモジュールは、最終アセンブリ（バンドル）には含まれていません。モジュールビルダー（バンドラー）が使用中のモジュールと使用されていないモジュールを判別するには、プログラム構造がES6モジュールに基づいている必要があります。この手法は、ロールアップバンドラーによって普及しました。



MDN

146.木の揺れは何に使われますか？

ツリーシェイクは、未使用のモジュールのコードをアセンブリから削除することにより、アセンブリ（バンドル）のサイズを大幅に縮小できます。アセンブリサイズが小さいほど、アプリケーションのパフォーマンスが向上します。ツリーシェイクは、RollupやWebpackなどのモジュールビルダーに実装されています。



MDN

147.通常の表現とは何ですか？

通常の式は、検索パターンを形成する一連の文字です。このパターンは、文字列内のサブ文字列など、テキスト内のデータを検索するために使用できます。正規表現は、テキスト検索および置換操作のために多くのプログラミング言語で広く使用されています。一般的なregexパターンは次のようになります。

//

例：

const regex = /java/i
const str = 'JavaScript'
console.log(regex.test(str)) // true

RegExpコンストラクターを使用して、通常の式を作成することもできます。

const regex = new RegExp('java', 'i')
const str = 'JavaScript'
console.log(regex.test(str)) // true

JSR

MDN

148.正規表現ではどのような方法が使用されますか？

通常の式で使用される主なメソッドは、exec（）とtest（）の2つです。

exec（）メソッドは、引数として渡された文字列内で一致する正規式を検索します。このメソッドの動作は、正規式にgフラグがあるかどうかによって異なります。そうでない場合は、最初の一致が返されます。gフラグが存在する場合、次のようになります。

• exec（）呼び出しは最初の一致を返し、その後の位置をlastIndexプロパティに格納します。
• 次のそのような呼び出しは、位置lastIndexで検索を開始し、次の一致を返し、lastIndexでそれ以降の位置を記憶します。
• 一致するものがこれ以上ない場合、exec（）はnullを返し、lastIndexは0に設定されます。

const str = 'Java  JavaScript -   '
const regex = /Java/g

let result
while (result = regex.exec(str)) {
    console.log(
        \` ${result[0]}   ${result.index}\`
    )
}
/*
     Java   0
     Java   7
*/

test（）メソッドは、文字列で一致が見つかったかどうかに応じてブール値を返します。

const str = '  JavaScript'

console.log(
    / /.test(str) // true
)

JSR

MDN

149.正規表現ではどのフラグが使用されますか？

const regex = /([-]+)s([-]+)/i
const str = ' '
const newStr = str.replace(regex, '$2 $1')
console.log(newStr) //  

JSR

MDN

150.通常の表現ではどのような特殊文字が使用されますか？

通常の表現で使用される特殊文字は、いくつかのグループに分けることができます。

基本的なキャラクタークラス：



文字セット：



ボーダー：



グループ化：



定量化子：



JSR

MDN

151. HTML要素のスタイルを変更するにはどうすればよいですか？

これは、styleプロパティを使用するか、要素に適切なクラスを割り当てることによって実行できます。

document
    .querySelector(selector)
    .style.property = value
document
    .querySelector('title')
    .fontSize = '2rem'

document.querySelector(selector)
    .className = 'class-name'
document.querySelector(selector)
    .classList.add('class-name')
document.querySelector('button')
    .classList.add('active')

JSR

MDN -スタイル

MDN - classNameの

MDN - CLASSLIST

152.デバッガーとは何ですか？

デバッガー式は、ブレークポイント（ブレークポイント、ブレークポイント）の設定など、特定の環境で使用可能なデバッグ機能へのアクセスを提供します。実行時にデバッグ機能が利用できない場合、この式は効果がありません。

const fun = () => {
    // 
    debugger //       
    // 
}

JSR

MDN

153.デバッガーブレークポイントは何に使用されますか？

チェックポイントは、プログラムが正しく機能していない理由を見つけるために、特定の場所で関数または他のコードの実行を一時停止するために使用されます。停止すると、機能を継続できます。



JSR

MDN

154.予約済みの単語を識別子として使用できますか？

いいえ、予約済みの単語を変数、ラベル、関数、またはオブジェクトの名前として使用することはできません。

const class = '    ' // SyntaxError: Unexpected token 'class'

155.画像の幅と高さを決定する方法は？

これは、いくつかの方法で実行できます。これがそれらの1つです：

const getImgSize = src => {
    const img = new Image()
    img.src = src
    img.addEventListener('load', () => console.log(\`${img.width} x ${img.height}\`)) // 276 x 110
    document.body.append(img)
}
getImgSize('http://www.google.com/ intl/en_ALL/images/logo.gif')

MDN

156.同期HTTPリクエストを送信するにはどうすればよいですか？

これを行うには、XMLHttpRequestオブジェクトをopen（）メソッドに渡し、値がfalseの3番目のオプションの引数を指定します。

const getUsers = url => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url, false)
    xhr.send()
    console.table(xhr.response)

    const response = JSON.parse(xhr.response)
    const template = \`
        <table>
            ${response.reduce((html, user) => html += \`
                <tr>
                    <td>${user.name}</td>
                    <td>${user.username}</td>
                    <td>${user.email}</td>
                </tr>\`, '')}
        <table>
    \`
    document.body
        .insertAdjacentHTML('beforeend', template)
}

getUsers('https://jsonplaceholder. typicode.com/users')

JSR

MDN

157.非同期HTTPリクエストを作成するにはどうすればよいですか？

fetch（）メソッドはこれに使用できます：

const getUsers = async url => {
    const response = await fetch(url)
    const data = await response.json()
    console.table(data)

    const template = \`
        <table>
            ${data.reduce((html, user) => html += \`
                <tr>
                    <td>${user.name}</td>
                    <td>${user.username}</td>
                    <td>${user.email}</td>
                </tr>\`, '')}
        <table>
    \`
    document.body.insertAdjacentHTML('beforeend', template)
}

getUsers('https://jsonplaceholder. typicode.com/users')

JSR

MDN

158.必要な形式で日付を取得するにはどうすればよいですか？

toLocaleString（）メソッドはこれに使用できます：

console.log(
    new Date().toLocaleString('ru-Ru', {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    })
) // , 6  2020 .

MDN

159.最大ページサイズを取得するにはどうすればよいですか？

これを行うには、document.bodyおよびdocument.documentElementオブジェクトのプロパティscrollWidth、offsetWidth、clientWidthおよびscrollHeight、offsetHeight、clientHeightの最大値を見つける必要があります。

const pageWidth = Math.max(
    document.body.scrollWidth, document.documentElement.scrollWidth,
    document.body.offsetWidth, document.documentElement.offsetWidth,
    document.body.clientWidth, document.documentElement.clientWidth
)
const pageHeight = Math.max(
    document.body.scrollHeight, document.documentElement.scrollHeight,
    document.body.offsetHeight, document.documentElement.offsetHeight,
    document.body.clientHeight, document.documentElement.clientHeight
)
const pageSize = {
    width: pageWidth,
    heigth: pageHeight
}
console.log(pageSize)

const pageCenter = {
    centerX: pageWidth / 2,
    centerY: pageHeight / 2
}
console.log(pageCenter)

JSR

160.条件付きまたは3値演算子とは何ですか？

三元演算子は、if ... elseブロックを記述する簡単な方法です。

let accesAllowed
const age = propmt('  ?')

// if...else
if (age > 18) {
    accesAllowed = true
} else {
    accessAllowed = false
}

//  
(age > 18)
    ? accesAllowed = true
    : accessAllowed = false

JSR

MDN

161.三元演算子のチェーンを使用できますか？

はい、この場合、三元演算子はif ... else if ... elseブロックの代わりになります。

let accessAllowed
const getAge = () => prompt('  ?')

//     -    
// if...else if...else
const checkAge = (age = getAge()) => {
    console.log(age)
    if (isNaN(age)) {
        Promise.resolve(alert('   ')).then(accessAllowed = false).then(checkAge)
    } else if (age === null || age === '') {
        Promise.resolve(alert('  ')).then(accessAllowed = false).then(checkAge)
    } else if (age < 0) {
        Promise.resolve(alert('     0')).then(accessAllowed = false).then(checkAge)
    } else if (age > 100) {
        Promise.resolve(alert('     100')).then(accessAllowed = false).then(checkAge)
    } else if (age < 18) {
        Promise.resolve(alert(',   ')).then(accessAllowed = false)
    } else {
        Promise.resolve(alert(' !')).then(accessAllowed = true)
    }
    console.log(accessAllowed)
}

//  
const checkAge = (age = getAge()) => {
    isNaN(age)
        ? Promise.resolve(alert('   ')).then(accessAllowed = false).then(checkAge)
        : (age === null || age === '')
          ? Promise.resolve(alert('  ')).then(accessAllowed = false).then(checkAge)
          : (age < 0)
            ? Promise.resolve(alert('     0')).then(accessAllowed = false).then(checkAge)
            : (age > 100)
            ? Promise.resolve(alert('     100')).then(accessAllowed = false).then(checkAge)
            : (age < 18)
                ? Promise.resolve(alert(',   ')).then(accessAllowed = false)
                : Promise.resolve(alert(' !')).then(accessAllowed = true)
    console.log(accessAllowed)
}

JSR

MDN

162.ページが完全にロードされた後、コードの実行を開始するにはどうすればよいですか？

これはいくつかの方法で行うことができます。

スクリプトタグを終了bodyタグの前に配置するか、defer属性を追加します。

<body>
    ...
    <script src="script.js"></script>
</body>

<!--  -->
<head>
    ...
    <script src="script.js" defer></script>
</head>

スクリプトがモジュールの場合、defer属性の代わりに、valuemoduleでtype属性を指定する必要があります。

<script src="script.js" type="module"></script>

onload属性をbodyタグに追加します。

<body onload="script()"></body>

ウィンドウオブジェクトのロードイベントのハンドラーとしてコードを追加します。

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

// 
window.addEventListener('load', () => console.log('  '))

document.bodyについても同じようにします。

document.body.onload = () => console.log('  ')

163. __proto__とprototypeの違いは何ですか？

__proto__プロパティ（[[Prototype]]内部隠しプロパティ）は、インスタンスがフィールドとメソッドを継承するオブジェクトです。また、prototypeは、新しいキーワードを使用してインスタンス化されたときに__proto__を作成するために使用されるオブジェクトです。

class Person {
    constructor(firstName, secondName) {
        this.firstName = firstName
        this.secondName = secondName
    }
    getFullName() {
        return \`${this.firstName} ${this.secondName}\`
    }

}

const user = new Person('', '')
console.log(user.getFullName()) //  
console.log(user.__proto__.getFullName === Person.prototype.getFullName) // true
console.log(Person.prototype) // {constructor: ƒ, getFullName: ƒ}
console.log(user.prototype === undefined) // true

JSR

MDN

164.セミコロンの必須使用の例を挙げてください

セミコロンの必須の使用法の1つは、IIFE（Immediately Invoked Fuction Expression）の使用です

。たとえば、次のコードは次のとおりです。

try {
    const x = ''

    (() => {
        console.log(x)
    })()
} catch {
    console.log(' ')
}

このように解釈されます：

try {
    const x = ''(() => {
        console.log(x)
    })()
} catch {
    console.log(' ')
}

したがって、tryブロックでは、TypeErrorを受け取ります。「Tobe」は関数ではなく、制御はcatchブロックに移され、「Nottobe」がコンソールに出力されます。

コードが期待どおりに機能するには、次のようになります。

try {
    //       
    const x = '';
    //  
    ;(() => {
        console.log(x)
    })()
} catch {
    console.log(' ')
}

また、セミコロンの自動配置の場合も忘れないでください。

165.フリーズ（）メソッドは何に使用されますか？

このメソッドは、その名前が示すように、オブジェクトを「フリーズ」するのに役立ちます。凍結されたオブジェクトは不変（不変）です。つまり、そのようなオブジェクトに新しいプロパティを追加したり、既存のプロパティを削除または変更したりすることはできません。また、このメソッドは、既存のプロパティに対して構成可能：falseおよび書き込み可能：falseを設定します。このメソッドは、フリーズしたオブジェクトを返します。

'use strict'
const obj = {
    mission: 'possible'
}

Object.freeze(obj)
obj.mission = 'impossible' // TypeError: Cannot assign to read only property 'mission' of object '#<Object>'

delete obj.mission // TypeError: Cannot delete property 'mission' of #<Object>

非厳密モードでは、例外はスローされず、コードは単に実行されないことに注意してください。



JSR

MDN

166.なぜfreeze（）メソッドが必要なのですか？

オブジェクト指向のプログラミングパラダイムは、特定の数の要素を含むインターフェイスは不変でなければならないと述べています。現在のコンテキスト外の要素を拡張、変更、または使用することは不可能でなければなりません。このメソッドは、他のいくつかのプログラミング言語のfinalキーワードのエイリアスです。



JSR

MDN

167.行の各単語の最初の文字を大文字にする方法は？

これを行う1つの方法は次のとおりです。

const capitilize = str => str.replace(
    /[-]S+/gi,
    txt => txt[0].toUpperCase() + txt.slice(1).toLowerCase()
)

console.log(capitilize(', , ')) // , , 

168.ページでJavaScriptが無効になっているかどうかを確認するにはどうすればよいですか？

これにはnoscriptタグを使用できます。このタグ内のコードは、ページでJavaScriptが無効になっている場合にのみ実行されます。

    console.log('JavaScript ')

<noscript>
    <p> JavaScript,    </p>
</noscript>

ChromeでJavaScriptを無効にするには、[設定]-> [プライバシーとセキュリティ]セクション-> [サイトの設定]-> [コンテンツ]-> [JavaScript]セクションに移動します。



MDN

169. JavaScriptでサポートされている演算子は何ですか？

演算子は、値またはオペランドを操作するために使用されます。JavaScriptは、次の演算子をサポートしています。

• 算術：+（加算、数値へのキャスト、連結）、-（減算）、*（乗算）、/（除算）、％（モジュロ、残りあり）、++（インクリメント）、-（デクリメント）、* *（指数）
• 比較演算子：==（抽象、緩い等式）、！=（抽象不等式）、===（厳密な等式、同一性チェック）、！==（厳密な不等式）、>、> =、<、<=
• 論理：&&（および）、|| （または）、! （not）（!!!（double negation）は個別の演算子ではありません）
• 割り当て演算子：=、+ =、-=、* =、/ =、％=
• 三元：？... :( if ... else）
• typeof演算子：オペランドのタイプを定義します
• ビットワイズ：＆（および）、| （または）、^（排他的または）、〜（非）、<<（左シフト）、>>（右シフト）、>>>（パディングなしの右シフト）
• 新規：？..（オプションのチェーン）、?? （nullマージ）

//  
const obj = {
    foo: {
        baz: {
            qux: 'bar'
        }
    }
}

// 
console.log(obj.foo.bar.baz.qux) // TypeError: Cannot read property 'baz' of undefined

if (
    obj.foo !== undefined &&
    obj.foo.bar !== undefined &&
    obj.foo.bar.baz !== undefined
) {
    console.log(obj.foo.bar.baz.qux) //   
}

// 
console.log(obj?.foo?.bar?.baz?.qux) // undefined

//   null
console.log(
    0 || 'default null', // 'default null'
    0 ?? 'default null', // 0
    '' || 'default string', // default string
    '' ?? 'default string', // ''
)

JSR-JSR演算子

-論理演算子

JSR-比較演算子

JSR-条件付き

JSR演算子-ビット単位の

MDN演算子-オプションのシーケンス

演算子MDN-ヌルマージ演算子

170.残りの演算子...（その他のパラメーター）は何に使用されますか？

rest演算子は、argumentsオブジェクトの代替であり、関数に渡された引数の配列を返します。

const sum = (...rest) => rest.reduce((acc, cur) => acc + cur)

console.log(sum(1, 2, 3)) // 6

残りの演算子は最後の引数として渡す必要があることに注意してください。

const fun = (x, ...rest, y) => console.log(rest) // SyntaxError: Rest parameter must be last formal parameter

JSR

MDN

171.スプレッド演算子は何に使用されますか？

スプレッド演算子は、反復可能なエンティティ（配列、文字列）を展開（解凍、展開）するために使用されます。開梱とは、たとえば、数値の配列を単純な値のセットに変換することを意味します。

const sum = (x, y, z) => x + y + z

const nums = [1, 2, 3]

console.log(sum(...nums)) // 6

JSR

MDN

172.オブジェクトがフリーズしているかどうかを判断するにはどうすればよいですか？

オブジェクトがフリーズしているかどうかを判断するため、つまり isFrozen（）メソッドが使用されているのは不変（不変）ですか？

const obj = {
    prop: '    JavaScript!'
}

Object.freeze(obj)

console.log(Object.isFrozen(obj)) // true

MDN

173.オブジェクトを使用して値の同等性を判断する方法は？

is（）メソッドはこれに使用できます：

Object.is('  ', '  ') // true
Object.is(0.1 + 0.2, 0.3) // false
Object.is(window, window) // true
Object.is(+0, -0) // false

const objA = {}
const objB = objA
Object.is(objA, objB) // true
Object.is({}, {}) // false

次の場合、値は等しくなります：

• どちらも未定義です
• 両方ともnull
• 両方とも真または偽
• どちらも同じ長さで同じ文字の文字列です
• 両方とも同じオブジェクトを参照します
• どちらも数字、+ 0、-0またはNaNです

JSR

MDN

174.オブジェクトのコピーを作成するにはどうすればよいですか？

これを行う最も信頼できる方法の1つは、assign（）メソッドを使用することです。

const objA = {a: 1, b: 2}
const objB = Object.assign(objA)

console.log(objB) // {a: 1, b: 2}

console.log(objA === objB) // true

また、このメソッドを使用すると、重複を除いてオブジェクトを組み合わせることができます。

const objA = {a: 1, b: 2}
const objB = {b: 2, c: 3}

const objC = Object.assign(objA, objB)
console.log(objC) {a: 1, b: 2, c: 3}

JSON.parse-JSON.stringifyバインディングを使用して、単純なオブジェクトをコピーできます。

const objA = {a: 1, b: 2}

const objB = JSON.parse(JSON.stringify(objA))

console.log(objB) // {a: 1, b: 2}

JSR

MDN

175.プロキシとは何ですか？

Proxyオブジェクトは、別のオブジェクトを「ラップ」し、プロパティの読み取り/書き込みなど、さまざまなアクションをインターセプト（および必要に応じて独立して処理）できます。

const handler = {
    get: (obj, prop) => prop in obj
        ? obj[prop]
        : 0
}

// new Proxy(, )
const p = new Proxy({}, handler)

p.a = 1
p.b = true

console.log(p.a, p.b) // 1 true
console.log( 'c' in p, p.c) // false 0

176.シール（）法は何に使用されますか？

このメソッドはオブジェクトを「シール」し、プロパティの追加/削除を防ぎます。また、configural：falseを既存のすべてのプロパティに設定します。ただし、そのようなオブジェクトのプロパティの値は変更できます。isSealed（）メソッドは、オブジェクトが封印されているかどうかを確認するために使用されます。

'use strict'
const obj = {
    prop: '    JavaScript!'
}

Object.seal(obj)

obj.prop = ' ,   '
console.log(Object.isSealed(obj)) // true
delete obj.prop // TypeError: Cannot delete property 'prop' of #<Object>
console.log(obj.prop) //  ,   

緩いモードでは、封印されたオブジェクトのプロパティを削除しようとすると、サイレントに失敗することに注意してください。



JSR

MDN

177.フリーズ（）とシール（）の方法の違いは何ですか？

Object.seal（）メソッドは、Object.freeze（）メソッドとは異なり、オブジェクトの既存のプロパティを変更できます。

'use strict'
const objA = {
    prop: ''
}
Object.freeze(objA)
objA.prop = ' ' // TypeError: Cannot assign to read only property 'prop' of object '#<Object>'

const objB = {
    prop: ' '
}
Object.seal(objB)
objB.prop = ''
console.log(objB.prop) // 

178.オブジェクトの列挙されたキー/値のペアを取得するにはどうすればよいですか？

Object.entries（）メソッドは、列挙されたオブジェクトのキーと値のペアの配列を、for ... inループと同じ順序でサブ配列として返します。

const obj = {
    x: 1,
    y: 2
}

console.log(Object.entries(obj)) // [["x", 1], ["y", 2]]

for (let [key, value] of Object.entries(obj)) {
    console.log(\`${key}: ${value}\`) // x: 1 y: 2
}

JSR

MDN

179. Object.keys（）、Object.values（）、Object.entries（）メソッドの主な違いは何ですか？

Object.keys（）メソッドはオブジェクトのキーを返し、Object.values（）メソッドはそのプロパティの値を返し、Object.entries（）はキーと値のペアの配列を返します。

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

console.log(Object.keys(user)) // ["name", "age"]
console.log(Object.values(user)) // ["", 30]
console.log(Object.entries(user)) // [["name", ""], ["age", 30]]

JSR

MDN-Object.keys（）

MDN-Object.values（）

MDN-Object.entries（）

180.コンストラクター関数とクラスを使用せずに、特定のプロトタイプでオブジェクトを作成するにはどうすればよいですか？

Object.create（）メソッドはこれに使用できます：

const firstUser = {
    name: '',
    sayHi() {
        console.log(\`,   ${this.name}!\`)
    }
}

const secondUser = Object.create(firstUser)

secondUser.name = ''
secondUser.sayHi() // ,   !

JSR

MDN

181. WeakSetは何に使用されますか？

WeakSetは、緩く参照されるオブジェクトのコレクションを格納するために使用されます。つまり、他のコードで使用されるオブジェクトの追加ストレージとして機能します。このようなオブジェクトは、到達不能（未使用）になると、ガベージコレクターによって自動的に削除されます。キーのみがWeakSetに残っている場合。

const ws = new WeakSet()
let user = {}

ws.add(user)
console.log(ws.has(user)) // true

user = null
console.log(ws.has(user)) // false,    

JSR

MDN

182. SetとWeakSetの違いは何ですか？

それらの主な違いは、WeakSetに格納されているオブジェクトが弱く参照されていることです。到達不能になるとすぐに自動的に削除されます。その他の違いは次のとおりです。

• Setは任意の値を格納でき、WeakSetはオブジェクトのみを格納できます。
• WeakSetにはsizeプロパティがありません
• WeakSetには、clear（）、keys（）、values（）、forEach（）メソッドがありません
• WeakSetは反復可能なエンティティではありません

JSR

MDN

183. WeakSetで使用できるメソッドは何ですか？

WeakSetには次のメソッドがあります。

• add（）：コレクションにオブジェクトを追加します
• delete（）：コレクションからオブジェクトを削除します
• has（）：オブジェクトがコレクションにあるかどうかを判別します
• length（）：コレクションの長さを返します

const ws = new WeakSet()
const objA = {}
const objB = {}

ws.add(objA)
ws.add(objB)
console.log(ws.has(objA)) // true
console.log(ws.lenghth()) // 2
ws.delete(objA)
console.log(ws.has(objA)) // false

JSR

MDN

184. WeakMapは何に使用されますか？

WeakMapは、キーが弱く参照されているキーと値のペアを格納するために使用されます。つまり、他のコードで使用されるキーの追加リポジトリとして機能します。このようなキーは、到達不能（未使用）になると、ガベージコレクターによって自動的に削除されます。キーのみがWeakMapに残っている場合。

const wm = new WeakMap()
let user = {}
wm.set(user, 'user')
console.log(wm.has(user)) // true
user = null
console.log(wm.has(user)) // false,    

JSR

MDN

185. MapとWeakMapの違いは何ですか？

それらの主な違いは、WeakMapに格納されているキーが弱く参照されていることです。到達不能になるとすぐに自動的に削除されます。その他の違いは次のとおりです。

• Mapでは任意の値をキーとして使用でき、WeakMapではオブジェクトのみを使用できます
• WeakMapにはsizeプロパティがありません
• WeakMapには、clear（）、keys（）、values（）、entries（）、forEach（）メソッドがありません
• WeakMapは反復可能なエンティティではありません

JSR

MDN

186. WeakMapで使用できるメソッドは何ですか？

WeakMapには次のメソッドがあります。

• set（）：キーと値のペアをオブジェクトに追加します
• delete（）：キーで値を削除します
• has（）：キーによって値が存在するかどうかを判別します
• get（）：キーで値を返します

const wm = new WeakMap()
const firstUser = {}
const secondUser = {}

wm.set(firstUser, '')
wm.set(secondUser, '')
console.log(wm.has(firstUser)) // true
console.log(wm.get(firstUser)) // 
wm.delete(secondUser)
console.log(wm.has(secondUser)) // false

JSR

MDN

187. URLをエンコードする方法は？

これにはencodeURI（）メソッドを使用できます。このメソッドは、/？を除くすべての特殊文字を変換します：@ = + $＃

const url = 'https://ru.wikipedia.org/wiki/,__'
const encoded = encodeURI(url)
console.log(encoded) // https://ru.wikipedia.org/wiki/%D0%9B%D0...

JSR

MDN

188. URLをデコードする方法は？

これには、decodeURI（）メソッドを使用できます。

const url = 'https://ru.wikipedia.org/wiki/%D0%9B%D0...'
const decoded = decodeURI(url)
console.log(decoded) // https://ru.wikipedia.org/wiki/,__

JSR

MDN

189.ページのコンテンツを印刷するにはどうすればよいですか？

これには、グローバルprint（）メソッドを使用できます。このメソッドは、印刷設定を含む特別なダイアログボックスを開きます。

<button></button>

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

MDN

190.匿名機能とは何ですか？

匿名関数は名前のない関数です。このような関数は、多くの場合、変数に割り当てられ、コールバックとしても使用されます。

const sayHi = function () {
    console.log('')
}
sayHi() // 
// 
const sayBye = () => console.log('')
sayBye() // 

window.addEventListener('click', function () {
    console.log('  ,   ')
})
// 
window.addEventListener('contextmenu', e => {
    e.preventDefault()
    console.log('  -   ')
})

JSR

MDN

191.ローカル変数とグローバル変数を使用することの優先順位は何ですか？

ローカル変数は、同じ名前のグローバルよりも優先されます。

let question = ' '

function toBe () {
    question = ''
    console.log(question)
}
toBe() // 

JSR

MDN

192.アクセサーとは何ですか？

アクセサーまたは計算されたプロパティは、ゲッターとセッターです。ゲッターはオブジェクトのプロパティの値を取得するために使用され、セッターはそれらを設定するために使用されます：

class User {
    constructor (name, age) {
        this.name = name
        this.age = age
    }

    #access = false

    get access () {
        return this.#access
    }

    set access (bool) {
        this.#access = bool
    }
}

const user = new User('', 30)
console.log(user.#access) // SyntaxError: Private field '#access' must be declared in an enclosing class

console.log(user.access) // false
user.access = true
console.log(user.access) // true

ゲッターとセッターはプロパティであり、メソッドは関数です。

class User {
    constructor (name, age) {
        this.name = name
        this.age = age
    }

    #access = false

    getAccess () {
        return this.#access
    }

    setAccess(bool) {
        this.#access = bool
    }
}

const user = new User('', 30)
console.log(user.#access) // SyntaxError: Private field '#access' must be declared in an enclosing class

console.log(user.getAccess()) // false
user.setAccess(true)
console.log(user.getAccess()) // true

JSR

193.オブジェクトコンストラクターでプロパティを定義するにはどうすればよいですか？

これには、Object.defineProperty（）メソッドを使用できます。このメソッドを使用すると、オブジェクトに新しいプロパティを追加して既存のプロパティを変更したり、オブジェクトにアクセスするための設定を変更したりできます。

'use strict'
const obj = {}

Object.defineProperty(obj, 'prop', {
    value: 1,
    writable: false
})

console.log(obj.prop) // 1
obj.prop = 2 // TypeError: Cannot assign to read only property 'prop' of object '#<Object>'

緩いモードでは、読み取り専用プロパティを変更しようとすると、サイレントに失敗します。



JSR

MDN

194.ゲッターとセッターの特徴は何ですか？

ゲッターとセッターの主な機能は次のとおりです。

• メソッドに比べて構文が単純です。
• 計算されたプロパティを定義するために使用されます-アクセサ
• プロパティとメソッドの間で同じ関係を有効にします
• より良いデータ品質を提供できます
• カプセル化に関しては、舞台裏でタスクを実行できます

JSR

195. Object.defineProperty（）メソッドを使用して、ゲッターとセッターをオブジェクトに追加できますか？

かなり：

const obj = {counter: 0}

Object.defineProperty(obj, 'increment', {
    get() {return ++this.counter}
})
Object.defineProperty(obj, 'decrement', {
    get() {return --this.counter}
})

Object.defineProperty(obj, 'sum', {
    set(val) {return this.counter += val}
})
Object.defineProperty(obj, 'sub', {
    set(val) {return this.counter -= val}
})

obj.sum = 10
obj.sub = 5
console.log(obj) // {counter: 5}
console.log(obj.increment) // 6
console.log(obj.decrement) // 5

JSR

MDN

196.スイッチ...ケースは何に使用されますか？

switch ... caseは、if ... elseの代替であり、渡された条件に応じてコードを実行するより視覚的な方法です。

const calc = (x, y, operator) => {
    let result

    try {
        switch (operator) {
            case '+':
                result = x + y
                break
            case '-':
                result = x - y
                break
            case '*':
                result = x * y
                break
            case '/':
                result = x / y
                break
            default:
                throw new Error(' ')
        }

        if (isNaN(result)) {
            throw new Error('   ')
        }

        console.log(result)
        return result
    } catch (e) {
        console.error(e.message)
    }
}

calc(1, 2, '+') // 3
calc(3, 4, '*') // 12
calc('a', 1, '-') //    
calc(5, 6, 'x') //  

JSR

MDN

197.スイッチを使用するためのルールに名前を付けます...ケース

スイッチ...ケース構造を使用する場合は、次のルールに従う必要があります。

• 条件は数字または文字列にすることができます
• 重複する値は許可されていません
• デフォルトのステートメントはオプションです。ケースが見つからない場合、デフォルトのブロックが実行されます
• ブレークはループを停止するために使用されます
• ブレークもオプションですが、ブレークがないとループの実行が続行されます

JSR

MDN

198.プリミティブデータタイプに名前を付けます。

JavaScriptのプリミティブデータタイプ（「プリミティブ」）は次の値です。

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

MDN

Habr — JavaScript?

Habr — JavaScript ?

JavaScript ?

Medium — Advanced JavaScript ES6 — Temporal Dead Zone, Default Parameters And Let vs Var — Deep dive!

JavaScript:

̆ JavaScript

Medium — JavaScript.

Habr — JavaScript

Medium — Understanding Prototypes in JavaScript

Medium — apply(), call() bind(), JavaScript

JavaScript:

Medium — JavaScript Classes: An In-Depth look (Part 1)

Medium — JavaScript slice(), splice() split()

JavaScript

JavaScript- .map(), .filter() .reduce()

reduce() JavaScript

̆ ̆ ECMAScript 2019, for-of

ES2020,

DigitalOcean — map set JavaScript

Medium — JavaScript

Medium — What is Memoization in Javascript?

Redd — Debounce vs Throttle: Definitive Visual Guide

JavaScript

Habr — 5 JSON.stringify()

Habr — () «» JavaScript

Habr — JavaScript- : . 1

Habr — -

GoogleDevelopers — Service Workers: an Introduction

Habr —

WebDevBlog — IndexedDB

GoogleDevelopers — Working with IndexedDB

Habr — Web Storage API:

Habr — -

Medium — A Simple Introduction to Web Workers in JavaScript

Habr — JavaScript,

Habr — Async/Await

Habr — CORS: