ES6 фронтенд-интервью (высокопродуктивный, как свиноматка)

внешний интерфейс JavaScript Vue.js опрос

Это тоже вопрос, который часто задают на фронтенд-интервью, я часто спрашиваю вас, какие новые фичи появились в es6, и вы ими пользовались в мирное время. При написании этого руководства первое предложение часто является тем, что часто спрашивают на собеседовании, а затем следует его подробное объяснение.Я буду отмечать содержание требований к собеседованию знаком *. Писать технические документы очень утомительно, хоть и смотришь чужие документы, но читать приходится много, и самому обобщать. Так что, если вы считаете, что это полезно для вас, пожалуйста, дайте мне звезду https://github.com/skychenbo

1、箭头函数需要注意的地方
2、ES6 let、const
3、set数据结构
4、promise对象的用法,手写一个promise
5、class的理解
6、模版语法的理解
7、rest参数
8、	module体系

Замечания о стрелочных функциях

* Когда требуется динамический контекст, функции стрелок использовать нельзя. То есть иммобилизация этого 1. При использовании => для определения функции это указывает на объект, в котором она была определена, а не на объект, в котором она использовалась. 2. Нельзя использовать как конструктор, то есть нельзя использовать новую команду, иначе будет выброшена ошибка 3. Нельзя использовать объект arguments 4. Нельзя использовать команду yield Это вопрос, который озадачил меня тогда. Я не знаю, сможете ли вы увидеть результат на первый взгляд. Направление этого всегда беспокоит, но после => матери больше не придется беспокоиться о том, что вы используете это.

class Animal {
	constructor(){
		this.type = 'animal'
	}
	says(say) {
		setTimeout(function () {
			console.log(this.type + 'says' + say)
		},1000)
	}
}
var animal = new Animal()
animal.says('hi') // undefined says hi

Давайте еще раз посмотрим на ситуацию =>

class Animal() {
	constructor() {
		this.type = 'animal'
	}
	says(say) {
		setTimeout(() => {
			console.log(this.type + ' says ' + say)
		}, 1000)
	}
}
var animal = new Animal()
animal.says('hi') // animal says hi

ES6 пусть, константа *let — это более совершенная var, а не глобальная переменная, имеет область действия функции на уровне блока, и в большинстве случаев продвижение переменной не происходит. const определяет постоянное значение и не может быть переназначено.Если значение является объектом, вы можете изменить значение свойства в объекте позволять 1. Переменные, объявленные с помощью let, имеют блочную область видимости 2. Переменные, объявленные с помощью let, не могут быть доступны через имя window.variable 3. Цикл вида for(let x..) создает новую привязку для x на каждой итерации. Ниже приводится необоснованная сцена, принесенная var

var a = []
for (var i = 0; i < i; i++) {
	a[i] = function () {
		console.log(i)
	}
}
a[5]() // 10

В приведенном выше коде переменная i объявлена ​​как var, что допустимо в классе глобальной области видимости. Таким образом, каждый раз в цикле новое значение i будет перезаписывать старое значение, в результате чего окончательный вывод будет равен 10. И если оператор let используется для цикла, то каждая итерация создает новый код привязки для x следующим образом.

var a = []
for (let i = 0; i < 10; i++) {
	a[i] = function () {
		console.log(i)
	}
}
a[5]() // 5

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

function showNum(i) {
	return function () {
		console.log(i)
	}
}
var a = []
for (var i = 0; i < 5; i++) {
	a[i] = showNum(i)
}

Это метод непосредственной функции

var a = []
for (var i = 0; i < 5; i++) {
	a[i] = (function (i) {
		return function () {
			console.log(i)
		}
	})(i)
}
a[2]()

Установить структуру данных

* метод Es6, Set сам по себе является конструктором, который похож на массив, но значения являются единственными членами

const set = new Set([1,2,3,4,4])
[...set] // [1,2,3,4]
Array.from(new Set())是将set进行去重

Объект для обещания использования, рукописное обещание

Обещание - это конструктор, следующее - это простой пример

var promise = new Promise((resolve,reject) => {
	if (操作成功) {
		resolve(value)
	} else {
		reject(error)
	}
})
promise.then(function (value) {
	// success
},function (value) {
	// failure
})

Объяснение класса

Синтаксис *class ближе к традиционному синтаксису, чем прототипы, конструкторы и наследование, его написание может сделать написание прототипов объектов более понятным, а синтаксис объектно-ориентированного программирования более популярным. Это конкретное использование класса

class Animal {
	constructor () {
		this.type = 'animal'
	}
	says(say) {
		console.log(this.type + 'says' + say)
	}
}
 let animal = new Animal()
 animal.says('hello') // animal says hello

 class Cat extends Animal {
 	constructor() {
 		super()
 		this.type = 'cat'
 	}
 }
 let cat = new Cat()
 cat.says('hello') // cat says hello

Можно видеть, что при использовании extend структура выводит «кошка говорит привет», а не «животное говорит привет». Это означает, что методы и свойства, определенные внутри конструктора, принадлежат экземпляру объекта и не могут наследоваться через расширения. Super() появляется в классе cat, что это? В ES6 конструктор подкласса должен содержать функцию super, super означает вызов конструктора родительского класса, хотя он и является конструктором родительского класса, но это указывает на cat Метод Object.assign var n = Object.assign(a,b,c) добавляет свойства a,b,c к n

Шаблон синтаксиса

* Это форма${varible}, Раньше нам нужно было использовать этот метод «строка» + переменная + «строка» при соединении строк и переменных, но с языком шаблонов мы можем использоватьstring${varible}stringэта связь

остаточный параметр

*es6 вводит остальные параметры, которые используются для получения избыточных параметров функций, поэтому нет необходимости использовать объект arguments бывший:

function add(...values) {
	let sum = 0
	for(var val of values) {
		sum += val
	}
	return sum
}

модульная система

* Исторически JS не модульная система, вы не можете разделить большую программу на меньшие программы. До ES6, там Commonjs, AMD два вида Commonjs Как это написано

const animal = require('./content.js')
	// content.js
	module.exports = 'a cat'

require.js делает это // контент.js

define('content.js', function () {
	return 'A cat'
})

require(['./content.js'], function (animal) {
	console.log(animal) // a cat
})

Синтаксис ES6 (в vue, который я использую, это то, что я использую)

import animal from './content'
// content.js
export default 'a cat'

Другое использование импорта es6 В vue вы можете импортировать животных из './content' Значение животного можно изменить по своему вкусу, но есть проблема, заключающаяся в том, что если вы вводите функцию или переменную, вы должны сохранить ее в соответствии с именем в содержании, вы можете обратиться к импортировать {скажем, введите} из './content' Существует также общепринятый способ написания импортировать * как содержимое из './content'
Такой способ записи означает, что все выходные значения находятся на этом объекте

Категории