[译]ES6入门（第一部分）

原文戳这里

在这篇文章中，我将介绍ES6中的一些新功能。如果您是ES6新手或学习前端框架，将会很有帮助。 我将在这篇文章中介绍的主题：

1、Let 和 Const

2、箭头函数

3、默认参数

4、for of 循环

5、展开属性

6、Maps

7、Sets

8、静态方法

9、Getters 和 Setters

Let

let类似于var但是let具有作用域。 let只能在定义的块级别中访问。

if (true) {
 let a = 40;
 console.log(a); //40
}
console.log(a); // undefined
复制代码

在上面的示例中，变量'a'在If语句中定义，因此在函数外部无法访问。

另外一个例子：

let a = 50;
let b = 100;
if (true) {
 let a = 60;
 var c = 10;
 console.log(a/c); // 6
 console.log(b/c); // 10
}
console.log(c); // 10
console.log(a); // 50
复制代码

Const

Const用于给变量赋值一个常量。这个值是无法改变，它是固定的。

const a = 50;
a = 60; // 出错. 你不能改变const的值
const b = "Constant variable";
b = "Assigning new value"; // 出错
复制代码

思考一下另一个例子：

const LANGUAGES = ['Js', 'Ruby', 'Python', 'Go'];
LANGUAGES = "Javascript"; // 错误.
LANGUAGES.push('Java'); // 正常.
console.log(LANGUAGES); // ['Js', 'Ruby', 'Python', 'Go', 'Java']
复制代码

这可能有点令人费解。

以这种方式考虑。无论何时定义const变量，Javascript都会将值的内存地址赋值给变量。在我们的示例中，变量'LANGUAGES'实际上指向了分配给数组的内存。因此，你无法在以后更改变量来指向其他内存位置。在整个程序中它只指向数组。

箭头函数

函数在ES6发生了一些变化。我的意思是语法。

// 老语法
function oldOne() {
 console.log("Hello World..!");
}
// 新语法
var newOne = () => {
 console.log("Hello World..!");
}
复制代码

新语法可能会让人感到困惑，但我会尝试解释一下。

语法分为两部分。

第一部分是声明一个变量并为其分配函数（即）（）。它只是说变量实际上是一个函数。

然后第二部分声明函数体。 带有花括号的箭头部分定义了函数体。

另一个带参数的例子。

let NewOneWithParameters = (a, b) => {
 console.log(a+b); // 30
}
NewOneWithParameters(10, 20);
复制代码

我认为我不需要对此作出解释。 它直截了当。

默认参数

如果您熟悉Ruby，Python等其他编程语言，那么默认参数对您来说并不陌生。 默认参数是在声明函数时默认给出的参数。 但是在调用函数时可以更改它的值。

例子：

let Func = (a, b = 10) => {
 return a + b; 
}
Func(20); // 20 + 10 = 30
复制代码

在上面的例子中，我们只传递一个参数。 该函数使用默认参数并执行该函数。

考虑另一个例子：

Func(20, 50); // 20 + 50 = 70
复制代码

在上面的示例中，该函数采用两个参数，第二个参数替换默认参数。

再看另一个例子：

let NotWorkingFunction = (a = 10, b) => {
 return a + b;
}
NotWorkingFunction(20); // NAN. 不能正常工作.
复制代码

当您使用参数调用函数时，它们将按顺序分配。 （即）第一个值分配给第一个参数，第二个值分配给第二个参数，依此类推。

在上面的例子中，值20被赋值给参数'a'而'b'没有任何值。 所以我们没有得到任何输出。

但是，

NotWorkingFunction(20, 30); // 50;
复制代码

正常工作。

For of 循环

for..of非常类似于for..in，但略有修改。

for..of遍历元素列表（即），如Array，并逐个返回元素（不是它们的索引）

let arr = [2,3,4,1];
for (let value of arr) {
 console.log(value);
}
Output:
2
3
4
1
复制代码

请注意，变量'value'输出数组中的每个元素而不是索引。

另外一个例子：

let string = "Javascript";
for (let char of string) {
 console.log(char);
}
Output:
J
a
v
a
s
c
r
i
p
t
复制代码

是的，它也适用于字符串。

展开属性

正如其名，展开属性帮助展开表达式。 简单来说，它将元素列表转换为数组，或者将数组转换成元素列表。

没有展开属性的示例：

let SumElements = (arr) => {
 console.log(arr); // [10, 20, 40, 60, 90]
 let sum = 0;
 for (let element of arr) {
 sum += element;
 }
 console.log(sum); // 220. 
}
SumElements([10, 20, 40, 60, 90]);
复制代码

以上示例很简单。 我们声明一个函数，接受数组作为参数并返回其总和。 这很简单。

现在考虑使用展开属性的相同示例

