Недавно я просматриваю ES 6. Для новых точек знаний ES 6 я организую исчерпывающую сводку знаний и вопросов в форме вопросов и ответов.
1. В: Что такое ES6, почему мы должны его изучать и что произойдет, если мы не изучим ES6?
Ответ: ES6 – это новое поколение языковых стандартов JS. В нем обновлено и оптимизировано основное содержание языка JS, стандартизировано использование JS и добавлены нативные методы JS, что делает использование JS более стандартизированным, элегантным и т. д. подходит для разработки крупномасштабных приложений. Изучение ES6 — единственный способ стать профессиональным фронтендером. Вы можете писать код для борьбы с дьяволами, не изучая ES6, но в лучшем случае вы можете быть только партизанским капитаном.
2. В: В чем разница между ES5, ES6 и ES2015?
О: ES2015 конкретно относится к новому поколению языковых стандартов JS, выпущенных в 2015 году, а ES6 обычно относится к следующему поколению языковых стандартов JS, включая ES2015, ES2016, ES2017, ES2018 и т. д. На данном этапе в большинстве сценариев ES2015 по умолчанию эквивалентен ES6. ES5 обычно относится к языковым стандартам предыдущего поколения. ES2015 можно понимать как временную границу между ES5 и ES6.
3. В: Что такое babel и что он делает?
Ответ: babel — это транскодер ES6, который может преобразовывать код ES6 в код ES5 для совместимости с платформами, которые еще не поддерживают ES6.
4. Q: Какая польза от let, зачем использовать let, когда у нас есть var?
Ответ: До ES6 для объявления переменных можно было использовать только var. На самом деле очень неразумно объявлять переменные в var. Точнее, очень неразумно, потому что в ES5 нет блочной области видимости. Можно даже сказать, быть уровнем языка (это также один из недостатков многих разработчиков C++ и Java, которые не могут понять и смотреть на язык JS свысока). Без области видимости на уровне блоков будет много непонятных проблем, таких как утечка переменных for loop var, перезапись переменных и т. д. переменная, объявленная letИмеет собственную область действия блока, и исправляет объявление переменных varпеременная задача подъема.
5. Вопрос: Какие общие оптимизации обновления ES6 делает для типа String?
отвечать:
1. Часть оптимизации:
ES6 добавляет новый строковый шаблон.При объединении больших строк обратная косая черта (`) используется для замены предыдущей формы добавления строки, которая может сохранять все пробелы и новые строки, делая объединение строк более интуитивно понятным и более изящным.
2. Обновление части:
ES6 добавляет метод include() к прототипу String, который используется для замены традиционного метода, который может использовать indexOf только для поиска содержащихся символов (indexOf возвращает -1, чтобы указать, что это не так ясно, как метод include, возвращающий false, и семантика более ясна), кроме того, есть также новые методы, такие как startWith(), endWith(), padStart(), padEnd(), repeat() и т. д., которые можно легко использовать для поиска и завершения строк.
6. В: Назовите некоторые общие оптимизации обновления, сделанные ES6 для типов массивов Array?
отвечать:
1. Часть оптимизации:
a.Назначение деструктуризации массива. ES6 может напрямую начинаться сlet [a,b,c] = [1,2,3]Присвоение переменной в форме, при объявлении большего количества переменных вам не нужно писать много let (var), а отношение сопоставления понятно и поддерживает присвоение значений по умолчанию.
b.оператор спреда. Новый оператор расширения ES6 (...) (важно) может легко реализовать взаимное преобразование массивов и свободных последовательностей, может заменить объект arguments и метод apply и легко получить набор параметров, когда количество параметров неизвестно. (Особенно в ES5 аргументы — это не настоящий массив, а массивоподобный объект, но обратный оператор расширения может возвращать настоящий массив). Оператор распространения также может легко и удобно реализовать копирование массива и присваивание деструктуризации (let a = [2,3,4]; let b = [...a]).
2. Обновление части:
ES6 добавляет метод find() к прототипу Array, который используется для замены традиционного метода, который может использовать indexOf только для поиска элементов, содержащих массивы, и исправляет ошибку, из-за которой indexOf не может найти NaN ([NaN].indexOf(NaN) === -1). Кроме того, добавлены такие методы, как copyWithin(), include(), fill(), flat(), которые можно легко использовать для поиска строк, завершения, преобразования и т. д.
7. В: Назовите некоторые общие оптимизации обновления, сделанные ES6 для числового типа Number?
отвечать:
1. Часть оптимизации:
ES6 добавляет методы isFinite(), isNaN() к прототипу Number, которые используются для замены традиционных глобальных методов isFinite(), isNaN() для определения того, является ли значение конечным и является ли оно NaN. Методы ES5 isFinite() и isNaN() сначала преобразуют параметры нечислового типа в числовой тип, прежде чем выносить суждения, что на самом деле неразумно и наносит наибольший ущерб.isNaN('NaN') === trueСтранное поведение — «NaN» — это строка, но isNaN говорит, что это NaN. У Number.isFinite() и Number.isNaN() таких проблем нет (Number.isNaN('NaN') === false). (isFinite() то же, что и выше)
2. Обновление части:
ES6 добавляет Math.cbrt(), trunc(), hypot() и многие другие методы работы с научными обозначениями к объекту Math, которые могут более полно выполнять научные вычисления, такие как кубический корень, сумма кубического корня и т. д.
8. В: Назовите некоторые общие оптимизации обновления, сделанные ES6 для типов объектов? (Важно)
отвечать:
1. Часть оптимизации:
a.Объявление переменной свойства объекта. ES6 может объявлять свойства или методы объектов непосредственно как переменные. По сравнению с традиционным объявлением формы пары ключ-значение, это более лаконично, удобно и имеет более ясную семантику.
let [apple, orange] = ['red appe', 'yellow orange'];
let myFruits = {apple, orange}; // let myFruits = {apple: 'red appe', orange: 'yellow orange'};
Особенно в случае присваивания деструктуризации объекта (см. раздел оптимизации b.) или выходных переменных модуля преимущества такого способа записи наиболее очевидны:
let {keys, values, entries} = Object;
let MyOwnMethods = {keys, values, entries}; // let MyOwnMethods = {keys: keys, values: values, entries: entries}
Вы можете видеть, что атрибут объявления переменной атрибута выглядит более лаконичным и понятным. Методы также можно записать лаконично:
let es5Fun = {
method: function(){}
};
let es6Fun = {
method(){}
}
b.Деструктурирующее присвоение объектов. Объекты ES6 также могут выполнять назначения деструктурирования переменных, такие как назначения деструктурирования массива:
let {apple, orange} = {apple: 'red appe', orange: 'yellow orange'};
c.Оператор распространения (...) для объектов. Использование оператора распространения объекта ES6 и оператора распространения массива по сути не сильно отличается, в конце концов, массивы — это специальные объекты. Одним из наиболее распространенных и лучших применений оператора распространения объекта является то, что он может легко удалить все или часть проходимых свойств внутри целевого объекта, чтобы объединить и разложить объекты.
let {apple, orange, ...otherFruits} = {apple: 'red apple', orange: 'yellow orange', grape: 'purple grape', peach: 'sweet peach'};
// otherFruits {grape: 'purple grape', peach: 'sweet peach'}
// 注意: 对象的扩展运算符用在解构赋值时，扩展运算符只能用在最后一个参数(otherFruits后面不能再跟其他参数)
let moreFruits = {watermelon: 'nice watermelon'};
let allFruits = {apple, orange, ...otherFruits, ...moreFruits};
d.ключевое слово супер. ES6 добавляет ключевое слово, похожее на это, в класс Class. В отличие от этого, которое всегда указывает на объект, в котором находится текущая функция, ключевое слово super всегда указывает на объект-прототип объекта, в котором находится текущая функция.
2. Обновление части:
a.ES6 добавляет метод is() к прототипу Object для выполнения сравнения двух целевых объектов на равенство, чтобы улучшить метод '==='. метод '==='NaN === NaN //false 其实是不合理的，Object.is修复了这个小bug。 (Object.is(NaN, NaN) // true)
b.ES6 добавляет метод ASSIGN() к прототипу объекта, который используется для добавления атрибутов или объединения нескольких объектов.
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
Примечание. Цель, объединенная с помощью assign, может объединять только свои собственные атрибуты в source1 и source2 и не будет объединять унаследованные атрибуты в source1 и source2, а также не будет объединять неперечисляемые атрибуты и не может правильно копировать атрибуты get и set (будет выполняться напрямую). функцию get/set и принять возвращаемое значение).
c.ES6 добавляет к прототипу Object метод getOwnPropertyDescriptors(), который улучшает метод getOwnPropertyDescriptor() в ES5 и может получать объекты описания всех собственных свойств указанного объекта. В сочетании с методом defineProperties() можно идеально копировать объекты, включая получение и установку свойств.
d.ES6 добавляет методы getPrototypeOf() и setPrototypeOf() к прототипу объекта, чтобы получить или установить объект-прототип текущего объекта. Значение этого метода заключается в том, что получение и настройка объектов-прототипов в ES5 достигается через атрибут __proto__ Однако атрибут __proto__ не является атрибутом, указанным в спецификации ES, а «приватно» основных производителей браузеров. используются только по умолчанию из-за их широкого спектра применения, и их нельзя использовать в небраузерных средах.Поэтому в целях безопасности при получении или установке объекта-прототипа текущего объекта в ES6 добавлено новое стандартное использование.
d.ES6 также добавляет к прототипу объекта методы Object.keys(), Object.values() и Object.entries(), которые используются для получения всех ключей, всех значений и всех пар ключ-значение объекта.
9. Вопрос: Можете ли вы привести некоторые общие обновления и оптимизации, сделанные ES6 для типов функций Function? (Важно)
отвечать:
1. Часть оптимизации:
a.стрелочная функция(основной). Стрелочная функция является одним из элементов апгрейда ядра ES6.У стрелочной функции нет собственного this, что меняет механизм работы этой, самой непонятной в прошлых функциях JS. Основные моменты оптимизации:
Ⅰ.Это внутри функции стрелки указывает на объект, где функция была определена, а не на объект, где функция была выполнена. this в функциях ES5 всегда указывает на объект, где выполняется функция, что затрудняет понимание указания this во многих случаях, особенно в нестрогом режиме, это иногда указывает на глобальный объект, который можно даже отнести к Одна из ошибок на уровне языка. Стрелочная функция ES6 оптимизирует это.У нее нет собственного this внутри, что приводит к тому, что this всегда указывает на this предыдущего слоя.Если предыдущий слой все еще является стрелочной функцией, она будет продолжать указывать вверх, пока не укажет своему собственному Это функция this, и он используется как свой собственный this.
2. Стрелочную функцию нельзя использовать в качестве конструктора, потому что она не имеет собственного this и не может быть инстанцирована.
Ⅲ Также, поскольку стрелочная функция не имеет собственного this, в стрелочной функции нет объекта аргументов. (можно заменить оператором распространения)
b.Назначение функции по умолчанию. До ES6 формальному параметру функции нельзя было присвоить значение по умолчанию, и его можно было реализовать только с помощью обходного пути внутри функции. ES6 выполняет назначение функций по умолчанию более лаконичным и явным образом.
function es6Fuc (x, y = 'default') {
console.log(x, y);
}
es6Fuc(4) // 4, default
2. Обновление части:
В ES6 добавлен оператор с двойным двоеточием, чтобы заменить предыдущие операции привязки, вызова и применения. (Браузер пока не поддерживает, Babel уже поддерживает транскодирование)
foo::bar;
// 等同于
bar.bind(foo);
foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);
10. В: Что такое символ и что он делает?
Ответ: Symbol — это седьмой тип, введенный ES6.оригинальныйТип данных (утверждение неточно, это должен быть седьмой тип данных, Object не является одним из примитивных типов данных, это было исправлено), все значения, генерируемые Symbol(), уникальны, что может принципиально решить проблему. проблема слишком большого количества свойств объекта, вызывающая проблему покрытия конфликта имен свойств. Свойства Symbol() в объекте не могут повторяться с помощью for...in, но они также не являются частными свойствами.
11. В: Что такое Set и что он делает?
Ответ: Set — это новая структура данных, похожая на Array, введенную в ES6. Члены экземпляра Set аналогичны членам элемента массива. Разница в том, что члены экземпляра Set уникальны и не повторяются. Эта функция может легко реализовать дедупликацию массива.
12. В: Что такое Карта и что она делает?
Ответ: Map — это новая структура данных, аналогичная Object, введенной в ES6. Map можно понимать как надмножество Object, что нарушает определение объектов в виде традиционных пар ключ-значение. Ключ объекта больше не ограничен к строке, но также может быть и объектом. Свойства объекта могут быть описаны более полно.
13. В: Что такое прокси и какова его функция?
Ответ: Прокси — это новая функция-конструктор ES6, которую можно понимать как прокси языка JS.Он используется для изменения некоторых языковых поведений JS по умолчанию, включая перехват методов get/set по умолчанию и других базовых методов, позволяющих использовать JS больше свободы, что может удовлетворить потребности разработчиков в наибольшей степени. Например, перехватив метод get/set объекта, вы можете легко настроить нужный ключ или значение. Как вы можете видеть в следующем примере, любой ключ, определенный myOwnObj, можно превратить в нужную вам функцию.
function createMyOwnObj() {
//想把所有的key都变成函数，或者Promise,或者anything
return new Proxy({}, {
get(target, propKey, receiver) {
return new Promise((resolve, reject) => {
setTimeout(() => {
let randomBoolean = Math.random() > 0.5;
let Message;
if (randomBoolean) {
Message = `你的${propKey}运气不错，成功了`;
resolve(Message);
} else {
Message = `你的${propKey}运气不行，失败了`;
reject(Message);
}
}, 1000);
});
}
});
}
let myOwnObj = createMyOwnObj();
myOwnObj.hahaha.then(result => {
console.log(result) //你的hahaha运气不错，成功了
}).catch(error => {
console.log(error) //你的hahaha运气不行，失败了
})
myOwnObj.wuwuwu.then(result => {
console.log(result) //你的wuwuwu运气不错，成功了
}).catch(error => {
console.log(error) //你的wuwuwu运气不行，失败了
})
14. В: Что такое Reflect и что он делает?
Ответ: Reflect — это новый объект, представленный в ES6, у него две основные функции: одна — распространять некоторые нативные методы в объекте, функции или глобальных функциях (например, применить, удалить, получить, установить и т. д.), интегрированные в Reflect, что упрощает и делает более унифицированным управление некоторыми собственными API. Во-вторых, потому что Proxy может переписать нативный API по умолчанию.Если нативный API не переписан, его можно не найти.Поэтому Reflect также может играть роль резервного копирования нативного API, так что даже если нативный API будет переписан , его можно переписать. API использует API по умолчанию.
15. В: Что такое обещание и что оно делает?
Ответ: Promise — это новый объект, представленный в ES6, его основная функция — решить «ад обратных вызовов», порожденный механизмом обратных вызовов в асинхронном механизме JS. Это не революционный API, он просто инкапсулирует форму асинхронных обратных вызовов, делая асинхронные обратные вызовы более элегантными, более удобочитаемыми и сцепляемыми.
16. В: Что такое итератор и что он делает? (важный)
Ответ: Итератор — очень важное понятие в ES6, это не объект или какой-либо тип данных. Поскольку в ES6 добавлены типы Set и Map, они очень похожи на типы Array и Object. Оба массива и объекта могут быть пройдены, но Set и Map не могут быть пройдены с помощью циклов for. Есть два решения этой проблемы, одно из которых — отдельный API. для обхода добавляется для Set и Map, а другой — добавление унифицированного API обхода для Set, Map, Array и Object. Очевидно, что второй лучше, и ES6 просто идет по течению. Стандарт дизайна для унификации как обходятся все проходимые типы. Итератор является таким стандартом. Или нормативное понятие.
Подобно тому, как JavaScript является конкретной реализацией стандарта ECMAScript, конкретной реализацией стандарта Iterator является итератор Iterator. Стандарт Iterator предусматривает, что все развернутые ключевые значения — это [Symbol.iterator], а значение [Symbol.iterator] — это стандартная функция интерфейса Iterator (стандартная функция интерфейса Iterator: функция должна возвращать объект, а объект содержит метод next и выполнение next() может вернуть объект Iterator, содержащий атрибуты value/done), которые называются проходимыми объектами, а объект Iterator, возвращаемый после next(), также является итератором Iterator.
//obj就是可遍历的，因为它遵循了Iterator标准，且包含[Symbol.iterator]方法，方法函数也符合标准的Iterator接口规范。
//obj.[Symbol.iterator]() 就是Iterator遍历器
let obj = {
data: [ 'hello', 'world' ],
[Symbol.iterator]() {
const self = this;
let index = 0;
return {
next() {
if (index < self.data.length) {
return {
value: self.data[index++],
done: false
};
} else {
return { value: undefined, done: true };
}
}
};
}
};
ES6 добавляет метод [Symbol.iterator] к Set, Map, Array и String, а функция метода [Symbol.iterator] также соответствует стандартной спецификации интерфейса Iterator, поэтому Set, Map, Array и String могут быть пройдены с помощью по умолчанию. .
//Array
let array = ['red', 'green', 'blue'];
array[Symbol.iterator]() //Iterator遍历器
array[Symbol.iterator]().next() //{value: "red", done: false}
//String
let string = '1122334455';
string[Symbol.iterator]() //Iterator遍历器
string[Symbol.iterator]().next() //{value: "1", done: false}
//set
let set = new Set(['red', 'green', 'blue']);
set[Symbol.iterator]() //Iterator遍历器
set[Symbol.iterator]().next() //{value: "red", done: false}
//Map
let map = new Map();
let obj= {map: 'map'};
map.set(obj, 'mapValue');
map[Symbol.iterator]().next() {value: Array(2), done: false}
17. В: В чем разница между for...in и for...of?
Ответ: Если вы видите шестнадцатый вопрос, то это хороший ответ. В вопросе 16 упоминалось, что ES6 объединил стандарт обхода и сформулировал обходимые объекты, так какой метод используется для обхода? Ответ заключается в использовании for...of. ES6 предусматривает, что все объекты (обходные объекты), развернутые с помощью интерфейса Iterator, могут проходить через for...of, а for..in могут проходить только объекты.
Это также означает, что массив можно также обходить с помощью for...of, что значительно облегчает получение значения массива и позволяет избежать плохой привычки использовать for..in для обхода массива во многих программах.
Упомянутый выше оператор распространения по сути является реализацией цикла for..of.
18. Что такое функция генератора и что она делает?
Ответ: Если JavaScript является конкретной реализацией стандарта ECMASSPRICT, и Transer iTerator - это определенная реализация итератора, то можно сказать, что функция генератора является определенной реализацией интерфейса итератора.
Выполнение функции Generator вернет объект обходчика Каждый выход в функции генератора эквивалентен методу next() объекта обходчика, и вы можете передать пользовательское значение через метод next(value), чтобы изменить поведение Генераторная функция.
Функции генератора могут более легко и элегантно реализовывать асинхронное программирование и управление потоком управления, взаимодействуя с функциями Thunk.
19. Что такое асинхронная функция и что она делает?
Ответ: асинхронную функцию можно понимать как синтаксический сахар для функции генератора со встроенным автоматическим исполнителем, который взаимодействует с ES6 Promise для достижения почти идеального решения для асинхронного программирования.
20. Что такое класс и расширения и каковы их функции?
A: Класс ES6 можно рассматривать как синтаксический сахар, который является просто объектом-экземпляром, генерирующим ES5. Он относится к языку Java, определяет концепцию класса, позволяя прототипу объекта писать более понятно, создание объектов больше похоже на объектно-ориентированное программирование. Класс Class может быть унаследован с помощью Extends. Это и конструктор ES5 разные точки:
a, Все методы, определенные внутри класса, не являются перечисляемыми.
///ES5
function ES5Fun (x, y) {
this.x = x;
this.y = y;
}
ES5Fun.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
}
var p = new ES5Fun(1, 3);
p.toString();
Object.keys(ES5Fun.prototype); //['toString']
//ES6
class ES6Fun {
constructor (x, y) {
this.x = x;
this.y = y;
}
toString () {
return '(' + this.x + ', ' + this.y + ')';
}
}
Object.keys(ES6Fun.prototype); //[]
bКлассы классов .ES6 должны работать с командой new, а конструкторы ES5 могут выполняться без команды new.
cВ классе .ES6 нет продвижения переменных, и класс должен быть определен до того, как его можно будет создать.В отличие от ES5, конструктор можно написать после создания экземпляра.
dСуть наследования .ES5 заключается в том, чтобы сначала создать экземпляр объекта this подкласса, а затем добавить к this метод суперкласса. Механизм наследования ES6 совершенно другой, суть в том, чтобы добавить к этому свойства и методы объекта-экземпляра родительского класса (поэтому сначала должен быть вызван суперметод), а затем использовать конструктор подкласса для модификации этого .
21. Что такое модуль, экспорт и импорт и каковы их функции?
Ответ: модуль, экспорт и импорт — это дизайнерские идеи и схемы реализации, используемые ES6 для унификации интерфейсных модульных решений. Появление экспорта и импорта унифицирует схему реализации модуляризации внешнего интерфейса, интегрирует и стандартизирует метод модуляризации браузера/сервера и используется для замены традиционных AMD/CMD, requireJS, seaJS, commondJS и т. д. Ряд различных схемы реализации интерфейсных модулей, так что модульность внешнего интерфейса более унифицирована и стандартизирована, а JS также может реализовать крупномасштабную разработку приложений.
Модули, импортированные с помощью импорта, загружаются статически (загружаются во время компиляции), а не загружаются динамически (загружаются во время выполнения).
Значение интерфейса, импортируемое импортом в экспорт, представляет собой отношение динамической привязки, то есть через этот интерфейс можно получить значение реального времени внутри модуля.
22. Для улучшения каких программных оптимизаций или спецификаций стоит использовать ES6 при ежедневной разработке внешнего интерфейса?
отвечать:
1. Часто используемые функции стрелок для заменыvar self = this;способ сделать.
2, обычно используется let для замены команды var.
3. Структура общего массива/объекта присвоена имени переменной, структура понятнее, семантика понятнее, читабельность лучше.
4. В случае комбинации длинных строк с несколькими переменными использование строки шаблона вместо накопления строк может обеспечить лучший эффект и удобство чтения.
5. Замените традиционный конструктор классом Class для создания экземпляра объекта.
6. При разработке крупномасштабных приложений необходимо поддерживать модульное мышление о модулях и различать отношения между модулями.Обычно используются методы импорта и экспорта.
(над)
(Это почти все ручная печать, если есть ошибки, поправьте меня, пожалуйста!)