目標：2021年2月起，每周一篇文章翻譯，從跟程式相關的短文/新聞開始，過程中也會接觸到程式專有名詞，能試著自己詮釋加強概念。4月起主題，從SOLOLEARN平台做JavaScript篇章的翻譯。

■□■ Sep, Week 2 ■□■ Title: JavaScript Author、Platform: SOLOLEARN Source: https://www.sololearn.com/learning/1024

Loops in ECMAScript 6

ES6中的迴圈

In JavaScript we commonly use the for loop to iterate over values in a list:

在JavaScript中，我們通常使用for迴圈去迭代陣列list中的值： 

let arr = [1, 2, 3]; for (let k = 0; k < arr.length; k++) {   console.log(arr[k]); }

The for...in loop is intended for iterating over the enumerable keys of an object.
For example:

而for...in迴圈用於(intended for)迭代物件中列舉(enumerable)的key值。
例如： 

let obj = {a: 1, b: 2, c: 3}; for (let v in obj) {   console.log(v); }

The for...in loop should NOT be used to iterate over arrays because, depending on the JavaScript engine, it could iterate in an arbitrary order. Also, the iterating variable is a string, not a number, so if you try to do any math with the variable, you'll be performing string concatenation instead of addition.

for...in迴圈不應該被用在陣列迭代，因為根據JavaScript引擎，他可能按隨意的(arbitrary)順序迭代。而且，迭代變數是字串不是數字，所以如果你試著做用該變數做任何數學計算，你將執行字串連結(concatenation)而不是加法。

ES6 introduces the new for...of loop, which creates a loop iterating over iterable objects.
For example:

ES6引入新的 for...of迴圈，新增可迭代物件的迴圈迭代，例如： 

let list = ["x", "y", "z"]; for (let val of list) {   console.log(val); }

During each iteration the val variable is assigned the corresponding element in the list.

在每次的迭代當中，val變數被指派為list陣列中相應的元素。

The for...of loop works for other iterable objects as well, including strings.

for...of迴圈也可以用於迭代物件，包含字串。 

for (let ch of "Hello") {   console.log(ch); }
TIP:The for...of loop also works on the newly introduced collections (Map, Set, WeakMap, and WeakSet). We will learn about them in the upcoming lessons. Note that ES6 code will run only in browsers that support it. Older devices and browsers that do not support ES6 will return a syntax error.

提示：for...of迴圈也可作用於新引入的集合中(Map、Set、WeekMap和WekSet)，我們將在即將到來的課程中學到他們。記得注意ES6只會在有支援它的瀏覽器中運作，不支援ES6的較舊設備和瀏覽器會回傳語法錯誤。

-----

Functions in ECMAScript 6

ES6中的函式

Prior to ES6, a JavaScript function was defined like this:

在ES6之前，JavaScript的函式是像這樣被定義的： 

function add(x, y) {
  var sum = x+y;
  console.log(sum);
}

ES6 introduces a new syntax for writing functions. The same function from above can be written as:

ES6引入一個寫函式的新語法，跟上方一樣的函式可以被寫成： 

const add = (x, y) => {   let sum = x + y;   console.log(sum); }

This new syntax is quite handy when you just need a simple function with one argument.
You can skip typing function and return, as well as some parentheses and braces.
For example:

當你只需要單一引數(argument)的簡單函式(function)時，這個新語法非常實用，你可以跳過寫function和return關鍵字，還有一些中括弧和大括弧。例如： 

const greet = x => "Welcome " + x;

The code above defines a function named greet that has one argument and returns a message.

上面的程式碼定義了一個稱為greet的函式，它有一個引數並回傳一則訊息。

If there are no parameters, an empty pair of parentheses should be used, as in

如果沒有參數(parameters)，應該要使用一對空的小括弧，像這樣： 

const x = () => alert("Hi");

The syntax is very useful for inline functions. For example, let's say we have an array, and for each element of the array we need to execute a function. We use the forEach method of the array to call a function for each element:

這個語法對內嵌函式(inline functions)非常實用，例如：假設我們有一個陣列，陣列中的每個元素都要執行一個函式，我們使用陣列的forEach方法去為每個元素呼叫函式。 

var arr = [2, 3, 7, 8];

arr.forEach(function(el) {
console.log(el * 2);
});

However, in ES6, the code above can be rewritten as following:

然而，上面的程式碼在ES6中可以改寫如下： 

const arr = [2, 3, 7, 8];  arr.forEach(v => { console.log(v * 2); });   //我把{}也拿掉，可以執行正常。
TIP:The code is shorter and looks pretty nice, doesn't it? 🙂

提示：程式碼更短而且看起來非常棒，不是嗎？ 🙂

-----

Default Parameters in ES6

ES6中的預設參數

In ES6, we can put the default values right in the signature of the functions.
For example:

在ES6當中，我們可以直接將預設值放在函式的簽名中，例如： 

function test(a, b = 3, c = 42) {   return a + b + c; } console.log(test(5)); //50

And here's an example of an arrow function with default parameters:

這是箭頭函式使用預設參數的範例： 

const test = (a, b = 3, c = 42) => {   return a + b + c; } console.log(test(5)); //50
TIP:Default value expressions are evaluated at function call time from left to right. This also means that default expressions can use the values of previously-filled parameters.

提示：在函式呼叫時，預設值表達式從左到右被評估，這也表示預設的表達式可以使用預先填入的參數值。

-----

翻譯小心得｜ 這也是深入淺出的一篇，把ES6新的方法及語法用淺顯的說明和範例來解釋，非常實用。 Finally, the article above is from SOLOLEARN .  I translated it just for practice, personal use only. If that is inappropriate, please contact me.
 This free site is ad-supported. Learn more
​