1. Как решить проблему дедупликации массива
Я прочитал много вопросов, связанных с интервью, и обнаружил, что дедупликация массива появлялась несколько раз.Вот краткое изложение проблемы дедупликации массива. и расширить. Обязательно посмотрите главу 2!
описание проблемы: Дедупликация массива, как следует из названия, удаляет повторяющиеся значения в массиве, благодаря чему несколько одинаковых значений становятся одним, и, наконец, массив не содержит повторяющихся значений.
Например: есть массив:[1,2,3,4,4,5,5,5,6,7], после дедупликации массив становится[1,2,3,4,5,6,7].
Есть много решений этой проблемы, которые будут перечислены здесь,И расширит свои отдельные важные точки знаний
Решение будет от мелкого к глубокому😏, обязательно смотрите несколько последних решений!
🤔 Решение 1:
Использование двойного for и splice
// 双重for加splice
function unique(arr){
for(var i=0; i<arr.length; i++){
for(var j=i+1; j<arr.length; j++){
if(arr[i]==arr[j]){
//第一个等同于第二个，splice方法删除第二个
arr.splice(j,1);
j--;
}
}
}
return arr;
}
🤔 Решение 2
использоватьindexofметоды и новые массивы
//使用indexof
function unique(arr) {
var array = [];//用新数组来装
for (let i = 0; i < arr.length; i++) {
if (array.indexOf(arr[i]) === -1) {
//indexof返回-1表示在新数组中不存在该元素
array.push(arr[i])//是新数组里没有的元素就push入
}
}
return array;
}
использоватьincludesТакже можно определить, содержит ли оно значение
function unique(arr) {
var array =[];
for(var i = 0; i < arr.length; i++) {
if( !array.includes(arr[i]) ) {
//includes 检测数组是否有某个值
array.push(arr[i]);
}
}
return array
}
-
indexOf()Метод возвращает первый индекс в массиве, по которому можно найти данный элемент, или -1, если он не существует. Есть два параметра, первый параметр — это элемент для поиска, а второй параметр является необязательным и представляет собой позицию для начала поиска. Если значение индекса больше или равно длине массива, это означает, что массив не будет искаться и вернет -1. Если значение индекса, предоставленное в параметре, является отрицательным значением, оно используется как смещение в конце массива, т. е. -1 означает поиск с последнего элемента, -2 означает начало со второго до последнего элемента, порядок поиска по-прежнемузапрос спереди назадмножество. Если индекс смещения по-прежнему меньше 0, будет запрошен весь массив. Его значение по умолчанию равно 0 -
includes()Метод используется для определения того, содержит ли массив заданное значение, в зависимости от ситуации, если да, возвращаетtrue, иначе возвратfalse. Он также имеет два параметра: первый — это элемент для поиска, второй — необязательный, это позиция для начала поиска иindexofТо же самое, если второй параметр имеет отрицательное значение, он будет пропускать индекс абсолютного значения параметра с конца, а затем выполнять поиск в обратном направлении. По умолчанию 0
🤔 Решение 3
Используйте метод сортировки, чтобы сначала отсортировать, чтобы одинаковые элементы были смежными
function unique(arr) {
arr = arr.sort((a, b) => a - b)//sort先按从小到大排序
var arrry= [arr[0]];
for (var i = 1; i < arr.length; i++) {
if (arr[i] !== arr[i-1]) {
arrry.push(arr[i]);
}
}
return arrry;
}
Метод sort используется для сортировки от меньшего к большему (Возвращает новый массив),Если вышеуказанная функция обратного вызова не включена в ее параметры, произойдет ошибка сортировки при наличии двух и более цифр.(Если этот параметр опущен, элементы сортируются по позиции Unicode каждого символа преобразованной строки. Две цифры рассчитываются как строка длины два). Поэтому я должен сам написать критерий сортировки.Когда возвращаемое значение функции обратного вызова больше 0, порядок двух значений меняется на противоположный.
🤔 Решение 4
ES6 предоставляет новую структуру данных Set. Набор может быть очень простым для дедупликации
function unique(arr) {
const result=new Set(arr);
return [...result];
//使用扩展运算符将Set数据结构转为数组
}
Объект Set представляет собой набор значений, и вы можете перебирать его элементы в том порядке, в котором они были вставлены. Элементы в наборе появляются только один раз, т. е. элементы в наборе уникальны.
🤔 Решение 5
Использовать карту
function unique(arr) {
let map = new Map();
let array = new Array(); // 数组用于返回结果
for (let i = 0; i < arr.length; i++) {
if(map.has(arr[i])) { // 如果有该key值
map.set(arr[i], true);
} else {
map.set(arr[i], false); // 如果没有该key值
array.push(arr[i]);
}
}
return array ;
}
Объекты карты содержат пары ключ-значение и могут запоминать исходный порядок вставки ключей. Любое значение (объект или примитив) может использоваться как ключ или значение.
-
Map.prototype.has(key)Возвращает логическое значение, указывающее, содержит ли экземпляр Map значение, соответствующее ключу. -
Map.prototype.set(key, value)Задает значение ключа в объекте карты. Верните этот объект карты.
🤔 Решение 6
использовать фильтр
function unique(arr) {
return arr.filter(function (item, index, arr) {
//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
//不是那么就证明是重复项，就舍弃
return arr.indexOf(item) === index;
})
}
Фильтр в английском означает фильтр, метод фильтра () создает новый массив, который содержитТест реализации предоставленной функциивсе элементы . Его функция обратного вызова содержит три параметра(数组中当前正在处理的元素,在处理的元素在数组中的索引(可选),调用了 filter 的数组本身(可选))
🤔 Решение 7
Используйте сокращение, чтобы добавить включает
function unique(arr){
let result=arr.reduce((acc,cur)=>{
if(!acc.includes(cur)){
acc.push(cur);
}
return acc;
},[])//[]作为回调函数的第一个参数的初始值
return result
}
2. Решение 7 по дедупликации массива приводит к еще одному вопросу интервью о сокращении
Редуктор имеет много применений и очень важен.Вот объяснение основных знаний о редюсере.
Введение для уменьшения
В MDN он описан следующим образом: метод reduce() выполняет функцию редуктора (выполняется в порядке возрастания), предоставленную вами для каждого элемента в массиве, суммируя ее результаты в одно возвращаемое значение. Он может выполнять множество функций, которые реализуются через функции обратного вызова.
уменьшатьпервый параметрЭто функция обратного вызова с четырьмя параметрами (аккумулятор, текущее значение, текущий индекс, исходный массив), а последние два параметра являются необязательными.второйПараметр является первым аккумулятором параметров функции обратного вызова.Первоначальный значение(Очень важный)
注意：不给初始值，那么初始值就是原数组的第一个元素，计算从第二个元素开始。给了初始值就是从第一个元素开始.
Поймите написание сокращения и его функции обратного вызова через реализацию кода:
- Накапливать и суммировать значения для сохраненных значений
let result=[1,2,3,4].reduce((acc,cur)=>{
return acc+cur;//acc为累加器(初始值为数组第一个元素)，cur为当前元素
})
console.log(result);//输出10
//因为没初始值，所以从数组第二个元素开始计算，所以处理上面数组，回调函数共运行了3次
- Давать начальное значение при накоплении и суммировании
let result=[1,2,3,4].reduce((acc,cur,index,o)=>{
return acc+cur;
},10)
console.log(result);//输出20
//因为有初始值，所以从数组第一个元素开始计算，所以处理上面数组，回调函数共运行了4次
- Классифицировать объекты по признакам
const bills=[{type:'transfer',momey:233},
{type:'study',momey:341},
{type:'shop',momey:821},
{type:'transfer',money:821},
{type:'study',momey:821}
]
let result=bills.reduce((acc,cur)=>{
if(!acc[cur.type]){//遇到不存在的类型，就新建一个空数组来装
acc[cur.type]=[];//二维数组
}
acc[cur.type].push(cur)
return acc;
},[])//为累加器设置初始值为空数组，作为分类用的容器
console.log(result);
//输出
[
transfer: [{ type: 'transfer', momey: 233 },{ type: 'transfer', money: 821}],
study: [ { type: 'study', momey: 341 }, { type: 'study', momey: 821 } ],
shop: [ { type: 'shop', momey: 821 } ]
]
уменьшить связанные вопросы интервью
🤔 Описание заголовка: Пожалуйста, используйте нативный JavaScript для реализации метода определения наиболее частых тегов в html и подсчета количества раз.
Уточнение очков знаний:
-
Получить все теги:
document.querySelector(*): список всех тегов на странице,*Представляет селектор*, это все. -
Object.entries():Object.entries()вернуть数组, элементами которого являются массивы, соответствующие парам ключ-значение перечислимых свойств, найденных непосредственно в объекте. Свойства находятся в том же порядке, что и при ручном переборе значений свойств объекта. Проще говоря, каждое свойство объекта можно превратить в массив, и в этом массиве есть два значения, одно — имя свойства, а другое — значение свойства. Например:Object.entires({a:1,b:2,c:3})会得到[ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]
Анализ мыслей:
1. Сначала получите массив NodeList, содержащий все теги, затем обработайте его в массив только с именами тегов, а затем используйте сокращение, чтобы получить объект с именем тега в качестве имени атрибута и количеством тегов в качестве значения атрибута.
2. Используйте Object.entires(), чтобы превратить объект, полученный на предыдущем шаге, в двумерный массив, а затем используйте reduce для его обработки, чтобы получить метку с наибольшим числом (比较每个数组的tags[1],返回数组的tags[0]).
Код ответа:
window.onload=function(){
// 最大数的思路是JS 必考的 使用reduce
const maxBy=function(list,tag){
return list.reduce(
function(x,y){
//根据reduce方法获得数量最大的那个标签
return tag(x)>tag(y)?x:y
}
)
}
function getFrequentTag(){
//得到reduce 需要的数组
const tags=[...document.querySelectorAll('*')].map(x=>x.tagName).reduce((acc,tag)=>{
acc[tag]=acc[tag]?acc[tag]+1:1;
//数组存在该元素，就值+1，否则创建元素，设置值为1
return acc;//得到以tag名为属性名，数量为属性值的对象
},{})//初始值为对象
return maxBy(Object.entries(tags),tag=>tag[1])
//tag=>tag[1]这个函数表示return数组的第二个值，也就是标签的数量
}
console.log(getFrequentTag());
}
Расширение: Как получить вторые по величине теги и X-е по величине теги?
Для дальнейшей оптимизации приведенного выше решения нам нужно получить не максимум, а сколь угодно большую метку!
使用sort方法改进, отсортируйте массив списка, а затем получите значение соответствующей позиции в массиве списка.
Код:
//获得第X多的标签
window.onload=function(){
// 最大数的思路是JS 必考的 使用reduce
const maxByx=function(list,tag,x){
list=list.sort((a,b)=>{
return tag(b)-tag(a);//数量从大到小排序
})
return list[x];
}
function getFrequentTag(){
//得到reduce 需要的数组
const tags=[...document.querySelectorAll('*')].map(x=>x.tagName).reduce((acc,tag)=>{
acc[tag]=acc[tag]?acc[tag]+1:1;//数组存在该元素，就值+1，否则创建元素，设置值为1
return acc;//得到以tag名为属性名，数量为属性值的对象
},{})//初始值为对象
return maxByx(Object.entries(tags),tag=>tag[1],1)
//第三个参数用于指定要第几大的,这里指定第二大的
//tag=>tag[1]这个函数表示return数组的第二个值，也就是标签的数量
}
console.log(getFrequentTag());
}
В соответствии с приведенным выше кодомreturn maxByx(Object.entries(tags),tag=>tag[1],1), нам нужно только указать значение третьего параметра, чтобы получить X-ю метку, которую мы хотим.
На этом сублимация завершается получением максимального количества тегов в html в интервью!
Спасибо за чтение, пожалуйста, убедитесь, что у вас есть хорошие предложения, спасибо, автор также готовится к интервью недавно!
Справочная статья: