Всестороннее резюме ES6, необходимого для предварительных интервью

大家好，我是魔王哪吒，话不多说，今天带来的是一篇《前端面试必备ES6全方位总结》文章，欢迎大家喜欢。

предисловие

Изучите маршрут, который вам нужно освоить в ES6, поймите, что такое обзор ECMAScript, поймите тип данных Symbol, освойте let и const, а также деструктурирующее назначение переменных, принципы Set и Map.

Что такое стрелочная функция, какие расширения есть в ES6 для ES5 и некоторые дополнительные операции ES6.

Чтобы облегчить просмотр и изучение, я составил карту разума, как показано на следующем рисунке:

Обзор ESMAScript

ECMAScript — этоскриптовый язык программирования, известный как JavaScript или JScript. его китайское названиеECMAScript, английское названиеEuropean Computer Manufacturers Association Script, мы можем просто назвать этоES6, который характеризуется широким спектром приложений во всемирной паутине.

ECMAScript — это стандартизированная спецификация языка сценариев, разработанного Брэндоном Айком из Netscape, первоначально называвшегося Mocha, позже переименованного в LiveScript и, наконец, переименованного в JavaScript.

В декабре 1995 года Sun и Netscape совместно опубликовали JavaScript. В ноябре 1996 года Netscape представила JavaScript в Европейскую ассоциацию производителей компьютеров для стандартизации. Первая версия ECMA-262 была принята организацией Ecma в июне 1997 года.

ECMA Script — это название языка сценариев, стандартизированного ECMA-262. Хотя JavaScript и JScript совместимы с ECMAScript, они содержат функциональные возможности, выходящие за рамки ECMA Script.

ECMAScript — это объектно-ориентированный язык программирования, который может выполнять вычисления в хост-среде и манипулировать вычисляемыми объектами. ECMAScript изначально разрабатывался как язык веб-скриптов для поддержки динамического представления веб-страниц и предоставления вычислительной мощности на стороне сервера для веб-архитектур клиент-сервер.

Как язык сценариев, ECMAScript имеет те же свойства, что и другие языки сценариев, то есть «используется для управления, настройки функций, предоставляемых существующей системой, и ее автоматизации».

Какая связь между ECMAScript и JavaScript?

Чтобы жить проще, ECMAScript — это международный стандарт языка JavaScript, а JavaScript — это реализация ECMAScript.

Тип данных символа

ES6 представляет новый примитивный тип данных Symbol , представленный как уникальное значение, используемое для определения уникальных имен свойств объекта.

Объяснение символа

Поговорите о типе данных Symbol в 4 аспектах:

1. Определение символа;
2. Символ как имя свойства объекта;
3. Сценарии использования символов;
4. Приобретение символа.

Определение символа

• Тип Symbol может быть сгенерирован с помощью функции Symbol();
• Функция Symbol() может принимать строку в качестве параметра

Образец кода:

let s1 = Symbol('web');
let s2 = Symbol('web');
console.log(s1 === s2);
console.log(typeof s1);
console.log(typeof s2);

Хром скриншот:

Из рисунка видно, что параметры, полученные функцией Symbol(), одинаковые, а значения ее переменных также различны.s1 и s2 являются переменными типа Symbol.Поскольку значения переменных отличаются, напечатанный результат является ложным. Используйте typeof для получения соответствующего типа, чтобы все напечатанные результаты были символами.

Символ как имя свойства объекта

Символы могут использоваться в качестве имен свойств объекта тремя способами.

• Первый:

Образец кода:

let symbol = Symbol();
let a = {};
a[symbol] = 'web';

Это видно из кода: Сначала объявляется переменный символ типа Symbol, пустой объект — это a, а веб-строка присваивается объекту a через a[symbol]. Указывает символ в качестве имени свойства объекта и веб в качестве значения свойства.

• Второй:

Образец кода:

let symbol = Symbol();
let a = {
    [symbol]:'web'
};

Это видно из кода: сначала объявляется переменный символ типа Symbol, а затем присваивается объект a как строка сети через [symbol] при объявлении объекта a.

• Третий:

Образец кода:

let symbol = Symbol();
let a = {};
Object.defineProperty(a, symbol, {value: 'web'});

Это видно из кода: Сначала объявляется переменный символ типа Symbol, пустой объект — это a, а объекту a присваивается строка web через метод Object.defineProperty().

Значение Symbol используется как имя свойства объекта, а оператор точки использовать нельзя.

Сценарии использования символов

У одного есть два сценария использования:

1. Поскольку значения Symbol не равны, значение типа Symbol используется в качестве имени свойства объекта и не будет повторяться.
2. Код формирует определенную строку, которая сильно связана.

