Какие браузеры поддерживают es6
Обновлено: 01.07.2024
ECMAScript 6, также известный как ES6 и ECMAScript 2015, был второй важной версией JavaScript.
В этой главе описаны наиболее важные функции ES6.
Новые возможности ES6
Поддержка браузером ES6 (ECMAScript 2015)
Safari 10 и Edge 14 были первыми браузерами, полностью поддерживающими ES6:
| Chrome 58 | Edge 14 | Firefox 54 | Safari 10 | Opera 55 |
| Январь 2017 | Август 2016 | Март 2017 | Июль 2016 | Август 2018 |
JavaScript позволяет
Ключевое слово let позволяет объявлять переменную с блоком области
Пример
var x = 10;// Здесь x равно 10
<
let x = 2;
// Здесь x равно 2
>
// Здесь x равно 10
Подробнее читайте let в главе: JavaScript Let.
JavaScript const
Ключевое слово const позволяет объявить константу (переменная JavaScript со значением константы).
Константы аналогичны let переменным, за исключением того, что значение нельзя изменить.
Пример
var x = 10;// Здесь x равно 10
<
const x = 2;
// Здесь x равно 2
>
// Здесь x равно 10
Подробнее читайте const в главе: JavaScript Const.
Стрелочные функции
Стрелочные функции позволяют использовать короткий синтаксис для написания функциональных выражений.
Вам не нужны function ключевое слово, return ключевое слово и фигурные скобки.
Пример
// ES5
var x = function(x, y) return x * y;
>
// ES6
const x = (x, y) => x * y;
Стрелочные функции не имеют своих this . Они плохо подходят для определения методов объекта.
Стрелочные функции не поднимаются. Они должны быть определены перед использованием.
Использование const более безопасно, чем использование var , потому что выражение функции всегда является постоянным значением.
Вы можете опустить return ключевое слово и фигурные скобки, только если функция является одним оператором. Из-за этого может быть хорошей привычкой всегда держать их:
Пример
Узнайте больше о стрелочных функциях в главе: Стрелочные функции JavaScript.
Классы JavaScript
Классы JavaScript - это шаблоны для объектов JavaScript.
Используйте ключевое слово class для создания класса.
Всегда добавляйте метод с именем constructor() :
Синтаксис
Пример
class Car <constructor(name, year) <
this.name = name;
this.year = year;
>
>
В приведенном выше примере создается класс с именем "Car".
Класс имеет два начальных свойства: "name" and "year".
Класс JavaScript не является объектом.
Это шаблон для объектов JavaScript.
Использование класса
Когда у вас есть класс, вы можете использовать его для создания объектов:
Пример
let myCar1 = new Car("Ford", 2014);let myCar2 = new Car("Audi", 2019);
Узнайте больше о классах в главе: Классы JavaScript.
Объект обещания JavaScript
Обещание - это объект JavaScript, который связывает "Создающий код" и "Потребляющий код".
"Производящий код" может занять некоторое время, а "Создающий код" должен дождаться результата.
Синтаксис обещаний
let myPromise = new Promise(function(myResolve, myReject) <
// "Создающий код" (может занять некоторое время)
myResolve(); // в случае успеха
myReject(); // в случае ошибки
>);
// "Потребляющий код" (необходимо дождаться выполнения обещания).
myPromise.then(
function(value) < /* код в случае успеха */ >,
function(error) < /* в случае ошибки */ >
);
Пример использования обещания
let myPromise = new Promise(function(myResolve, myReject) <
setTimeout(function() < myResolve("I love You !!"); >, 3000);
>);
myPromise.then(function(value) document.getElementById("demo").innerHTML = value;
>);
Узнайте больше о обещании в главе: Обещания JavaScript.
Тип символа JavaScript
Символ JavaScript - это примитивный тип данных, такой же, как Number, String или Boolean.
Он представляет собой уникальный "скрытый" идентификатор, к которому другой код не может случайно получить доступ.
Например, если разные кодировщики хотят добавить свойство person.id к объекту person, принадлежащему стороннему коду, они могут смешивать значения друг друга.
Использование Symbol() для создания уникальных идентификаторов решает эту проблему:
Пример
let >person.id = 140353;
Символы всегда уникальны.
Если вы создадите два символа с одинаковым описанием, они будут иметь разные значения.
Значения параметров по умолчанию
ES6 позволяет параметрам функции иметь значения по умолчанию.
Пример
function myFunction(x, y = 10) <// y равно 10, если не передано, или undefined
return x + y;
>
myFunction(5); // вернет 15
Функция остаточный параметр
Параметр rest (. ) позволяет функции обрабатывать неопределенное количество аргументов как массив:
Пример
function sum(. args) <
let sum = 0;
for (let arg of args) sum += arg;
return sum;
>
let x = sum(4, 9, 16, 25, 29, 100, 66, 77);
Array.find()
Метод find() возвращает значение первого элемента массива , который проходит тестовую функцию.
В этом примере выполняется поиск (возвращается значение) первого элемента больше 18:
Пример
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) return value > 18;
>
Обратите внимание, что функция принимает 3 аргумента:
- Значение позиции
- Индекс позиции
- Сам массив
Array.findIndex()
Метод findIndex() возвращает индекс первого элемента массива, который проходит тестовую функцию.
В этом примере выполняется поиск индекса первого элемента, который больше 18:
в настоящее время я пишу веб-приложение, используя средний стек, и пытаюсь написать код в ECMAScript 6 JavaScript; однако я получаю ошибки как в Chrome, так и в Firefox при использовании синтаксиса импорта и экспорта. Есть ли в настоящее время какие-либо браузеры, которые полностью поддерживают ECMAScript 6?
поддержка Chrome и Firefox import и export синтаксис (существуют тесты для правильный анализ).
не поддерживается загрузка модуля - вы не можете загрузить модуль любыми средствами, потому что спецификация для него не завершена. Для этого вы должны использовать какой-то модуль bundler. Я не front-end разработчик, но я слышал хорошие мнения о свернуть из моих коллег.
Он поддерживается в:
вот тут pollyfill который вы можете использовать для импорта модуля ES6.
Я успешно протестировал его на Chrome.
Он также реализован изначально в Edge 14:
как уже говорили другие, поддержка по-прежнему очень ограничено. Но даже при полной поддержке. будет ли разумно использовать его? Как мы это сделаем?
подумайте об этом. Типичное приложение JS, написанное с модулями Node JS, легко содержит десятки, даже сотни (очень маленьких) пакетов. Нам действительно нужно так много запросов?
Browserify, Webpack, Rollup и т. д. настолько популярны, потому что они позволяют нам связывать много небольших пакетов в одну быструю загрузку. С разделение кода мы можем позволить модулю bundler решить во время транспиляции, основываясь на коде, который наши страницы фактически используют, и на некоторых настройках конфигурации, сколько пакетов создать и что поместить в каждый из них. Таким образом, мы можем написать много маленький пакеты и служат им в качестве (нескольких) больших пакетов.
Я считаю, что мы должны разделить наш код на пакеты, которые хорошо работают на концептуальном уровне, а затем объединить эти пакеты в пакеты, которые хорошо работать на техническом (сетевом) уровне. Если мы напишем наш код на основе оптимального размера сетевого пакета, мы в конечном итоге пожертвуем модульностью в этом процессе.
тем временем, использование его, вероятно, только добавит путаницы. Например, посмотрите пример в блоге Edge:
обратите внимание, как они добавить расширение .js до from строку? В узле JS мы обычно пишем это как:
таким образом, приведенный выше код также будет работать на Edge? А насчет именованные пакеты? Я боюсь, что мы увидим много несовместимости здесь, прежде чем мы поймем, как заставить эти пути работать по всем направлениям.
Я бы рискнул предположить, что для большинства разработчиков, System.import останется в основном невидимым в браузерах, и только само программное обеспечение начнет использовать его (для целей эффективности), когда оно станет основным.
пока не используйте модули ES6 (т. е. export и import ключевые слова), как их семантика еще не завершена. Обратите внимание, что эта политика будет Повторите, как только семантика будет полностью стандартной.
однако, import и export реализованы во многих транспилерах, таких как компилятор Traceur, Babel или Rollup.
ES5, ES6 краткое описание и обзор поддержки браузера
Фронтальная разработка неотделима от языка JavaScript, и ECMAScript тесно связан с ним.
1. Что такое ECMAScript?
Выдержка из энциклопедии BaiduECMAScript - это язык программирования сценариев, стандартизированный Ecma International (ранее известная как Европейская ассоциация производителей компьютеров, английское название - Европейская ассоциация производителей компьютеров) через ECMA-262. Здесь и далее именуемые ES и JS. Проще говоря, ES - это языковой стандарт для JS. ES постоянно развивается. В настоящее время мы больше подвержены ES5 и ES6 (ES6 также называется ES2015).
2. Краткое введение в ES5
2.1 Сначала поговорим о проблемах совместимости
Caniuse можно запросить сверху, обзор совместимости ES.
Основные браузеры описаны ниже:
IE: Вы можете видеть, что IE6 и IE7 вообще не поддерживаются. IE8 поддерживает только некоторое содержимое, ссылка 4, IE9 поддерживает большую часть содержимого, поддержка ссылка 2
Chrome: Chrome версии 23 полностью поддерживается. Существуют несовместимости между версиями 19
22, см. Ссылку 1.
Firefox: После Firefox 21 версия полностью поддерживается. Существуют несовместимости между версиями 4-20, см. Ссылку 1.
Другие ссылки на браузеры caniuse：
【1】Does not support parseInt() ignoring leading zeros.
【2】Does not support Strict mode.
【3】Does not support zero-width chars in identifiers & Immutable undefined.
【4】IE8 has virtually no ES5 support, but does support Object.defineProperty, Object.getOwnPropertyDescriptor, JSON parsing & Property access on strings.
2.2 Каковы новые функции ES5?
2.2.1 Строгий режим
Строгий режим - это новая функция ECMAScript 5, которая позволяет поместить всю программу или функцию в «строгий» рабочий контекст. Метод использования состоит в том, чтобы добавить такое утверждение в начале области.
2.2.2 Новые методы объекта
(1) Object.create () создаетНазначенный прототипИ может дополнительно содержать объекты с указанными атрибутами
(2) Object.getPrototypeOf () возвращает объектпрототип
(3) Object.getOwnPropertyNames () возвращает все указанные объектыСобственное имуществоНазвание объекта (Включая не перечисляемые атрибуты) Состоит измассив
(4) Object.keys () возвращаетПеречислимые свойствакомпонентмассив, И при использовании цикла for-in он также будет перечислять егоПрототип цепиНа имущество.
(5) Object.defineProperty () определяет новое свойство объекта или изменяет существующее свойство и возвращает этот объект
(6) Object.defineProperties () Добавьте или измените одно или несколько собственных свойств объекта и верните объект
(7) Object.getOwnPropertyDescriptor () возвращает дескриптор свойства, соответствующий собственному свойству объекта (свойство, которое не нужно искать в цепочке прототипов). Если указанное свойство существует в объекте, оно возвращает дескриптор своего свойства (дескриптор свойства), в противном случае возвращает неопределенное
(8) Object.seal () запечатывает объект и возвращает запечатанный объект. Запечатанные объекты не могут добавлять новые свойства, не могут удалять существующие свойства и не могут изменять перечисляемые, настраиваемые и доступные для записи свойства, но могут изменять значение существующих свойств.
(9) Object.isSealed (), чтобы определить, является ли объект запечатанным
(10) Object.freeze () замораживает объект, который является более строгим, чем печать, и не может изменить значение
(11) Object.isFrozen () определяет, заморожен ли объект
(12) Object.preventExtensions () делает объект нерасширяемым, то есть новые свойства никогда не могут быть добавлены
(13) Object.isExtrensible () Определите, является ли объект расширяемым
(14) prototype.isPrototypeOf (object) Определить, существует ли объект в цепочке прототипов другого объекта.
(15) object.propertyIsEnumerable (propertyName) определяет, можно ли перечислить указанное свойство
2.2.3 Массив новый метод
(1) Array.isArray () используется для определения, является ли переданное значение массивом.
(2) Array.prototype.every (callback [, thisArg]) проверяет, все ли элементы массива прошли проверку указанной функции.
Обратный вызов : функция, используемая для проверки каждого элемента массива. Используйте параметры (элемент, индекс, массив) при вызове. Вернуть true, чтобы сохранить элемент (пройти тест), false не сохранить
thisArg: необязательно. Значение, используемое для этого при выполнении обратного вызова.
(3) Array.prototype.filter (callback [, thisArg]) создает новый массив, который содержит все элементы теста, реализованные предоставленной функцией. Это функция фильтра.
(4) Array.prototype.forEach (callback [, thisArg]) выполняет предоставленную функцию один раз для каждого элемента массива.
(5) Array.prototype.indexOf (searchElement, fromIndex) возвращает первый индекс, где данный элемент может быть найден в массиве, или -1, если он не существует
(6) Array.prototype.lastIndexOf () возвращает индекс последнего элемента в массиве указанного элемента (то есть допустимого значения или переменной JavaScript) или -1, если он не существует Посмотрите вперед с задней части массива, начиная с fromIndex.
(7) Array.prototype.map () создает новый массив, и результатом является результат, возвращаемый каждым элементом в массиве после вызова предоставленной функции.
(8) Array.prototype.reduce () выполняет функцию обратного вызова для каждого элемента массива слева направо и возвращает совокупный результат обработки.
(9) Направление выполнения Array.prototype.reduceRight () и Array.prototype.reduce () противоположно.
(10) Array.prototype.some () проверяет, проходят ли определенные элементы массива тест, реализованный предоставленной функцией. Каждый () означает, что все элементы удовлетворяют условию, и пока любой элемент удовлетворяет условию.
2.2.4 Строковый новый метод
（1）String.prototype.trim()Пустые символы будут удалены с обоих концов строки. Символы пробела в этом контексте - это все символы пробела (пробел, табуляция, пробел без пробелов и т. Д.) И все символы окончания строки (например, LF, CR).
2.2.5 Дата нового метода
（1）Date.now()Вернуть количество миллисекунд с 1 января 1970 года 00:00:00 UTC до текущего времени.
2.2.6 объекты JSON
（1）JSON.parse()Используется для анализа строк JSON и создания значений или объектов JavaScript, описываемых строками.
（2）JSON.stringify()Преобразуйте значение JavaScript (объект или массив) в строку JSON.
Выше приведено краткое описание основных новых функций ES5. Давайте посмотрим на новые функции ES6.
3. Краткое описание ES6 (ES2015)
Поддержка различных функций ES6 относительно хорошо, вы можете запросить caniuse в соответствии с конкретными характеристиками
3.1 ES6 новые функции
（2）constОбъявите постоянную только для чтения. После объявления значение константы не может быть изменено.
(3) Разрушающее присваивание массива
(4) Разрушающее присваивание объектов
(5) функция стрелки=>
（6）PromiseОбъекты - это решение для асинхронного программирования. Объект Promise представляет асинхронную операцию, существует три состояния: ожидает (выполняется), выполнено (успешно) и отклонено (не выполнено).
Основное использование - создание экземпляра Promise,
После того, как экземпляр Promise создан, вы можете использовать метод then, чтобы указать функцию обратного вызова для разрешенного и отклоненного состояний соответственно.
(7) Синтаксис класса:
Включая конструктор, get, set и другие классические методы функций.
(8) Синтаксис модуля:
Включая импорт и экспорт классических модулей, таких как импорт и экспорт.
Интеллектуальная рекомендация
WECHAT MILLY WAY POINT CAMENT CARD - СОВРЕМЕННЫЕ СТРАНИЦЫ ПРОГЛЯЮТНОЕ ЗНАЧЕНИЕ (Запрос)
WECHAT Small Pass Pass Value и значение приобретения: 1. Установите способ настройки идентификатора идентифицирует значение параметра, передаваемое после прыжка; 2, используя метод Data-XXXX для идент.
Текущая задача Узел больше экземпляров
[Linux] Программирование сетевых сокетов UDP
Что такое протокол UDP Протокол UDP называетсяПротокол пользовательских датаграмм UDP - протокол транспортного уровня Без установления соединения, ненадежная передача, ориентированная на дейтаграмму П.
Основная идея обработки больших данных - разделяй и властвуй
Разделяй и властвуй - «разделяй и властвуй» Как мы все знаем, компьютеры очень быстрые и используются людьми. Однако независимо от того, насколько быстрым является компьютер, способность о.
Читая статьи про Javascript новички (да и я собственно) часто сталкиваются c аббревиатурами такими как эти:
- ES3
- ES5
- ES6
- ES7
- ES8
- ES2015
- ES2016
- ES2017
- ECMAScript 2017
- ECMAScript 2016
- ECMAScript 2015
Что это все значит?
Все это относится к описанию стандарта, который называется ECMAScript По сути, ECMAScript — это стандарт на котором базируется язык JavaScript, и часто для сокращения его обозначают как ES.
История стандартизации JavaScript
Дело в том что JavaScript был выпущен в компании NetScape Navigator в 1995 году, но его изначальное название было другим — LiveScript. Лишь через год, в попытках придать ему больший охват и популярность его переименовали в JavaScript, пытаясь сыграть на популярном в то время языке Java.
в 1996 году NetScape попросил ECMA International стандартизировать JavaScript. Это привело к появлению официального стандарта ECMAScript.
С тех самых пор термин JavaScript применяется в контексте упоминания самого языка программирования, а ECMAScript — когда говорят о стандарте языка или версии этого стандарта.
До начала 21 века было выпущено 3 версии стандарта ECMAScript и затем на целое десятилетие все затихло…
ECMAScript 3 стала наиболее популярной версией JavaScript и именно ее традиционно использовали веб-разработчики по всему миру при создании сайтов.
Для разработчиков браузеров стандарт ECMAScript по сути является руководством: какие функции и конструкции языка должны поддерживаться и выполняться браузером
За десять лет после выхода третей версии стандарта была неудачная попытка выпуска 4 версии, и лишь в 2009 году комитет смог родить ECMAScript 5 — стандарт, который предусматривал новые/современные возможности JavaScript… Но браузеры не особо быстро отреагировали, а значительная доля пользователей браузера от MicroSoft — Internet Explorer тормозило внедрение и использование новых стандартов языка.
Новый JavaScript
Все стало меняться в 2012 году, разработчики стали в большинстве своем отказываться поддерживать Internet Explorer и писать код с учетом последних стандартов.
Одновременно, ECMA International подхватила активность, пересмотрев свой подход к стандартизации языка.
В результате в 2015 году был «рожден» новый стандарт получивший сокращенное название ES и согласно исторической последовательности версии присвоили 6 — в итоге получилось ES6.
Новые возможности ES6
Также значительным прорывом стало то что комитет принял решение о ежегодном пересмотре и выпуске стандарта, в результате начиная с 2015 года мы каждый год получаем новый стандарт ECMAScript.
Для лучшего понимая исторической последовательности развития JavaScript и его стандартов смотрите табличку ниже:
Даты релиза различных версий Javascript
| Издание | Официальное название | Дата публикации |
|---|---|---|
| ES8 | ES2017 | июнь 2017 |
| ES7 | ES2016 | июнь 2016 |
| ES6 | ES2015 | июнь 2015 |
| ES5.1 | ES5.1 | июнь 2011 |
| ES5 | ES5 | декабрь 2009 |
| ES4 | ES4 | отменен |
| ES3 | ES3 | декабрь 1999 |
| ES2 | ES2 | июнь 1998 |
| ES1 | ES1 | июнь 1997 |
На сегодняшний день наибольшей поддержкой в браузерах обладает версия ES6 (ECMAScript 2015) однако наличие современного инструментария для разработки (транспайлеры JS) позволяет разработчикам писать код на той версии которая им больше подходит.
Как определить поддержку стандартов браузерами
C выход ES6 и последующих версий, остро встал вопрос, а будет ли новый стандарт и сами новые возможности языка работать в браузере, ведь они должны поддерживаться браузером, чтобы написанный нами современный код на JavaScript отработал в нем.
На момент выхода стандарта естественно что браузеры не поспевали за ним, но на сегодняшний день все обстоит намного лучше, ну кроме конечно Internet Explore =(
Как не сложно заметить, на сегодня ES6 достаточно хорошо уже адаптирован браузерами и широко ими поддерживается, однако разработчику уже во всю используют не только ES6 но и ES7 и в принципе любят юзать те возможности которые выкатываются со стандартами…
Но чтобы код работал в любом браузере в независимости от стандарта его написания на заре появления ES6 возник Babel, без которого по сути сейчас не обходится работа любого frontend-разработчика.
Что такое Babel и зачем он?
Babel это транспайлер, специальный инструмент разработчика, который преобразует код JavaScript написаный более современным стандартом, в код более старого стандарта, который поддерживается большинством браузеров.
Казалось бы, ES6 уже поддерживается большинством браузеров в 2020 году, кому еще нужен Babel? Но в текущее время современный код с асинхронностью и прочим уже вышел за рамки ES6 и использует более новые версии стандарта. Плюс с приходом JS фреймворков и их активным внедрением, для их понимания браузером (например того же React) Babel стал необходим еще больше, т.к. напрямую код React в браузере не отработает, ввиду чего его нужно преобразовать при помощи Babel.
Ну и кто более глубже хочет погрузится в понимание современного JS может посмотреть видео ниже:
Читайте также: