7つのよくあるJavaScriptテストと解答

作者:Milos Prottic
狂おしい技術家
原文:https://devinduct.com/blogpos...
無断転載は厳禁です.
紹介する
私は新しいことを学んで、私達の知っていることを評価して、自分の進歩にとても役立つと信じています.本論文では、よくあるJavaScriptの知識を紹介します.どうぞお召し上がりください
1.声明
以下のコードを確認し、出力の内容(及び原因)に回答します.

// situation 1
console.log(person);
var person = 'John';

// situation 2
console.log(person);
let person = 'Phill';

// situation 3
console.log(person);
const person = 'Frank';

// situation 4
const person = 'Vanessa';
console.log(person);
person = 'Mike';
console.log(person);

// situation 5
var person = 'John';
let person = 'Mike';
console.log(person);

// situation 6
var person = 'John';
if (person) {
  let person = 'Mike';
  console.log(person);
}
console.log(person);

説明
Situation 1:期待される結果は、コンソールでテキストを見ることです.Johnですが、驚くべきことに、記録を見ました.undefined.なぜですか?
はい、これは古典的なJavaScriptが働いています.このような行為は昇進と呼ばれる.バックグラウンドでは、この言語は変数宣言と値割り当てを二つの部分に分けます.変数が最初に開発者によってどこで宣言されても、変数は上部に移動し、宣言時にその値をundefinedに設定します.このように見えます.

var person;
console.log(person);
person = 'John';

Situation 2:ここでは結果が参照ミスになります.

Uncaught ReferenceError: Cannot access 'person' before initialization

エラーテキストはすべてを説明しました.キーワードletを使っていますので、私たちの変数はアップグレードされましたが、初期化されていません.このエラーを投げて、初期化されていない変数にアクセスしようとしていることをお知らせします.ES 6にキーワードletを導入して、ブロックスコープ内の変数を使用することができます.
ここで、私達は得られます.
Situation 2で同じエラーです.
異なる点は、初期化後に変数の再割り当てを防ぐために、キーワードconstを使用していることである.ES 6にもこのキーワードが導入されています.
Situation 4:この場合、キーワードが見られます.constはどのように動作していますか?また、無意識に変数の再割り当てを避けるにはどうすればいいですか?私たちの例では、まずコンソールで見ます.Vanessa、そしてタイプエラーです.

Uncaught TypeError: Assignment to constant variable

const変数の使用は、私たちのコードライブラリとともに指数関数的に増加します.
Situation 5:既にあるスコープ内でキーワードを使用している場合varで変数が定義されている場合、同じスコープでキーワードが使用されます.letは、再び変数がエラーを引き起こすと宣言した.
したがって、私たちの例では、何も出力されず、文法エラーメッセージが表示されます.

Uncaught SyntaxError: Identifier 'person' has already been declared

Situation 6:関数のスコープ変数とブロックのスコープの変数がそれぞれあります.この場合、同じ名前または識別子があるかどうかは重要ではない.
コンソールでは、MikeおよびJohnが順次出力されるのを見なければならない.なぜですか
キーワードletは、私たちのためにブロックスコープ内の変数を提供してくれるので、これは自分で作成したスコープ内にのみ存在することを意味し、この場合はif...else文に位置する.内部変数は外部変数より優先されています.これはなぜ私たちが同じ識別子を使用できるかという理由です.
2.継承
次の種類を考えて、何を出力したかを答えてみます.なぜですか?

class Person {
  constructor() {
    this.sayHello = () => {
      return 'Hello';
    }
  }

  sayBye() {
    return 'Bye';
  }
}

class Student extends Person {
  sayHello() {
    return 'Hello from Student';
  }
}

const student = new Student();
console.log(student.sayHello());

説明
もしあなたの答えがHello、それは正しいです.
なぜ:Studentの新しい例を作成するたびに、sayHello属性を関数として設定し、文字列Helloを返します.これは親タイプ(Person)の構造関数で発生した.
JavaScriptでは、クラスはシンタックス糖であり、私たちの例では、プロトタイプチェーンにStudentクラスのsayHello方法が定義されています.Studentクラスのインスタンスを作成するたびに、sayHello属性はこのインスタンスに設定され、戻り文字列Helloのfunctionになるので、プロトタイプチェーンで定義された関数は永遠に使用されない.メッセージHello from Studentはいつまでも見られない.
3.オブジェクトの可変性
以下の場合の各部分の出力を考えます.

// situation 1
const user = {
  name: 'John',
  surname: 'Doe'
}

user = {
  name: 'Mike'
}

console.log(user);

// situation 2
const user = {
  name: 'John',
  surname: 'Doe'
}

user.name = 'Mike';
console.log(user.name);

// situation 3
const user = {
  name: 'John',
  surname: 'Doe'
}

const anotherUser = user;
anotherUser.name = 'Mike';
console.log(user.name);

// situation 4
const user = {
  name: 'John',
  surname: 'Doe',
  address: {
    street: 'My Street'
  }
}

Object.freeze(user);

user.name = 'Mike';
user.address.street = 'My Different Street';
console.log(user.name);
console.log(user.address.street);

説明
Situation 1:前のセクションで知っているように、使用不可のものを再分配しようとします.const変数ですので、タイプエラーが発生します.
コンソールの結果は以下のテキストを表示します.

Uncaught TypeError: Assignment to constant variable

Situation 2:この場合、キーワードを変えてもconstによって宣言された変数には、異なる行動があります.違いは、オブジェクトの属性を変更しているところです.参照ではなく、constオブジェクト変数で許可されています.
コンソール内の結果は単語Mikeであるべきである.
Situation 3:将を通じてuser割り当てanotherUser変数は、それらの間で参照または格納場所を共有することができます.言い換えれば、どちらもメモリ内の同じオブジェクトを指しますので、オブジェクトの属性を変更すると他のオブジェクトの変更が反映されます.
コンソール内の結果はMikeであるべきである.
Situation 4:ここで使用します.Object.freeze方法は、前のシーン(Situation 3)に欠けている機能を提供する.この方法により、オブジェクトを「凍結」することができ、属性値を変更することができません.しかし、問題があります.浅い凍結しかできません.深層属性の更新を保護しないという意味です.これはなぜ私たちが正しいかということです.street属性は変更され、name属性が不変である理由.
コンソール内の出力は順次JohnおよびMy Different Streetである.
4.矢印関数
以下のコードセグメントを実行すると、何とその理由が出力されますか?

const student = {
  school: 'My School',
  fullName: 'John Doe',
  printName: () => {
    console.log(this.fullName);
  },
  printSchool: function () {
    console.log(this.school);
  }
};

student.printName();
student.printSchool();

説明
コンソール内の出力は順次undefinedおよびMy Schoolである.
以下の文法に詳しいかもしれません.

var me = this;
// or
var self = this;

// ...
// ...
// somewhere deep...
// me.doSomething();

meまたはself変数を親のスコープと見なすことができ、このスコープはここで作成された各ネスト関数に使用することができる.
矢印関数を使用すると、これは自動的に完了し、コードのより深いところにアクセスするためにthis参照を保存する必要はなくなります.矢印関数は、自分自身をバインディングするのではなく、親スコープから矢印関数を継承するため、printName関数を呼び出してundefinedを出力した理由です.
5.解凍
下記の廃棄情報を確認して、出力する内容を回答してください.与えられた文法は許可されていますか?さもなければエラーが発生しますか?

const rawUser = {
   name: 'John',
   surname: 'Doe',
   email: '[email protected]',
   displayName: 'SuperCoolJohn',
   joined: '2016-05-05',
   image: 'path-to-the-image',
   followers: 45
}

let user = {}, userDetails = {};
({ name: user.name, surname: user.surname, ...userDetails } = rawUser);

console.log(user);
console.log(userDetails); 

説明
ちょっと開けたらすぐ使いますが、上の文法は許可されています.そして間違いを起こすことはありません.綺麗でしょう
上記の構文機能が強く、任意のオブジェクトをより具体的な2つのオブジェクトに簡単に分けることができます.上記の例はコンソールでの出力です.

// {name: "John", surname: "Doe"}
// {email: "[email protected]", displayName: "SuperCoolJohn", joined: "2016-05-05", image: "path-to-the-image", followers: 45}

6.非同期/待ち
以下の関数を呼び出したら何を出力しますか?

(async () => {
  let result = 'Some Data';

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Some data retrieved from the server'), 2000);
  });

  result = await promise;
  console.log(result);
})();

説明
二秒後に出力すると思ったら、正しいです.
コードはプロミスが解決されるまで一時停止されます.二秒後、指定されたテキストを実行して出力します.これはJavaScriptエンジンが実際に非同期の操作が完了するまで待つという意味です.Some data retrieved from the serverはpromiseの結果を得るために使用されるシンタックス飴であると言える.async/awaitよりも読み取り可能な方法だと思う人もいます.
7.Return文

const multiplyByTwo = (x) => {
    return
    {
        result: x * 2
    };
}
console.log(multiplyByTwo(2));  

説明
もしあなたの答えがpromise.thenだったら、あなたは間違っています.出力は{result: 4}です.しかし、自分に厳しくしないでください.私もC〓コードを書くことを考慮して、これもかつて私を困らせました.C〓では問題ではありません.
自動セミコロン挿入のため、上記のコードはundefinedに戻ります.returnキーと表式の間で行の終端を使うことはできません.
解決策は下記の方法の一つでこの関数を修復します.

const multiplyByTwo = (x) => {
    return {
        result: x * 2
    };
}

あるいは

const multiplyByTwo = (x) => {
  return (
    {
      result: x * 2
    }
  );
}

この記事の最初のWeChat公式アカウント:フロントエンドのパイオニア
QRコードをスキャンして公衆番号に注目してください.毎日新鮮な先端技術文章を送ります.
このコラムの他の高賛記事を読み続けてください.

Shadow DOM v 1

を深く理解する.

一歩教えます.WebVRでバーチャルリアリティーを実現します.

13個の開発効率を向上させる現代CSSフレーム

クイックハンドオーバBootstraphue

JavaScriptエンジンはどのように働きますか?コールスタックからPromiseまでは知っておく必要があります.

Websocket実戦:NodeとReactの間でリアルタイム通信を行う

Gitに関する20の面接問題

Node.jsのconsolie.log

を深く解析します.

Node.jsは一体何ですか?

分、Node.jsでAPIサーバ

を構築する.

Javascriptのオブジェクトコピー

プログラマは30歳前の月給は30 Kに達しませんでした.

14の最も良いJavaScriptデータ可視化ライブラリ

8個のフロントエンドへの最上位VS Code拡張プラグイン

Node.jsマルチスレッド完全ガイド

HTMLをPDFに変換する4つの案と

を実現する.

もっと多い文章…