[Перевод] Введение в ES6 (Часть 1)
[Перевод] Введение в ES6 (Часть 2)
Часть 1 этой статьи находится по адресуздесь
Часть 2 статьи размещена по адресуздесь
Темы, которые я раскрою в этой статье
1. Отображение массива
2. Фильтр массива
7. продлить и супер
карта массива
Оператор карты используется для выполнения определенной операции со всеми элементами массива и возвращает массив, содержащий измененные элементы.
Это очень легко реализовать. Давайте посмотрим на пример.
let arr = [1,2,3,4,5];
let modifiedArr = arr.map（function（element，index，arr）{
return element * 10;
}）;
console.log（modifiedArr）;
输出：
[10,20,30,40,50]
Как видите, map использует функцию с тремя аргументами.
Первый параметр — это сам элемент.
Второй параметр — это индекс элемента.
Третий параметр — это весь массив.
А также обратите внимание, что в конечном итоге мы должны вернуть какое-то значение. Это будет измененное значение элемента. Если вы ничего не вернете, конкретный элемент будет неопределенным.
Также я бы сказал, что вторые и третьи параметры дополнительно. Требуется только первый параметр.
let modifiedArr = arr.map（function（element）{
return element * 10;
}）;
Как видите, map принимает функцию с одним аргументом.
Что ж... попробуем написать оператор карты со стрелочными функциями.
let modifiedArr = arr.map（（element，index）=> {
console.log（“index”+ index）;
return element * 10;
}）;
console.log（modifiedArr）;
输出：
index 0
index 1
index 2
index 3
index 4
[10,20,30,40,50]
Не думаю, что мне нужно много объяснять. это очень просто.
Последний пример.
let modifiedArr = arr.map（element => element * 10）;
console.log（modifiedArr）;
прохладно :)
Если вы хорошо знаете функции стрелок, это должно быть легко понять. Но если вы не поняли, я попытаюсь объяснить.
Есть две вещи, чтобы объяснить.
1, если функция с одним параметром не требуется (). В нашем примере элемент является параметром.
фильтр массива
Давайте посмотрим на некоторые примеры.
let arr = [1,2,3,4,5,6]
let modifiedArr = arr.filter（function（element，index，array）{
return element％2 == 0
}）;
console.log（modifiedArr）;
输出：
[2,4,6]
Как вы можете видеть в приведенном выше примере, как и в случае с картой, здесь фильтр также принимает три параметра.
Мы должны вернуть логическое значение для каждого элемента массива. Если вы не вернетесь в конец любого логического значения, затем фильтруйте его как ложь и удалите элемент.
Хорошо.. давайте попробуем функцию стрелки.
let modifiedAarr = arr.filter（（element，index）=> element％2 == 0）
Надеюсь, ты понял.并且不要忘记注意，只有第一个参数是强制性的。其他两个参数是可选的。
уменьшение размерности массива
Уменьшение размерности массива используется для объединения всех элементов массива и возврата одного значения.
Давайте посмотрим несколько примеров
let arr = [1,2,3,4,5,6]
let total = arr.reduce（function（sum，element，index，array）{
return sum + element;
}，0）;
console.log（“total is”+ total）;
输出：
total is 21
В отличие от filter и map, reduce использует функцию с четырьмя аргументами и одним дополнительным элементом. В нашем случае это 0.
Давайте посмотрим, как это работает.
Функция с четырьмя параметрами Первый параметр — это элемент агрегатора. Это сумма всех элементов, и ей можно присвоить начальное значение. Его начальное значение определяется как дополнительный элемент. В нашем случае это 0.
Тогда второй, третий и четвертый параметры совпадают с фильтром и картой.
Подобно фильтру и карте, вы должны вернуть окончательный результат.
Давайте посмотрим на другой пример.
let arr = [1,2,3,4,5,6];
let totalSum = arr.reduce（function（sum，element，index，array）{
console.log（sum +“+”+ element +“=”+ sum + element）;
return sum + element;
}，10）;
console.log（“Total sum is ”+ totalSum）;
输出：
10 + 1 = 11
11 + 2 = 13
13 + 3 = 16
16 + 4 = 20
20 + 5 = 25
25 + 6 = 31
Total sum is 31
Надеюсь, вы поняли этот пример. Обратите внимание, что мы устанавливаем начальное значение суммы элементов агрегатора равным 10.
Напишем тот же код со стрелочными функциями.
let totalSum = arr.reduce（（sum，element）=> element + sum，0）
Надеюсь, ты понял. Это просто.
И карта с другим фильтром, требуются первые два параметра. Другие два являются необязательными.
Этоjsfiddle, играть. :)
Текст шаблона
Они являются новым синтаксисом и могут легко добавить выражение.
Литералы шаблонов используются для выполнения любого выражения JS.
Давайте посмотрим несколько примеров
let name = "Jon Snow";
let msg = `My name is ${name}`;
console.log(msg);
输出:
My name is Jon Snow
Будь проще.
Вы также можете использовать многострочные строки.
let msg = `My name
is ${name}`;
console.log(msg);
输出:
My name
is Jon Snow
Давайте посмотрим на другие примеры
let name = "Srebalaji";
let languages = () => {return "Ruby, Js, Java, Python"}
let msg = `My name is ${name}
My age is ${20+3}
And I code in ${languages()}`
输出:
My name is Srebalaji
My age is 23
And I code in Ruby, Js, Java, Python
Надеюсь, ты понял. Это прямо к делу.
Вы можете легко добавить любое выражение, а также многострочные строки.
импорт и экспорт
В ES6 модуль импорта и экспорта — это модуль, который вы увидите в современной внешней библиотеке полезных функций.
Я настоятельно рекомендую вам здесьPlunkиспользуйте эту функцию. Окружающая среда уже установлена в этом порту.
Хорошо .. Затем импорт и экспортировка того, как играть роль в ES6.
Экспорты используются в модулях для явного экспорта определенных переменных, функций или классов. (т.е.) если переменная экспортируется, ее можно использовать в других модулях.
Импорты используются для импорта переменных, функций и классов из других модулей.
Если вы не понимаете, о чем я говорю. Давайте посмотрим на некоторые примеры.
app.js
export let name = "Jon"
export let age = 23
index.js
import {name, age} from './app'
console.log(name);
console.log(age);
index.html
<script src="./index.js"></script>
输出:
Jon
23
В приведенном выше примере мы определили две переменные name и age и экспортировали их.
В другом файле мы импортировали переменные и получили доступ к их значениям.
Будь проще.
Давайте копнем немного глубже
app.js
export default const name = "Jon"
index.js
import name from './app.js'
console.log(name);
输出:
Jon
пример
import n from './app.js'
console.log(n);
输出:
Jon
app.js
let a = 10;
let b = 2;
let sum = () => a+b;
export {a,b}
export default sum
index.js
import * as variables from './app'
import addition from './app' // default value
console.log(variables.a);
console.log(variables.b);
console.log(addition());
输出:
10
2
12
Есть две вещи, которые нужно помнить при импорте.
1. Если вы используете * для импорта значений, вы должны использовать псевдонимы (то есть) для ссылки на все импортированные значения. В нашем примере мы используем переменные как псевдонимы.
2. Использование * для импорта значения не приведет к импорту значения по умолчанию. Вы должны импортировать его отдельно.
import addition, * as variables from './app'
Если вам нужно импортировать значения по умолчанию и другие значения в одну строку, вы можете использовать приведенный выше синтаксис.
Надеюсь, ты понял. :)
Деструктурирование объектов и массивов
解构是ES6中的一个有用功能。 Он очень прост в использовании.
Приведем пример.
let person = {firstName: "Jon", lastName: "Snow", age: 23}
const {firstName, lastName, age} = person
console.log(firstName);
console.log(lastName);
console.log(age);
输出:
Jon
Snow
23
Давайте посмотрим на другие примеры
let person = {firstName: "Jon", lastName: "Snow", age: 23}
const {firstName} = person
console.log(firstName);
输出:
Jon
В приведенном выше примере вы можете видеть, что мы извлекли из объекта только необходимые значения.
let person = {firstName: "Jon", lastName: "Snow", age: 23}
const {firstName: name, age} = person
console.log(name);
console.log(age);
输出:
Jon
23
В приведенном выше примере вы можете видеть, что мы определили новое имя переменной, и использование firstName было распространено.
Надеюсь, ты понял. это очень просто.
Давайте посмотрим, как деструктурировать массив.
let arr [1, 2, 3, 4]
const [a, b, c, d] = arr;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
输出:
1
2
3
4
Надеюсь, вы понимаете приведенный выше код. это очень просто.
Мы присваиваем каждому элементу массива переменную.
Давайте посмотрим на другой пример.
let arr = [1,2,3,4,5,6]
let [a,b,,d,e] = arr
console.log(a);
console.log(b);
console.log(d);
console.log(e);
输出:
1
2
4
5
В приведенном выше коде видно, что мы пропустили третий элемент массива. В остальном все аналогично предыдущему примеру.
Давайте посмотрим на другой пример.
let person = {firstName: "Jon", lastName: "Snow", age: 23}
let displayName = ({firstName, lastName:last}) => {
console.log(`${firstName} - ${last}`);
}
displayName(person);
Output:
Jon - Snow
Надеюсь, ты понял. Это прямо к делу.
Продлить и супер
Если у вас есть опыт написания кода с помощью OOPS, Extend и Super для вас не новы.
Расширение используется для создания подкласса из родительского класса. Подкласс наследует все свойства родительского класса, а также может изменять свойства родительского класса.
class Person{
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
displayName() {
return `${this.firstName} - ${this.lastName}`;
}
}
class Employee extends Person {
constructor(firstName, lastName, age, salary) {
super(firstName, lastName, age);
this.salary = salary;
}
displaySalary() {
return `${this.salary}`;
}
displayName() {
return super.displayName();
}
displayAge() {
return this.age;
}
}
let manager = new Employee("Jon", "Snow", 23, 100);
console.log(manager.displaySalary());
console.log(manager.displayName());
console.log(manager.displayAge());
输出:
100
Jon Snow
23
В приведенном выше коде вы можете видеть, что мы определили класс Person с конструктором и простым методом.
Затем мы определяем другой класс, Employee, который является подклассом, наследуемым от Person. Для этого мы используем extend. Надеюсь, вы понимаете это.
Затем мы используем ключевое слово super для вызова конструктора родительского класса. Мы также используем super для вызова методов, объявленных в родительском классе.