i18n: translate all qns

Author: yangshun

questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.langnostic.json

@@ -0,0 +1,57 @@
+{
+  "frontmatter": {
+    "title": "5ba0d4da",
+    "subtitle": "4d47ead"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "4010c03b",
+        "b7950cbe",
+        "2a7816d0",
+        "678d2642",
+        "7ac0c956",
+        "4e1ff55c",
+        "d3b7242",
+        "a203d791",
+        "8550812",
+        "54dee6b3",
+        "a6f52eea",
+        "cb0ae1a8",
+        "e5dcf6c0",
+        "839f0ebb",
+        "d8fa43b8",
+        "30eae852",
+        "be10dd6f",
+        "1f4770e5",
+        "6232231"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "4010c03b",
+        "b7950cbe",
+        "2a7816d0",
+        "678d2642",
+        "7ac0c956",
+        "4e1ff55c",
+        "d3b7242",
+        "a203d791",
+        "8550812",
+        "54dee6b3",
+        "a6f52eea",
+        "cb0ae1a8",
+        "e5dcf6c0",
+        "839f0ebb",
+        "d8fa43b8",
+        "30eae852",
+        "be10dd6f",
+        "1f4770e5",
+        "6232231"
+      ]
+    }
+  }
+}

questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/zh-CN.mdx

@@ -1,50 +1,102 @@
 ---
-title: 您可以为新箭头函数语法提供一个用例吗？
-subtitle: 这个新语法与其他函数有什么不同？
+title: 箭头 => 函数语法有什么用例？
+subtitle: 这种新语法与其他函数有何不同？
 ---
 
-`=>` 函数语法，也被称为 "箭头函数"，是在 ECMAScript 6（ES6）中引入的 JavaScript 功能。它提供了一种更简洁的编写函数的方式，并且在 `this` 的行为方面与传统函数表达式有一些不同。下面通过一个简单的用例来说明它的实用性：
+## TL;DR
 
-## 用例：筛选数组
+箭头函数为用 JavaScript 编写函数提供了一种简洁的语法。它们对于在方法和回调中维护 `this` 上下文特别有用。例如，在事件处理程序或像 `map` 这样的数组方法中，箭头函数可以简化代码并避免 `this` 绑定问题。
 
-假设你有一个包含数字的数组，你想筛选出所有小于 10 的数字。你可以使用传统的函数语法和新的箭头函数语法来实现这一目标，如下所示：
+```js live
+const numbers = [1, 2, 3];
+const doubled = numbers.map((n) => n * 2);
+console.log(doubled); // [2, 4, 6]
+```
 
-### 传统函数语法
+***
 
-```js
-const numbers = [1, 5, 10, 15, 20];
-const filteredNumbers = numbers.filter(function (number) {
-  return number >= 10;
-});
+## 新箭头 => 函数语法的用例
+
+### 简化语法
+
+箭头函数提供了一种更简洁的编写函数的方式。这对于短函数或回调特别有用。
 
-console.log(filteredNumbers); // 输出: [10, 15, 20]
+```js live
+// Traditional function
+const add = function (a, b) {
+  return a + b;
+};
+
+// Arrow function
+const anotherAdd = (a, b) => a + b;
+
+console.log(add(2, 3)); // Output: 5
+console.log(anotherAdd(2, 3)); // Output: 5
 ```
 
-### 箭头函数语法
+### 词法 `this` 绑定
+
+箭头函数没有自己的 `this` 上下文。相反，它们从周围的范围继承 `this`。这在 `this` 上下文可能很棘手的方法和回调中特别有用。
 
-```js
-const numbers = [1, 5, 10, 15, 20];
-const filteredNumbers = numbers.filter((number) => number >= 10);
+```js live
+function Timer() {
+  this.seconds = 0;
+  this.increment = () => {
+    this.seconds++; // 'this.seconds' is inherited from the outer scope
+    console.log(this.seconds);
+  };
+}
 
-console.log(filteredNumbers); // 输出: [10, 15, 20]
+const timer = new Timer();
+timer.increment(); // 1
+timer.increment(); // 2
 ```
 
-## 箭头函数的优点
+在上面的例子中，在 `setInterval` 中使用传统函数需要额外的步骤来维护正确的 `this` 上下文。
 
-1. **简洁性**：箭头函数更加简洁，使你的代码更短且易于阅读。
-1. **`this` 行为**：箭头函数没有自己的 `this`。相反，它们继承自它们在定义时的父级作用域中的 `this`。这在处理回调并希望保留 `this` 上下文的情况下特别有用。
-1. **隐式返回**：如果函数体只包含一个表达式，箭头函数允许省略 `return` 关键字和花括号。
+### 在数组方法中使用箭头函数
 
