Lesson 1: Syntax
這堂課不講基礎只講差異,有需要請看基礎。
Javascript的版本很多,這邊討論SE6。
Let and Const
There are now two new ways to declare variables in JavaScript: let and const.
Up until now, the only way to declare a variable in JavaScript was to use the keyword var
. To understand why let
and const
were added, it’s probably best to look at an example of when using var
can get us into trouble.
Template Literals
Template literals are essentially string literals that include embedded expressions.
Denoted with backticks (` `) instead of single quotes ( ''
) or double quotes ( ""
), template literals can contain placeholders which are represented using ${expression}
. This makes it much easier to build strings.
Destructuring
Destructuring borrows inspiration from languages like Perl and Python by allowing you to specify the elements you want to extract from an array or object on the left side of an assignment. It sounds a little weird, but you can actually achieve the same result as before, but with much less code; and it's still easy to understand.
Let’s take a look at both examples rewritten using destructuring.
Destructuring values from an array
注意逗點間的空白變數省略變數的用法。
Destructuring values from an object
Object Literal Shorthand
New shorthand ways for initializing objects and adding methods to objects.
以前要這樣指定object:
Do you see the repetition? Doesn't type: type
, color: color
, and carat:carat
seem redundant?
可以看到type被重複寫三次。
新版:
新版可以在object中加入function
function可省略
Family of For Loops
1. The most common type
2. The for...in loop
Also, the for...in loop can get you into big trouble when you need to add an extra method to an array (or another object). Because for...in loops loop over all enumerable properties, this means if you add any additional properties to the array's prototype, then those properties will also appear in the loop.
輸出會連function定義也print出來!
NOTE: The forEach loop is another type of for loop in JavaScript. However, forEach()
is actually an array method, so it can only be used exclusively with arrays. There is also no way to stop or break a forEach loop. If you need that type of behavior in your loop, you’ll have to use a basic for loop.
3. For...of loop to the rescue
就跟Java的 for(int n : nums) { ... } 很像,冒號改成of:
並且這個方法修正了print function definition 這個問題:
And you don’t have to worry about adding new properties to objects. The for...of loop will only loop over the values in the object.
輸出:
Spread... Operator
新概念,把
The spread operator, written with three consecutive dots ( ...
), is new in ES6 and gives you the ability to expand, or spread, iterable objects into multiple elements.
好用在哪?
Combining arrays with concat
利用spread operator
...Rest Parameter
就是spread operator的反面
If you can use the spread operator to spread an array into multiple elements, then certainly there should be a way to bundle multiple elements back into an array, right?
In fact, there is! It’s called the rest parameter, and it’s another new addition in ES6.
1. Rest parameter
The rest parameter, also written with three consecutive dots ( ...
), allows you to represent an indefinite number of elements as an array. This can be helpful in a couple of different situations.
One situation is when assigning the values of an array to variables. For example,
注意items的部分:
This code takes the values of the order
array and assigns them to individual variables using destructuring (as you saw in the Destructuring section earlier in this lesson). total
, subtotal
, and tax
are assigned the first three values in the array, however, items
is where you want to pay the most attention.
By using the rest parameter, items
is assigned the rest of the values in the array (as an array).
2. Variadic functions
問題:
Another use case for the rest parameter is when you’re working with variadic functions. Variadic functions are functions that take an indefinite number of arguments.
For example, let’s say we have a function called sum()
which calculates the sum of an indefinite amount of numbers. How might the sum()
function be called during execution?
There’s literally an endless number of ways the sum()
function could be called. Regardless of the amount of numbers passed to the function, it should always return the total sum of the numbers.
方法一:Using the arguments object
In previous versions of JavaScript, this type of function would be handled using the arguments object. The arguments object is an array-like object that is available as a local variable inside all functions. It contains a value for each argument being passed to the function starting at 0 for the first argument, 1 for the second argument, and so on.
If we look at the implementation of our sum()
function, then you’ll see how the arguments object could be used to handle the variable amount of numbers being passed to it.
Now this works fine, but it does have its issues:
If you look at the definition for the
sum()
function, it doesn’t have any parameters.This is misleading because we know the
sum()
function can handle an indefinite amount of arguments.
It can be hard to understand.
If you’ve never used the arguments object before, then you would most likely look at this code and wonder where the arguments object is even coming from. Did it appear out of thin air? It certainly looks that way.
方法二:Using the rest parameter
Fortunately, with the addition of the rest parameter, you can rewrite the sum()
function to read more clearly.
This version of the sum()
function is both more concise and is easier to read. Remember, we use the for...of loop
to loop over any type of data that is iterable. So we'll use for...of
here rather than for...in
.
Last updated