[Перевод] Введение в ES6 (Часть 2)
[Перевод] Начало работы с ES6 (часть 3)
В этом посте я расскажу о некоторых новых возможностях ES6. Будет полезно, если вы новичок в ES6 или изучаете интерфейсные фреймворки. Темы, которые я раскрою в этом посте:
1. Пусть и Const
2, Функция стрелки
3. Параметры по умолчанию
4. Для цикла
5. Разверните свойства
6. Карты
7. Наборы
8. Статические методы
9. Геттеры и сеттеры
Let
let похож на var, но имеет область видимости. 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']
Это может немного озадачить.
Подумайте об этом таким образом. Всякий раз, когда определяется константная переменная, Javascript присваивает ей адрес памяти значения. В нашем примере переменная LANGUAGES фактически указывает на память, выделенную для массива. Следовательно, вы не сможете изменить переменную позже, чтобы она указывала на другое место в памяти. На протяжении всей программы он просто указывает на массив.
стрелочная функция
Функции претерпели некоторые изменения в ES6. Я имею в виду синтаксис.
// 老语法
function oldOne() {
console.log("Hello World..!");
}
// 新语法
var newOne = () => {
console.log("Hello World..!");
}
Новый синтаксис может сбивать с толку, но я попытаюсь объяснить.
Грамматика разделена на две части.
Первая часть — объявить переменную и присвоить ей функцию (ie)(). Он просто говорит, что переменная на самом деле является функцией.
Затем вторая часть объявляет тело функции. Раздел стрелки с фигурными скобками определяет тело функции.
Другой пример параметров.
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. 不能正常工作.
Когда вы вызываете функцию с аргументами, они назначаются последовательно. (т.е.) первое значение присваивается первому параметру, второе значение присваивается второму параметру и так далее.
В приведенном выше примере параметру «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
Да, это также работает со строками.
Развернуть свойства
Как следует из названия, свойство expand помогает расширять выражения. Проще говоря, он преобразует список элементов в массив или массив в список элементов.
Пример без свойства распространения:
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); // 注意我们这里没有传入数组. 而是将元素作为参数传递。
В приведенном выше примере свойство expand преобразует список элементов (то есть параметров) в массив.
Другой пример:
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
В приведенном выше примере свойство spread превращает массив в список элементов.
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() возвращает ключи карты, но возвращает объект Iteratord, что означает, что его нельзя отобразить как есть, только путем итерации.
Другой пример:
var map = new Map();
for (let element of map) {
console.log(element);
}
输出:
['name', 'John']
['id', 10]
Приведенный выше пример говорит сам за себя. Цикл for..of выводит массив пар ключ-значение.
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.
В приведенном выше примере размер говорит сам за себя. Существует еще один метод has, который возвращает логическое значение в зависимости от того, существует ли данный элемент в коллекции.
статический метод
Большинство людей слышали о статических методах. Статические методы были введены в ES6. Его очень легко определить и использовать.
пример:
class Example {
static Callme() {
console.log("Static method");
}
}
Example.Callme();
输出:
Static method
Обратите внимание, что я не использовал в классе ключевое слово «функция».
Я могу вызвать функцию без создания какого-либо экземпляра класса.
Геттеры и сеттеры
Геттеры и сеттеры — одна из полезных функций, представленных в ES6. Это пригодится, если вы используете классы в JS.
Пример без геттеров и сеттеров:
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 у нас есть две функции, которые помогают нам установить и получить имя человека.
Примеры геттеров и сеттеров:
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 вызывается без круглых скобок, точно так же, как присваивание значения переменной.
Спасибо за уделенное время. Надеюсь, вам понравится эта статья. :) :)