長文になりますが、もう一度言わせてください。
JAVASCRIPTは難しいです。最後に会ったとき、私は Javascript の世界に足を踏み入れていました。目を輝かせ、希望に満ちたプログラマーが野生のジャングルに足を踏み入れ、「これはどれほど難しいことでしょう?」と言いました。私はどれほど間違っていたでしょうか??。ますます難しくなりましたが、私は(かろうじて)生き残っています。これが私の旅についての少し混沌とした物語です。
変数: 狂気の始まり
変数は値を保持するコンテナであり、データを保存または操作する場所です。つまり、なぜ var、let、const という 3 つの方法で作成できるのでしょうか?なぜ? ES6 で笑います。
var: var は緩い大砲だと言っていました。運任せのゲームをしているようなもの。近づかないでください。
let: 変化する可能性のある変数に最適です。管理が容易になります。
Const: 値は同じままです。不動の。ああ、const は値を変更できないという意味ではなく、値を再割り当てできないという意味です。
注: ECMAScript 2015 または ES6 は、JavaScript の 2 番目のメジャー リビジョンです。
ああ、文字列連結、Hello テンプレート リテラルに別れを告げました。テンプレート リテラルを使用する バッククォートを使用し、${} を使用して変数を簡単に埋め込むことができるようになりました。ここで作業は少し楽になりましたが、バッククォートと引用符をいつ使用するべきか判断できませんか?またまた心を揺さぶられる人です。
// Good old concat const message = "Hi, " name ". You are " age " years old."; // Template literal const message = `Hi, ${name}! You are ${age} years old.`;
機能: 別名ミスター再利用性、ミスター保守性...
関数は、タスクを実行する一連のステートメントです。関数キーワード、関数名、パラメータの有無、中括弧内の Js ステートメントで構成されます。
function greet() { console.log("Hello, fellow strugglers?!"); }
最初は単純そうに思えました。ロジックをカプセル化して、それを呼び出し (呼び出しと言います)、ドーン!あなたはコーディング中です。
するとES6は「これはアロー関数です、使ってください」と言いました。アロー関数は単純そうに見えますよね?関数を記述するための簡単な方法です。構文を理解するのに時間がかかりました。
const greet = () => { console.log("Hello, fellow strugglers?!"); }
ループ: 無限と踊る。
苦しみにはさまざまな方法があります。ループでは、コードのブロックを何度も実行できます。同じコードを毎回異なる値で何度も実行する場合に便利です。たくさんあります:
1. While Loop: は、条件が true である限りループを続けます。悪。私はそのいとこである do-while について話しているのではありません。
2. for ループ: 古き良き for ループです。信頼できる for ループ。とてもおなじみです。非常に安全であり、変数をインクリメントするのを忘れた場合に無限ループがスローされる可能性が十分にあります。
3. forEach: これは for ループのクールで流行に敏感な従兄弟のようなものです。カウンターも必要ないし、無限に連れて行ってくれるわけでもない。私の彼。
4. & 5. for..in と for..of: 1 つはオブジェクトのループに最適で、もう 1 つは配列の反復に適しています。私はそれらを混ぜ続け、痛みを通して学びます。まだ勉強中です。
//for loop for (let i = 0; i console.log(num));
配列: 探し続けるリスト
Array は非常に有望なスタートを切りました。簡単なアイテムのリスト。物を押し込んだり、物を引き出したりします。簡単ですよね?
let shoppingList = ["apples", "bananas", "chocolate"]; shoppingList.push("ice cream"); console.log(shoppingList); // ['apples', 'bananas', 'chocolate', 'ice cream']
フィルター、マップ、検索と残りの配列メソッド群を入力します。それ以来、私の脳は以前と変わっていません。
filter() メソッドは、関数によって提供されるテストに合格する要素で満たされた新しい配列を作成します。
find() メソッドは、テストに合格した最初の要素の値を返します。配列メソッドはたくさんあります。それぞれについてドキュメントが必要ですか?、つまり、長さ、スプライス、スライス、結合、ポップ、プッシュ、シフト解除、シフト、マップなどがあります。ここでやめましょう。
let numbers = [1, 2, 3, 4, 5]; let evenNumbers = numbers.filter(num => num % 2 === 0); console.log(evenNumbers); // [2, 4]
オブジェクト: 配列の紛らわしいいとこ
次にオブジェクトが登場しました。オブジェクトは配列に似ていますが、キーと値を持ちます。 「よし、これなら大丈夫だ」と思いました。しかしその後、JavaScript がメソッドを追加し、突然オブジェクトが独自に処理を行うようになりました。そしてオブジェクトの配列が方程式に加わりました。プロパティへのアクセスには、ドット表記または括弧表記を使用しています。 .this
から始めないでください
//Without method let shoppingCart = { apples: 3, bananas: 2, chocolate: 1 }; // with method let cart = { items: ["apple", "banana"], addItem(item) { this.items.push(item); } }; cart.addItem("chocolate"); console.log(cart.items); // ['apple', 'banana', 'chocolate']
DOM 操作: 本当の闘いが始まった場所
配列とオブジェクトの扱いに自信が持てるようになると、次は DOM を操作しようと思いました。私は今では実質的にウェブ開発者です!」あなたは何も知らない、イグリットは有名な言葉で言いました。
これは簡単なはずだ、と私はもう一度言いました。要素を取得して変更するだけです。 ID の場合は、getElementbyId が役立ちます。 getElementsbyClassName クラスまたは queryselector とその兄弟である All.
クラスも存在します。
そして、この addEventListener ビジネス全体があります。確かにそれはうまくいきますが、時々、出来事が自分自身の心を持っているかのように爆発するように見えることがあります。
続いてショッピングカートを作成してみました。何日もかかり、学んだ同僚たちにたくさんの SOS 信号を送りました。ここでは、appendChild、removeChild、creatingElements、要素の取得、属性の設定、スタイル設定、関数の呼び出しを行っています。
次に、模擬データベースを大胆に追加しました。私と再び配列操作。アクセスしている、押している、見つけている、疲れている(また起き上がる)。
インポートとエクスポート: 狂気を大胆に共有??
ある時点で、あまりにも多くの JavaScript を作成してしまったので、コードをモジュール化する必要がありました。インポートとエクスポートを入力してください。
Copy code // module.js export function greet() { console.log("Hello from the module!"); } // main.js import { greet } from './module.js'; greet();
コードをより小さな部分に分割すると簡単になると思いました。山ほどの混乱をインポートすることになるとは、ほとんど知りませんでした。
今からオブジェクト指向プログラミング (OOP) を始めようとしています。派手に聞こえますが、また迷子になる前に、まずは週末を楽しませてください。
最後までお付き合いいただきありがとうございました。目標は依然として毎日 1% 改善されています。 #ES6 #コーディング奮闘記 #ウェブ開発 #JavaScript狂気 #プログラミングユーモア #コードを学ぶ
免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。
Copyright© 2022 湘ICP备2022001581号-3