360SDN.COM

首页/ES6/列表

为新手准备的带示例的ES6

来源:  2018-03-27 21:10:16    评论:0点击:

流叔 JavaScript之禅

译 | 流口水流

文 |  Srebalaji Thirumalai 

原文 | https://dev.to/srebalaji/es6-for-beginners-with-example-c7

 

在这篇文章中,我将介绍ES6中的一些新特性。如果你是刚学ES6或者在学习前端框架,这将是很有帮助的。

我将在这篇文章中讨论的知识点:

1. letconst

2.箭头函数

3.默认参数

4. forof循环

5.rest参数与扩展运算符

6. Maps

7. Sets

8.静态方法

9.取值函数(getter)和存值函数(setter)

Let

let 的用法类似于 var,但是所声明的变量只在 let 命令所在的代码块内有效。

  1. if (true) {

  2. let a = 40;

  3. console.log(a); //40

  4. }

  5. console.log(a); // undefined

在上面的例子中,变量·a是在 if 语句中定义的,因此在函数之外是不可访问的。

再看个例子:

  1. let a = 50;

  2. let b = 100;

  3. if (true) {

  4. let a = 60;

  5. var c = 10;

  6. console.log(a/c); // 6

  7. console.log(b/c); // 10

  8. }

  9. console.log(c); // 10

  10. console.log(a); // 50

Const

const声明一个只读的常量。一旦声明,常量的值就不能改变。

  1. const a = 50;

  2. a = 60; // 如果你尝试更改a的值将得到一个错误

  3. const b = "Constant variable";

  4. b = "Assigning new value"; // 显示错误

  5. Consider another example.

  6. const LANGUAGES = ['Js', 'Ruby', 'Python', 'Go'];

  7. LANGUAGES = "Javascript"; // 显示错误

  8. LANGUAGES.push('Java'); // 不会报错

  9. console.log(LANGUAGES); // ['Js', 'Ruby', 'Python', 'Go', 'Java']

这个例子可能有点令人困惑。

我们这样考虑。无论何时定义const变量,Javascript都引用该变量的值的地址。 const 实际上保证的并不是变量的值不得改动,而是变量指向的那个内存地址不得改动,在我们的示例中,变量 LANGUAGES实际上引用了分配给数组的内存。在整个程序中,它只引用了数组。

箭头函数

ES6中的函数在语法上带来了一些小变化。

  1. // 旧的写法

  2. function oldOne() {

  3. console.log("Hello World..!");

  4. }

  5. // 新的写法

  6. var newOne = () => {

  7. console.log("Hello World..!");

  8. }

这个新的语法可能有点混乱,但是我会试着解释一下。

这个语法可以分为两部分。

  1. 1. var newOne = ()

  2. 2. => {}

第一部分只是声明一个变量并为其分配函数。它看起来是变量实际上是一个函数。

然后第二部分是声明函数的正文部分。带大括号的箭头部分定义函数体。

来看个带参数的例子

  1. let NewOneWithParameters = (a, b) => {

  2. console.log(a+b); // 30

  3. }

  4. NewOneWithParameters(10, 20);

我认为我不需要对此做出解释,它很简单。

默认参数

如果您熟悉Ruby、Python等其他编程语言,那么默认参数对你来说并不陌生。

默认参数是在声明函数时默认给出的参数。但当调用函数时,它的值可以被改变。

例子:

  1. let Func = (a, b = 10) => {

  2. return a + b;

  3. }

  4. Func(20); // 20 + 10 = 30

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

思考下另一个例子

  1. Func(20, 50); // 20 + 50 = 70

在上面的示例中,函数接受两个参数,第二个参数替换了默认参数。

再看一个例子

  1. let NotWorkingFunction = (a = 10, b) => {

  2. return a + b;

  3. }

  4. NotWorkingFunction(20); // NAN. Not gonna work.

当你用参数调用函数时,它们会按顺序被分配。即第一个值被赋给第一个参数,第二个值被赋给第二个参数,以此类推。

在上面的例子中,值20被分配给参数“a”,而“b”没有任何值。所以我们没有得到任何输出。

但是

  1. NotWorkingFunction(20, 30); // 50;

正常运行

For of 循环

for..offorin 非常相似,有细微的不同。

for..of 循环遍历元素列表(例如数组),并逐个返回元素(不是索引)。

  1. let arr = [2,3,4,1];

  2. for (let value of arr) {

  3. console.log(value);

  4. }

  5. Output:

  6. 2

  7. 3

  8. 4

  9. 1

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

另一个例子:

  1. let string = "Javascript";

  2. for (let char of string) {

  3. console.log(char);

  4. }

  5.  

  6. Output:

  7. J

  8. a

  9. v

  10. a

  11. s

  12. c

  13. r

  14. i

  15. p

  16. t

当然,它也适用于字符串。

rest参数与扩展运算符

