В одной из моих первых статей я утверждал, что, хотя ядро JavaScript продолжает совершенствоваться с помощью новых методов, ему все еще не хватает некоторых полезных. Исходя из фона PHP, одна вещь, которую я действительно ценю, — это удивительная нативная библиотека. В этой статье будут обсуждаться пять функций PHP, которые я бы хотел видеть в JavaScript.
Обратите внимание, что эта статья не собирается утверждать, что JavaScript хуже / лучше, чем PHP. Вместо этого это возможность обсудить некоторые функции и посмотреть, как они могут быть реализованы. Кроме того, имейте в виду, что это не «обязательные» функции, а «приятные». JavaScript продолжает оставаться отличным языком, даже если в нем отсутствуют следующие утилиты. Для всех методов, описанных здесь, я добавлю их в прототип правильного объекта, чтобы все экземпляры использовали один и тот же метод.
уникальный ()
Одной из наиболее распространенных задач, с которыми вы сталкиваетесь при работе с массивами, является извлечение уникальных значений. Есть разные способы достижения этой цели, но я собираюсь показать метод, который пытается быть максимально общим. Это означает, что метод, использующий метод inArray()
Array.prototype.unique = function (sort, sortingFunction) {
var array = [];
for (var i = 0; i < this.length; i++) {
if (array.inArray(this[i]) === false)
array.push(this[i]);
}
if (sort === true) {
if (typeof sortingFunction === 'function')
array.sort(sortingFunction);
else
array.sort();
}
return array;
};
Проиллюстрированный метод имеет два параметра: первый — логическое значение, указывающее, нужно ли сортировать возвращаемый массив, а второй — ссылка на функцию сортировки. Возвращенный массив инициализируется в пустой массив, затем для каждого элемента массива функция проверяет, был ли он уже добавлен. Если элемент еще не был внутри массива, он будет добавлен. После нажатия всех необходимых элементов метод проверяет, хочет ли пользователь отсортировать массив, а также задана ли функция сортировки. Если это так, массив будет отсортирован с использованием данной функции, в противном случае метод sort()
Теперь, когда вы знаете, что делает код и потому что это самый интересный метод, я покажу вам три разных примера.
Пример 1 — Использование целых чисел
В этом примере я буду использовать простой массив, содержащий только цифры. В следующих двух строках я распечатаю уникальные значения, а также отсортированные уникальные значения массива.
var array = [1, 2, 9, 6, 2, 1, 9, 3];
console.log(array.unique()); // print [1, 2, 9, 6, 3]
console.log(array.unique(true)); // print [1, 2, 3, 6, 9]
Пример 2 — Использование строк
В этом примере используется массив строк. На этот раз при втором вызове метода unique()
var array = ["hi", "hi", "hi", "aurelio", "hello", "aurelio", "de rosa", "jspro.com"];
console.log(array.unique());
// print ["hi", "aurelio", "hello", "de rosa", "jspro.com"]
console.log(array.unique(true, function(a, b){ return -1 * a.localeCompare(b); }));
// print ["jspro.com", "hi", "hello", "de rosa", "aurelio"]
Пример 3 — Использование объектов
В третьем примере используется массив объектов, чтобы продемонстрировать, насколько мощным является unique()
var array = [{x: 1, y: 2}, {x: 12, y: 3}, {x: 1, y: 2}, {x: 2, y: 3}, {x: 2, y: 4}, {x: 20, y: 23}, {x: 2, y: 3}];
console.log(array.unique());
// print [{x: 1, y: 2}, {x: 12, y: 3}, {x: 2, y: 3}, {x: 2, y: 3}, {x: 20, y: 23}]
htmlSpecialChars ()
В PHP вам часто нужно печатать результат разработки, но вы должны быть осторожны с тем, что вы фактически вводите в свой HTML-код. Фактически, без надлежащего экранирования некоторых символов вы можете разрешить атаки XSS. Эта проблема также может повлиять на код JavaScript. В PHP, чтобы защитить себя, вы можете использовать htmlspecialchars()
<
>
<
и >
, Это позволяет отображать строку, не беспокоясь о том, что браузер интерпретирует ее как HTML. К сожалению, JavaScript не имеет эквивалентной нативной функции, и по этой причине мы ее создадим.
Мы будем использовать собственный метод JavaScript replace()
Что мы будем делать, так это искать проблемные символы и заменять их, используя закодированные эквивалентные объекты. Поскольку мы хотим изменить все вхождения, мы будем использовать регулярное выражение и флаг g
String.prototype.htmlSpecialChars = function(){
return this
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
};
Давайте посмотрим демо, которое использует наш htmlSpecialChars()
var string = 'Me, myself & I like to "code" <html>';
console.log(string.htmlSpecialChars());
// print Me, myself & I like to "code" <html>
htmlSpecialCharsDecode ()
В предыдущем разделе мы увидели метод htmlSpecialChars()
Есть моменты, когда вы хотите запустить обратный процесс, преобразовав закодированную строку в простую. Для достижения этой цели я покажу вам эквивалент функции PHP htmlspecialchars_decode()
Следующее очень похоже на предыдущее, поэтому я не буду обсуждать это дальше. Он просто меняет два параметра replace()
String.prototype.htmlSpecialCharsDecode = function(){
return this
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
};
Давайте посмотрим демо, которое использует наш htmlSpecialCharsDecode()
var string = 'Me, myself & I like to "code" <html>';
console.log(string);
// print Me, myself & I like to "code" <html>
string = string.htmlSpecialChars();
console.log(string);
// print Me, myself & I like to "code" <html>
string = string.htmlSpecialCharsDecode();
console.log(string);
// print Me, myself & I like to "code" <html>
ucwords ()
Сеть полна блогов, которые публикуют множество статей каждый месяц. Многие из этих блогов будут заглавными буквами каждого слова в заголовках постов. Представьте, что вы хотите применить это преобразование с помощью JavaScript. К сожалению, JavaScript не имеет такой функции, как PHP ucwords()
Но вы можете легко создать его самостоятельно. Ключевым моментом метода, который мы разрабатываем, является извлечение, а затем обработка каждого слова внутри строки. Для достижения этой цели мы будем использовать метод JavaScript split()
Как вы можете догадаться, мы разделим строку на пробелы (а не только на пробелы), выделим слова в верхнем регистре и затем присоединим их снова. Код для нашего ucwords()
String.prototype.ucwords = function() {
var words = this.split(/(s+)/);
for(var i = 0; i < words.length; i++)
words[i] = words[i][0].toUpperCase() + words[i].substr(1, words[i].length);
return words.join('');
};
Как вы можете видеть, читая код, внутри цикла for
toUpperCase()
После этого мы заменим старую строку, переназначив новую на ее место. Теперь, когда вы знаете, как работает метод, давайте рассмотрим пример.
var string = 'my name is aurelio de rosa';
console.log(string.ucwords());
// print My Name Is Aurelio De Rosa
ucfirst ()
Из кода ucwords()
ucfirst()
Последний делает первый символ строки заглавными. Что отличается от реализации ucwords()
Источник ucfirst()
String.prototype.ucfirst = function() {
var words = this.split(/(s+)/);
if (words[0] != null)
words[0] = words[0][0].toUpperCase() + words[0].substr(1, words[0].length);
return words.join('');
};
Пример использования этой функции показан ниже.
var string = 'my name is aurelio de rosa';
console.log(string.ucfirst());
// print My name is aurelio de rosa
Вывод
Хотя ядро JavaScript продолжает развиваться с каждым выпуском, отсутствует несколько функций. Тем не менее, вы можете найти многие из них в ваших предпочтениях, таких как jQuery. Если вы предпочитаете использовать сырой JavaScript или вам просто нужно немного функций, эта статья показала вам, как легко написать свои собственные реализации. В заключение хочу подчеркнуть, что все методы, которые я описал, были добавлены в прототип их соответствующего типа — unique()
Array
htmlSpecialChars()
htmlSpecialCharsDecode()
ucwords()
ucfirst()
String
Это позволяет всем переменным этого типа использовать один и тот же код.