js
Переменные
var variable = 10 //доступна глобально
let letvariable = 100 //доступна только внутри фигурных скобок и на уровень ниже
const COLOR = 'blue' //нельзя менять значение. Можно менять obj и array через обращение к элементу внутри
Массивы
array = [1,1,2,4,8]
array.push(12)
Объекты
obj = {a: 42}
obj.name = "Name"
let job = 'Fullstack'
let person1 = {
age: 30,
'name': 'Имя',
[a + b]: '', //динамический ключ
job, //переменная в значение если совпадает с ключем то можно сократить
print: () => 'Person', //нет this
// toString: function(){ в новой версии function можно удалить
toString(){
// return `${this.age} ${this.name}`
return Object
.keys(this) //массив ключей
.filter( key => key != 'toString') //фильтр по ключу, исключаем функцию
.map(key => this[key])
.join(' ')
}
}
const first = {a: 1}
const second = {b: 1}
// Методы
// определяет, являются ли два значения одинаковыми значениями
Object.is(10, 10)
// обьединение, первый параметр {} чтобы не изменились first и second
Object.assign({},first, second, {new: 'new'})
// преобразование в массив
Object.entries(person)
// массив ключей
Object.keys(person)
//массив значений
Object.values(person)
Функции
// function
function summ(a, b){
return a + b //возведение в степень
}
// стрелочная функция
let sum = (a, b) => {
return a + b
}
function cube(a){
return a ** 3 //возведение в степень
}
// стрелочная функция. Кавычки в передаваемых переменных необязательны если один параметр. Если всего одна возвращаемая строчка выполняемого кода можно сократить синтаксис
let cub = a => a ** 3
// параметры по умолчанию
function compute(a, b = 10){
console.log(a + b)
}
Context
function log(){
a = 10
console.log(this)
}
// В стрелочной функции нет собственного контекста, он его не создает, this указывает на контекст который стоит выше
let arrowLog = () => console.log(this)
// выведет объект personal
const person = {
age: 20,
weight: 72,
log: log,
arrowLog: arrowLog,
delayLog: function () {
let self = this // Так можно передать контекст this если не использовать стрелочную функцию
setTimeout(function() {
console.log(self.age)
}, 500)
},
delayLog2: function () {
setTimeout(() => console.log(this.age), 500)
}
}
// выведет объект person
person.log()
// выведет window
person.arrowLog()
// this будет контекст функции Timeout, поэтому определили константу self
person.delayLog()
// Используем стрелочную функцию контекст объекта person
person.delayLog2()
Строки
let title = "Main page"
// при использовании обратных скобок можно вствлять переменную и использовать функции через ${}, можно использовать внтри другие кавычки, сохранаяются пробелы
let isVisible = () => Math.random() > 1
let template = `
${isVisible ? '
Visible
' : ''}
${title}
` // Методы const str = 'Hello' // С каких сиволов начинается строка str.startsWith('He') // на какие символы заканчивается строка str.endsWith('lo') // поиск по символам str.includes('llo') // удалить пробелы по краям str.trim()
Rest, Spread
//Rest
// массив всех передаваемых аргументов
function average(){
Array.from(arguments)
}
function averageRest(a, ...args){
args
}
// Spread
let arrayS = [1, 1, 2, 3, 5]
// преобразует массив в отдельные элементы
Math.max(...arrayS)
// раньше использовался
Math.max.apply(null, arrayS)
// пример добавления элемента в массив
arrayS = [...arrayS, 8]
Destructuring
// для массивов
// let a = arrayS[0]
// let b = arrayS[1]
let [a, b = 1, , ...c] = arrayS
// для объектов
let adress = {
country: 'Russia',
street: 'Street',
city: 'City',
get: function(){
return this.country;
}
}
// нужно чтобы имена совпадали, можно задать свое имя через :
let {country, street = 'Улица', city: cityNewName, get,...all} = adress
// так же можно передавать функцию, но в ней используется this, поэтому дополнительно передаем объект adress
get.call(adress)
// копия объекта с изменением одного из поля и добавления новых
let newAdress = {...adress, street: 'Улица', code: 17}
Import /export
// файлы в js являются модулями
// файл module.js
export const COLOR = "#FFF"
export function compute (a, b) {
return a + b
}
export default {
Log(){
console.log('log');
}
}
// файд index.js
import {COLOR, compute} from './module.js'
// чтобы импортировать export default, нужно не указывать переменные в скобках
import Logger,{COLOR, compute} from './module.js'
// импорт все из модуля
import * as LoggerModule from './moule.js'
Классы
user = new Person('Имя')
console.log(user.__proto__ === Person.prototype)
class Programmer extends Person {
constructor (name, job) {
super(name) //обращение к переменной из родительского класса
this._job = job
}
greet () {
super.greet() //обращение к родительскому методу из родительского класса
console.log(`Hi ${this.name}`)
}
//getter
get job() {
return this._job.toUpperCase()
}
//setter Нужен для валидации
set job(job) {
if(job.length < 2){
throw new Error('Значение меньше 2')
}
this._job = job
}
}
user = new Programmer('Имя', 'Проф')
console.log(user.job)
user.job = 'Работа'
console.log(user.job)
// Static
class Util {
static average(...args){
return args.reduce((acc, i) => acc += i, 0) / args.length
}
}
Символы
let symbol = Symbol('demo')
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Symbol
Циклы
// циклы по обьекту
for (let key in obj) {
}
Генераторы и Итераторы
// Iterator
// Итераторами можно пользоваться в циклах for of
const array11 = [1,2,3,4,5]
const iter = array11[Symbol.iterator]()
// console.log(iter.next())
for (let item of array11) {
// console.log(item)
}
for (let key in array11) {
}
const country2 = {
values: ['ru', 'en'],
[Symbol.iterator] () {
let i =0
return {
next: () => {
const value = this.values[i]
i++
return {
done: i > this.values.length,
value
}
}
}
}
}
// Generator
// Создание итератора
function *gen (num = 4) {
for(let i = 0; i < num; i++){
try{
yield i
} catch (e){
console.log(e)
}
}
}
const iter2 = gen(3)
console.log(iter2.next())
console.log(iter2.throw('Error'))
for(let i of gen(5)){
console.log(i)
}
Промисы
// удобная конструкция позволяющая работать с асинхронным кодом
const promise = new Promise ( (resolve, reject) => {
setTimeout( () => {
resolve('ok') //успешное выполнение
reject('no') //ошибка
}, 500)
})
promise.then(data => console.log(data)) //сработает после выполнения кода
//динамичиский delay
const delay = ms => new Promise( (resolve, reject) =>{
setTimeout( (data) => {
resolve(`Done ${ms}`)
reject(`Error ${ms}`) //если нужно вызвать ошибку, она отлавливается в catch. Чтобы сработало нужно поставить перед resolve
}, ms)
} )
delay(1000)
.then(data => console.log(data)) //срабатывает после выполнения
.then(data => delay(2000))
.then(data => console.log(data))
.catch( err => console.log(err)) //отлавливание ошибок
.finally( data => console.log('Final')) //Вызывается в в любом случае в самом конце
// Новый синтаксис
// асинхронная функция
// await delay(1000) то же самое что delay(1000).then(data => ) Работаем на плоском уровне, нет погружения во внутренние колбэки
async function asyncDelay () {
try{ //для обработки ошибок
const data = await delay(1000)
console.log(data)
} catch(e) {
console.log('Error', e)
}
}
asyncDelay()
// глобальные промис
// Ждет когда завершаться все промисы
Promise.all([
delay(1000),
delay(500),
delay(1000)
]).then(data => console.log(data))
// Ждет когда завершаться самы быстрый
Promise.race([
delay(1000),
delay(500),
delay(1000)
]).then(data => console.log(data))
map set
// map аналог обьекта только более продвинутый
const map = new Map(
[['a',1]] //тип передаваемого значение entries, массив в массиве
)
// console.log(map.get('a')) //доступе к элементам через метод get
map.set('b', 2).set('c', 10) //добавление
map.clear() //очистить
map.has() //проверка ключа
map.delete() //удаление по ключу
map.size //количетво элементов
map.entries() //элементы
map.keys() //ключи
map.values() // значения
// Set аналог массива
//удаляет дубликаты
const set = new Set([1, 1, 2, 3, 5, 8, 8])
set.add() //доабвлеие
set.clear() //очистить
set.has() //проверка ключа
set.delete() //удаление по ключу
set.size //количетво элементов
set.entries() //элементы
set.keys() //ключи
set.values() // значения
console.log(set)
Reflect
class Student{
constructor(name){
this.name = name
}
greet () {
console.log(`Hi ${this.name}`)
}
}
class ProtoStudent{
university = 'Oxford'
}
// третим параметрам передаем какой портотип будет у обекта
let student = Reflect.construct(Student, ['Name'], ProtoStudent)
console.log(student.__proto__ === ProtoStudent.prototype)
let student2 = Reflect.construct(Student, ['Name'])
// запкск метода
Reflect.apply(student2.greet, {name: 'tester'}, [])
// список ключей
console.log(Reflect.ownKeys(student2))
// Блокировка модификации обьекта
Reflect.preventExtensions(student2)
// Проверка заблокирован или нет обьект
console.log(Reflect.isExtensible(student2))
Proxy
// Это класс позволяющий добавлять ловушки на обьекты
// Например можно сделать валидатор для геттеров и сеттеров и потом применять для лубых обьектов
const validator = {
get(target, prop) {
return prop in target ? target[prop] : `Поля ${prop} в объекте нет`
},
set(target, prop, value){
if(value.length > 2){
Reflect.set(target, prop, value)
}else{
console.log(`Длина должна быть больше 2 символов. Сейчас ${value.length} символа`)
}
}
}
const form = {
login: 'tester',
password: '12345'
}
// первым параметром передаем объект за которым нужно следить
const formProxy = new Proxy(form, validator)
console.log(formProxy.login)
function log(message){
console.log('[log]', message)
}
const proxy = new Proxy(log, {
// target функция которую хотим вызвать
// thisArg контекст
// argArray параметры
apply(target, thisArg, argArray){
if(argArray.length === 1){
Reflect.apply(target, thisArg, argArray)
}else{
console.log('Количество аргументов не совадает')
}
}
})
// Вызываем proxy, индитична log
proxy('1')
29.11.2019
Flex верстка
13.12.2018
PHP основы
Подписаться
Будьте в курсе
Получите специальное предложение от нас.
Подписывайтесь и получите скидку 100$ на анализ сайта!
Подписывайтесь и получите скидку 100$ на анализ сайта!