let SumElements = (...arr) => {
 console.log(arr); // [10, 20, 40, 60, 90]
 let sum = 0;
 for (let element of arr) {
 sum += element;
 }
 console.log(sum); // 220. 
}
SumElements(10, 20, 40, 60, 90); // 注意我们这里没有传入数组. 而是将元素作为参数传递。
复制代码

在上面的例子中，展开属性将元素列表（即参数）转换为数组。

另外一个例子：

Math.max(10, 20, 60, 100, 50, 200); // 返回 200.

Math.max是一个简单的方法，它返回给定列表中的最大元素。 它不接受数组。

let arr = [10, 20, 60];
Math.max(arr); // 出错. 不接受数组.
复制代码

所以让我们使用我们的救世主。

let arr = [10, 20, 60];
Math.max(...arr); // 60
复制代码

在上面的示例中，展开属性将数组转换为元素列表。

Maps

Map包含键值对。它与数组类似，但我们可以定义自己的索引。索引在Map中是唯一的。

例子：

var NewMap = new Map();
NewMap.set('name', 'John'); 
NewMap.set('id', 2345796);
NewMap.set('interest', ['js', 'ruby', 'python']);
NewMap.get('name'); // John
NewMap.get('id'); // 2345796
NewMap.get('interest'); // ['js', 'ruby', 'python']
复制代码

我认为上面的例子是自我解释的。

Map的其他有趣的功能是所有索引都是唯一的。 我们可以使用任何值作为键或值。

var map = new Map();
map.set('name', 'John');
map.set('name', 'Andy');
map.set(1, 'number one');
map.set(NaN, 'No value');
map.get('name'); // Andy. 注意John被Andy替换了.
map.get(1); // number one
map.get(NaN); // No value
复制代码

Map中另外一些有用的方法：

var map = new Map();
map.set('name', 'John');
map.set('id', 10);
map.size; // 2. 返回map的大小.
map.keys(); // 返回所有的键. 
map.values(); // 返回所有的值.
for (let key of map.keys()) {
 console.log(key);
}
输出:
name
id
复制代码

在上面的例子中, map.keys() 返回map的键，但是返回的是一个Iteratord对象，这意味这不能按原样展示出来，只能通过迭代展示出来。

另外一个例子：

var map = new Map();
for (let element of map) {
 console.log(element);
}
输出:
['name', 'John']
['id', 10]
复制代码

上面的例子是自我解释的。 for..of循环输出键值对数组。

Sets

Sets用来保存任何类型的唯一值. 简单..!

例子：

var sets = new Set();
sets.add('a');
sets.add('b');
sets.add('a'); // 添加重复的值.
for (let element of sets) {
 console.log(element);
}
输出:
a
b
复制代码

请注意，不会显示重复值，只显示了唯一值。

还要注意，Set是可迭代的对象。 我们必须遍历元素才能显示它。

其他有用的方法：

var sets = New Set([1,5,6,8,9]);
sets.size; // 返回 5. set的大小.
sets.has(1); // 返回 true. 
sets.has(10); // 返回 false.
复制代码

在上面的例子中，size是不言自明的。 还有另一种方法'has'，它根据给定元素是否存在于集合中返回一个布尔值。

静态方法

大多数人已经听说过静态方法。 静态方法在ES6中引入。 定义它并使用它非常容易。

例子：

class Example {
 static Callme() {
 console.log("Static method");
 }
}
Example.Callme();
输出:
Static method
复制代码

请注意，我没有在类中使用关键字“function”。

我可以在不为类创建任何实例的情况下调用该函数。

Getters和Setters

Getters和Setterss是ES6中引入的有用功能之一。 如果你在JS中使用类，它会派上用场。

没有getter和setter的示例：

class People {
constructor(name) {
 this.name = name;
 }
 get Name() {
 return this.name;
 }
 set Name(name) {
 this.name = name;
 }
}
let person = new People("Jon Snow");
console.log(person.Name);
person.Name = "Dany";
console.log(person.Name);
复制代码

上面的例子不言自明. 在类People中，我们有两个函数帮助我们设置和获取一个人的名字。

getters and setters的例子：

class People {
constructor(name) {
 this.name = name;
 }
 get Name() {
 return this.name;
 }
 set Name(name) {
 this.name = name;
 }
}
let person = new People("Jon Snow");
console.log(person.Name);
person.Name = "Dany";
console.log(person.Name);
复制代码

在上面的示例中，您可以看到在People类中，有两个函数分别具有'get'和'set'属性， 'get'属性用于获取变量的值，'set'属性用于设置变量的值。

你可以看到调用getName函数并没有使用括号， 并且调用setName函数也没有使用括号，就像为变量赋值一样。

感谢您的时间。 希望你喜欢这篇文章。 :) :)