В Javascript массивы являются важным и общеизвестным моментом, мы часто храним данные в массивах. Как инженер Javascript, массивы должны использоваться с легкостью. Эта статья покажет вам, на какие странные приемы в массивах стоит обратить внимание и изучить в ежедневной разработке, давайте приступим!
1. Дедупликация
Это также распространенный вопрос о том, как дедуплицировать массивы JS. В эпоху ES6 есть очень быстрый и простой способ использованияnew Set()так же какArray.from()или展开运算符(...)
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
// 方法一
var uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”]
// 方法二
var uniqueFruits2 = […new Set(fruits)];
console.log(uniqueFruits2); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”]
2. Заменить
В повседневной разработке часто бывает необходимо заменить или удалить некоторые указанные данные, столкнувшись с таким сценарием, вы должны подумать об этом.Array.protoType.spliceСюда. С передачей параметров немного сложнее, первый параметр — начальный индекс, второй параметр — удаляемое число, а остальные — добавляемое значение (которых может быть одно или несколько).
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.splice(0, 2, “potato”, “tomato”);
console.log(fruits); // returns [“potato”, “tomato”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]
3. Обходим массив
Обычно мы чаще всего используем массив.mapметод, на самом деле есть другой метод, который может достичь той же цели, использование относительно непопулярно, поэтому мы всегда игнорируем его, то естьArray.from
var friends = [
{ name: ‘John’, age: 22 },
{ name: ‘Peter’, age: 23 },
{ name: ‘Mark’, age: 24 },
{ name: ‘Maria’, age: 22 },
{ name: ‘Monica’, age: 21 },
{ name: ‘Martha’, age: 19 },
]
var friendsNames = Array.from(friends, ({name}) => name);
console.log(friendsNames); // returns [“John”, “Peter”, “Mark”, “Maria”, “Monica”, “Martha”]
4. Очистить массив
Иногда нам нужно очистить массив, например, когда пользователь щелкает, чтобы очистить корзину. Его можно удалять по одному, но таких милых программистов мало, ха-ха. На самом деле можно сделать одну строчку кода, то есть напрямуюlengthустановить на 0
var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.length = 0;
console.log(fruits); // returns []
5. Преобразование массива в объект
Иногда необходимо преобразовать массив в форму объекта, использовать.map()Единственные в своем роде итерационные методы сделают свое дело, и вот более быстрый метод, если вы просто хотите, чтобы ключ объекта был индексом массива
var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}
6. Заполните массив
При создании массива вы когда-нибудь сталкивались с ситуацией, когда вам нужно заполнить значение по умолчанию, первое, о чем вы должны подумать, это зациклить массив. ES6 обеспечивает более удобный.fillметод
var newArray = new Array(10).fill(“1”);
console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]
7. Объединить массивы
Знаете ли вы, как объединять массивы, ответ.concat(). Ха-ха, но сегодня главный герой — оператор спреда ES6 (...)
var fruits = [“apple”, “banana”, “orange”];
var meat = [“poultry”, “beef”, “fish”];
var vegetables = [“potato”, “tomato”, “cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food); // [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”]
8. Пересечение двух массивов
Нахождение пересечения двух массивов — классический вопрос на собеседовании в JS, который может стать хорошей проверкой того, понятна ли логика кандидата и хорошо ли он разбирается в массивах. На этот вопрос есть много ответов, ниже приведен краткий способ написания ES6.
var numOne = [0, 2, 4, 6, 8, 8];
var numTwo = [1, 2, 3, 4, 5, 6];
var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
console.log(duplicatedValues); // returns [2, 4, 6]
9. Удалите ложные значения
Во-первых, мы знакомы с тем, что такое ложные значения? В JS ложными значениями являются:false,0,'',null,NaN,undefined. Теперь мы находим эти ложные значения и удаляем их, здесь мы используем.filterметод
var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false];
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns [“blue”, 9, true, “white”]
10. Случайные значения
Получение случайного значения из массива также является классическим вопросом на собеседовании. На самом деле, основное знание исследования состоит в том, чтобы случайным образом сгенерировать значение x: x >= 0 и x
var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]
11. Обратный порядок
Как перевернуть массив? Всего одна строка кода
var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var reversedColors = colors.reverse();
// 或者 colors.slice().reverse();
// 两者有啥区别？
console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”]
12.lastIndexOf()
Много раз мы выясняем, существует ли элемент в массиве, часто используяindexOfметод, который часто упускают из видуlastIndexOfметод, один из сценариев, где будет использоваться последний, — это когда в массиве есть повторяющиеся данные.
var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
var lastIndex = nums.lastIndexOf(5);
console.log(lastIndex); // returns 9
13. Подведение итогов
Суммирование всех элементов массива, ха-ха, еще один знакомый вопрос на собеседовании. Ответов тоже много, все дороги ведут в Рим, и здесь используется одинreduce,reduceЭтот метод является источником знаний, который стоит изучить, и он имеет множество применений.
var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14
Суммировать
Эта статья показывает моим друзьям, как манипулировать массивами в JS. На самом деле, в повседневной разработке, вероятно, вы столкнетесь с более сложными делами. Я надеюсь, что вы сможете разобрать их на маленькие проблемы одну за другой и найти способ начать. Место. Давайте, ребята!