JavaScript для начинающих
За последние 6 дней я подытожил все, что узнал о JavaScript. Вы можете изучить его, если хотите
Стиль кодирования
Использование пробела между параметрами в функции JavaScript
Избегайте пробелов между именем функции и параметрами
Использование фигурных скобок в той же строке после пробела в функции JavaScript
Если вы можете узнать больше о стиле программирования JavaScript, перейдите на этот сайт javaScript.info
Некоторые строковые методы JavaScript:
конкат()
Синтаксис: str.concat(str2 [, …strN])
Метод string.concat, используемый для объединения двух или более строк и возврата новой строки.
Пример:
let word1 = “Hello”; let word2 = “World”; console.log(word1.concat(“ “,word2)); // Hello World
Включает()
Синтаксис: str.includes(searchString[, position])
Включает значение поиска метода в строку и возвращает true или false.
Метод Insert принимает два параметра: первый параметр — значение, а второй — позиция.
Пример:
let sen = ‘The quick brown fox jumps over the lazy dog.’ console.log(sen.includes(“quick”)); // true (searching start with 0 index) console.log(sen.includes(“quick”, 20)); // false (searching start with 20 index)
заменить()
Синтаксис: const newStr = str.replace(regexp|substr, newSubstr|функция)
Метод замены заменяет конкретное значение из строки новым значением
Пример:
let str4 = “I have a ball. The ball is red” // replace one let repStr = str4.replace(“ball”,”pen”) console.log(repStr); // I have a pen. The ball is red // replace all let repStr2 = str4.replace(/ball/gi, “pen”) console.log(repStr2); // I have a pen. The pen is red
обрезать()
Синтаксис: str.trim()
Метод обрезки, используемый для удаления пробелов в начале и конце строки.
Пример:
const str8 = ‘ Hello world! ‘; console.log(str8); // “ Hello world! “ console.log(str8.trim()); // “hello world!”
Числовой метод JavaScript:
Число.parseFloat()
Синтаксис: Number.parseFloat(значение)
Метод Number.parseFloat анализирует аргумент и возвращает число с плавающей запятой.
Пример:
let num = “5225.5sadfasdf” let floatNum = Number.parseFloat(num) console.log(floatNum); // 225.5
Некоторые методы массива JavaScript:
конкат()
Синтаксис: const новый_массив = старый_массив.concat([значение1[, значение2[, …[, значениеN]]]])
Метод array.concat, используемый для объединения двух или более массивов и возврата нового массива
Пример:
const array1 = [‘a’, ‘b’, ‘c’]; const array2 = [‘d’, ‘e’, ‘f’]; const array3 = array1.concat(array2); console.log(array3); // [ ‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’ ]
присоединиться()
Синтаксис: typedarray.join([separator = ',']);
Метод соединения, используемый для объединения всех элементов массива в строку.
Пример:
let array5 = [“I”,”have”,”a”,”pen”] let str = array5.join(“ “) console.log(str); //I have a pen
сортировать()
Синтаксис: arr.sort([compareFunction])
Метод Arrar.sort, используемый для сортировки элемента массива и возврата отсортированного массива.
Пример:
let arr5 = [“a”,”c”,”e”,”b”,”d”] let sortArr = arr5.sort() console.log(sortArr); //[ ‘a’, ‘b’, ‘c’, ‘d’, ‘e’ ]
Некоторые методы объекта JavaScript:
заморозить()
Синтаксис: Object.freeze(obj)
Метод Object.freeze, используемый для этого свойства объекта, не может изменяться или модифицироваться.
Пример:
// without freeze
let obj = {
name: “Nasir”,
age: 24
}
obj.name = “Babu”
console.log(obj.name); // “Babu” (it’s changed)
// With obj.freeze
let obj = {
name: “Nasir”,
age: 24
}
Object.freeze(obj)
obj.name = “Babu”
console.log(obj.name); // “Nasir” ( it’s not changed)
Math.sin()
Синтаксис: Math.sin(x)
Функция Math.sin() возвращает синус числа
Пример:
const num = 1 console.log(Math.sin(num)); // 0.8414709848078965
Комментарии
Используйте комментарии, чтобы описать, как и почему работает код
Плохой комментарий
// This code will do this thing (...) and that thing (...) // ...and who knows what else... very; complex; code;
Этот комментарий не объясняет, как работает этот код или почему этот код
Хороший комментарий
/**
* Returns x raised to the n-th power.
*
* @param {number} x The number to raise.
* @param {number} n The power, must be a natural number.
* @return {number} x raised to the n-th power.
*/
function pow(x, n) {
...
}
Читая этот комментарий, лучше понять, как работает код
Обработка ошибок, «try..catch»
Есть много причин для ошибки в нашем коде или скрипте. Нам нужно знать, как с этим справиться.
Синтаксис:
Конструкция try..catch состоит из двух основных блоков: try, а затем catch:
try {
// your code here
}
catch {
// Error handling
}
Пример:
Без ошибок
С ошибкой
Если вы можете узнать больше о стиле программирования JavaScript, перейдите на этот сайт javaScript.info
Дом Дерево
Dom означает (объектная модель документа). Все в HTML, даже комментарии, становится частью DOM. DOM представляет HTML как древовидную структуру тегов. Вот как это выглядит:
Структура кода:
Древовидная структура DOM:для приведенного выше кода
Подробнее о Dom Tree можно узнать на этом сайте JavaScript.Info
Дом Узел
Мы знаем, что все в HTML, даже комментарии, становится частью DOM, и каждый элемент HTML — это «узел dom». Мы можем изменять, добавлять, удалять и т. д. «узел дома» с помощью JavaScript.
Клонирование узлов
Если вам нужен аналогичный узел для повторного использования, вы можете использовать cloneNode
Пример:
Удаление узла
Вы можете удалить любой «узел» из HTML DOM с помощью JavaScript.
Пример:
Создать новый узел DOM
для создания узлов DOM есть два метода:
- document.createElement(тег)
let div = document.createElement('div');
2. document.createTextNode(текст)
let textNode = document.createTextNode('Here I am');
HTML-атрибуты
HTML-атрибуты — это специальные слова, используемые внутри открывающего тега для управления поведением элемента. Элемент HTML может иметь множество атрибутов.
Методы JavaScript для работы с атрибутами:
elem.hasAttribute(name)— проверить на существование.elem.getAttribute(name)— чтобы получить значение.elem.setAttribute(name, value)– установить значение.elem.removeAttribute(name)– удалить атрибут.elem.attributes— это набор всех атрибутов.
один пример:
Свойство «скрытый» атрибут
Используйте атрибут «скрытый» в «узле dom», чтобы скрыть «узел».
Дополнительные свойства атрибутов HTML «href, class, id, style, value и т. д.»
Оператор равенства и сравнения
В JavaScript есть два разных способа сравнения значений объектов на предмет равенства. Оператор равенства (==) и оператор строгого равенства (===)
Иногда оператор равенства (==) дает другой результат, чем оператор строгого равенства (===). Как показано в таблице ниже.
Оператор равенства (==)
"" == "0" // false 0 == "" // true 0 == "0" // true false == "false" // false false == "0" // true false == undefined // false false == null // false null == undefined // true " \t\r\n" == 0 // true
Оператор строгого равенства (===)
"" === "0" // false 0 === "" // false 0 === "0" // false false === "false" // false false === "0" // false false === undefined // false false === null // false null === undefined // false " \t\r\n" === 0 // false
Причина разных результатов заключается в том, что оператор равенства (==) не проверяет тип значения, а оператор строгого равенства проверяет тип значения.
Удалить оператора
Оператор удаления часто имеет неожиданное поведение и может безопасно использоваться только для удаления явно заданных свойств обычного объекта. Если вы хотите удалить глобальную переменную или функцию, вы не можете этого сделать, потому что такие свойства имеют набор атрибутов, один из которых 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"// explicitly set property:
var obj = {x: 1};
obj.y = 2;
delete obj.x; // true
delete obj.y; // true
obj.x; // undefined
obj.y; // undefined
typeof Оператор
Тип оператора в основном используется для проверки типа переменной и того, были ли разработаны переменные
Таблица типов JavaScript
Value Class Type
-------------------------------------
"foo" String string
new String("foo") String object
1.2 Number number
new Number(1.2) Number object
true Boolean boolean
new Boolean(true) Boolean object
new Date() Date object
new Error() Error object
[1,2,3] Array object
new Array(1, 2, 3) Array object
new Function("") Function function
/abc/g RegExp object (function in Nitro/V8)
new RegExp("meow") RegExp object (function in Nitro/V8)
{} Object object
new Object() Object object
Тип литья
Приведение типов означает изменение типа любого значения. Вы можете изменить или преобразовать тип значения одного типа в другой тип. JavaScript допускает три типа преобразования: в строку, в число и в логическое значение.
Приведение к строке
'' + 10 === '10'; // true
Приведение к номеру
+'10' === 10; // true
Приведение к логическому значению
Дважды используя оператор not, можно преобразовать значение в логическое значение.
!!'foo'; // true
!!''; // false
!!'0'; // true
!!'1'; // true
!!'-1' // true
!!{}; // true
!!true; // true
Избегайте использования функции eval
Есть много причин не использовать eval, потому что eval может быть проблемой безопасности или может привести к сбою компьютера или сервера. Это может быть медленнее, чем другие коды javaScritp. Так что вам следует избегать Elev.
пример функции eval
var number = 1;
function test() {
var number = 2;
eval('number = 3');
return number;
}
test(); // 3
number; // 1
Вы можете узнать больше о функции eval из здесь
Object.prototype.hasOwnProperty
hasOwnProperty используется для проверки наличия у объекта каких-либо определенных свойств. Это возвращаемое логическое значение.
Пример:
var obj = {name: "Jhon",age : 24,}console.log(obj.hasOwnProperty("name")); // trueconsole.log(obj.hasOwnProperty("phone")); // false
Неопределенный против нуля
Undefined означает, что переменная была объявлена, но еще не определена. Null означает пустое или несуществующее значение. Присваивается значение Null, которое явно ничего не означает.
var val;var val2 = nullvar val3 =console.log(val); // undefinedconsole.log(val2); // nullconsole.log(val3 == null); // true
установить время ожидания ()
Функция установки времени ожидания используется, когда функцию необходимо запустить через определенное время.
Пример:
<button onclick="myFunction()">Try it</button><script>
function myFunction() {
setTimeout(function(){ alert("Hello"); }, 3000); // It will be run after 3 second
}
</script>
Вы можете узнать больше о setTimeout() здесь
установитьинтервал()
setInterval используется для непрерывного запуска функции через определенный период времени
<button onclick="myFunction()">Try it</button><script>
function myFunction() {
setInterval(function(){ alert("Hello"); }, 3000); // it will be run continuously after 3 second
}
</script>
Вы можете узнать больше о setInterval() здесь
Сферы
В основном в JavaScript есть два типа областей видимости, которые объявляются вне блока глобальной области видимости. Один из них — локальный, а другой — глобальный. Глобальный объем объявлен вне блока ({}), а локальный объем объявлен внутри блока ({}).
Пример:
Глобальный масштаб
var carName = "Volvo"; ( it is a global scope variable )function myFunction() {console.log(carName); // volvo}myFunction();
console.log(carName); // volvo
Локальная область
function myFunction2 () {var name = "Jhon" ( it is a local scope variable )console.log(name); // Jhon
}myFunction2 ()
console.log(name) // Error name is not defined
Вы можете узнать больше о Scope здесь.
Функция со значением параметра по умолчанию
Необходимо установить значение параметра функции по умолчанию, чтобы обеспечить правильную работу функции, даже если пользователь не указывает значение параметра функции.
Пример:
без параметра по умолчанию
function multiply(a, b) {
return a * b;
}
console.log(multiply(5, 2)); // 10
console.log(multiply(5)); // NaN
с параметром по умолчанию:
function multiply(a, b = 1) {
return a * b;
}
console.log(multiply(5, 2)); // 10
console.log(multiply(5)); // 5
Стрелочные функции
Стрелочная функция — это сокращенная форма функции JavaScript. Функция массива объявляется знаком стрелки (=›). В некоторых случаях функция стрелки ведет себя иначе, чем названная функция.
Пример:
hello = () => {
return “Hello World!”;
}
console.log(hello()) // "Hello World!"
Деструктуризация объекта
Деструктуризация объекта означает помещение значений свойства из объекта в другую переменную.
Пример:
const obj = {
name: “Nasir”,
age: 24,
}
const {name, age} = obj
console.log(name+ “, “ + age); // Nasir, 24
Разрушение массива
Деструктуризация массива аналогична деструктуризации объекта, но ее синтаксис отличается от деструктуризации объекта.
Пример:
const arr = ["Nasir","Babu","Rakib"] const [first,second,third] = arr console.log(first +", "+ second +", "+ third); // Nasir, Babu, Rakib
Я также многое узнал о JavaScript за последние 7 дней, что вы можете узнать как новичок.
За последние 6 дней я также многое узнал о теме JavaScript, которую вы можете изучить, будучи новичком.
- Оператор спреда
- Работа с безымянным параметром
- Функция уровня блокировки
- Временная мертвая зона
- Блокировка
- стек вызовов
- основная концепция объектно-ориентированного программирования в javaScript
- Объявления классов
- Выражения классов
- Подъем
Вы можете подписаться на эти веб-сайты, чтобы изучить эти темы
- MDN javaScript (дополнительные темы о javaScript)
- leanpub.com (подъем, объявления на уровне блоков, связывание блоков в циклах и т. д.)
- freecodecamp.org (объектно-ориентированное программирование)
Спасибо.