翻看ES6代码,很多时候都会看到三个点( ...)的存在,它在ES6语法中,有两种应用形式,分别为函数中的rest参数,以及扩展运算符。扩展运算符(spread)是三个点( ...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

未使用rest参数:

  1. let SumElements = (arr) => {

  2. console.log(arr); // [10, 20, 40, 60, 90]

  3. let sum = 0;

  4. for (let element of arr) {

  5.  sum += element;

  6. }

  7. console.log(sum); // 220.

  8. }

  9. SumElements([10, 20, 40, 60, 90]);

上面的例子很简单。我们声明一个函数接受数组作为参数并返回其和。

现在看看使用rest参数的相同示例。

  1. let SumElements = (...arr) => {

  2. console.log(arr); // [10, 20, 40, 60, 90]

  3. let sum = 0;

  4. for (let element of arr) {

  5.  sum += element;

  6. }

  7. console.log(sum); // 220.

  8. }

  9. SumElements(10, 20, 40, 60, 90); // 注意,这里没有传递数组。相反,我们将元素作为参数传递。

在上面的例子中,rest参数将元素列表(即参数)转换为数组。

来来看另一个例子

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

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

  1. let arr = [10, 20, 60];

  2. Math.max(arr); // 报错 它不接受数组

让我们用我们的扩展运算符 ...

  1. let arr = [10, 20, 60];

  2. Math.max(...arr); // 60

在上面的例子中,展开运算符将数组转换为元素列表。

Maps

它类似于数组,但我们可以定义自己的索引。索引在 map上是独一无二的。

示例:

  1. var NewMap = new Map();

  2. NewMap.set('name', 'John');

  3. NewMap.set('id', 2345796);

  4. NewMap.set('interest', ['js', 'ruby', 'python']);

  5. NewMap.get('name'); // John

  6. NewMap.get('id'); // 2345796

  7. NewMap.get('interest'); // ['js', 'ruby', 'python']

我认为上面的例子是不言自明的。

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

示例:

  1. var map = new Map();

  2. map.set('name', 'John');

  3. map.set('name', 'Andy');

  4. map.set(1, 'number one');

  5. map.set(NaN, 'No value');

  6. map.get('name'); // Andy. Note John is replaced by Andy.

  7. map.get(1); // number one

  8. map.get(NaN); // No value

  9. Other useful methods used in Map:

  10. var map = new Map();

  11. map.set('name', 'John');

  12. map.set('id', 10);

  13. map.size; // 2. Returns the size of the map.

  14. map.keys(); // outputs only the keys.

  15. map.values(); // outputs only the values.

  16. for (let key of map.keys()) {

  17. console.log(key);

  18. }

  19.  

  20. Output:

  21. name

  22. id

在上面的示例中,map.keys()返回映射的键,但只返回的是Iterator对象。也就是说它不能被显示出来,它应该只通过迭代来显示。

看看另一个例子:

  1. var map = new Map();

  2. for (let element of map) {

  3. console.log(element);

  4. }

  5. Output:

  6. ['name', 'John']

  7. ['id', 10]

上面的例子是不言而喻的。 for..of 循环输出数组中的键值对。

我们可以稍微优化一下。

  1. var map = new Map();

  2. for (let [key, value] of map) {

  3. console.log(key+" - "+value);

  4. }

  5. Output:

  6. name - John

  7. id - 10

Sets

示例

  1. var sets = new Set();

  2. sets.add('a');

  3. sets.add('b');

  4. sets.add('a'); // 我们添加一个重复的值

  5. for (let element of sets) {

  6. console.log(element);

  7. }

  8. Output:

  9. a

  10. b

注意,没有显示重复的值。只显示唯一的值。

还要注意,集合是可迭代的对象。我们必须遍历元素来显示它。

其他有用的方法:

  1. var sets = New Set([1,5,6,8,9]);

  2. sets.size; // returns 5. Size of the size.

  3. sets.has(1); // returns true.

  4. sets.has(10); // returns false.

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

静态方法

你们大多数人已经听说过静态方法。静态方法是在ES6中引入的。很容易定义和使用它。

示例:

  1. class Example {

  2. static Callme() {

  3.   console.log("Static method");

  4. }

  5. }

  6. Example.Callme();

  7. Output:

  8. Static method

注意:我没有在类中使用关键字 function

我可以调用函数而不为类创建任何实例。

Getters 和 Setters

Getters和setters是ES6中引入的一个有用的特性。如果你使用的是JS的类,那么它将派上用场。

未使用Getters和setters

  1. class People {

  2. constructor(name) {

  3.      this.name = name;

  4.    }

  5.    getName() {

  6.      return this.name;

  7.    }

  8.    setName(name) {

  9.      this.name = name;

  10.    }

  11. }

  12. let person = new People("Jon Snow");

  13. console.log(person.getName());

  14. person.setName("Dany");

  15. console.log(person.getName());

  16. Output:

  17. Jon Snow

  18. Dany

我认为上面的例子是不言自明的。我们在People类上有两个函数,用来帮助设置和获取person的名称。

使用Getters和setters的例子:

  1. class People {

  2. constructor(name) {

  3.      this.name = name;

  4.    }

  5.    get Name() {

  6.      return this.name;

  7.    }

  8.    set Name(name) {

  9.      this.name = name;

  10.    }

  11. }

  12. let person = new People("Jon Snow");

  13. console.log(person.Name);

  14. person.Name = "Dany";

  15. console.log(person.Name);

在上面的示例中,您可以看到在类中有“get”和“set”属性的两个函数。“get”属性用于获取变量的值,并使用“set”属性将值设置为变量。

可以看到getName函数没有括号,setName函数是没有括号的,这就像给变量赋值一样。

谢谢你的阅读。希望你喜欢这篇文章。:):)

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权