Это моя заметка о методах массивов в JavaScript, чтобы я мог выбирать подходящие методы в зависимости от каждой ситуации.
Я хотел бы объяснить на основе диаграммы ниже. Я разделил эти методы на семь групп: 1) изменить исходный массив, 2) вернуть новый массив, 3) вернуть часть массива, 4) вернуть логическое значение, 5) преобразовать в строку, 6) преобразовать в значение и 7) циклический массив без возврата нового массива.
Примечание: я выбрал красный цвет для группы 1, потому что изменение исходного массива иногда приводит к неприятным ошибкам в процессе разработки. Точно так же я выбрал желтый цвет для метода .forEach, потому что есть некоторые подводные камни, о которых нам нужно знать.
Группа 1) Мутировать исходный массив
Имя метода: .push, .unshift, .pop, .shift, .splice, .reverse, .sort, .fill
Добавить и удалить
добавить в конце: .push
let arr = [1, 2, 3, 4, 5] arr.push(6) console.log(arr) // [ 1, 2, 3, 4, 5, 6 ]
добавить в начале: .unshift
arr.unshift(0) console.log(arr) // [ 0, 1, 2, 3, 4, 5, 6 ]
удалить в конце (и вернуть удаленное значение): .pop
console.log(arr) // [ 0, 1, 2, 3, 4, 5, 6 ] let deleted = arr.pop() console.log(arr) // [ 0, 1, 2, 3, 4, 5 ] console.log(deleted) // 6
удалить при запуске (и вернуть удаленное значение): .shift
console.log(arr) // [ 0, 1, 2, 3, 4, 5] deleted = arr.shift() console.log(arr) // [ 1, 2, 3, 4, 5 ] console.log(deleted) // 0
Другие изменяемые операции
изменить содержимое: .splice:
Этот метод изменяет содержимое массива, удаляя или заменяя существующие элементы и/или добавляя новые элементы на место (и возвращая массив, содержащий удаленные элементы).
// syntax /* * @param {integer} start -The index at which to start changing the array. * @param {integer} [deleteCount] - An integer indicating the number of elements in the array to remove from start. * @param {...elements} [item] - The elements to add to the array, beginning fromstart.**/ // !! data type is not actual JavaScript data type !!splice(start) splice(start, deleteCount) splice(start, deleteCount, item1) splice(start, deleteCount, item1, item2, itemN)// examples console.log(arr) // [ 0, 1, 2, 3, 4, 5, 6 ] deleted = arr.splice(5) console.log(arr) // [ 0, 1, 2, 3, 4 ] console.log(deleted) // [5,6] deleted = arr.splice(0,2) console.log(arr) // [ 2, 3, 4 ] console.log(deleted) // [ 0, 1 ] deleted = arr.splice(0,1,100) console.log(arr) // [ 100, 3, 4 ] console.log(deleted) // [ 2 ] deleted = arr.splice(1, 2, 101, 102, 103, 104) console.log(arr) // [ 100, 101, 102, 103, 104 ] console.log(deleted) // [ 3, 4 ]
Если вам просто нужна часть массива, рассмотрите возможность использования вместо этого .slice.
обратный массив: .reverse
console.log(arr) // [ 100, 101, 102, 103, 104 ] arr.reverse() console.log(arr) //[ 104, 103, 102, 101, 100 ]
сортировать массив: .sort
По умолчанию выполняется восхождение и преобразование в строку, а затем сравнение их последовательностей значений кодовых единиц UTF-16.
let arr = [1, 2, 10, 20, 100, 200] // default arr.sort() console.log(arr) //[ 1, 10, 100, 2, 20, 200 ] // ascending order arr.sort((a, b)=> a-b) console.log(arr) // [ 1, 2, 10, 20, 100, 200 ] // descending order arr.sort((a,b)=>b-a) console.l0g(arr)
заполнить определенным значением: .fill
Этот метод изменяет все элементы в массиве на статическое значение с начального индекса (по умолчанию
0) на конечный индекс (по умолчаниюarray.length).
// syntax/* * @param {element} start -Value to fill the array with. * @param {integer} [start] - Start index (inclusive), default0. * @param {integer} [end] - End index (exclusive), defaultarr.length.**/ // !! data type is not actual JavaScript data type !!fill(value) fill(value, start) fill(value, start, end)console.log(arr) // [ 200, 100, 20, 10, 2, 1 ] arr.fill(0) console.log(arr) // [ 0, 0, 0, 0, 0, 0 ] arr.fill(1, 1) console.log(arr) // [ 0, 1, 1, 1, 1, 1 ] arr.fill(2,2,4) console.log(arr) // [ 0, 1, 2, 2, 1, 1 ]
Группа 2) Возвращает новый массив
массив цикла и вычислить из исходного массива: .map
// an example console.log(arr) // [ 100, 101, 102, 103, 104 ] const newArr = arr.map(element=>element + 1) console.log(newArr) // [ 101, 102, 103, 104, 105 ] console.log(arr) // [ 100, 101, 102, 103, 104 ]
фильтровать по условию: .filter
console.log(arr) // [ 0, 1, 2, 2, 1, 1 ] let newArr = arr.filter(element=>element === 1) console.log(newArr) // [ 1, 1, 1 ]
часть оригинала: .slice
// syntax/** @param {integer} [start] - Zero-based index at which to start extraction. * @param {integer} [end] - Zero-based index before which to end extraction.**/ // !! data type is not actual JavaScript data type !!slice() slice(start) slice(start, end)// examples let arr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] newArr = arr.slice() console.log(newArr) // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] console.log(arr) // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] newArr = arr.slice(2) console.log(newArr) // [ 3, 4, 5, 6, 7, 8, 9, 10 ] console.log(arr) // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] newArr = arr.slice(3, 6) console.log(newArr) // [ 4, 5, 6 ]
добавление оригинала к другому: .concat
// an example console.log(arr) // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] console.log(newArr) // [ 4, 5, 6 ] let concat = arr.concat(newArr) console.log(concat) // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 4, 5, 6 ]
сведение оригинала
просто лестный массив: .flat
// syntax /** @param {integer} [start] - The depth level specifying how deep a nested array structure should be flattened. Defaults to 1.**/flat() flat(depth)// examples arr = [1,[2,3],[[4,5]]] newArr = arr.flat() console.log(newArr) // [ 1, 2, 3, [ 4, 5 ] ] newArr = arr.flat(2) console.log(newArr) // [ 1, 2, 3, 4, 5 ] arr = [1, [2,3], [[4,5]], [[[6,7]]]] newArr = arr.flat(Infinity) // [ 1, 2, 3, 4, 5, 6, 7
с перебором каждого элемента и выравниванием массива до глубины 1: .flatMap
Этот метод возвращает новый массив, сформированный путем применения заданной функции обратного вызова к каждому элементу массива, а затем выравнивания результата на один уровень. Он идентичен
map(), за которым следуетflat()глубины 1, но немного более эффективен, чем вызов этих двух методов по отдельности.
// examples let arr = [1,2,3,4,5] let arr2 = ["a", "b", "c", "d", "e"] const flatMapArr = arr.flatMap(x=>[x ** 2]) console.log(flatMapArr) //[ 1, 4, 9, 16, 25 ] // the difference b/w .map const mapArr = arr.map(x => [x ** 2]); console.log(mapArr) // [ [ 1 ], [ 4 ], [ 9 ], [ 16 ], [ 25 ] ] const flatMapArr2 = arr.flatMap((x, index) => [x, arr2[index]]); console.log(flatMapArr2) // [ 1, 'a', 2, 'b', 3, 'c', 4, 'd', 5, 'e' ]
Группа 3) вернуть часть массива
вернуть индекс массива
на основе значения: .indexOf
Этот метод возвращает первый соответствующий элемент индекса на основе индекса массива.
// examples let arr = [1,2,3,4,5] let indexOfValue1 = arr.indexOf(1) console.log(indexOfValue1) // 0 arr = [1,2,3,2,1] indexOfValue1 = arr.indexOf(1) console.log(indexOfValue1) // 0 const indexOfValue6 = arr.indexOf(6) console.log(indexOfValue6) // -1 return -1 if it doesn't exist
на основе тестового условия: .findIndex
Этот метод возвращает первый элемент совпадения индекса на основе условия проверки.
// example let arr = [1,2,3,2,1] const isEven = (element)=>element%2 === 0 const indexIsEven = arr.findIndex(isEven) console.log(indexIsEven) // 1
вернуть элемент: .find
Этот метод возвращает первый элемент соответствия на основе условия проверки.
// example let arr = [1,2,3,4,5,6] const isEven = (element)=>element%2 === 0 const elementIsEven = arr.find(isEven) console.log(elementIsEven) // 2
Группа 4) возвращает логическое значение
на основе значения: .includes
Этот метод возвращает true, если массив включает заданное значение, и возвращает false, если нет.
// examples const isOne = arr.includes(1) console.log(isOne) // true const isSeven = arr.includes(7) console.log(isSeven) // false
на основе тестового условия
чтобы знать, что хотя бы один элемент соответствует условию: .some
// examples let arr = [1,2,3,4,5,6] let isArrayHasEven = arr.some(isEven) console.log(isArrayHasEven) // true arr = [1,3,5,7,9] isArrayHasEven = arr.some(isEven) console.log(isArrayHasEven) // false
чтобы знать, что все элементы соответствуют условию: .every
// examples
let allElementsAreEven = arr.every(isEven)
console.log("1",allElementsAreEven) // false
arr = [2, 4, 6, 8, 10, 12]
allElementsAreEven = arr.every(isEven)
console.log(allElementsAreEven) // true
Группа 5) преобразовать в строку
.присоединиться
// examples
let arr = [2, 4, 6, 8, 10, 12]
let joinedArray = arr.join('')
console.log(joinedArray) // '24681012'
joinedArray = arr.join('😋')
console.log(joinedArray) // '2😋4😋6😋8😋10😋12'
Группа 6) преобразование в значение
.уменьшить
Метод
reduce()выполняет предоставленную пользователем функцию обратного вызова 'reducer' для каждого элемента массива по порядку, передавая возвращаемое значение из вычисления предыдущего элемента. Конечным результатом выполнения редуктора для всех элементов массива является одно значение.
// examples
let arr = [1,2,3,4,5]
let sum = arr.reduce((prev, curr)=>prev + curr)
console.log(sum) // 15
// set initvalue: 6
sum = arr.reduce((prev, curr)=>prev + curr, 6)
console.log(sum) // 21
arr = [1,1,2,3,3,4,4,5]
let noDupulications = arr.reduce((prev, curr)=>{
if(prev.indexOf(curr)===-1){
prev.push(curr)
}
return prev
},[])
console.log(noDupulications) // [ 1, 2, 3, 4, 5 ]
Группа 7) циклический массив без возврата нового массива
.forEach
Этот метод выполняет предоставленную функцию один раз для каждого элемента массива.
let arr = [1,2,3,4,5]
arr.forEach(element=> console.log(element))
// 1
// 2
// 3
// 4
// 5
// equivalent operation with for of
for (let element of arr){
console.log(element)
}
forEachне ждет обещаний.
let arr = [1,2,3,4,5]
let multiply = 1
const multiplyAsync = async (a, b) => a*b
const multiplySync = (a, b) => a*b
// async?
arr.forEach(async(element)=>{
multiply = await multiplyAsync(multiply, element)
})
console.log("after async?",multiply) //1
// sync
multiply = 1
arr.forEach(element=>{
multiply = multiplySync(multiply, element)
})
console.log("sync",multiply) // 120
forEach()не делает копию массива перед итерацией.
let arr = [1,2,3,4,5]
arr.forEach(element=>{
console.log(element)
if(element === 3){
arr.shift()
}
})
// 1
// 2
// 3
// 5 <- got one earlier index (3) because 1 was removed
console.log(arr) // [ 2, 3, 4, 5 ]
Спасибо за чтение :)