-## 何时使用箭头函数
+箭头函数通常用于 `map`、`filter` 和 `reduce` 等数组方法中，以获得更简洁、更易读的代码。
 
-- 当你需要一个快速的、单行的函数时。
-- 在回调函数中，当你想要保留 `this` 的词法作用域时。
-- 在使用 `map`、`filter`、`reduce` 等高阶函数时。
+```js live
+const numbers = [1, 2, 3, 4, 5];
 
-## 何时不要使用箭头函数
+// Traditional function
+const doubledTraditional = numbers.map(function (n) {
+  return n * 2;
+});
+
+// Arrow function
+const doubled = numbers.map((n) => n * 2);
+
+console.log(doubled); // [2, 4, 6, 8, 10]
+```
+
+### 事件处理程序
+
+箭头函数可用于事件处理程序，以维护类或对象的 `this` 上下文。
+
+```js live
+class Button {
+  constructor() {
+    this.count = 0;
+    this.button = document.createElement('button');
+    this.button.innerText = 'Click me';
+    this.button.addEventListener('click', () => {
+      this.count++;
+      console.log('count:', this.count);
+    });
+    document.body.appendChild(this.button);
+  }
+}
+
+const myButton = new Button();
+myButton.button.click(); // count: 1
+myButton.button.click(); // count: 2
+```
 
-- **对象方法**：箭头函数没有自己的 `this` 上下文，在对象方法中可能会导致意外行为。
-- **作为构造函数**：箭头函数不能作为构造函数使用，如果使用 `new` 关键字会引发错误。
-- **当你需要使用函数提升**：与传统的函数声明不同，箭头函数不会提升。
+## 延伸阅读
 
-箭头函数是 JavaScript 的一个强大补充，简化了函数语法，并解决了传统函数中 `this` 关键字的一些常见问题。它们在现代 JavaScript 开发模式中特别有用。
+* [MDN Web Docs: Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
+* [JavaScript.info: Arrow functions revisited](https://javascript.info/arrow-functions)
+* [Eloquent JavaScript: Functions](https://eloquentjavascript.net/03_functions.html)

questions/describe-event-bubbling/en-US.langnostic.json

@@ -0,0 +1,96 @@
+{
+  "frontmatter": {
+    "title": "e76fac09"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "1cdd9fe1",
+        "940c1a5e",
+        "2a7816d0",
+        "8f8a1b0c",
+        "72e7e3c9",
+        "63bf7424",
+        "a71258b2",
+        "7009889d",
+        "7c18e66f",
+        "ae34ee20",
+        "e04e0f0f",
+        "d186cc4a",
+        "a517a702",
+        "9e538dcd",
+        "3818abba",
+        "47a90b06",
+        "10d6cb7a",
+        "1f177e65",
+        "d7a0aa2",
+        "68b07c90",
+        "e2a961ac",
+        "c81ac723",
+        "965b6bd7",
+        "b0d83e27",
+        "a8ff50ea",
+        "3625d327",
+        "ac7b2126",
+        "92f262c4",
+        "b37f85fb",
+        "3c0717ad",
+        "26112098",
+        "2dfccf1a",
+        "5a641ee3",
+        "647830d7",
+        "758c287c",
+        "ad083d17",
+        "da4b57bd",
+        "1f4770e5",
+        "d00fe19e"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "1cdd9fe1",
+        "940c1a5e",
+        "2a7816d0",
+        "8f8a1b0c",
+        "72e7e3c9",
+        "63bf7424",
+        "a71258b2",
+        "7009889d",
+        "7c18e66f",
+        "ae34ee20",
+        "e04e0f0f",
+        "d186cc4a",
+        "a517a702",
+        "9e538dcd",
+        "3818abba",
+        "47a90b06",
+        "10d6cb7a",
+        "1f177e65",
+        "d7a0aa2",
+        "68b07c90",
+        "e2a961ac",
+        "c81ac723",
+        "965b6bd7",
+        "b0d83e27",
+        "a8ff50ea",
+        "3625d327",
+        "ac7b2126",
+        "92f262c4",
+        "b37f85fb",
+        "3c0717ad",
+        "26112098",
+        "2dfccf1a",
+        "5a641ee3",
+        "647830d7",
+        "758c287c",
+        "ad083d17",
+        "da4b57bd",
+        "1f4770e5",
+        "d00fe19e"
+      ]
+    }
+  }
+}