Приобретение символа

С помощью метода Object.getOwnPropertySymbols() вы можете получить все имена свойств Symbols указанного объекта.

пусть и const

• let — это ключевое слово, определенное в спецификации ES6 для объявления переменных.
• Переменные, объявленные с помощью let, имеют блочную область видимости.

Зачем вам нужна блочная область?

Зачем добавлять эту область на уровне блоков, вы должны понимать проблемы, возникающие, когда ES5 не имеет области на уровне блоков.

1. Первый сценарий заключается в том, что внутренние переменные могут переопределять внешние переменные.
2. Второй сценарий заключается в том, что переменные, объявленные в циклах if или for, попадут в глобальные переменные.

сцена первая:

Сценарий второй:

Пример кода:

if(true) {  
  var web = 'web';  
}  
console.log(web); // web 没在iF块中也可以访问

Предпосылка области видимости на уровне блока состоит в том, чтобы сделать объявление переменной let.

1. Отдельная пара фигурных скобок между двумя фигурными скобками является областью видимости переменной на уровне блока.
2. Пара фигурных скобок вокруг условных операторов, объявлений функций, циклов и т. д. представляет собой блочную область действия переменной.

const объявляет константу только для чтения. const После объявления константы ее значение не может быть изменено.

const и let действительны только в объявленной области действия блока. В противном случае будет сообщено об ошибке.

Константа, объявленная командой const, может использоваться только после объявленной позиции.

Константа, объявленная const, не может быть объявлена ​​повторно, как let.

Разрушение присвоения переменных

В ES6 можно извлекать значения из массивов и объектов и присваивать значения переменным, что называется деструктурирующим присваиванием.

Деструктурирующее присваивание означает, что пока шаблоны по обе стороны от знака равенства одинаковы, переменной слева будет присвоено соответствующее значение.

Образец кода:

let [x,y='b'] = ['a'];
console.log(y); // b

let [x,y='b'] = ['a', undefined];
console.log(y); // b

let [x,y='b'] = ['a', null];
console.log(y); // null

Классификация деструктурирующих назначений:

1. Назначение деструктурирования массива
2. Назначение деструктуризации объекта
3. Назначение деструктурирования строки
4. Разрушение присвоения чисел и логических значений
5. Деструктивное присвоение функциональных параметров

Случай деструктивного присвоения

Два случая:

1. полностью разрушен
2. неполная деконструкция

неполная деконструкция

код показывает, как показано ниже:

let [a = 1, b] = []; 
// a = 1, b = undefined

Назначение деструктурирования массива

код показывает, как показано ниже:

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

Назначение деструктурирования позволяет указать значения по умолчанию.

код показывает, как показано ниже:

let [foo = true] = [];
foo // true

При использовании значения по умолчанию следует обратить внимание на undefined, потому что undefined не может быть присвоено значение.

код показывает, как показано ниже:

let [x = 1] = [undefined];
x // 1
 
let [x = 1] = [null];
x // null

деструктуризация объекта

код показывает, как показано ниже:

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
 
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

Благодаря деструктуризации мы можем легко копировать методы объекта в переменные.

код показывает, как показано ниже:

const { log } = console;
log('hello') // hello

или:

const { log:minelog } = console;
minelog ('hello') // hello

Когда мы используем деструктурирующее присваивание, нам нужно обратить внимание на область объявленной переменной:

// 错误的写法
let x;
{x} = {x: 1};
 
// 正确的写法
let x;
({x} = {x: 1});

Массив — это специальный объект

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

неполная деконструкция

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'

оператор остатка

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

Разрушение значений по умолчанию

let {a = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;

Деструктуризация строки

Сама строка также является объектом, и иногда ее можно уничтожить как массив.

код показывает, как показано ниже:

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

деструктурирование как объект

let {length : len} = 'hello';
len // 5

оператор остатка

let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]

Деструктивное присвоение функциональных параметров

function add([x, y]){
  return x + y;
}
 
add([1, 2]); // 3

Вычислите сумму любого количества аргументов функции:

Код:

function sum(...num){
    var sumNum = 0;
    for(let i=0;i<num.length;i++){
        sumNum += parseInt(num[i])
    }
    console.log(sumNum)
}

Установить и сопоставить

Набор похож на массив, но все значения членов уникальны и нет повторяющихся значений.

Set использует метод add() для добавления элементов без добавления повторяющихся значений, поэтому Set может дедуплицировать массив.

Карты аналогичны объектам, и значение имени ключа может быть разных типов.

утверждение

1. Используйте новый конструктор Set() для объявления набора;
2. Используйте конструктор new Map() для объявления карты.

