Переводчик: Front-end Xiaozhi
Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статья
GitHubGitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.
Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.
JavaScript — сложный язык. Если вы продвинутый или начинающий разработчик JavaScript, очень важно понимать его основные концепции. Эта статья знакомит с основами JavaScript12Концепция, но определенно нельзя сказать, что разработчикам JavaScript нужно знать только эти вещи.
1. Назначение переменной (значение или ссылка)
Понимание того, как JavaScript присваивает значения переменным, может помочь нам сократить ненужныеbug. Если вы этого не понимаете, легко написать код, который непреднамеренно меняет значения.
JavaScript всегда присваивает переменным значение.Эта часть очень важна: когда указанное значение является одним из пяти примитивных типов JavaScript (т.Boolean,null,undefined,Stringа такжеNumber), Фактическое значение будет назначено. Однако, когда указанное значениеArray,FunctionилиObject, переменной выделяется ссылка на объект в памяти.
В следующем фрагменте кода используйтеvar1правильноvar2Сделайте задание. из-заvar1является примитивным типом (String), поэтому значение var2 равноvar1Строковое значение, и его можно считать в это время иvar1полностью отличается. Поэтому переназначитьvar2правильноvar1Нет эффекта.
let var1 = 'My string';
let var2 = var1;
var2 = 'My new string';
console.log(var1);
// 'My string'
console.log(var2);
// 'My new string'
Далее сравните с назначением объекта.
let var1 = { name: 'Jim' }
let var2 = var1;
var2.name = 'John';
console.log(var1);
// { name: 'John' }
console.log(var2);
// { name: 'John' }
Если вы ожидаете, что он будет вести себя как присваивание примитивного типа, скорее всего, все пойдет не так! Если вы создаете функцию, которая непреднамеренно изменяет объект, может произойти непредвиденное поведение.
2. Закрытие
Закрытие - это важный шаблон JavaScript для частного доступа к переменным. В этом примереcreateGreeterВозвращает анонимную функцию, имеющую доступ к параметрамgreeting("Здравствуйте" здесь). При последующих вызовахsayHelloбудет иметь доступ к этому приветствию!
function createGreeter(greeting) {
return function(name) {
console.log(greeting + ', ' + name);
}
}
const sayHello = createGreeter('Hello');
sayHello('Joe');
// Hello, Joe
В более реалистичном сценарии вы могли бы представить начальную функциюapiConnect(apiKey), который возвращает некоторое использованиеAPI keyМетоды. при этих обстоятельствах,apiKeyЭто нужно только быть предоставленным один раз.
function apiConnect(apiKey) {
function get(route) {
return fetch(`${route}?key=${apiKey}`);
}
function post(route, params) {
return fetch(route, {
method: 'POST',
body: JSON.stringify(params),
headers: {
'Authorization': `Bearer ${apiKey}`
}
})
}
return { get, post }
}
const api = apiConnect('my-secret-key');
// No need to include the apiKey anymore
api.get('http://www.example.com/get-endpoint');
api.post('http://www.example.com/post-endpoint', { name: 'Joe' });
3. Деконструкция
Деструктуризация параметров JavaScript — это распространенный способ извлечения желаемых свойств из объектов.
const obj = {
name: 'Joe',
food: 'cake'
}
const { name, food } = obj;
console.log(name, food);
// 'Joe' 'cake'
Если вы хотите извлечь свойство под другим именем, вы можете использовать его следующим образом:
const obj = {
name: 'Joe',
food: 'cake'
}
const { name: myName, food: myFood } = obj;
console.log(myName, myFood);
// 'Joe' 'cake'
Деструктурирование также часто используется непосредственно для извлечения аргументов, передаваемых функциям. Если вы знакомы с React, то наверняка видели это:
const person = {
name: 'Eddie',
age: 24
}
function introduce({ name, age }) {
console.log(`I'm ${name} and I'm ${age} years old!`);
}
console.log(introduce(person));
// "I'm Eddie and I'm 24 years old!"
4. Развернуть операцию
Одной из общих особенностей ES6 является оператор распространения (...).В следующем примереMath.maxнельзя применять кarr数组，因为它不将数组作为参数，但它可以将各个元素作为参数传入。 спред оператор...Может использоваться для извлечения отдельных элементов массива.
const arr = [4, 6, -1, 3, 10, 4];
const max = Math.max(...arr);
console.log(max);
// 10
5. Остальные параметры
Синтаксис параметра rest выглядит так же, как синтаксис расширения, разница в том, что синтаксис расширения предназначен для массивов структур и объектов, в то время как параметр rest и оператор расширения противоположны, параметр rest собирает несколько элементов в массив.
function myFunc(...args) {
console.log(args[0] + args[1]);
}
myFunc(1, 2, 3, 4);
// 3
rest parametersа такжеargumentsразница
- arguments — это псевдомассив, содержащий все аргументы
- Остальные параметры являются стандартными массивами, и можно использовать методы массивов.
6. Методы массива
Методы массива JavaScript часто могут предоставить невероятно элегантные способы выполнения необходимых преобразований данных. Как участник StackOverflow, я часто вижу вопросы о том, как определенным образом манипулировать массивом объектов, что также часто является идеальным вариантом использования для методов массива.
карта, фильтр, уменьшение
Методы массива JavaScriptmap,filterа такжеreduceКак ни странно, это полезные методы для преобразования массивов или возврата агрегированных значений.
карта: возвращает массив, в котором каждый элемент был преобразован с использованием указанной функции.
const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el + 20);
console.log(mapped);
// [21, 22, 23, 24, 25, 26]
filter: возвращает массив, и только когда указанная функция возвращает значение true, соответствующий элемент будет включен в этот массив.
const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el => el === 2 || el === 4);
console.log(filtered);
// [2, 4]
уменьшить: накапливать на значение, указанное в функции
const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) => total + current);
console.log(reduced);
// 21
find, findIndex, indexOf
find: возвращает первый экземпляр, соответствующий указанному условию. Если он найден, он не будет продолжать поиск других подходящих экземпляров.
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const found = arr.find(el => el > 5);
console.log(found);
// 6
Обратите внимание еще раз,несмотря на то что5Все последующие элементы удовлетворяют условию, но возвращается только первый подходящий элемент. Обычно разрывается, когда вы найдете матчforloop, что на самом деле очень полезно в этом случае.
findIndex: это то же самое, чтоfindПочти точно так же, но вместо возврата первого совпадающего элемента он возвращает индекс первого совпадающего элемента.
const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.findIndex(el => el === 'Frank');
console.log(foundIndex);
// 1
indexOf:а такжеfindIndexПочти то же самое, но вместо функции в качестве параметра она принимает простое значение. Используйте этот метод, если вам нужна более простая логика и вам не нужно использовать функцию для проверки соответствия.
const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.indexOf('Frank');
console.log(foundIndex);
// 1
push, pop, shift, unshift
push: это относительно простой метод, он добавит элемент в конец массива. Он изменит сам массив, функция вернет элемент, добавленный в массив.
let arr = [1, 2, 3, 4];
const pushed = arr.push(5);
console.log(arr);
// [1, 2, 3, 4, 5]
console.log(pushed);
// 5
pop: это удалит последний элемент из массива. Опять же, он изменяет массив на месте, а сама функция возвращает элемент, удаленный из массива.
let arr = [1, 2, 3, 4];
const popped = arr.pop();
console.log(arr);
// [1, 2, 3]
console.log(popped);
// 4
shift: удалить первый элемент из массива. Опять же, он изменяет массив на месте. Сама функция возвращает элемент, удаленный из массива.
let arr = [1, 2, 3, 4];
const shifted = arr.shift();
console.log(arr);
// [2, 3, 4]
console.log(shifted);
// 1
unshift: добавить один или несколько элементов в начало массива. Опять же, он изменяет массив на месте. В отличие от многих других методов, функция сама возвращает новую длину массива.
let arr = [1, 2, 3, 4];
const unshifted = arr.unshift(5, 6, 7);
console.log(arr);
// [5, 6, 7, 1, 2, 3, 4]
console.log(unshifted);
// 7
splice, slice
**splice:** Изменяет содержимое массива, удаляя или заменяя существующие элементы и/или добавляя новые элементы. Этот метод изменяет сам массив.
Следующий пример кода означает: в позиции массива1удалить на0элементы и вставитьb.
let arr = ['a', 'c', 'd', 'e'];
arr.splice(1, 0, 'b')
slice: возвращает неглубокую копию массива из указанной начальной позиции и до указанной конечной позиции. Если конечная позиция не указана, возвращается остальная часть массива. Важно отметить, что этот метод не изменяет массив, а возвращает нужное подмножество.
let arr = ['a', 'b', 'c', 'd', 'e'];
const sliced = arr.slice(2, 4);
console.log(sliced);
// ['c', 'd']
console.log(arr);
// ['a', 'b', 'c', 'd', 'e']
sort
**sort:** Сортирует массив в соответствии с предоставленной функцией. Этот метод изменяет массив на месте. Если функция возвращает отрицательное число или 0, порядок остается прежним. Если возвращается положительное число, порядок элементов меняется местами.
let arr = [1, 7, 3, -1, 5, 7, 2];
const sorter = (firstEl, secondEl) => firstEl - secondEl;
arr.sort(sorter);
console.log(arr);
// [-1, 1, 2, 3, 5, 7, 7]
7. Генераторы
Генераторы — это особое поведение, на самом деле шаблон проектирования, который мы вызываем **next().метод для перебора упорядоченного набора значений. Представьте, например, использование итератора над массивом[1,2,3,4,5]траверс. первый звонокnext()метод возвращает1, второй звонокnext()метод возвращает2, и так далее. Когда все значения в массиве будут возвращены, вызовитеМетод next()** вернетnullилиfalseили другие возможные значения, чтобы указать, что все элементы в массиве были пройдены.
function* greeter() {
yield 'Hi';
yield 'How are you?';
yield 'Bye';
}
const greet = greeter();
console.log(greet.next().value);
// 'Hi'
console.log(greet.next().value);
// 'How are you?'
console.log(greet.next().value);
// 'Bye'
console.log(greet.next().value);
// undefined
Используйте генераторы для генерации бесконечных значений:
function* idCreator() {
let i = 0;
while (true)
yield i++;
}
const ids = idCreator();
console.log(ids.next().value);
// 0
console.log(ids.next().value);
// 1
console.log(ids.next().value);
// 2
// etc...
8. Оператор тождества (===) и оператор равенства (==)
Каждый должен знать оператор идентификации в JavaScript (===) и оператор равенства (==)разница между!==операторы выполняют преобразования типов перед сравнением значений, а===Оператор не выполняет преобразование типов перед сравнением.
console.log(0 == '0');
// true
console.log(0 === '0');
// false
9. Сравнение объекта
Ошибка, которую я вижу у новичков в JavaScript, заключается в прямом сравнении объектов. Переменная указывает на ссылку на объект в памяти, а не на сам объект! Один из способов сравнить их — преобразовать объекты в строки JSON. У этого есть обратная сторона: порядок свойств объекта не гарантируется! Более безопасным способом сравнения объектов является введение библиотек, специализирующихся на глубоком сравнении объектов (например,lodash isEqual).
Объекты ниже кажутся одинаковыми, но на самом деле они указывают на разные ссылки.
const joe1 = { name: 'Joe' };
const joe2 = { name: 'Joe' };
console.log(joe1 === joe2);
// false
Вместо этого следующий расчет приводит кtrue, так как один объект устанавливается равным другому и, следовательно, указывает на одну и ту же ссылку (в памяти находится только один объект).
const joe1 = { name: 'Joe' };
const joe2 = joe1;
console.log(joe1 === joe2);
// true
Вместо этого следующий расчет приводит кtrue, потому что один объект устанавливается равным другому и, таким образом, указывает на одну и ту же ссылку (в памяти находится только один объект).
const joe1 = { name: 'Joe' };
const joe2 = joe1;
console.log(joe1 === joe2);
// true
10. Функция обратного вызова
Многих людей пугают функции обратного вызова JavaScript! Они простые, например.console.logФункция передается как обратный вызовmyFunc. это вsetTimeoutВыполняется по завершении.
function myFunc(text, callback) {
setTimeout(function() {
callback(text);
}, 2000);
}
myFunc('Hello world!', console.log);
// 'Hello world!'
11. Promises
Как только вы поймете, что такое обратный вызов в JavaScript, вы вскоре окажетесь в «аду обратных вызовов». Вы можете использовать это время для обещания, обещание асинхронной логики в пакете успешноresolveили при неудачеrejectИспользуйте «тогда» для обработки случая успеха, используйтеcatchдля обработки исключений.
const myPromise = new Promise(function(res, rej) {
setTimeout(function(){
if (Math.random() < 0.9) {
return res('Hooray!');
}
return rej('Oh no!');
}, 1000);
});
myPromise
.then(function(data) {
console.log('Success: ' + data);
})
.catch(function(err) {
console.log('Error: ' + err);
});
// If Math.random() returns less than 0.9 the following is logged:
// "Success: Hooray!"
// If Math.random() returns 0.9 or greater the following is logged:
// "Error: On no!"
12. Async/Await
После освоения промисов вам также может понравитьсяasync await, который является просто "синтаксическим сахаром" на основе обещаний. В приведенном ниже примере мы создаемasyncфункция и ожидание обещания приветствующего.
const greeter = new Promise((res, rej) => {
setTimeout(() => res('Hello world!'), 2000);
})
async function myFunc() {
const greeting = await greeter;
console.log(greeting);
}
myFunc();
// 'Hello world!'
Ваши лайки - моя мотивация продолжать делиться хорошими вещами, ставьте лайки!
общаться с
Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.