阅读 4205

[译]ES6入门(第一部分)

原文戳这里

[译]ES6入门(第二部分)

[译]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;
 }
 getName() {
 return this.name;
 }
 setName(name) {
 this.name = name;
 }
}
let person = new People("Jon Snow");
console.log(person.getName());
person.setName("Dany");
console.log(person.getName());
输出:
Jon Snow
Dany
复制代码

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

getters 和 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函数也没有使用括号,就像为变量赋值一样。

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

关注下面的标签,发现更多相似文章
评论