Используйте for...of для перебора значений в массиве

Как работать

Общие методы: удалить, удалить, есть или нет, очистить, очистить. Операция сложения для Set — это add(), а для Map установлено значение set и get to get.

Has используется, чтобы определить, содержит ли набор или карта элементы.

set можно использовать для добавления или изменения элементов в Map, только в Map.

метод обхода

Есть ключи, значения, записи forEach.

keys получает все ключи, values ​​получают все значения, entry получают все ключи и значения, а forEach перебирает все ключи и значения.

стрелочная функция

ES6 использует функции со стрелками (=>) для определения функций.

Стрелочная функция с параметрами

Код:

var single = a => a
single('web')

Стрелочная функция без аргументов

Код:

var log = () => {
    alert('web')
}

Стрелочные функции с несколькими аргументами

Код:

var add = (a,b) => a+b
add(1,2)

расширение es6 относительно es5

В основном он делится на три типа:

1. расширение функции
2. расширение объекта
3. расширение массива

расширение функции

Расширение функций в es6 включает: значение по умолчанию, оператор остатка, оператор спреда.

По умолчанию

В es5 настройка функций по умолчанию:“||”устанавливается, когда параметр функцииundefine, примите значение по умолчанию.

В ES6 значение функции по умолчанию записывается после определения параметра.

Пример кода выглядит следующим образом:

// es5
function log(x,y) {
    y = y || 'web';
    console.log(x,y);
}

function log(x,y="web"){
    console.log(x,y);
}

оператор остатка

Оператор остатка представляет оператор:...arrrУказывает параметр, указывающий, что может быть несколько параметров.

Пример кода выглядит следующим образом:

function web(...arr) {
    for(let item of arr) {
        console.log(item);
    }
}
web(1,3,4,5,6);

спред оператор

Пример кода выглядит следующим образом:

function add(a,b,c) {
    console.log(a);
    console.log(b);
    console.log(c);
}
var arr = [1,2,3];
add(...arr);

расширение объекта

1. ES6 позволяет записывать переменные и функции непосредственно в объекты как свойства и методы объектов.
2. Выражения разрешены в es6 как свойства объектов, и имена функций могут быть определены таким же образом.
3. сеттеры и геттеры. Свойства объекта JavaScript состоят из имени, значения и набора свойств.

Метод работы объекта в es6:

Object.is(): сравнивает два значения на равенство.Object.assign(): Используется для объединения объектов.Object.getOwnPropertyDescriptor: возвращает описание свойства объекта.Object.keys()Возвращает массив, содержащий все перечисляемые свойства самого объекта.

расширение массива

copyWithin(target,start,end): внутри текущего массива копирует элемент из указанной позиции в другую позицию, а затем возвращает текущий массив.

targetУказывает, что данные должны быть заменены с этой позиции. Если оно отрицательное, значит, взаимное.

startУказывает на начало чтения данных с этой позиции, по умолчанию 0. Если отрицательно, значит взаимно.

endУказывает на прекращение чтения данных до достижения этой позиции, значение по умолчанию равно длине массива. Если отрицательно, значит взаимно.

find()Представляет элемент массива, используемый для поиска первого символьного условия.

findIndex()Указывает, что возвращается позиция первого члена массива, соответствующего условию, или -1, если ни один из элементов не соответствует условию.

fill()Указывает, что массив заполнен, и метод fill() используется для инициализации пустого массива.

includes()Указывает, что метод возвращает логическое значение, указывающее, содержит ли массив заданное значение.

расширенные операции es6

Объекты Promise используются для представления конечного состояния асинхронной операции, завершенной или неудачной.

Promise — это решение для асинхронного программирования, которое выражает асинхронные операции в процессе синхронных операций, избегая проблемы вложенности нескольких уровней функций обратного вызова.

Обещание имеет несколько состояний:

1. pendingНачальное состояние не является ни состоянием успеха, ни состоянием отказа.
2. fulfilledУказывает, что операция завершена успешно.
3. rejectedУказывает, что операция не удалась.

При возникновении любого из этих условий объект Promisethen()Будет вызван метод-обработчик привязки метода.

then()Метод содержит два параметра,onfulfilledа такжеonrejected,Они всеfunctionТипы.

когдаPromiseдляfulfilledгосударство, звонитеthen()методonfulfilled,когдаPromiseдляrejectedгосударство, звонитеthen()методonrejected.

Promise.prototype.thenа такжеPromise.prototype.catchметод возвращаетPromiseобъекты, чтобы их можно было связать.

Iterator

Iterator iterator — это интерфейс, обеспечивающий унифицированный механизм доступа к множеству различных структур данных.

