Статья — сборник некоторых полезных конструкций на языке JavaScript/jQuery, чтобы долго не искать и чтобы заново не придумывать.
Удалить объект из массива по какому-то его свойству
Допустим, что есть у нас массив объектов, среди свойство которого есть уникальные значение, к примеру, это может быть id или hash:
var orderArray = new Array();
var obj1 = {"id":"17282","row":"1", "seat":"5", "price": "455"};
var obj2 = {"id":"72858","row":"2", "seat":"6", "price": "144"};
var obj3 = {"id":"83525","row":"1", "seat":"7", "price": "1140"};
orderArray.push(obj1);
orderArray.push(obj2);
orderArray.push(obj3);
removeObjectInArray("72858", orderArray);//Удалили из массива второй объект obj2
//Определяем функцию
function removeObjectInArray(id, arr) {
var i;
for (i = 0; i < arr.length; i++) {
if (arr[i].id === id) {
arr.splice(i, 1)
}
}
}
Полностью очистить массив от всех элементов
Если нам нужно очистить массив от всех его элементов, то можно воспользоваться следующей конструкцией:
function clearArray(array) {
while (array.length) {
array.pop();
}
}
Перевод цвета из RGB в HEX — формат
Очень актуально, если нам нужно сравнить элементы по цветы, но у них разное представление одного и того же цвета и для того, чтобы RGB привести к HEX можно воспользоваться следующим методом:
var color = 'rgb(50,70,60)';
color = getHexFromRGBColor(color);
console.log(color);
function getHexFromRGBColor(color)
{
color = color.replace(/\s/g,"");
var aRGB = color.match(/^rgb\((\d{1,3}[%]?),(\d{1,3}[%]?),(\d{1,3}[%]?)\)$/i);
if(aRGB)
{
color = '';
for (var i=1; i<=3; i++) color += Math.round((aRGB[i][aRGB[i].length-1]=="%"?2.55:1)*parseInt(aRGB[i])).toString(16).replace(/^(.)$/,'0$1');
}
else color = color.replace(/^#?([\da-f])([\da-f])([\da-f])$/i, '$1$1$2$2$3$3');
return '#' + color;
}
Синхронное получение данных после AJAX — запроса в jQuery
Очень актуально, если мы часто работаем с данными, где время их получения играет важную роль и для этого можно воспользоваться следующими 2-мя приемами.
Первый прием заключается в том, что функция ajax() возвращает через поле responseText JSON — строку, идентичную той, которую мы получаем в функции success, но в отличии от нее возвращается синхронно и это то, что нужно:
function getPostJson(url, data){
var jsonString = $.ajax({
url: url,
data: data,
dataType:'JSON',
async: false,//это поле устарело и может не работать
success: function(data){}
}).responseText;
return JSON.parse(jsonString);
};
Второй прием заключается в том, что мы выполняем всю операцию внутри success или complete посредством передаваемых callback — функций:
var url = "";
var data = {};
getPostJson(url, data, function(res){
console.log(res);
});
function getPostJson(url, data, callback){
$.ajax({
url: url,
data: data,
dataType:'JSON',
success: callback,
});
};
Конструкция создания отдельного глобального jQuery — плагина/объекта
К примеру, вы создаете WEB — приложение, которое в последующем требует масштабирования, увеличения кода и т.п. И, тут, вам как никак потребуется структурировать ваши кастомные js — конструкции, чтобы они загружались из одного файла и чтобы они писались один раз и не повторялись в разных местах, иначе наступитт кошмар в процессе тестирования. В таких случаях пишут отдельный глобальный объект в виде плагина из которого, далее, все свойства и методы подгружаются.
Для создания такой конструкции можно воспользоваться следующим кодом, который мы сохраним в отдельном файле app.js который мы будем подключать, если нужны функции из содержащего в ней объекта:
;(function ($) {
$.app = function () {}//Собственно, само название глобального обекта
//Создадим новый узел coin, который будет содержать свои методы и свойства
$.app.coin = function () { }
$.app.coin.countCoins = 255;
$.app.coin.viewSumCoins = function (coins) {
console.log($.app.coin.coundCoins + coins);
});
}(jQuery));
Для использования надо просто подключить в страницу файл app.js и использовать определенные поля и методы:
$app.coin.countCoins = 300; $app.coin.viewCoins(300);//Выведет 600
Получение случайного набора символов указанной разрядности и видов символов
Допустим, есть некий набор символов, из которых нам нужно в случайном порядке получить набор символов определенной разрядности. Для этого можно воспользоваться конструкцией:
var razryad =6;
var hash = getRandomHash(razryad);
console.log(hash);//Получим что-то вроде fSd5d4
function getRandomHash(razryad) {
var text = "";
//Определяем набор символов
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < razryad; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
Воспроизведение аудио mp3
Допустим, есть задача воспроизводить аудио на странице с изменением звука и т.п. Для этого, сначала нужно будет внедрить в HTML наше аудио посредством кода с указанием исходного mp3 — файла:
<audio id="audio" controls="controls">
<source src="sounds/heartbeat.mp3" type="audio/mp3">
</audio>
Далее уже пишем код воcпроизведения на JavaScript:
myAudio = document.getElementById("audio");//Получаем аудио по ID
myAudio.volume = 50;//Объем звука в %
myAudio.play();//Проигрываем
myAudio.currentTime = 0;//Ставим обратно на начало воспроизведения
Сохранение локальных данных в кеше браузера
Очень актуально, если во время исполнения нашего WEB — приложения нужно сохранять переменные данные, которые не исчезнут после закрытия приложения или браузера. Это не выступает полноценной БД, но очень кстати, если нужно сохранять небольшие параметрические данные:
window.localStorage.setItem("login","root");//Сохранили значение root в параметре login
var myLogin = window.localStorage.getItem("login");//Получил значение параметра login
Проверить вхождение подстроки в строку
Для решения данной задачи в JavaScript есть масса методов и один из них — это использование метода indexOf():
var index = "Hello World!".indexOf("Hell");//Вернет индекс вхождения
По этому принципу удобно создавать роутеры по URL, проверяя какие-либо текстовые ключи на наличие их в текущем URL:
if(location.href.indexOf("live-fest-otkritie-366-367-detail") > -1)
{
//Подстрока найдена в текущем URL
}else
{
//Подстрока не найдена в текущем URL
}
Размещение строкового значения в несколько линий строки
Это очень удобно представить, к примеру, обычную html — сроку, написав несколько строк и при этом не дописывая символы конца строк для конкатенации между строками. При этом, строку надо окружать не в обычных скобках, а в обратных — backticks и выглядит так — `. Данный подход представления строки появился в стандарте JavaScript версии ECMAScript 6. К примеру, код ниже идентичен, но второй вариант более выразителен и прост:
//В версии языка ECMAScript 5 и ниже нам надо было пользоваться так
var html = '<div>\
<span>Some "HTML" here</span>\
</div>';
//Или так
var html = "<div>\
<span>Some 'HTML' here</span>\
</div>";
//Но теперь можно не заморачиваться, начиная с версии ECMAScript 6, если написать так
var html = `<div>\
<span>Some 'HTML4' here</span>\
<span>Some "HTML5" here</span>\
</div>`;
Получение GET — параметра из текущего URL
Если в URL есть нужные данные, которые необходимо с использовать в JS, то очень удобно воспользоваться конструкцией:
function $_GET(param) {
//Взвращает значение параметра
//Возвращает null, если параметру ничего не заданно
//Возвращает undefined, если нет такого параметра
if(window.location.href.indexOf(param) > -1) {
var vars = {};
window.location.href.replace( location.hash, '' ).replace(
/[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
function( m, key, value ) { // callback
vars[key] = value !== undefined ? value : '';
}
);
if ( param ) {
return vars[param] ? vars[param] : null;
}
return vars;
}else
{
return undefined;
}
}
Экспорт массива объектов в один объект
К примеру, у нас есть массив объектов, у которых 2 поля: tag и name вида:
var arr = [{tag:"tag_1", name:"name_1"}, {tag:"tag_2", name:"name_2"}, ...];
Необходимо перевести данный массив объектов в один объект с названием свойства tag и значением name:
var obj = {tag_1:"name_1",tag_1:"name_2", ...}
Для этого пишем итерацию для массива и добавление каждого элемента в объект:
for (var index in arr) {
var tag = tags[index].tag;
var name = tags[index].name;
obj[tag] = name;
}
