Javascript is HARD (with ESadness)

長文になりますが、もう一度言わせてください。
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 < 10; i++) {
  console.log(i); // Simple. Right? RIGHT?!
}

// forEach
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => 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 がメソッドを追加し、突然オブジェクトが独自に処理を行うようになりました。そしてオブジェクトの配列が方程式に加わりました。プロパティへのアクセスには、ドット表記または括弧表記を使用しています。 で始めないでください。これ

//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 Manipulation: Where the Real Struggles Began
Once I felt confident with arrays and objects, I thought, “Time to manipulate the DOM! I’m practically a web developer now!” You know nothing, Ygritte famously said.
This should be easy, i said again. Just grab an element and change it. If its an ID, getElementbyId is there for me. A class getElementsbyClassName is also there or queryselector and the one with All its brother.
And then there’s this whole addEventListener business. Sure, it works, but sometimes, events seem to fire off like they have a mind of their own.
Then i tried creating a shopping cart. Took me days and lots of SOS signal to my learned colleagues. Here I'm appendChild, removingChild, creatingElements, grabbing elements, setting attributes, styling, calling functions upon functions.
Then boldly added a mock database; me and array manipulation again. I'm accessing, I'm pushing, I'm finding, I'm tired (gets up again).

Imports and Exports: Boldly sharing the Madness??
At some point, I had written so much JavaScript that I needed to modularize my code. Enter import and export.

Copy code
// module.js
export function greet() {
  console.log("Hello from the module!");
}

// main.js
import { greet } from './module.js';
greet();

I thought breaking my code into smaller pieces would make it easier. Little did I know, I would end up importing a mountain of confusion.

Now I'm about to start Object-Oriented Programming (OOP) sounds fancy, But let me enjoy my weekend first before i get lost again.
Thanks for staying till the end. The goal still remains 1% better everyday. #ES6 #CodingStruggles #WebDevelopment #JavaScriptMadness #ProgrammingHumor #LearnToCode

The above is the detailed content of Javascript is HARD (with ESadness). For more information, please follow other related articles on the PHP Chinese website!