Шаблон строка
Это одна из характеристик ES6, которые мне очень нравятся. Он очень интуитивно отражает взаимосвязь между переменными и строками. В ES5, если мы хотим добавить переменные в строки, нам нужно использовать следующий метод написания:
animate (box, 'translate (-' + item-width * num + 'px, 0)', 1000, function () {box.style.transitionduration = ''; box.style.transform = 'translate (-800px, 0)'; flag = true;});Теперь, используя строки шаблона ES6, вы можете напрямую объединить строки и переменные, чтобы облегчить понимание.
Animate (Box, `translate (-$ {itemwidth*num} px, 0)`, 1000, function () {box.style.transitionDuration = ''; box.style.transform = `translate (-$ {itemwidth*(item.length-2)} px, 0)`; flag =};});Это очень интуитивно и удобно? Из двух простых примеров, выше, очевидно, что в ES6 строки отмечены обратными тренажерами (``), которые необходимо знать.
Есть еще одна особенность. Строка шаблона может выводить сложенную строку, которая невозможна в традиционных строках ES5. Он должен использоваться (/n) и не может быть записан, чтобы ввести возврат каретки при написании. Тем не менее, в шаблоне строкового элемента ES6 он может быть непосредственно записан, чтобы ввести возврат, пространство, пространство, а затем вывод непосредственно, когда строка выводится, что очень удобно.
Пусть myString = `abcdeffff fas`; console.log (mystring);/*Выход Abcdeffff fas*/
Расширение функций
1. Установите значения по умолчанию для функции
В расширении функции добавляется функция для установки значений по умолчанию для функции, которая может быть считается очень хорошей. Вы помните, как мы устанавливаем значения по умолчанию для функций в ES5?
Функциональный тест (a, b, c) {var a = a || 10; var a = b || 15; var c = c || 20; console.log (a+b+c);}Здесь мы установили значение по умолчанию для достижения нашего ожидаемого эффекта до одного дня, мы проходим a = 0 дюймов. В настоящее время для нас неправильно писать. Для программы 0 является ложным, поэтому A примет значение по умолчанию 10, что не сможет достичь ожидаемого эффекта. Но ES6 предоставляет нам очень хороший способ установить значения по умолчанию. Приведенный выше код может быть переписан следующим образом:
Функциональный тест (a = 10, b = 15, c = 20) {console.log (a+b+c);}2. Функция стрелки
Студенты, которые понимают CofficScript, должны быть ясно, что сила Cofficescript - это повсеместная функция стрелки, которая очень приятно писать. Теперь ES6 официально внедрила функцию стрелы, так что наша программа может быть упрощена, например:
// метод записи ES5 VAR TEST = function (a, b) {return a+b;} // Функция стрелки ES6 var test2 = test (a, b) => a+b;При написании каруселей вам нужно перемещать мышь к следующим небольшим точкам в массивном объекте маленьких точек, чтобы график мог перемещаться в правильное положение. В ES5 нам нужно добавить атрибуты к текущему объекту, который более громоздкий для написания, и метод написания выглядит следующим образом:
var lilist = document.queryselectorall ('li'); for (var i = 0; i <lilist.length; i ++) {lilist [i] .index = i; Lilist [i] .AddeventListener ('mouseenter', function () {console.log (this.index);}, false);}Этот атрибут Index является индексом элемента, размещенного на текущей мышью, а затем текущий элемент получается на основе этого индекса. Но в ES6 мы можем напрямую использовать функцию стрелки и вновь введенную FindIndex в массиве, чтобы найти индекс текущего активного элемента. Код заключается в следующем:
let lilist = document.queryselectorall ('li'); let arraylilist = array.form (lilist); for (var i = 0; i <lilist.length; i ++) {lilist [i] .index = i; Lilist [i] .AddeventListener ('mouseenter', function () {let thisIndex = arraylilist.findindex ((n) => n == this);}, false);}Этот Index, полученный приведенным выше кодом, является индексом, размещенным на текущей мышью. Здесь я понимаю параметр n в функции стрелки. После прохождения параметра n он будет пересекать объект в массиве, чтобы найти объект равным этому, а затем вернуть свой индекс. Array.from () используется здесь. Это новый метод, добавленный в массив в ES6, который может преобразовать массив классов в массив.
ES6 для… петли
Приведенный выше цикл кода JS использует, но на самом деле он может быть заменен на… цикла в ES6, что делает письмо более кратким. Вы помните, как ... в петле в JS. Этот цикл может зацикливаться на ключах в парах клавиш, но не может зацикливаться на значениях. Появление для… из -за его недостатков. Диапазоны, которые могут быть использованы для… из цикла, включают массивы, установленные и карты, некоторые массивные объекты (такие как объекты аргументов, объекты Nodelist DOM), объекты генератора и строки. Таким образом, мы можем использовать этот цикл для замены цикла для цикла, но здесь мы должны отметить, что если вы используете для ... напрямую цикла, в Chrome49 будет сообщена ошибка. Чиновник подтвердил, что это ошибка Chrome49 и будет зафиксирована в Chrome51 . Поэтому, когда я писал, я использовал Array.from () для преобразования объекта Nodelist в массив, чтобы я мог работать с уверенностью. Код заключается в следующем:
let lilist = document.queryselectorall ('li'); let arraylilist = array.form (lilist); for (let li of lilist) {li.addeventlistener ('mouseenter', function () {let thisindex = arraylilist.findindex (n) => n == это);Суммировать
Выше всего содержание этой статьи. Разве это не очень кратко? Через эту статью я чувствую, что именно эти вещи уже заставили меня почувствовать очарование ES6. Я надеюсь, что всем будет полезно изучать ES6.