За последние несколько дней я многому научился на многих веб-сайтах в ходе подготовки к работе. Вот краткое изложение, основанное на моей подготовке.
String.slice():
Он копирует часть строки и возвращает ее как новую строку без изменения исходной строки.
Синтаксис:
string.slice(start,end)
Пример:
const str = “Hello Bangladesh”; console.log(str.slice(0,6)); //output:Hello
Глобальный isNaN() против Number.isNaN():
isNaN — это функция, которая проверяет, является ли заданное значение допустимым числом или нет. Если значение является недопустимым числом (Not-a-number), то оно возвращает true, иначе возвращает false.
Здесь глобальная функция isNaN() сначала преобразует проверенное значение в число, а затем оценивает его, но Number.isNaN() напрямую проверяет его без какого-либо преобразования.
Пример:
console.log(isNaN(new Date().toString())); //string converted to number and return true console.log(Number.isNaN(new Date().toString())); //return false
Array.splice():
Этот метод изменяет существующий массив, удаляя или заменяя массив.
Синтаксис:
array.splice( index, remove_count, item_list )
Пример:
let languages = [‘C++’, ‘Java’, ‘Html’, ‘Python’, ‘C’]; // Add ‘javascript’ and ‘Php’ after removing ‘Html’. let removed = languages.splice(2, 1, ‘javascript’, ‘Php’)
Array.join():
Этот метод создает строку путем объединения элементов массива с использованием необязательного параметра-разделителя.
Пример:
const arr = [“amar”,”sonar”,”bangla”]; console.log(arr.join(“-”)); //output: amar-sonar-bangla
Array.shift() и unshift():
Метод Shift() удаляет первый элемент массива. Метод Unshift() добавляет новый элемент в первый индекс массива.
Пример:
const arr = [“amar”,”sonar”,”bangla”]; const del = arr.shift(); console.log(arr); //output:[ ‘sonar’, ‘bangla’ ] const add = arr.unshift(“bangladesh”); console.log(arr); //output: [ ‘bangladesh’, ‘sonar’, ‘bangla’ ]
Object.assign():
Этот метод используется для копирования одного или нескольких исходных объектов в целевой объект. Он принимает исходные объекты и целевой объект в качестве параметров и помещает исходные объекты в целевой объект и отображает целевой объект.
Пример:
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
//output: { a: 1, b: 4, c: 5 }
console.log(returnedTarget);
//output: { a: 1, b: 4, c: 5 }
Вот предупреждение для глубокого клонирования. Если исходное значение является ссылкой на объект, копируется только ссылочное значение.
Пример:
let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // { “a”: 0, “b”: { “c”: 0}}
obj2.b.c = 3;
console.log(JSON.stringify(obj1)); // { “a”: 1, “b”: { “c”: 3}}
console.log(JSON.stringify(obj2)); // { “a”: 2, “b”: { “c”: 3}}
Object.create():
Этот метод создает новый объект с указанным прототипом. Вновь созданный объект может получить доступ ко всем свойствам объекта-прототипа. Для добавления новых свойств может потребоваться необязательный параметр.
Пример:
const fruits = {test:’sour’}
const mango = Object.create(fruits, {
name:{value:’Rajshahi mango’}
});
console.log(‘name: ‘+mango.name + ‘, test: ‘+ mango.type)
//output: name: Rajshahi mango, test: sour
Object.values() и Object.keys():
Эти методы возвращают массив со значениями и ключами объекта.
Пример:
const object1 = {
a: ‘somestring’,
b: 42,
c: false
};
console.log(Object.values(object1)); // output:[“somestring”, 42, false]
console.log(Object.keys(object1)); //output: [“a”, “b”, “c”]
Object.freeze()
Этот метод замораживает объект. Замороженный объект больше нельзя изменить;
Пример:
const obj = { prop: 42 };
Object.freeze(obj);
obj.prop = 33;
// Throws an error in strict mode
console.log(obj.prop);
// expected output: 42
Math.round():
Он возвращает значение числа, округленное до ближайшего целого числа.
Пример:
console.log(Math.round(0.9)); //output: 1
Используйте оператор сложения (+) для преобразования строки в число:
Есть много способов преобразовать строку в число. Самый простой способ — использовать оператор (+) перед строкой.
Пример:
console.log(+”42"); //output:42
Но у него есть побочный эффект. Он может преобразовывать только строку числового типа, в противном случае он возвращает NaN, что можно решить с помощью функций parseInt и parseFloat. Как -
console.log(+”10.2abc”); //output:NaN console.log(parseInt(“10.2abc”)); //Output:10 console.log(parseFloat(“10.2abc”)); // output:10.2
Цикл:
Мы можем объявить цикл for следующим образом:
//for loop
const a = [1,2,3,4,5];
for (var i = 0, item; item = a[i];i++) {
console.log(`Item-${i+1} = ${a[i]}`);
}
// Output:
// Item-1 = 1
// Item-2 = 2
// Item-3 = 3
// Item-4 = 4
// Item-5 = 5
Здесь item = a[i] используется для проверки длины массива a.
Внимательно относитесь к длине массива:
Обычно мы знаем, что array.length означает количество элементов в массиве. Но вот одно на удар пример —
const a = [1,2,3]; a[100]=5; console.log(a.length); //output:101
Закрытие:
Замыкание — это функция, которая запоминает свои внешние переменные и может обращаться к ним. Всякий раз, когда JavaScript выполняет функцию, создается объект «область действия» для хранения локальных переменных, созданных в этой функции.
Пример:
function makeAdder(a) {
return function(b) {
return a + b;
}
}
x = makeAdder(5);
console.log(x(6));
Таким образом, при вызове makeAdder() создается объект области видимости с одним свойством: a, которое является аргументом, передаваемым функции makeAdder(). Затем makeAdder() возвращает только что созданную функцию.
Общедоступные статические поля:
Публичные статические поля полезны, когда их нужно использовать только один раз для каждого класса, а не для каждого экземпляра класса. Общедоступные статические поля объявляются с помощью ключевого слова static. Общедоступные статические поля не инициализируются повторно в подклассах, но к ним можно получить доступ через цепочку прототипов.
Пример:
class a {
static baseField = ‘base class field’
}
class b extends a {
}
console.log(b.baseField)
// expected output: “base class field”
Общедоступные статические методы:
Ключевое слово static определяет статический метод для класса. Статические методы не вызываются для экземпляров класса. Вместо этого они вызываются в самом классе.
Пример:
class ClassWithStaticMethod {
static staticMethod() {
return ‘static method has been called.’;
}
}
const ins = new ClassWithStaticMethod();
ins.staticMethod() //invalid
console.log(ClassWithStaticMethod.staticMethod()); //valid
Структура формы:
Как правило, мы применяли тег формы для запуска формы, а другие поля применялись внутри этого тега.
Тег ‹fieldset› рисует рамку вокруг связанных элементов. Он используется для группировки связанных элементов в форме. Текстовое содержание ‹легенды› формально описывает назначение ‹набора полей›, внутри которого она находится.
Пример:
<form>
<fieldset>
<legend>Fruit juice size</legend>
<p>
<label for=”name”>
Name :<input type=”text” name=”name” id=”name”>
</label>
</p>
</fieldset>
</form>
Несколько ярлыков:
Мы можем поместить несколько меток на один виджет, но это не очень хорошая идея, поскольку у некоторых вспомогательных технологий могут возникнуть проблемы с их обработкой. В случае нескольких меток мы должны вложить виджет и его метки в один элемент ‹label›.
Рассмотрим этот пример:
<div>
<label for=”username”>Name: <abbr title=”required” aria- label=”required”>*</abbr></label>
<input id=”username” type=”text” name=”username”>
</div>
Кросс-браузерное тестирование:
Кросс-браузерное тестирование — это процесс тестирования, гарантирующий, что приложение отлично работает в разных браузерах. Каждый браузер по-своему интерпретирует информацию на странице веб-сайта. Следовательно, некоторые браузеры могут иметь недостаточные функции, которые пытаются показать и сделать веб-сайт неработающим в этом браузере. Поэтому необходимо проверить совместимость приложения с разными браузерами.
Рабочий процесс кросс-браузерного тестирования:
Рабочий процесс тестирования и исправления ошибок в проекте можно разбить примерно на следующие четыре этапа:
i) Первоначальное планирование
ii) Разработка
iii) Тестирование/обнаружение
iv) Исправления/итерации
Первоначальное планирование:
Изначально у вас есть общее представление о вашем проекте. Затем следует приступить к изучению целевой аудитории — какие браузеры, устройства и т. д. будет использовать целевая аудитория для этого сайта? После этого у вас будет представление о том, какие технологии вы, вероятно, создадите для поддержки различных браузеров.
Разработка:
Существует несколько общих стратегий кроссбраузерной разработки, например:
ü Получите все функции, работающие как можно точнее во всех целевых браузерах. Это может включать в себя написание различных путей кода, которые по-разному воспроизводят функциональные возможности, предназначенные для разных браузеров, или использование некоторого полипилла для любой отсутствующей поддержки.
ü Примите тот факт, что некоторые вещи не будут работать одинаково во всех браузерах, и предложите разные (приемлемые) решения в браузерах, которые не поддерживают полную функциональность.
ü Примите тот факт, что ваш сайт просто не будет работать в некоторых старых браузерах.
Тестирование/обнаружение:
После завершения разработки вы должны протестировать новую функциональность и убедиться, что в вашем коде нет общих проблем, которые мешают вашей функции работать.
· Проверьте это в нескольких браузерах.
· Проведите тест на доступность лоу-фай для клавиатуры и средств чтения с экрана.
· Тестируйте на мобильных планшетах и многих небольших устройствах.
Вы также можете пойти дальше, если хотите. Существуют коммерческие инструменты, такие как Sauce Labs, Browser Stack, LambdaTest, TestingBot и CrossBrowserTesting, которые делают это за вас, не беспокоясь о настройке, если вы хотите вложить деньги в тестирование. это как предварительные версии в другом браузере.
Исправления/итерация:
Если у вас есть какая-либо ошибка, вы должны исправить ее, зная тип ошибки, версии устройств и браузеров и т. д.
Хранилище на стороне клиента:
В настоящее время большинство современных веб-сайтов являются динамическими — они хранят данные на сервере, используя несколько типов баз данных (хранилище на стороне сервера), затем запускают код на стороне сервера для извлечения необходимых данных, вставляют их в шаблоны статических страниц и обслуживают результирующие данные. HTML для клиента, который будет отображаться в браузере пользователя.
Хранилище на стороне клиента работает по схожим принципам, но используется по-разному. Для этого они используют разные API.
На раннем этапе разработки файлы cookie использовались для хранения данных на стороне клиента. Но в настоящее время они используют более эффективные API для хранения данных на стороне клиента, чем файлы cookie. Такие как -
1)Веб-хранилище
2)ИндексированныеBD и т.д.
Стиль кодирования:
Написание нашего кода должно быть чистым и ясным, чтобы его можно было правильно читать и отлаживать. Вот некоторые рекомендуемые правила:
i) Без пробела между именем функции и круглыми скобками.
ii) Пробел между параметрами.
iii) Фигурная скобка { в той же строке после пробела.
iv) Пустое место между логическими блоками
v) Линия не должна быть слишком длинной
vi) По горизонтали должно быть 2 или 4 пробела.
vii) Пробелы вокруг вложенного вызова
viii) Ставьте точку с запятой после каждого утверждения и т. д.
Выдает собственную ошибку:
В JavaScript есть множество встроенных конструкторов для стандартных ошибок: Error, SyntaxError, ReferenceError, TypeError и другие. Мы также можем использовать их для создания объектов ошибок.
Например, в системе регистрации необходимо указать имя пользователя. Без имени он показывает ошибку, например:
///throwing our own error
let json = ‘{“age”:30}’;
try{
let user = JSON.parse(json);
if(!user.name) throw new SyntaxError(“SyntaxError:name is undefined”);
//alert(user.name);
} catch(err){
console.log(err.message , err.name);
}
попробуйте поймать-наконец-то:
Предложение finally часто используется, когда мы начинаем что-то делать и хотим завершить его при любом результате. Если в блоке try есть какая-либо ошибка, то рабочий процесс выглядит следующим образом:
try > catch > finally
Если в блоке try нет ошибок, он работает так:
try > finally
Пример:
try {
//work
} catch (e) {
//handle errors
} finally {
//cleanup the working space
}
глобальный захват:
Представим, что вне try..catch произошла фатальная ошибка, и скрипт умер. Типа ошибка программирования или еще что-нибудь ужасное. Для этого в Node.js есть process.on («uncaughtException»). А в браузере мы можем назначить специальному свойству window.onerror функцию, которая будет запускаться в случае неперехваченной ошибки.
<script>
window.onerror = function(message, url, line, col, error) {
alert(`${message}\n At ${line}:${col} of ${url}`);
};
function readData() {
badFunc(); // Whoops, something went wrong!
}
readData();
</script>
Пользовательские ошибки:
Мы можем создать нашу собственную ошибку, расширив класс Error, например:
class Error{
constructor(message){
this.name = “build-in-error”;
}
}
class CustomError extends Error{
constructor(message) {
super(message);
this.name = “custom error”;
}
}
try{
throw new CustomError(“custom message”);
} catch (e){
console.log(e.message);
console.log(e.name);
}
DOM, дерево DOM и узлы:
DOM означает объектную модель документа. Всякий раз, когда мы хотим запустить веб-сайт, браузер пытается создать дерево DOM страницы, которую мы хотим видеть. Мы можем контролировать стиль веб-сайта с помощью объекта документа JavaScript.
Например -
document.body.style.background = ‘красный’;
С помощью этого оператора мы можем изменить фон веб-страницы.
DOM состоит из древовидной структуры вложенных узлов, которую часто называют «деревом DOM». В дереве DOM теги являются узлами элементов, текст за пределами элемента является текстовым узлом, а также имеет узел комментариев, который не выполняется во время страницы. нагрузка.
<!DOCTYPE html> <html lang=”en”> <head> <title>Document</title> </head> <body> <h1>Element Node</h1> <! — comment node → </body> </html>
Осторожно: «innerHTML+=» полностью перезаписывает:
Обычно мы используем += в качестве сокращения, но в DOM это означает перезапись. Другими словами, innerHTML+= делает это:
i) Старое содержимое удалено.
ii) Новый innerHTML записывается вместо конкатенации старого и нового.
Создайте узел и вставьте его в дерево Dom с помощью documentFragment:
Обычно DocumentFragment используется для его создания, сборки в нем поддерева DOM, а затем добавления или вставки фрагмента в DOM с помощью методов интерфейса Node, таких как appendChild() или insertBefore().
function getListContent() {
let fragment = new DocumentFragment();
for(let i=1; i<=3; i++) {
let li = document.createElement(‘li’);
li.append(i);
fragment.append(li);
}
return fragment;
}
ul.append(getListContent());
Изменить документ:
Способы создания новых узлов:
i) document.createElement(tag) создает элемент с заданным тегом.
ii) document.createTextNode(value) создает текстовый узел (используется редко).
iii) element.cloneNode(deep) клонирует элемент, если deep==true, то со всеми потомками.
Вставка и удаление:
i) node.append(…узлы или строки) для добавления узла в конце
ii) node.prepend(…узлы или строки) используется для предварительного добавления узла.
iii) node.before(…узлы или строки) используется для вставки непосредственно перед узлом.
iv) node.after(…узлы или строки) используется для вставки сразу после узла
v) node.replaceWith(…nodes[, strings]) используется для замены node.
vi) node.remove() используется для удаления узла.
Имя класса и список классов:
Используя «classList», мы можем добавить или удалить класс, не затрагивая другие элементы, которые могут быть у этого элемента. Но если мы назначим «className», он сотрет все существующие классы при добавлении нового (или, если мы назначим пустую строку, он сотрет их все).
Назначение «className» может быть удобным для случаев, когда вы уверены, что никакие другие классы не будут использоваться для элемента, но я обычно использую исключительно методы «classList». И «classList» также имеет удобные «переключатель» и «заменить». методы.
Пример:
//class list
if (checked){
listItem.classList.add(‘responded’);
}else{
listItem.classList.remove(‘responded’);
}
//className
if (checked){
listItem.className = ‘responded’;
}else{
listItem.className = ‘’;
}
Стили с классами:
Обычно мы привыкли стилизовать с помощью отдельного файла css. Но мы можем объявить классы и стили CSS в теге HTML. Есть два основных способа:
i) Создайте класс или идентификатор в CSS.
<body class=’bg-color’>
<h1 id=’heading’>This is the h1 tag</h1>
<p class=’paragraph’>Lorem ipsum dolor sit amet</p>
<script>function(){}</script>
</body>
ii) Напишите свойство непосредственно в элементе html:
<li style=’font-size: 30px’>Item</li>
Интересный факт:
2.toString() //error 2 .toString() //no error 2..toString() //no error (2).toString() //no error
(==) Vs (===):
Оператор равенства (==) приводит типы для их сравнения. Вот почему это считается плохой практикой. Чтобы решить эту проблему, JavaScript представил новый оператор, называемый оператором строгого равенства (===), который не выполняет приведение типов между своими операндами.
if(0 ==”0"){
console.log(“true”);
}else{
console.log(“false”);
}
//output: true
if(0 ===”0"){
console.log(“true”);
}else{
console.log(“false”);
}
//output: false
оператор typeOf:
Он используется для проверки типа объекта. Давайте посмотрим пример —
//typrof console.log(typeof(1.2));
Но для проверки типа объекта настоятельно рекомендуется использовать Object.prototype.toString.
экземпляр оператора:
Оператор instanceof используется для работы со специально созданными объектами, происходящими из того же контекста JavaScript, что и typeof. Он показывает неожиданные результаты для нативных типов.
//instanceof
const Foo =()=>{}
const Bar =()=>{}
Bar.prototype = new Foo();
new Bar() instanceof Bar; // true
new Bar() instanceof Foo; // true
здесь Bar.prototype задается как функциональный объект Foo, но не как фактический экземпляр Foo. Посмотрите ниже —
Bar.prototype = Foo; new Bar() instanceof Foo; // false
Конструкторы встроенных типов:
Конструкторы встроенных типов, таких как Number и String, ведут себя по-разному при использовании с ключевым словом new и без него.
new Number(10) === 10; // False, Object and Number Number(10) === 10; // True, Number and Number new Number(10) + 0 === 10; // True, due to implicit conversion
Почему бы не использовать eval:
Функция eval будет выполнять строку кода JavaScript в локальной области видимости и выполнять любой переданный ей код, поэтому это тревожный факт для безопасности и производительности. Кроме того, он выполняется только в локальной области, когда он вызывается напрямую и когда имя вызываемой функции фактически eval. Например -
let number = 1;
function test() {
let number = 2;
let copyOfEval = eval;
copyOfEval('number = 3');
return number;
}
test(); // 2
number; // 3
не определено и пусто:
Undefined — это тип, имеющий ровно одно значение: undefined.
Вот несколько примеров, когда возвращается значение undefined:
i) Доступ к (немодифицированной) глобальной переменной undefined.
ii) Доступ к объявленной, но еще не инициализированной переменной.
iii) Неявный возврат функций из-за отсутствия операторов возврата.
iv) операторы возврата, которые явно ничего не возвращают
v) Поиск несуществующих свойств.
vi) Параметры функции, которым не передано явное значение
vii) Все, для чего установлено значение undefined.
viii) Любое выражение в форме void(expression)
Есть два способа обработки изменений значения undefined. Вот эти —
// 1)As a local variable
var undefined = 123;
(function(something, foo) {
var undefined;
…
})(‘Hello World’, 42);
//2) As a global variable
var undefined = 123;
(function(something, foo, undefined) {
})(‘Hello World’, 42);
Использование нуля:
Он используется в некоторых внутренних компонентах JavaScript (например, при объявлении конца цепочки прототипов установкой Foo.prototype = null), но почти во всех случаях его можно заменить на undefined.
setInterval():
В то время как setTimeout запускает функцию только один раз, setInterval, как следует из названия, будет выполнять функцию каждые X миллисекунд, но ее использование не рекомендуется.
Когда исполняемый код блокирует вызов тайм-аута, setInterval по-прежнему будет вызывать дополнительные вызовы указанной функции. Это может, особенно с небольшими интервалами, привести к накоплению вызовов функций.
function foo(){
// something that blocks for 1 second
}
setInterval(foo, 100);
В приведенном выше коде foo вызывается один раз, а затем блокируется на одну секунду.
Удалить оператора:
В JavaScript невозможно удалить глобальную переменную, функцию и другие константы из-за установленного атрибута DontDelete. Но явные свойства можно легко удалить с помощью оператора удаления.
Аргументы обычных функций также имеют встроенные атрибуты DontDelete. Но в случае с хост-объектами это показывает непредсказуемый результат.
// global variable:
var a = 1; // DontDelete is set
delete a; // false
a; // 1
// normal function:
function f() {} // DontDelete is set
delete f; // false
typeof f; // “function”
// reassigning doesn’t help:
f = 1;
delete f; // false
f; // 1
// explicitly set property:
var obj = {x: 1};
obj.y = 2;
delete obj.x; // true
delete obj.y; // true
obj.x; // undefined
obj.y; // undefined
Подъем:
JavaScript поднимает объявления. Это означает, что и операторы var, и объявления функций будут перемещены в верхнюю часть своей области видимости.
bar();
const bar = function() {};
const someValue = 42;
test();
function test(data) {
}
Порядок разрешения имен:
Все области видимости в JavaScript, как глобальные, так и локальные, имеют специальное имя this, которое относится к текущему объекту. Чтобы функционировать, arguments ссылается на аргументы, которые были переданы функции.
Например, при попытке доступа к переменной с именем foo внутри области действия функции JavaScript будет искать имя в следующем порядке:
i) Если в текущей области есть оператор var foo, используйте его.
ii) Если один из параметров функции называется foo, используйте его.
iii) Если сама функция называется foo, используйте ее.
iv) Перейдите к следующей внешней области видимости и снова начните с #1.
Подъем:
Когда мы объявляем ключевое слово var в любом месте для объявления переменной, оно действует как глобальная переменная, и это называется подъемом. Например, если мы объявим переменную значения внутри блока if, например:
//hoisting
function getValue(condition) {
if (condition) {
var value = “blue”;
return value;
} else {
// value exists here with a value of undefined
}
// value exists here with a value of undefined
}
Но он действует как -
function getValue(condition) {
var value;
if (condition) {
value = “blue”;
// other code
return value;
} else {
return null;
}
}
Let Vs Const Vs Var:
i) var действует как глобальная переменная, которую можно переназначить в любое время.
ii) Let может быть доступен, а также переназначаться в декларативной области.
iii) Константа не может переназначаться, поэтому она должна инициализироваться во время объявления, иначе она принимает неопределенное значение. Он может быть доступен только в декларативной области.
Параметры остальных:
Используя остальные параметры, мы можем собрать любое количество аргументов в массив и делать с ними все, что захотим. Остальные параметры должны быть последним аргументом, потому что он собирает все оставшиеся аргументы в массив.
Вот пример —
function xyz(x, y, …z) {
console.log(x, ‘ ‘, y); // hey hello
console.log(z); // [“wassup”, “goodmorning”, “hi”, “howdy”]
console.log(z[0]); // wassup
console.log(z.length); // 4
}
xyz(“hey”, “hello”, “wassup”, “goodmorning”, “hi”, “howdy”)
Оператор спреда:
Оператор Spread делает в точности обратное оператору rest. Это означает, что он преобразует элементы массива в отдельные переменные. У него много применений. Некоторые из —
я) скопировать массив
ii) Создайте массив из символов в строке
iii) Добавить массив в конец другого массива
iv) Найдите наименьшее/наибольшее число в массиве
v) Объединить объекты
vi) Разрушение объекта и так далее.
Давайте проиллюстрируем первый пример —
const arr1 = [1,2,3,4]; const arr2 = […arr1]; console.log(arr2);
Деструктуризация объекта:
Деструктуризация объекта принимает значения свойств отдельных объектов и присваивает их переменным. Например -
letnode={type:"Identifier",name:"foo"};let{type,name}=node;console.log(type);// "Identifier"console.log(name);// "foo"
Деструктуризация массива:
Синтаксис деструктуризации массива очень похож на деструктуризацию объекта; он просто использует синтаксис литерала массива вместо синтаксиса литерала объекта
letcolors=["red","green","blue"];let[firstColor,secondColor]=colors;console.log(firstColor);// "red"console.log(secondColor);// "green"
Структуры, подобные классам, в ECMAScript 5:
До ECMAScript 6 в JavaScript не было класса, вместо создания подхода к пользовательскому типу, при котором создается конструктор, а затем назначаются методы прототипу конструктора, например:
function PersonType(name) {
this.name = name;
}
PersonType.prototype.sayName = function() {
console.log(this.name);
};
let person = new PersonType(“Nicholas”);
person.sayName(); // outputs “Nicholas”
console.log(person instanceof PersonType); // true
console.log(person instanceof Object); // true
Классы как первоклассные граждане/функции:
Гражданин первого класса называется подходом, при котором класс может использоваться как параметр функции, затем возвращаться из функции и присваиваться переменной. Это позволяет использовать классы по-разному. Например, их можно передавать в функции в качестве аргументов —
function createObject(classDef) {
return new classDef();
}
let obj = createObject(class {
sayHi() {
console.log(“Hi!”);
}
});
obj.sayHi(); // “Hi!”
В этом примере функция createObject() вызывается с выражением анонимного класса в качестве аргумента, создает экземпляр этого класса с новым и возвращает экземпляр. Затем переменная obj сохраняет возвращенный экземпляр.
Еще один пример –
let person = new class {
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name);
}
}(“Nicholas”);
person.sayName(); // “Nicholas”
Здесь создание синглетонов путем немедленного вызова конструктора класса без оставления ссылки на класс доступной для проверки.
Вычисленные имена участников:
Методы класса и свойства доступа также могут иметь вычисляемые имена. Вместо использования идентификатора используйте квадратные скобки вокруг выражения, например, как —
//for method
let methodName = “sayName”;
class PersonClass {
constructor(name) {
this.name = name;
}
[methodName]() {
console.log(this.name);
}
}
let me = new PersonClass(“Nicholas”);
me.sayName();
//for property
let propertyName = “html”;
class CustomHTMLElement {
constructor(element) {
this.element = element;
}
get [propertyName]() {
return this.element.innerHTML;
}
set [propertyName](value) {
this.element.innerHTML = value;
}
}
Наследование с производными классами:
В JavaScript каждый класс может быть получен только из другого класса. Этот класс называется суперклассом или родительским классом. Подкласс называется производным классом или дочерним классом.
Используя расширения, можно наследовать все свойства и методы, кроме частных свойств.
Вот пример —
class Rectangle {
constructor(length, width) {
this.length = length;
this.width = width;
}
getArea() {
return this.length * this.width;
}
}
class Square extends Rectangle {
constructor(length) {
// same as Rectangle.call(this, length, length)
super(length, length);
}
}
var square = new Square(3);
console.log(square.getArea()); //9
Объектно-ориентированное программирование (ООП):
ООП означает объектно-ориентированное программирование. Эти концепции позволяют создавать классы и объекты, которые ведут к большей степени абстракции. ООП состоит из трех основных концепций: инкапсуляция, полиморфизм и наследование.
Инкапсуляция:
Инкапсуляция — это комбинация данных и операций для создания единой структуры для большей абстракции.
Полиморфизм:
Poly означает мульти, а morps означает множественные формы. Таким образом, это способность функции использовать ее несколькими способами.
Наследование:
Наследование — это концепция объекта, наследующего свойства от другого объекта.
Цикл событий:
Цикл событий отслеживает стек вызовов и очередь обратного вызова. Если стек вызовов пуст, он возьмет первое событие из очереди и поместит его в стек вызовов, который эффективно его запустит. Такая итерация называется циклом событий. Каждое событие — это просто обратный вызов функции.
console.log(‘Hi’);
setTimeout(function cb1() {
console.log(‘cb1’);
}, 5000);
console.log(‘Bye’);
Стек вызовов:
Стек вызовов — это структура данных, которая в основном записывает, где в программе мы находимся. Если мы входим в функцию, мы помещаем ее на вершину стека. Если мы возвращаемся из функции, мы выталкиваем вершину стека.
В основном следует принципу (LIFO) для временного хранения и управления вызовом функции (вызовом).
Давайте посмотрим пример. Взгляните на следующий код:
function multiply(x, y) {
return x * y;
}
function printSquare(x) {
var s = multiply(x, x);
console.log(s);
}
printSquare(5);
Когда движок начнет выполнять этот код, стек вызовов будет пуст. После этого шаги будут следующими:
Чистая функция:
Чистые функции — это столп функционального программирования, который всегда возвращает один и тот же результат при одних и тех же параметрах. Он не зависит и не может изменять состояние переменных вне своей области видимости.
Давайте посмотрим пример -
const obj = {a:5};
function pureFunction(a) {
const c = a+ 2;
return c;
}
console.log(pureFunction(obj.a)); //output:7
console.log(pureFunction(5)); //output: 7
Нечистая функция:
Это может быть затронуто вне его лексического объема.
Например -
const values = { a: 5 };
function impureFunction(items) {
items.a = items.a + 2;
return items.a;
}
var c = impureFunction(values);
// Now `values.a` is 7, the impure function modifies it.
Функция высшего порядка:
Функция, которая принимает функцию обратного вызова в качестве параметра, называется функцией высшего порядка. В JavaScript есть множество типов встроенных функций высшего порядка, таких как mas, find, filter, reduce и так далее.
Пример:
const names = [“rakib”,”sakib”,”rofiq”]; const res = names.find(name=>name === “sakib”)? “Yes” : “No”; console.log(res);
Неизменяемость:
Неизменяемый объект — это объект, состояние которого нельзя изменить после его создания. Для неизменяемых типов данных у нас нет возможности изменить внутреннее состояние данных, поэтому ссылка всегда переназначается новому объекту.
Пример:
var person = new ImmutableMap({name: "Chris", age: 32});
var olderPerson = person.set("age", 33);
person.toObject(); // {name: "Chris", age: 32}
olderPerson.toObject(); // {name: "Chris", age: 33}
Функциональный состав:
Композиция функций — это процесс объединения двух или более функций для создания новой функции.
Скажем, например, если композиция функций `f` и `g` может быть определена как `f(g(x))`, то сначала выполняется самая внутренняя функция, а затем, соответственно, внешняя. Таким образом, порядок выполнения такой:
`x`>`g`>`f`
Вот пример, чтобы прояснить факт -
function h(x) {
return x + 1; //1+1
}
function g(x) {
return x * x; //2*2
}
function f(x) {
return Math.pow(x, 3); //4^3
}
const y = f(g(h(1)));
console.log(y); // 64
Рекурсия:
Рекурсия — это метод повторения операции, когда функция многократно вызывает сама себя, пока не достигнет порогового значения.
var countdown = function(value) {
if (value > 0) {
console.log(value);
return countdown(value - 1);
} else {
return value;
}
};
countdown(10);
Каррирование:
Каррирование — это преобразование функций, которое переводит функцию из вызываемой как f(a, b, c) в вызываемую как f(a)(b)(c).
Каррирование не вызывает функцию. Просто преображает. Вот пример -
function curry(f) {
return function(a) {
return function(b) {
return f(a, b);
}
}
}
function sum(a, b) {
return a + b;
}
let curriedSum = curry(sum);
alert( curriedSum(1)(2) ); // 3
Это все на данный момент. Пока.
Ссылки:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Class_fields
https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form
https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage
http://bonsaiden.github.io/JavaScript-Garden/#types/#types
http://bonsaiden.github.io/JavaScript-Garden/#core.eval http://bonsaiden.github.io/JavaScript-Garden/#core.undefined
http://bonsaiden.github.io/JavaScript-Garden/#core.delete
http://bonsaiden.github.io/JavaScript-Garden/#other.timeouts
http://bonsaiden.github.io/JavaScript-Garden/#function.scopes
