Каждый день в JavaScript добавляются новые функции. Иногда мы настолько заняты повседневной рутиной программирования, что используем старые приемы для решения какой-то конкретной проблемы, не зная, что в новую версию JavaScript добавлен новый метод или функция. В этой статье я рассмотрю некоторые из этих интересных методов, которые были добавлены в Array в новой версии JavaScript.
- Array.prototype.isArray
Как вы проверяете, что данный объект является массивом в JavaScript? Это один из вопросов, который обычно задают на собеседовании. Обычно, если вы неопытный разработчик JavaScript, первое, что приходит на ум, - это оператор typeof. Но typeof вернет Object для массива.
let a = [1];
typeof a
//Returns 'object'
Так что typeof не работает. Так что будет?
Решение этой проблемы - использовать Object.prototype.toString
let arr = [1, 2, 3];
let obj = {name: 'Akash', age: '22'};
Object.prototype.toString.call(arr);
// Returns '[object Array]'
Object.prototype.toString.call(obj);
// Returns '[object Object]'
Итак, это обходной путь этой проблемы. Теперь в новом JavaScript у нас есть метод isArray.
let arr = [1, 2, 3];
let obj = {name: 'Akash', age: '22'};
Array.isArray(arr)
// Returns true
Array.isArray(obj);
// Returns false
isArray поддерживается всеми основными браузерами. Вы можете увидеть ниже:
Если браузер не поддерживает, вы можете использовать polyfill. Вы можете найти полифилл здесь.
2. Array.prototype.includes
Когда нам нужно определить, существует ли данный элемент в определенном массиве или нет, мы обычно используем оператор indexOf, а затем проверяем, что результат больше -1.
let arr = [1,2,3,4]; let item = 4; let result = arr.indexOf(item) > -1 ? 'exist' : 'do not exist'; console.log(result) //Result exist
Но теперь мы можем использовать includes, который вернет true, если элемент существует в массиве, и false, если элемент не существует.
let arr = [1,2,3,4]; let item = 4; console.log(arr.includes(item)); // Returns true console.log(arr.includes(5)); // Return false
Вы можете проверить совместимость браузера здесь:
Обратите внимание, что это не поддерживается IE. Итак, вы можете использовать для этого полифилл, если хотите использовать его в IE. Полифилл можно найти здесь.
3. Array.prototype.find
Это очень полезный метод, если у вас есть массив объектов, и ваша цель - найти один объект из коллекции, который удовлетворяет определенному условию.
Иногда кодировщики используют filter для поиска объекта по условию, но, как мы все знаем, метод filter возвращает массив отфильтрованных элементов, а не элемент внутри массива. Поэтому каждый раз нам нужно брать первый элемент из этого отфильтрованного массива.
let users = [{
name: 'Mayank'
}, {
name: 'Prashant'
}, {
name: 'Pankaj'
}, {
name: 'Nikhil'
}];
// find a user named Pankaj
// solution via filter
let filteredUser = users.filter(user => user.name === 'Pankaj');
console.log('fileterd user array => ', filteredUser);
// Result [{ name: "Pankaj" }]
// so to get the user we need to do filteredUser[0]
console.log('Filtered user => ', filteredUser[0]);
// Result { name: "Pankaj" }
Но есть лучшее решение этой проблемы, когда мы можем напрямую связаться с пользователем, используя метод find.
let users = [{
name: 'Mayank'
}, {
name: 'Prashant'
}, {
name: 'Pankaj'
}, {
name: 'Nikhil'
}];
// find a user named Pankaj
// solution via find
let filteredUser = users.find(user => user.name === 'Pankaj');
console.log('Filtered user => ', filteredUser);
// Result { name: "Pankaj" }
Поддержку этого браузера можно увидеть здесь:
Как видите, он не поддерживается IE, поэтому, если вы хотите использовать этот метод, вы можете найти полифилл здесь.
5. Array.prototype.flat
Вы когда-нибудь сталкивались с массивом, в котором элемент массива также является массивом, и вы хотите, чтобы все элементы были в одном плоском массиве? Как вы решили эту проблему? Думаю, вы могли использовать reduce и concat. Что ж, это отличный способ решить эту проблему. Но теперь у нас есть оператор flat, который может делать это за нас до тех пор, пока вы не пройдете глубину. Если вы не передадите глубину, она примет значение по умолчанию 1.
let arr = [1,2, [3,4,5]]; let result = arr.flat(); console.log(result); //Result [1,2,3,4,5]
Рассмотрим пример более глубоко вложенного массива.
let arr = [1,2, [3,4,5,[6,7,8,9,10]]]; let result = arr.flat(); console.log(result); //Result [1,2,3,4,5,[6,7,8,9,10]] // if we know the depth as we know here that is 2. We can pass it let flatArray = arr.flat(2); console.log(flatArray); //Result [1,2,3,4,5,6,7,8,9,10]
Теперь я знаю, о чем вы думаете, а что, если мы не знаем глубины? Если мы не знаем глубины, мы всегда можем вернуться к сокращению и объединению решения.
let arr = [1,2, [3,4,5,[6,7,8,9,10]]];
function flattenDeep(arr1) {
return arr1.reduce((acc, val) => {
return Array.isArray(val) ?
acc.concat(flattenDeep(val)) :
acc.concat(val);
}, []);
}
console.log(flattenDeep(arr))
//Result [1,2,3,4,5,6,7,8,9,10]
Как указал Мэтью Хартман, если вы не знаете глубину массива, вы можете просто передать Infinity, и он будет работать как шарм, и вам не нужно искать reduce и concat решения.
let arr = [1,2, [3,4,5,[6,7,8,9,10]]]; let result = arr.flat(Infinity); console.log(result); // Result [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Есть несколько других решений этой проблемы, если вам не нужно рекурсивное решение. Вы можете найти это здесь".
Браузер поддерживает этот метод следующим образом:
Для этого метода можно использовать полифилл, который можно найти здесь.
Это некоторые методы JavaScript, которые я считаю полезными.
Пожалуйста, предлагайте любые улучшения и делитесь, подписывайтесь и аплодируйте. Спасибо :)
