Автор оригинала: FreeCodeCamp Community Member.
За последние несколько лет было много обновлений на языке JavaScript. И эти обновления очень полезны, если вы хотите улучшить свое кодирование.
Сохранение в курсе новейших событий на языке действительно важно. Это может помочь вам получить более высокую оплату, поддерживать в курсе последних тенденций, улучшить качество вашего кода и Excel в вашей текущей работе.
И вам определенно нужно знать последние функции, если вы пытаетесь выучить библиотеку JavaScript, такую как React или Framework, как угловой или Vue.
Недавно было много полезных дополнений к JavaScript, как Нулеватый коалисп оператор , Дополнительные цепочки , Обещания , Async/await , ES6 Разрушение , и больше.
Поэтому сегодня мы посмотрим на некоторые из этих концепций, которые должны знать каждый разработчик JavaScript.
Давайте начнем и погрузимся в вещи, которые вам нужно знать о JS.
Пусть и const в JavaScript
До ES6 JavaScript использовал var Ключевое слово, которое только использовала функцию и глобальный объем. Там не было возможности уровня блока.
С добавлением Пусть и Const JavaScript добавил блок Scoping.
Как использовать пусть в JavaScript
Когда мы объявляем переменную, используя Пусть Ключевое слово, мы можем Назначить новое значение для этой переменной позже, но мы не можем Переназначить Это с тем же именем.
// ES5 Code var value = 10; console.log(value); // 10 var value = "hello"; console.log(value); // hello var value = 30; console.log(value); // 30
Как вы можете видеть выше, мы перенесли переменную ценность используя var ключевое слово несколько раз.
Перед ES6 мы смогли повторно объявить переменную, которая уже была объявлена ранее, если она не использовалась неэффективно и вместо этого была привела к путанице.
Но что, если у нас уже была переменная, объявленная одним и тем же именем где-то еще, и мы повторяем его, не осознавая это? Тогда мы можем переопределить вариабельное значение, вызывая некоторые трудные проблемы отладки.
Поэтому, когда вы используете Пусть Ключевое слово, вы получите ошибку, когда вы пытаетесь повторно объявить переменную с тем же именем – что хорошая вещь.
// ES6 Code let value = 10; console.log(value); // 10 let value = "hello"; // Uncaught SyntaxError: Identifier 'value' has already been declared
Но следующий код действителен:
// ES6 Code let value = 10; console.log(value); // 10 value = "hello"; console.log(value); // hello
Мы не получаем ошибку в вышеуказанном коде, потому что мы Переназначение Новое значение для ценность Переменная. Но мы не повторяю ценность очередной раз.
Теперь посмотрите на следующий код:
// ES5 Code
var isValid = true;
if(isValid) {
var number = 10;
console.log('inside:', number); // inside: 10
}
console.log('outside:', number); // outside: 10
Как вы можете видеть в этом коде, когда мы объявляем переменную с var Ключевое слово, это доступно за пределами Если блок также.
Теперь посмотрите на следующий код:
// ES6 Code
let isValid = true;
if(isValid) {
let number = 10;
console.log('inside:', number); // inside: 10
}
console.log('outside:', number); // Uncaught ReferenceError: number is not defined
Как вы можете видеть, Номер переменная при объявлении с использованием Пусть Ключевое слово только доступно внутри Если блокировать. За блоком он недоступен, поэтому мы получили ссылочную ошибку, когда мы пытались получить доступ к ней за пределами Если блокировать.
Но если есть Номер Переменная за пределами Если Блок, то он будет работать, как показано ниже:
// ES6 Code
let isValid = true;
let number = 20;
if(isValid) {
let number = 10;
console.log('inside:', number); // inside: 10
}
console.log('outside:', number); // outside: 20
Здесь у нас есть два Номер Переменные в отдельном объеме. Поэтому за пределами Если Блок, значение Номер будет 20.
Посмотрите на следующий код:
// ES5 Code
for(var i = 0; i < 10; i++){
console.log(i);
}
console.log('outside:', i); // 10
При использовании var ключевое слово, Я Доступен даже вне для петля.
// ES6 Code
for(let i = 0; i < 10; i++){
console.log(i);
}
console.log('outside:', i); // Uncaught ReferenceError: i is not defined
Но при использовании Пусть Ключевое слово, он не доступен за пределами цикла.
Так как вы можете увидеть из вышеуказанных образцов кода, используя Пусть делает переменную доступной только внутри этого блока, и она недоступна вне блока.
Мы также можем создать блок с помощью вьющихся скобок, как это:
let i = 10;
{
let i = 20;
console.log('inside:', i); // inside: 20
i = 30;
console.log('i again:', i); // i again: 30
}
console.log('outside:', i); // outside: 10
Если вы помните, я сказал, что мы не можем повторно объявить Пусть На основании переменная в том же блоке, но мы можем повторно объявить его в другом блоке. Как вы можете увидеть в вышеуказанном коде, мы перенесены Я и назначил новое значение 20 внутри блока. После заявления, что значение переменной будет доступно только в этом блоке.
Вне блока, когда мы напечатали эту переменную, мы получили 10 вместо ранее назначенного значения 30 Потому что вне блока, внутренняя Я Переменная не существует.
Если у нас нет переменной Я Объявлен снаружи, мы получим ошибку, как вы можете видеть в следующем коде:
{
let i = 20;
console.log('inside:', i); // inside: 20
i = 30;
console.log('i again:', i); // i again: 30
}
console.log('outside:', i); // Uncaught ReferenceError: i is not defined
Как использовать const в JavaScript
Const Ключевое слово работает точно так же, как Пусть Ключевое слово в его блоке навес функциональность. Так что давайте посмотрим, как они отличаются друг от друга.
Когда мы объявляем переменную как Const , это считается постоянной переменной, значение которой никогда не изменится.
В случае Пусть Мы можем назначить новое значение этой переменной позже так:
let number = 10; number = 20; console.log(number); // 20
Но мы не можем сделать это в случае Const :
const number = 10; number = 20; // Uncaught TypeError: Assignment to constant variable.
Мы даже не можем Переназначить А Const Переменная.
const number = 20; console.log(number); // 20 const number = 10; // Uncaught SyntaxError: Identifier 'number' has already been declared
Теперь посмотрите на следующий код:
const arr = [1, 2, 3, 4]; arr.push(5); console.log(arr); // [1, 2, 3, 4, 5]
Мы сказали, что Const Переменная постоянна, значение которой никогда не изменится – но мы изменили постоянный массив выше. Так как это имеет смысл?
Так что на самом деле хранится в arr Не является фактическим массивом, но только эта ссылка (адрес) местоположения памяти, где хранится фактический массив.
Так что делая arr.push (5); Мы на самом деле не изменяем ссылку, где arr Указывает, но мы изменяем значения, хранящиеся в этой ссылке.
То же самое дело с объектами:
const obj = {
name: 'David',
age: 30
};
obj.age = 40;
console.log(obj); // { name: 'David', age: 40 }
Вот, а также мы не меняем ссылку на то, где obj Указывает, но мы изменяем значения, хранящиеся в этой ссылке.
Так что вышеуказанный код будет работать, но код ниже не будет работать.
const obj = { name: 'David', age: 30 };
const obj1 = { name: 'Mike', age: 40 };
obj = obj1; // Uncaught TypeError: Assignment to constant variable.
Приведенный выше код не работает, потому что мы пытаемся изменить ссылку на то, что Const Переменные указывает на.
Таким образом, ключевой момент, когда помните, когда использование Const заключается в том, что, когда мы объявляем переменную в качестве постоянного с использованием Const, мы не можем восстановить его. Мы также не можем повторно назначить эту переменную, но мы можем изменить значения, хранящиеся в этом месте, если переменная имеет тип ссылки.
Таким образом, код ниже недействителен, потому что мы повторно присваиваем к нему новое значение.
const arr = [1, 2, 3, 4]; arr = [10, 20, 30]; // Uncaught TypeError: Assignment to constant variable.
Но обратите внимание, что мы можем изменить значения внутри массива, как мы видели ранее.
Следующий код переопределения A Const Переменная также недействительна.
const name = "David"; const name = "Raj"; // Uncaught SyntaxError: Identifier 'name' has already been declared
Пусть и const
- Ключевые слова
. ПустьиConstДобавьте блок Scoping в JavaScript. - Когда мы объявляем переменную как
Пустьмы не можемПереопределитьилиПереназначитьдругой пусть переменная с тем же именем в том же объеме (функция или область блокировки), но мы можемповторно назначитьценность для него. - Когда мы объявляем переменную как
Constмы не можемПереопределитьилиПереназначитьдругойConstпеременная с тем же именем в той же области (функция или область блока). Но мы можем изменить значения, хранящиеся в этой переменной, если переменная имеет тип ссылочного типа, как массив или объект.
Хорошо, давайте перейдем к следующей большой теме: обещания.
Обещания в JavaScript
Обещания являются одним из самых важных, но сбитых с толку и трудно понять часть JavaScript. И большинство новых разработок, а также опытных, борьба за их понять.
Обещания были добавлены в ES6 в качестве родной реализации.
Так что это обещание? Обещание представляет асинхронную операцию, которая будет завершена в будущем.
Ранее до ES6 не было никакого способа дождаться чего-то выполнить некоторую операцию.
Например, когда мы хотели сделать вызов API, не было никакого способа подождать, пока результаты не вернутся до ES6.
Для этого мы использовали внешние библиотеки, такие как jQuery или ajax, которые имели собственную реализацию обещаний. Но не было никакого браузера.
Но теперь используя обещания в ES6, мы можем заставить API позвонить себе и подождать, пока он не будет выполнен для выполнения некоторой операции.
Как создать обещание
Чтобы создать обещание, нам нужно использовать Обещание Функция конструктора такая:
const promise = new Promise(function(resolve, reject) {
});
Обещание Конструктор принимает функцию в качестве аргумента, и что функция внутренне получает решить и Отклонить в качестве параметров.
решить и Отклонить Параметры на самом деле являются функциями, которые мы можем позвонить в зависимости от результата асинхронной операции.
А Обещание проходит через три состояния:
- В ожидании
- Выполнено
- Отклоненный
Когда мы создаем обещание, это в ожидании государства. Когда мы называем решить Функция, она идет в выполненном состоянии, и если мы позвоним Отклонить Это пойдет в отклоненном состоянии.
Для имитации длительной или асинхронной операции мы будем использовать Сетримс функция.
const promise = new Promise(function(resolve, reject) {
setTimeout(function() {
const sum = 4 + 5;
resolve(sum);
}, 2000);
});
Здесь мы создали обещание, которое будет разрешено на сумму 4 и 5 После 2000 мс (2 секунды) время ожидания окончен.
Чтобы получить результат успешного выполнения обещания, нам нужно зарегистрировать обратный вызов, используя .then как это:
const promise = new Promise(function(resolve, reject) {
setTimeout(function() {
const sum = 4 + 5;
resolve(sum);
}, 2000);
});
promise.then(function(result) {
console.log(result); // 9
});
Так когда мы называем решить Обещание вернется обратно значение, передаваемое в решить Функция, которую мы можем собрать с помощью .then обработчик.
Если операция не успешна, то мы называем Отклонить Функция такая:
const promise = new Promise(function(resolve, reject) {
setTimeout(function() {
const sum = 4 + 5 + 'a';
if(isNaN(sum)) {
reject('Error while calculating sum.');
} else {
resolve(sum);
}
}, 2000);
});
promise.then(function(result) {
console.log(result);
});
Здесь, если сумма не число, то мы называем Отклонить Функция с сообщением об ошибке. В противном случае мы называем решить функция.
Если вы выполните вышеуказанный код, вы увидите следующий вывод:
Как вы можете видеть, мы получаем неосторожное сообщение об ошибке вместе с сообщением, которое мы указали, потому что вызов Отклонить Функция бросает ошибку. Но мы не добавили обработчик ошибок для ловли этой ошибки.
Чтобы поймать ошибку, нам нужно зарегистрировать другой обратный вызов, используя .catch как это:
promise.then(function(result) {
console.log(result);
}).catch(function(error) {
console.log(error);
});
Вы увидите следующий вывод:
Как видите, мы добавили .catch Обработчик, поэтому мы не получаем некоторую ошибку, но мы просто регистрируем ошибку к консоли.
Это также избегает резко останавливая вашу заявку.
Так что всегда рекомендуется добавить .catch Обработчик каждому обещанию, чтобы ваше приложение не остановится от работы из-за ошибки.
Обещание цепочки
Мы можем добавить несколько .then обработчики одному обещанию, как это:
promise.then(function(result) {
console.log('first .then handler');
return result;
}).then(function(result) {
console.log('second .then handler');
console.log(result);
}).catch(function(error) {
console.log(error);
});
Когда у нас есть несколько .then Добавлены обработчики, возвращаемое значение предыдущего .then Обработчик автоматически передается следующему .then обработчик.
Как видите, добавляя 4 + 5 разрешает обещание, и мы получаем эту сумму в первом .then обработчик. Там мы печатаем оператор журнала и возвращая эту сумму на следующую .then обработчик.
И внутри следующего .then Обработчик, мы добавляем оператор журнала, а затем мы печатаем результат, который мы получили от предыдущего .then обработчик.
Этот способ добавления нескольких .then обработчики известны как цепочки обещаний.
Как задержать выполнение обещания в JavaScript
Много раз мы немедленно не хотим создавать обещание, но хотят создать один после завершения некоторой операции.
Чтобы добиться этого, мы можем обернуть обещание в функции и вернуть это обещание от этой функции, как это:
function createPromise() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
const sum = 4 + 5;
if(isNaN(sum)) {
reject('Error while calculating sum.');
} else {
resolve(sum);
}
}, 2000);
});
}
Таким образом, мы можем использовать параметры функции внутри обещания, что делает функцию действительно динамичной.
function createPromise(a, b) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
const sum = a + b;
if(isNaN(sum)) {
reject('Error while calculating sum.');
} else {
resolve(sum);
}
}, 2000);
});
}
createPromise(1,8)
.then(function(output) {
console.log(output); // 9
});
// OR
createPromise(10,24)
.then(function(output) {
console.log(output); // 34
});
Примечание: Когда мы создаем обещание, он будет либо разрешен, либо отклонен, но не оба одновременно. Итак, мы не можем добавить два решить или Отклонить Функция звонков в том же обещании.
Кроме того, мы можем пройти только одно значение для решить или Отклонить функция.
Если вы хотите передать несколько значений на решить Функция, пропустите ее как объект, как это:
const promise = new Promise(function(resolve, reject) {
setTimeout(function() {
const sum = 4 + 5;
resolve({
a: 4,
b: 5,
sum
});
}, 2000);
});
promise.then(function(result) {
console.log(result);
}).catch(function(error) {
console.log(error);
});
Как использовать функции стрелки в JavaScript
Во всех приведенных выше примерах кода мы использовали регулярные синтаксис функции ES5 при создании обещаний. Но это обычная практика для использования синтаксиса функций стрелки вместо синтаксиса функций ES5, как это:
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
const sum = 4 + 5 + 'a';
if(isNaN(sum)) {
reject('Error while calculating sum.');
} else {
resolve(sum);
}
}, 2000);
});
promise.then((result) => {
console.log(result);
});
Вы можете использовать синтаксис функции ES5 или ES6 в зависимости от ваших предпочтений и потребностей.
ES6 Импорт и синтаксис экспорта
До того, как ES6 вошел в игру, мы использовали несколько Сценарий Теги в одном HTML-файле для импорта различных файлов JavaScript такие:
Итак, если у нас была переменная с тем же именем в разных файлах JavaScript, она создала бы конфликту с именами, а значение, которое вы ожидаете, не будет фактическим значением, которое вы получили.
ES6 исправил эту проблему с концепцией модулей.
Каждый файл JavaScript мы пишем в ES6, известен как модуль. Переменные и функции, которые мы объявляем в каждом файле, недоступны для других файлов, пока мы специально не экспортируем их из этого файла и импортируйте их в другой файл.
Таким образом, функции и переменные, определенные в файле, являются частными для каждого файла и не могут быть доступны вне файла, пока не экспортируем их.
Есть два типа экспорта:
- Именованный экспорт: в одном файле может быть несколько названных экспорта
- Экспорт по умолчанию: может быть только один экспорт по умолчанию в одном файле
Названный экспорт в JavaScript
Чтобы экспортировать одно значение в качестве именованного экспорта, мы экспортируем это так:
export const temp = "This is some dummy text";
Если у нас есть несколько вещей для экспорта, мы можем написать экспортную оператор на отдельной строке, а не перед переменной декларацией. Мы указываем вещи для экспорта в фигурных скобках.
const temp1 = "This is some dummy text1";
const temp2 = "This is some dummy text2";
export { temp1, temp2 };
Обратите внимание, что синтаксис экспорта не является объектом буквального синтаксиса. Таким образом, в ES6, экспортировать что-то, что мы не можем использовать пары ключа-значений, как это:
// This is invalid syntax of export in ES6
export { key1: value1, key2: value2 }
Чтобы импортировать вещи, которые мы экспортировали в качестве именованного экспорта, мы используем следующий синтаксис:
import { temp1, temp2 } from './filename';
Обратите внимание, что при импорте что-то из файла нам не нужно добавлять .js Расширение файла имени файла, как это считается по умолчанию.
// import from functions.js file from current directory
import { temp1, temp2 } from './functions';
// import from functions.js file from parent of current directory
import { temp1 } from '../functions';
Вот код Sandbox Demo: https://codesandox.io/s/hardcore-pond-q4cjx.
Одно следует отметить, что имя, используемое во время экспорта, должно соответствовать имени, которое мы используем при импорте.
Так что, если вы экспортируете как:
// constants.js export const PI = 3.14159;
Затем при импорте вы должны использовать то же имя, используемое во время экспорта:
import { PI } from './constants';
Вы не можете использовать любое другое имя, такое:
import { PiValue } from './constants'; // This will throw an error
Но если у вас уже есть переменная с тем же именем, что и экспортированная переменная, вы можете использовать синтаксис переименования во время импорта:
import { PI as PIValue } from './constants';
Здесь мы переименованы PI к Pivalue И поэтому мы не можем использовать PI Переменное имя сейчас. Вместо этого мы должны использовать Pivalue переменная, чтобы получить экспортированное значение PI Отказ
Мы также можем использовать переименование синтаксиса на момент экспорта:
// constants.js
const PI = 3.14159;
export { PI as PIValue };
Тогда пока импорт мы должны использовать Pivalue как это:
import { PIValue } from './constants';
Чтобы экспортировать что-то в качестве именованного экспорта, мы должны сначала объявить его.
export 'hello'; // this will result in error
export const greeting = 'hello'; // this will work
export { name: 'David' }; // This will result in error
export const object = { name: 'David' }; // This will work
Порядок, в котором мы импортируем множественный названный экспорт не важен.
Посмотрите на ниже Vave.js файл:
// utils/validations.js
const isValidEmail = function(email) {
if (/^[^@ ]+@[^@ ]+\.[^@ \.]{2,}$/.test(email)) {
return "email is valid";
} else {
return "email is invalid";
}
};
const isValidPhone = function(phone) {
if (/^[\\(]\d{3}[\\)]\s\d{3}-\d{4}$/.test(phone)) {
return "phone number is valid";
} else {
return "phone number is invalid";
}
};
function isEmpty(value) {
if (/^\s*$/.test(value)) {
return "string is empty or contains only spaces";
} else {
return "string is not empty and does not contain spaces";
}
}
export { isValidEmail, isValidPhone, isEmpty };
и в index.js Мы используем эти функции, как показано ниже:
// index.js
import { isEmpty, isValidEmail } from "./utils/validations";
console.log("isEmpty:", isEmpty("abcd")); // isEmpty: string is not empty and does not contain spaces
console.log("isValidEmail:", isValidEmail("abc@11gmail.com")); // isValidEmail: email is valid
console.log("isValidEmail:", isValidEmail("ab@c@11gmail.com")); // isValidEmail: email is invalid
Вот код Sandbox Demo: https://codesandox.io/s/youthful-flower-xesus.
Как видите, мы можем импортировать только необходимые экспортированные вещи и в любом порядке, поэтому нам не нужно проверять, в каком порядке мы экспортировали в другой файл. Это красота названного экспорта.
Экспорт по умолчанию в JavaScript
Как я уже говорил ранее, не может быть максимально одного экспорта по умолчанию в один файл.
Однако вы можете комбинировать несколько названных экспорта и один экспорт по умолчанию в одном файле.
Чтобы объявить экспорт по умолчанию, мы добавляем ключевое слово по умолчанию перед ключевым словом экспорта:
//constants.js const name = 'David'; export default name;
Чтобы импортировать экспорт по умолчанию, мы не добавляем курчавые кронштейны, как и в названном экспорте, как это:
import name from './constants';
Если у нас есть несколько названных экспортных экспорт и один экспорт по умолчанию:
// constants.js export const PI = 3.14159; export const AGE = 30; const NAME = "David"; export default NAME;
Затем, чтобы импортировать все на одной строке, нам нужно использовать экспортируемую переменную по умолчанию перед только ведным кронштейном.
// NAME is default export and PI and AGE are named exports here
import NAME, { PI, AGE } from './constants';
Одна специальность экспорта по умолчанию состоит в том, что мы можем изменить имя экспортированной переменной во время импорта:
// constants.js const AGE = 30; export default AGE;
И в другом файле мы можем использовать другое имя при импорте
import myAge from './constants'; console.log(myAge); // 30
Здесь мы изменили имя экспортируемой переменной по умолчанию из Возраст к Майдж Отказ
Это работает, потому что может быть только один экспорт по умолчанию, чтобы вы могли назвать его все, что вы хотите.
Другое, что следует отметить, что экспорт по умолчанию – это то, что ключевое слово экспорта не может прийти перед переменной декларацией, как это:
// constants.js export default const AGE = 30; // This is an error and will not work
Поэтому мы должны использовать ключевое слово экспорта на отдельной строке, как это:
// constants.js const AGE = 30; export default AGE;
Однако мы можем, однако, экспортировать дефолт, не объявляя переменную, как это:
//constants.js
export default {
name: "Billy",
age: 40
};
И в другом файле используйте это так:
import user from './constants'; console.log(user.name); // Billy console.log(user.age); // 40
Существует еще один способ импортирования всех переменных, экспортированных в файл, используя следующий синтаксис:
import * as constants from './constants';
Здесь мы импортируем все именованные и экспорт по умолчанию, в котором у нас есть constants.js и хранится в Константы Переменная. Итак, Константы станет объектом сейчас.
// constants.js
export const USERNAME = "David";
export default {
name: "Billy",
age: 40
};
И в другом файле мы используем его, как показано ниже:
// test.js
import * as constants from './constants';
console.log(constants.USERNAME); // David
console.log(constants.default); // { name: "Billy", age: 40 }
console.log(constants.default.age); // 40
Вот код Sandbox Demo: https://codesandox.io/s/green-hill-dj43b.
Если вы не хотите экспортировать на отдельные строки по умолчанию и названным экспортом, вы можете комбинировать его, как показано ниже:
// constants.js
const PI = 3.14159; const AGE = 30;
const USERNAME = "David";
const USER = {
name: "Billy",
age: 40
};
export { PI, AGE, USERNAME, USER as default };
Здесь мы экспортируем Пользователь в качестве экспорта по умолчанию и другие как названный экспорт.
В другом файле вы можете использовать это так:
import USER, { PI, AGE, USERNAME } from "./constants";
Вот код Sandbox Demo: https://codesandox.io/s/eloquent-northcutt-7BTP1.
В итоге:
- В ES6 данные, объявленные в одном файле, недоступны для другого файла, пока не экспортируется из этого файла и импортируется в другой файл.
- Если у нас есть единая вещь в файле, чтобы экспортировать, как декларация класса, мы используем экспорт по умолчанию, в противном случае мы используем названный экспорт. Мы также можем объединить по умолчанию и названным экспортом в одном файле.
Параметры по умолчанию в JavaScript
ES6 добавил довольно полезную функцию предоставления параметров по умолчанию при определении функций.
Предположим, у нас есть приложение, где после того, как пользователь войти в систему, мы покажем им приветственное сообщение, такое:
function showMessage(firstName) {
return "Welcome back, " + firstName;
}
console.log(showMessage('John')); // Welcome back, John
Но что, если у нас нет имени пользователя в нашей базе данных, так как это было необязательное поле при регистрации? Тогда мы можем показать Добро пожаловать гость сообщение пользователю после входа в систему.
Поэтому нам сначала нужно проверить, если Имя предоставляется, а затем отображение соответствующего сообщения. До ES6 нам пришлось бы написать код, как это:
function showMessage(firstName) {
if(firstName) {
return "Welcome back, " + firstName;
} else {
return "Welcome back, Guest";
}
}
console.log(showMessage('John')); // Welcome back, John
console.log(showMessage()); // Welcome back, Guest
Но теперь в ES6 используя параметры функции по умолчанию, мы можем написать вышеуказанный код, как показано ниже:
function showMessage(firstName = 'Guest') {
return "Welcome back, " + firstName;
}
console.log(showMessage('John')); // Welcome back, John
console.log(showMessage()); // Welcome back, Guest
Мы можем назначить любое значение в качестве значения по умолчанию к параметрам функции.
function display(a = 10, b = 20, c = b) {
console.log(a, b, c);
}
display(); // 10 20 20
display(40); // 40 20 20
display(1, 70); // 1 70 70
display(1, 30, 70); // 1 30 70
Как видите, мы назначили уникальные значения параметрам функции A и B, но для C мы назначаем значение b. Таким образом, независимо от того, какое значение мы не предоставили B, будут назначены на C, также если нет конкретного значения, предусмотренного для C при вызове функции.
В приведенном выше коде мы не предоставили все аргументы функции. Таким образом, вызовы выше функций будут такими же, как показано ниже:
display(); // is same as display(undefined, undefined, undefined) display(40); // is same as display(40, undefined, undefined) display(1, 70); // is same as display(1, 70, undefined)
Так что, если аргумент прошел undefined , значение по умолчанию будет использоваться для соответствующего параметра.
Мы также можем назначить сложные или расчетные значения в качестве значения по умолчанию.
const defaultUser = {
name: 'Jane',
location: 'NY',
job: 'Software Developer'
};
const display = (user = defaultUser, age = 60 / 2 ) => {
console.log(user, age);
};
display();
/* output
{
name: 'Jane',
location: 'NY',
job: 'Software Developer'
} 30
*/
Теперь посмотрите на следующий код ES5:
// ES5 Code
function getUsers(page, results, gender, nationality) {
var params = "";
if(page === 0 || page) {
params += `page=${page}&`;
}
if(results) {
params += `results=${results}&`;
}
if(gender) {
params += `gender=${gender}&`;
}
if(nationality) {
params += `nationality=${nationality}`;
}
fetch('https://randomuser.me/api/?' + params)
.then(function(response) {
return response.json();
})
.then(function(result) {
console.log(result);
})
.catch(function(error) {
console.log('error', error);
});
}
getUsers(0, 10, 'male', 'us');
В этом коде мы делаем вызов API к Случайный пользователь API путем передачи различных необязательных параметров в GetUsers функция.
Поэтому, прежде чем сделать вызов API, мы добавили различные, если условия для проверки, добавлен ли параметр или нет, и на основании того, что мы строим запрос, как это: https://randomuser.me/api/? Отказ
Но вместо того, чтобы добавлять так много, если условия, мы можем использовать параметры по умолчанию при определении параметров функций, как показано ниже:
function getUsers(page = 0, results = 10, gender = 'male',nationality = 'us') {
fetch(`https://randomuser.me/api/?page=${page}&results=${results}&gender=${gender}&nationality=${nationality}`)
.then(function(response) {
return response.json();
})
.then(function(result) {
console.log(result);
})
.catch(function(error) {
console.log('error', error);
});
}
getUsers();
Как видите, мы много упростили код. Поэтому, когда мы не предоставляем никакого аргумента для GetUsers Функция, она примет значения по умолчанию, и мы также можем предоставить наши собственные значения, такие как это:
getUsers(1, 20, 'female', 'gb');
Так что он переопределит параметры по умолчанию функции.
Нуль не равен неопределенному
Но вы должны знать об одном: null и undefined два разных вещей, определяющие параметры по умолчанию.
Посмотрите на следующий код:
function display(name = 'David', age = 35, location = 'NY'){
console.log(name, age, location);
}
display('David', 35); // David 35 NY
display('David', 35, undefined); // David 35 NY
Поскольку мы не предоставили третье значение для параметра местоположения в первом вызове, это будет undefined По умолчанию, так что значение по умолчанию будет использоваться в обоих вызовах функций. Но вызовы ниже функций не равны.
display('David', 35, undefined); // David 35 NY
display('David', 35, null); // David 35 null
Когда мы пройдем null В качестве аргумента мы специально говоря, назначая null ценность для Расположение Параметр, который не такой, как undefined Отказ Так что это не примет значение по умолчанию Нью-Йорк Отказ
Array.prototype.includes.
ES7 добавила новую функцию, которая проверяет, присутствует ли элемент в массиве или нет и возвращает логическое значение Oly правда или ложь Отказ
// ES5 Code
const numbers = ["one", "two", "three", "four"];
console.log(numbers.indexOf("one") > -1); // true
console.log(numbers.indexOf("five") > -1); // falseТот же код, использующий массив включает в себя Способ можно записать, как показано ниже:
// ES7 Code
const numbers = ["one", "two", "three", "four"];
console.log(numbers.includes("one")); // true
console.log(numbers.includes("five")); // falseТак что используя массив включает в себя Методы не хватают кода и легко понять.
включает в себя Способ также пригодится при сравнении с разными значениями.
Посмотрите на следующий код:
const day = "monday";
if(day === "monday" || day === "tuesday" || day === "wednesday") {
// do something
}Приведенный выше код с использованием включает в себя Метод может быть упрощен, как показано ниже:
const day = "monday";
if(["monday", "tuesday", "wednesday"].includes(day)) {
// do something
}Итак, включает в себя Метод довольно удобный при проверке значений в массиве.
Точки закрытия
Есть много изменений, которые были включены в JavaScript, начиная с ES6. И каждый JavaScript, Angular, React или Vue разработчик должен знать о них.
Знание их делает вас лучшим разработчиком и даже может помочь вам получить более высокую оплату. И если вы просто изучаете библиотеки, такие как React и Frameworks, такие как угловые и Vue, вы, безусловно, хотите быть знакомыми с этими новыми функциями.
Узнайте больше о современных функциях JavaScript
Вы можете узнать все о последних функциях, добавленных в JavaScript в My Овладение современным JavaScript книга. Это единственное руководство, которое вам нужно для изучения современных концепций JavaScript.
Подписаться на мой Еженедельная рассылка Чтобы присоединиться к 1000+ другим подписчикам, чтобы получить удивительные советы, трюки и статьи непосредственно в вашем почтовом ящике.