Эта статья даст вам более глубокое понимание ES6 и узнает о новых возможностях ES6. Надеюсь, она будет вам полезна!
Вход в курс повышения квалификации по интерфейсу (vue): введите обучение
ECMAScript— это脚本语言的标准化规范разработанная Netscape, первоначально называвшаясяMocha, позже переименованная вLiveScriptи, наконец, переименованная вJavaScript
ECMAScript 2015 (ES2015), версия 6, первоначально известная как ECMAScript 6 (ES6), добавляет новые функции.
Область видимости блока ES6 let
Во-первых, что такое масштаб? Область действия просто означает объявление переменной. Действительная область действия этой переменной — до того, как придет let . js имеет только全局作用域и函数作用域var , а ES6 добавляет в js块级作用域.
{
вар а = "?";
пусть б = "⛳";
}
console.log(а);
console.log(б);? Неперехваченная ошибка ссылки: b не определен
Как видите, мы используем ключевое слово var для определения переменной a в блоке. Фактически, к ней можно получить глобальный доступ. Следовательно, var声明的变量是全局的, но мы хотим, чтобы переменная вступила в силу в блоке и была. Нет, тогда вы можете использовать новое ключевое слово уровня блока let в ES6 , чтобы объявить переменную a. Когда я снова обращаюсь к ней, выдается сообщение об ошибке, говорящее, что a is not defined , a не определено.
Как показано ниже, сначала определите функцию, которая возвращает массив. Прежде чем использовать деструктурированный массив, вызовите массив и присвойте возвращаемое значение temp, а затем распечатайте временный массив. После использования解构数组непосредственно определите переменную массива и. то возвращаемое значение функции указывает на переменную. Она автоматически присваивает значение первого элемента первой переменной массива, второго элемента - второй переменной массива и т. д. Наконец, три переменные печатаются, и нет. проблема.
функция завтрак() {
возвращаться ['?', '?', '?'];
}
вар темп = завтрак ();
console.log(temp[0], temp[1], temp[2]);
пусть [a, b, c] = завтрак();
console.log(а, б, в);? ?
Сначала функция breakfast возвращает对象. Используйте解构对象для определения объекта. Ключ в паре ключ-значение представляет собой имя ключа фактического сопоставленного объекта. После завершения деструктуризации происходит присвоение. будет завершено автоматически. Затем вызывается функция завтрака для возврата объекта. Затем выведите переменные a, b, c, и вы увидите, что проблем нет.
функция завтрак() {
return { a: '?', b: '?', c: '?' }
}
let { a: a, b: b, c: c } = завтрак();
console.log(а, б, в);?
Прежде чем использовать строку шаблона, мы объединяем строковые переменные, используя +
Используйте строку шаблона, предоставленную ES6. Сначала используйте `` для переноса строки. Если вы хотите использовать переменные, используйте ${变量}
пусть a = '?',
б = '?️';
let c = «Ешь сегодня» + a + «Посмотри после еды» + b;
консоль.журнал (с);
let d = `Съешьте ${a} сегодня и посмотрите после еды ${b}`;
console.log(d);Поедите сегодня? Посмотрим после еды?️ Поедите сегодня? Посмотрим после еды?️
Используя эти функции, вы можете легко выполнять такие операции, как определение того, начинается ли строка с чего-либо, заканчивается ли она чем-либо и содержит ли она какую-либо строку.
let str = 'Привет, я Сяо Чжоу ❤️';
console.log(str.startsWith('Привет'));
console.log(str.endsWith('❤️'));
console.log(str.endsWith('Привет'));
console.log(str.includes(" "));истинный истинный ЛОЖЬ истинный
В ES6 вы можете использовать параметры по умолчанию. Если при вызове функции параметру не присвоено значение, он будет выполнен с использованием установленных параметров по умолчанию. Когда параметру присвоено значение, оно будет выполнено с использованием вновь назначенных. значение, перезаписывая значение по умолчанию. Используйте следующее:
функция сказать(строка) {
console.log(стр);
}
functionsay1(str = 'Эй') {
console.log(стр);
}
сказать();
сказать1();
сказать1('❤️');неопределенный Эй, эй❤️
Используйте ... для расширения элементов для удобства работы. Используйте следующим образом:
let arr = ['❤️', '?', '?']; console.log(обр); console.log(...arr); let brr = ['Принц', ...arr]; console.log(брр); console.log(...брр);
[ '❤️', '?', '?' ] ❤️ ? [ 'Принц', '❤️', '?', '?' Принц ❤️ ?
Оператор ... используется для параметров функции и получает массив параметров. Он используется следующим образом:
функция f1(a, b, ...c) {
console.log(а, б, в);
console.log(a, b, ...c);
}
f1('?','?','☃️','㊙️');? [ '☃️', '㊙️' ] ? ☃️ ㊙️
Вы можете использовать .name для получения имени функции. Конкретное использование выглядит следующим образом:
функция f1() { }
console.log(f1.name);
пусть f2 = функция () { };
console.log(f2.name);
пусть f3 = функция f4() { };
console.log(f3.name);ф1 f2 f4
Использование стрелочных функций может сделать код более лаконичным, но необходимо также обратить внимание на ограничения стрелочных функций, а сама стрелочная функция этого не имеет, это указывает на родителя
пусть f1 = a => a;
пусть f2 = (a, b) => {
вернуть а + б;
}
console.log(f1(10));
console.log(f2(10, 10));10 20
Используя объектное выражение es6, если атрибут объекта совпадает со значением, значение можно опустить, а function можно опустить при написании функции. Использование следующее:
let a = '㊙️';
пусть b = '☃️';
константный объект = {
а: а,
б: б,
скажем: функция () {
}
}
константа es6obj = {
а,
б,
сказать() {
}
}
console.log(объект);
console.log(es6obj); { a: '㊙️', b: '☃️', скажем: [Функция: сказать] }
{ a: '㊙️', b: '☃️', скажем: [Функция: сказать] } Используйте ключевое слово const для определения измерения. const ограничивает действие присвоения значений измерению, но не ограничивает значение в измерении. Используйте следующее:
const app = ['☃️', '?'];
console.log(...приложение);
app.push('?');
console.log(...приложение);
приложение = 10;Вы можете видеть, что при повторном присвоении значения измерению выдается сообщение об ошибке.
☃️ ? ☃️ ? приложение = 10; ^ TypeError: присвоение постоянной переменной.
При использовании точек для определения атрибутов объекта, если имя атрибута содержит пробелы, это незаконно, и синтаксис не может быть передан. Использование [属性名] может полностью решить проблему, и имя атрибута можно не только записать напрямую, но и. можно указать с помощью переменных. Конкретное использование заключается в следующем:
пусть объект = {};
let a = 'маленькое имя';
obj.name = 'Принц';
// Использование точек для определения атрибутов с пробелами посередине запрещено // obj.little name = 'Little Prince';
obj[a] = 'Маленький принц';
console.log(объект); { name: «Принц», «маленькое имя»: «Маленький принц» } Результаты сравнения некоторых специальных значений с использованием === или == могут не соответствовать вашим потребностям. Вы можете использовать Object.is(第一个值，第二个值) чтобы судить, и вы можете посмеяться.
console.log(NaN == NaN); console.log(+0 == -0); console.log(Object.is(NaN, NaN)); console.log(Object.is(+0, -0));
ЛОЖЬ истинный истинный ЛОЖЬ
Используйте Object.assign() для копирования одного объекта в другой объект следующим образом:
пусть объект = {};
Object.assign(
// исходный объект,
//Копируем целевой объект { a: '☃️' }
);
console.log(объект); { а: '☃️' }Вы можете использовать es6 для установки прототипа объекта следующим образом:
пусть объект1 = {
получать() {
возврат 1;
}
}
пусть объект2 = {
а: 10,
получать() {
возврат 2;
}
}
пусть тест = Object.create(obj1);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
Object.setPrototypeOf(test, obj2);
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);1 истинный 2 истинный
пусть объект1 = {
получать() {
возврат 1;
}
}
пусть объект2 = {
а: 10,
получать() {
возврат 2;
}
}
пусть тест = {
__proto__:obj1
}
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
test.__proto__ = obj2;
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);1 истинный 2 истинный
пусть объект1 = {
получать() {
возврат 1;
}
}
пусть тест = {
__proto__: объект1,
получать() {
return super.get() + ' ☃️';
}
}
console.log(test.get());1 ☃️
Прежде чем учиться, сначала напишите итератор
функция die(arr) {
пусть я = 0;
возвращаться {
следующий() {
let Done = (i >= arr.length);
пусть значение =! сделано? arr[i++]: неопределенно;
возвращаться {
ценность: ценность,
сделано: сделано
}
}
}
}
let arr = ['☃️', '?', '?'];
пусть dieArr = die(arr);
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next()); { значение: '☃️', выполнено: ложь }
{ значение: '?', выполнено: ложь }
{ значение: '?', выполнено: ложь }
{ значение: неопределенное, выполнено: правда }Хорошо, давайте посмотрим на упрощенный генератор
функция* die(arr) {
for (пусть я = 0; я <arr.length; i++) {
выход arr[i];
}
}
let test = die(['?','☃️']);
console.log(test.next());
console.log(test.next());
console.log(test.next()); { значение: '?', выполнено: ложь }
{ значение: '☃️', выполнено: ложь }
{ значение: неопределенное, выполнено: правда }Используйте es6 для быстрого и удобного создания классов, отлично!
класс обучения {
конструктор(имя) {
это.имя = имя;
}
сказать() {
return this.name + 'Say Ori';
}
}
let xiaoming = new stu("小明");
console.log(xiaoming.say());Сяо Мин сказал, что Ори дал
Определите методы get/set для получения или изменения атрибутов класса.
класс обучения {
конструктор(имя) {
это.имя = имя;
}
получать() {
вернуть это.имя;
}
набор (новаяStr) {
это.имя = новаяStr;
}
}
let xiaoming = new stu("小明");
console.log(xiaoming.get());
xiaoming.set("Дамин")
console.log(xiaoming.get());Сяо Мин и Да Мин
Методы, измененные с помощью ключевого слова static, можно использовать напрямую, без создания экземпляра объекта.
класс обучения {
статический сказать (строка) {
console.log(стр);
}
}
stu.say("Оригинальный статический метод");Статический метод Ориги
Использование наследования может уменьшить избыточность кода, например:
класс Человек {
конструктор(имя, бир) {
это.имя = имя;
this.бир = бир;
}
шоуИнфо() {
return 'Имя:' + this.name + 'День рождения:' + this.bir;
}
}
класс A расширяет Person {
конструктор(имя, бир) {
супер(имя, бир);
}
}
let zhouql = new A("Чжоу Цилуо", "01.06.2002");
// У самого Чжоу Цилуо нет метода showInfo, он унаследован от Person console.log(zhouql.showInfo());Имя: Чжоу Цилуо День рождения: 1 июня 2002 г.
Коллекция Set, в отличие от массивов, не допускает дублирования элементов в коллекции Set.
//Создаем коллекцию Set let food = new Set('??');
// Добавляем повторно, в food.add('?'); можно использовать только один раз.
food.add('?');
console.log(еда);
//Текущий размер коллекции console.log(food.size);
// Определяем, существует ли элемент в коллекции console.log(food.has('?'));
// Удалить элемент в коллекции food.delete('?');
console.log(еда);
// Проходим по коллекции food.forEach(f => {
console.log(ф);
});
// Очищаем коллекцию food.clear();
console.log(еда); Set(3) { '?', '?', '?' }
3
истинный
Set(2) { '?', '?' }
?
?
Установить(0) {}Карта объединяется для хранения пар ключ-значение.
пусть еда = новая карта();
пусть a = {}, b = function () { }, c = «имя»;
food.set(а, '?');
food.set(b, '?');
food.set(b, '?');
food.set(c, 'рис');
console.log(еда);
console.log(food.size);
console.log(food.get(a));
еда.удалить(с);
console.log(еда);
console.log(food.has(a));
food.forEach((v, k) => {
console.log(`${k} + ${v}`);
});
еда.очистить();
console.log(еда); Map(3) { {} => '?', [Function: b] => '?', 'name' => 'рис' }
3
?
Map(2) { {} => '?', [Функция: b] => '?' }
истинный
[объект Объект] + ?
функция () { } + ?
Карта(0) {}Используя модульную разработку, es6 может легко импортировать и экспортировать некоторый контент, а также экспортировать по умолчанию и другие детали.
пусть a = '?';
let f1 = function (str = 'Ваши параметры') {
console.log(стр);
}
экспорт {а, f1}; импортировать {a, f1} из './27moduletest.js';
console.log(а);
f1();
f1('понял');