JavaScriptの学習には、阮一峰老师的网络电子书をお勧めします。JavaScriptはかつて的设计思想を経て广泛的に使用されている言語ではなく、ブラウザアプリケーション開発の实践中に流行起来的です。主にブラウザ側で动作し、DOMオブジェクトを操作します。
ブラウザ側には、多くのオブジェクトが存在します。例えばwindow、document、consoleなどが代表的です。XMLHttpRequestも非常に基础的で日常的なオブジェクトであり、网络通信に使用されます。现在では多くのライブラリが方便的 に封装されていますが、基本的な原理は変わりません！
const loginData = {
"userId": "user001",
"passKey": "secure123",
"deviceId": "IMEI12345"
};
const request = new XMLHttpRequest();
request.open("POST", "https://api.example.com/auth/login", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.onreadystatechange = function(){
/**
* readyStateの状態
* 0: 未初期化
* 1: サーバー接続済み
* 2: リクエスト受信済
* 3: 処理中
* 4: 完了、レスポンス準備完了
**/
if (request.readyState === 4) {
if (request.status === 200) {
const response = request.responseText;
console.log("レスポンス:", response);
const parsedData = JSON.parse(JSON.parse(response));
} else {
console.log("エラー発生:", request.status);
}
}
};
request.send(JSON.stringify(loginData));
JavaScriptにはJavaのような強力なコレクションクラスがありませんが、配列 자체还是很强大的。多次元配列を一次元配列に変換する 방법은以下の通りです：
const nestedArray = [[1, 2], [3, 4], [5, [6, 7, 8]]];
const flattenArray = function(array) {
return array.reduce((accumulator, currentValue) => {
return accumulator.concat(
Array.isArray(currentValue) ? flattenArray(currentValue) : currentValue
);
}, []);
};
console.log(flattenArray(nestedArray));
// 結果: [1, 2, 3, 4, 5, 6, 7, 8]
JavaScriptには还有很多特性，其设计有历史原因。学习js的方法，更多的是看别人代码，从中模仿学习。
// 計算プロパティ名の例
const keyName = 'userEmail';
const userObject = {
[keyName]: 'test@example.com',
id: 1001
};
JavaScriptのPromiseオブジェクトは、的非執行タスクに使用されます。的非処理をよりシンプルに書くことができます。
function fetchUserData(userId) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', `/api/users/${userId}`);
xhr.onload = () => {
if (xhr.status === 200) {
resolve(JSON.parse(xhr.responseText));
} else {
reject(new Error('リクエスト失敗'));
}
};
xhr.onerror = () => reject(new Error('ネットワークエラー'));
xhr.send();
});
}
デコレータを使用すると、既存のクラスに新しいメソッドを簡単に追加できます。デコレータは、修飾対象のオブジェクトをパラメータとして受け取る関数として理解できます。
function logMethod(target, name, descriptor) {
const originalMethod = descriptor.value;
descriptor.value = function(...args) {
console.log(`メソッド '${name}' が呼び出されました`);
return originalMethod.apply(this, args);
};
return descriptor;
}
class Calculator {
@logMethod
add(a, b) {
return a + b;
}
}
Node.jsとブラウザ端的JavaScriptでは、動作環境が異なります。ブラウザ专用のコードはNode.jsで実行できません：
<header></header>
<body>
<h1>サンプルページ</h1>
<script>
// ブラウザでは動作するが、Node.jsではエラーになる
const http = require('http');
const server = http.createServer((req, res) => {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World');
});
server.listen(3000);
</script>
</body>
ES6で書かれたコードをNode.jsで実行しようとしてエラーに遭遇することがあります。この場合、ES6のモジュールシステムが関係している可能性があります。
Node.jsのv14以上のバージョンではES6モジュールのサポートが改善されています。使用しているNode.jsのバージョンを確認し、必要に応じて升级することをお勧めします。
ES5とES6の主な差别如下：
変数宣言: var vs let/const 関数定義: function vs アロー関数 クラス構文の導入 モジュール化: require vs import/export Promiseによる非同期処理
参考: ES6 教程