在这篇文章中，我将介绍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 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函数也没有使用括号，就像为变量赋值一样。
感谢您的时间。 希望你喜欢这篇文章。 :) :)
网友评论