Любая структура данных может быть развернута до тех пор, покаIteratorинтерфейс для завершения операции обхода.

IteratorРоль:

1. Обеспечьте единый и удобный интерфейс доступа к различным структурам данных.
2. Позволяет расположить элементы структуры данных в определенном порядке.
3. ES6 создал новую команду обхода для... цикла.

Собственные структуры данных с интерфейсом Iterator, массивами, некоторыми массивоподобными объектами, структурами Set и структурами Map.

Generator

Generatorдаes6Предоставленное решение для асинхронного программирования, с точки зрения синтаксиса, его можно понимать как конечный автомат, который внутри инкапсулирует несколько состояний.

Execute Generator, который генерирует и возвращает объект обходчика. Возвращенный объект обхода может по очереди проходить каждое состояние функции генератора.

GeneratorФункция — это обычная функция.

Во-первых, между ключевым словом function и именем функции есть*Нет.

Во-вторых, тело функции используетyieldвыражение для обхода состояния.

код показывает, как показано ниже:

function* newGenerator() {
    yield 'web';
    yield 'it';
    return 'ending';
}

Код понимает, что после выполнения функции Generator она не будет выполнена сразу, и вернет не результат работы функции, а объект-указатель, указывающий на внутреннее состояние.

Используйте метод Next() объекта обходчика, чтобы переместить указатель в следующее состояние. Каждый раз, когда вызывается метод next(), внутренний указатель будет выполняться с начала функции или с того места, где он остановился, до тех пор, пока не встретится следующая позиция выражения yield.

Генератор выполняется секциями, выражение yield является признаком приостановки выполнения, а метод next() может возобновить выполнение.

Функция next() принимает параметр, который используется в качестве возвращаемого значения последнего выражения yield, поскольку сам yield не имеет возвращаемого значения.

Class

ES6 представляет концепцию класса Class, которую можно определить с помощью ключевого слова Class.

Образец кода:

class Person {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    say() {
        return '名字：'+this.name+'年龄'+this.age+"岁";
    }
}
var obj = new Person('web',12);
console.log(obj.say());

Простой тип данных

5 ES5 имеет простые типы данных, undefined, Null, Boolean, Number, String.

Set

1. Участники не могут дублироваться
2. Только значение ключа, без имени ключа, немного похоже на массив.
3. Его можно пройти, есть методы добавления, удаления, есть

Установить свойства экземпляра

1. конструктор: конструктор
2. размер: количество элементов

код показывает, как показано ниже:

let set = new Set([1, 2, 3, 2, 1])

console.log(set.length)	// undefined
console.log(set.size)	// 3

Установить методы экземпляра

Как работать

• add(value): новый, эквивалентный push в массиве
• удалить (значение): если оно существует, удалить значение в коллекции
• has(value): определяет, существует ли значение в коллекции
• clear(): очистить коллекцию

метод обхода

1. keys(): возвращает итератор, содержащий все ключи в коллекции.
2. values(): возвращает итератор, содержащий все значения в коллекции.
3. entry(): возвращает итератор пар ключ-значение, содержащих все элементы в объекте Set.
4. forEach(callbackFn, thisArg): используется для выполнения операций callbackFn над членами коллекции.

Map

1. По сути это набор пар ключ-значение, похожий на набор
2. Его можно пройти, и есть много методов, которые можно преобразовать с различными форматами данных.

Основными сценариями применения Set and Map являются реорганизация данных и хранение данных.

Set — это структура данных, называемая коллекцией, Map — это структура данных, называемая словарем.

Свойства и методы карты

Атрибуты:

1. конструктор: конструктор
2. размер: возвращает количество элементов, содержащихся в словаре

код показывает, как показано ниже:

const map = new Map([
  ['name', 'web'],
  ['des', 'JS']
]);

map.size // 2

Метод работы:

• set(key, value): добавить новый элемент в словарь
• get(key): найти конкретное значение по ключу и вернуть
• has(key): определить, существует ли ключ key в словаре
• delete(key): удалить соответствующие данные из словаря по клавише key
• clear(): удалить все элементы в этом словаре

метод обхода

• Keys(): возвращает все имена ключей, содержащиеся в словаре, в качестве итератора.
• values(): возвращает все значения, содержащиеся в словаре, как итератор
• entry(): возвращает итератор всех членов
• forEach(): перебирает все элементы словаря.

Словарь (Карта)

Разница между набором и словарем:

1. Точка соприкосновения: наборы, словари могут хранить уникальные значения
2. Разница: наборы хранят элементы в форме [значение, значение], а словари хранят элементы в форме [ключ, значение].