ES6 入门示例
本文将介绍 ES6 的一些新特性。
如果您是 ES6 新手或正在学习前端框架，本文将对您有所帮助。
本文将涵盖以下主题
- 令且常数
- 箭头函数
- 默认参数
- 循环
- 传播属性
- 地图
- 套
- 静态方法
- 获取者和设置者
让
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 a = 50;
a = 60; // shows error. You cannot change the value of const.
const b = "Constant variable";
b = "Assigning new value"; // shows error.
Consider another example.
const LANGUAGES = ['Js', 'Ruby', 'Python', 'Go'];
LANGUAGES = "Javascript"; // shows error.
LANGUAGES.push('Java'); // Works fine.
console.log(LANGUAGES); // ['Js', 'Ruby', 'Python', 'Go', 'Java']
这可能有点令人困惑。
这样想就明白了。每当你定义一个常量变量时，JavaScript 都会将变量的值指向其对应的内存地址。在我们的例子中，变量“LANGUAGES”实际上指向的是分配给数组的内存地址。因此，你无法在之后修改该变量，使其指向其他内存位置。在整个程序运行过程中，它始终指向该数组。
箭头函数
ES6中的函数有一些变化。我是指语法。
// Old Syntax
function oldOne() {
console.log("Hello World..!");
}
// New Syntax
var newOne = () => {
console.log("Hello World..!");
}
新的语法可能有点令人困惑。但我会尽量解释清楚。
语法分为两部分。
- var newOne = ()
- => {}
第一部分只是声明一个变量并将函数（即()）赋值给它。它只是表明该变量实际上是一个函数。
第二部分是声明函数的主体部分。带花括号的箭头部分定义了函数的主体部分。
另一个带参数的例子。
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. Not gonna work.
调用函数时，如果使用参数，参数会按顺序赋值。（例如）第一个值赋给第一个参数，第二个值赋给第二个参数，依此类推。
在上面的例子中，参数'a'被赋值为20，而'b'没有赋值。因此，我们得不到任何输出。
但，
NotWorkingFunction(20, 30); // 50;
运行正常。
循环
for...of 与 for..in 非常相似，只是略有不同。
for...of 遍历元素列表（即类似数组），并逐个返回元素（而不是它们的索引）。
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); // Note we are not passing array here. Instead we are passing the elements as arguments.
在上面的例子中，spread 属性将元素列表（即参数）转换为数组。
另一个例子：
Math.max(10, 20, 60, 100, 50, 200); // returns 200.
Math.max 是一个简单的函数，它返回给定列表中的最大元素。它不接受数组作为参数。
let arr = [10, 20, 60];
Math.max(arr); // Shows error. Doesn't accept an array.
所以，让我们求助于我们的救世主吧。
let arr = [10, 20, 60];
Math.max(...arr); // 60
在上面的例子中，spread 属性将数组转换为元素列表。
地图
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. Note John is replaced by Andy.
map.get(1); // number one
map.get(NaN); // No value
Other useful methods used in Map:
var map = new Map();
map.set('name', 'John');
map.set('id', 10);
map.size; // 2. Returns the size of the map.
map.keys(); // outputs only the keys.
map.values(); // outputs only the values.
for (let key of map.keys()) {
console.log(key);
}
Output:
name
id
在上面的例子中，`map.keys()` 返回的是映射的键，但它返回的是一个迭代器对象。这意味着它不能直接显示，只能通过迭代来显示。
另一个例子：
var map = new Map();
for (let element of map) {
console.log(element);
}
Output:
['name', 'John']
['id', 10]
上面的例子不言自明。for...of 循环会将键值对输出到数组中。
我们可以稍微优化一下。
var map = new Map();
for (let [key, value] of map) {
console.log(key+" - "+value);
}
Output:
name - John
id - 10
套
集合用于存储任何类型的唯一值。就这么简单！
例子
var sets = new Set();
sets.add('a');
sets.add('b');
sets.add('a'); // We are adding duplicate value.
for (let element of sets) {
console.log(element);
}
Output:
a
b
请注意，不会显示重复值，只会显示唯一值。
另请注意，集合是可迭代对象，我们需要遍历其中的元素才能显示它。
其他有效方法：
var sets = New Set([1,5,6,8,9]);
sets.size; // returns 5. Size of the size.
sets.has(1); // returns true.
sets.has(10); // returns false.
在上面的例子中，size 的含义不言自明。还有一个方法 'has'，它会根据给定元素是否存在于集合中返回一个布尔值。
静态方法
大多数人应该都听说过静态方法。静态方法是在 ES6 中引入的，定义和使用都非常简单。
例子：
class Example {
static Callme() {
console.log("Static method");
}
}
Example.Callme();
Output:
Static method
请注意，我在 Class 类中没有使用关键字“function”。
而且我可以在不创建类的任何实例的情况下调用该函数。
获取者和设置者
Getter 和 setter 是 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());
Output:
Jon Snow
Dany
我认为上面的例子已经很清楚了。People 类中有两个函数，分别用于设置和获取人的姓名。
使用 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 类中有两个函数，分别带有 'get' 和 'set' 属性。'get' 属性用于获取变量的值，而 'set' 属性用于设置变量的值。
你可以看到，getName 函数调用时没有使用括号。setName 函数调用时也没有使用括号，它就像是给变量赋值一样。
感谢您的阅读。希望您喜欢这篇文章。:) :)
文章来源：https://dev.to/srebalaji/es6-for-beginners-with-example-c7