вместе сJavaScript
развитие,JavaScript
изArray
Также было добавлено много методов. Это необходимо для полного понимания. Эта статья в основном охватываетArray
Представлены все способы.
1. Метод обнаружения
Array.isArray()
Определяет, является ли входящее значение массивом.
// true
Array.isArray([1, 2, 3])
// false
Array.isArray({foo: 123})
// false
Array.isArray('foobar')
// false
Array.isArray(undefined)
2. Создайте метод массива
Array.from()
Array.from()
метод использования类数组对象
а также可迭代对象
в реальный массив и возвращает новый,浅拷贝
Экземпляр массива .
// 报错
Array.from(undefined)
// 报错
Array.from(null)
// ["f", "o", "o"]
console.log(Array.from('foo'))
// []
console.log(Array.from(''))
// []
console.log(Array.from(123))
// []
console.log(Array.from(NaN))
// arguments对象转为数组
function foo() {
const args = Array.from(arguments)
//true
console.log(Array.isArray(args))
}
foo(1, 2, 3)
// NodeList对象转为数组
Array.from(document.querySelectorAll('p'))
// Set对象转为数组:['a','b']
Array.from(new Set(['a', 'b']))
// Map对象转为数组:[[1, 2], [2, 4]]
Array.from(new Map([[1, 2], [2, 4]]))
// 传入第二个参数回调函数:[2, 4, 6]
Array.from([1, 2, 3], x => x + x)
let obj = {
num: 1,
handle: function(value){
return n + this.num
}
}
// 传入第三个参数修改this指向:[2, 3, 4, 5, 6]
const arrs = Array.from([1, 2, 3, 4, 5], obj.handle, obj)
// 得到数组对象里的id属性:[1, 2]
const obj = [{id: 1,name: 'zhangsan'},{id: 2,name: 'lisi'}]
Array.from(obj,(el) => {
return el.id
})
Уведомление:
Array.from(null)
илиArray.from(undefined)
вызовет исключение
Array.of()
Array.of()
Создает массив, содержащий все переданные аргументы, независимо от количества или типов аргументов, возвращая новый массив.
использоватьArray.of()
Создайте новый массив:
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(null) // [null]
Array.of(NaN) // [NaN]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
Array.of([1,2,3]) // [[1,2,3]]
Array.of({id: 1},{id: 2}) // [{id:1}, {id:2}]
Третий, обходной (итерационный) метод
forEach()
Запускает указанную функцию для каждого элемента в массиве. Этот метод возвращаетundefined
, даже если тыreturn
ценность.
Array.forEach()
Синтаксис параметра:
- Первый параметр (обязательный):
callback
Функция, выполняемая для каждого элемента массива. Функция принимает три параметра:
element |
index |
array |
---|---|---|
текущий элемент | индекс текущего элемента (необязательно) | сам массив (необязательно) |
- Второй параметр (необязательный): значение, используемое при выполнении функции обратного вызова.
const arr = [{id: 1,name: 'zhangsan'},{id: 2,name: 'lisi'}]
// 1 - zhangsan
// 2 - lisi
arr.forEach(el => {
console.log(`${el.id} - ${el.name}`);
});
const obj = {
handle: function(n){
return n + 2
}
};
// true
[{id: 1,name: 'zhangsan'},{id: 2,name: 'lisi'}].forEach(function(el,index,arr){
if(el.id === 1) {
return
}
console.log(this === obj)
},obj);
Array.forEach()
Цикл не может быть прерван (используяbreak
,илиcontinue
утверждение). использовать толькоreturn
Выйдите из этого обратного вызова и перейдите к следующему обратному вызову.
map()
Возвращает новый массив, являющийся результатом вызова предоставленной функции для каждого элемента массива.
Array.map()
Синтаксис параметра:
- Первый параметр (обязательный):
callback
Функция, которая генерирует новые элементы массива. Функция принимает три параметра:
element |
index |
array |
---|---|---|
текущий элемент | индекс текущего элемента (необязательно) | сам массив (необязательно) |
- Второй параметр (необязательный): используется при выполнении функции обратного вызова.
this
ценность .
const arr = [{id: 1},{id: 2},{id: 3}]
const newArr = arr.map((el,index,arr) => {
el.age = 20
return el
});
//[{id: 1,age: 20},{id: 2,age: 20},{id: 3,age: 20}]
console.log(newArr);
filter()
Запустите указанную функцию для каждого элемента в массиве, возврат функции вернетtrue
Новый массив предметов. Возвращает пустой массив, если ни один из элементов массива не прошел проверку.
Array.filter()
Синтаксис параметра:
- Первый параметр (обязательный):
callback
Функция для проверки каждого элемента массива. вернутьtrue
Указывает, что элемент проходит проверку, сохранить элемент,false
не сохраняется. Функция принимает три параметра:
element |
index |
array |
---|---|---|
текущий элемент | индекс текущего элемента (необязательно) | сам массив (необязательно) |
- Второй параметр (необязательный): используется при выполнении функции обратного вызова.
this
ценность .
const arr = [{id: 1},{id: 2},{id: 3}]
const newArr = arr.filter((el,index,arr) => {
el.age = 20
return el
});
// [{id: 1,age: 20},{id: 2,age: 20},{id: 3,age: 20}]
console.log(newArr);
some()
Проверьте, есть ли в массиве элементы, удовлетворяющие условиям оценки.
Запускает указанную функцию для каждого элемента в массиве, если функция возвращает значение для любого элемента.true
, затем вернутьсяtrue
, а остальные элементы не проверяются. Возвращает, если нет элемента, удовлетворяющего условиюfalse
.
Array.some()
Синтаксис параметра:
- Первый параметр (обязательный):
callback
Функция для проверки каждого элемента. Функция принимает три параметра:
element |
index |
array |
---|---|---|
текущий элемент | индекс текущего элемента (необязательно) | сам массив (необязательно) |
- Второй параметр (необязательный): используется при выполнении функции обратного вызова.
this
ценность .
const arr = [{id: 1},{id: 2},{id: 3}]
const someResult = arr.some((el,index,arr) => {
return el.id === 1
});
// true
console.log(someResult)
every()
Проверьте, все ли элементы массива удовлетворяют условиям оценки.
Запустить указанную функцию для каждого элемента в массиве, если функция возвращает значение для каждого элемента.true
, затем вернутьсяtrue
. Если получен пустой массив, этот метод вернет во всех случаяхtrue
. Если в массиве обнаружен неудовлетворительный элемент, вернутьfalse
, а остальные элементы не проверяются.
Array.every()
Синтаксис параметра:
- Первый параметр (обязательный):
callback
Функция для проверки каждого элемента. Функция принимает три параметра:
element |
index |
array |
---|---|---|
текущий элемент | индекс текущего элемента (необязательно) | сам массив (необязательно) |
- Второй параметр (необязательный): используется при выполнении функции обратного вызова.
this
ценность .
// true
[].every(() => {})
const arr = [{id: 1},{id: 2},{id: 3}]
const everyResult = arr.every((el,index,arr) => {
return el.id > 0
});
// true
console.log(everyResult)
find()
Возвращает значение первого совпадающего элемента в массиве, в противном случае возвращаетundefined
.
Array.find()
Синтаксис параметра:
- Первый параметр (обязательный):
callback
Функция, выполняемая для каждого элемента массива. Функция принимает три параметра:
element |
index |
array |
---|---|---|
текущий элемент | индекс текущего элемента (необязательно) | сам массив (необязательно) |
- Второй параметр (необязательный): когда функция обратного вызова выполняется
this
ценность .
const arr = [{id: 1},{id: 2},{id: 3}]
const findResult = arr.find((el,index,arr) => {
return el.id === 1
},obj);
// {id: 1}
console.log(findResult)
findIndex()
Возвращает индекс первого совпадающего элемента в массиве. в противном случае вернуться-1
.
Array.findIndex()
Синтаксис параметра:
- Первый параметр (обязательный):
callback
Функция, выполняемая для каждого элемента массива. Функция принимает три параметра:
element |
index |
array |
---|---|---|
текущий элемент | значение индекса текущего элемента | сам массив |
- Второй параметр (необязательный): когда функция обратного вызова выполняется
this
ценность .
const arr = [{id: 1},{id: 2},{id: 3}]
// 2
const findResult = arr.findIndex((el,index,arr) => {
return el.id === 3
},obj)
entries()
,keys()
,values()
для обхода массива они оба возвращают итераторArray Iterator
объект. Можно использоватьfor...of
Петля пройдена, разница между нимиkeys()
это обход имен ключей,values()是对键值的遍历
,entries()
представляет собой обход пар ключ-значение.
// 0
// 1
for (let i of ['a', 'b'].keys()) {
console.log(i)
}
// a
// b
for (let el of ['a', 'b'].values()) {
console.log(el)
}
// 0-a
// 1-b
for (let [i, el] of ['a', 'b'].entries()) {
console.log(`${i}-${el}`)
}
Можно вручную вызвать объект итератораnext
метод прохождения.
const arr = ['a', 'b', 'c']
const tempIterator = arr.entries()
// [0, "a"]
console.log(tempIterator.next().value)
// [1, "b"]
console.log(tempIterator.next().value)
4. Метод работы
push()
Добавляет один или несколько элементов в конец массива и возвращает новую длину массива.
var numbers = [1, 2, 3]
// 5
console.log(numbers.push(4,5))
// [1,2,3,4,5]
console.log(numbers)
pop()
Удаляет последний элемент из массива и возвращает удаленный элемент.
const arr = ['a', 'b', 'c']
// c
console.log(arr.pop())
// ["a", "b"]
console.log(arr);
shift()
Метод shift() удаляет первый элемент из массива и возвращает удаленный элемент.
const arr = ['a', 'b', 'c']
// a
console.log(arr.shift())
// ["b", "c"]
console.log(arr)
unshift()
Добавляет один или несколько элементов в начало массива и возвращает новую длину массива (этот метод изменяет исходный массив).
const arr = ['a', 'b', 'c']
// 5
console.log(arr.unshift('d', 'e'))
// ["d", "e", "a", "b", "c"]
console.log(arr)
concat()
Используется для объединения двух или более массивов. Этот метод не изменяет существующий массив, а возвращает новый массив. Если аргумент опущен, concat возвращает поверхностную копию текущего массива.
const arr = [1, 2, 3]
const newArr = arr.concat()
// [1,2,3]
console.log(newArr)
// false
console.log(newArr === arr)
const arr = [1, 2, 3]
const newArr = arr.concat([4, 5])
// [1, 2, 3, 4, 5]
console.log(newArr)
indexOf()
,lastIndexOf()
Оба этих метода возвращают позицию в массиве элемента, который нужно найти, или, если он не найден-1
.indexOf()
Метод смотрит назад от начала массива,lastIndexOf()
От начала до конца массива методов искать вперед.
Array.indexOf()、Array.lastIndexOf()
Синтаксис параметра:
- первый параметр
searchElement
(необязательно): искомый элемент. - второй параметр
fromIndex
(необязательный):indexOf()
Метод указывает, с чего начать оглядываться назад. По умолчанию0
.lastIndexOf()
Метод предлагает начать обратный поиск с этого места. По умолчанию длина массива минус 1 (arr.length - 1
).
indexOf()
const numbers = [1, 2, 3, 4, 5, 4]
// 3
console.log(numbers.indexOf(4))
// 5
console.log(numbers.indexOf(4, 4))
lastIndexOf()
const numbers = [1, 2, 3, 4, 5, 4]
// 5
console.log(numbers.lastIndexOf(4))
// 3
console.log(numbers.lastIndexOf(4, 4))
slice()
Создайте новый массив и вернитесь. Этот метод принимает два параметра: неглубокую копию исходного массива, извлеченную из начального индекса и конечного индекса. Исходный массив не будет изменен.
Array.slice()
Синтаксис параметра:
- первый параметр (необязательный): начальный индекс
begin
(по умолчанию от0
start), извлеките исходный элемент массива, начиная с этого индекса. - Второй параметр (необязательный): конечный индекс
end
Извлеките исходный элемент массива в конце этого индекса. Если этот параметр опущен, он будет извлечен до конца исходного массива.slice
будет извлечен из исходного массиваbegin
прибытьend
все элементы (включаяbegin
, но не включаяend
).
const arr = [1, 2, 3, 4]
const newArr = arr.slice(1)
// [2,3,4]
console.log(newArr);
const newArr1 = arr.slice(1, 3)
// [2,3]
console.log(newArr1)
Если конечная позиция меньше начальной, возвращается пустой массив.
const arr = [1, 2, 3, 4]
const newArr = arr.slice(2, 1)
// []
console.log(newArr)
splice()
к середине массива删除
,插入
,替换元素
. Возвращаемое значение представляет собой массив удаленных элементов. Если ни один элемент не был удален, возвращается пустой массив. Этот метод изменяет исходный массив.
Удалить любое количество элементов, передав2
параметры, начальный индекс удаляемого элемента и количество удаляемых элементов.
const arr = [{ id: 1 }, { id: 2 }, { id: 3 }]
//删除前两个元素
arr.splice(0, 2)
// [{id: 3}]
console.log(arr)
Вставьте любое количество элементов в указанную позицию, передав3
параметры: исходное положение,0
(количество элементов для удаления) и элементы для вставки. Если вы хотите вставить несколько элементов, вы можете передать четвертый, пятый или даже любое количество элементов.
const arr = [{ id: 1 }, { id: 2 }, { id: 3 }]
// 从索引 1 开始插入两个元素
arr.splice(1, 0, { id: 4 }, { id: 5 })
// [{ id: 1 }, { id: 4 }, { id: 5 },{ id: 2 }, { id: 3 }]
console.log(arr)
Вставляет любое количество элементов в указанную позицию и одновременно удаляет любое количество элементов. входящий3
параметры: начальная позиция, количество элементов для удаления и элементов для вставки.
const arr = [{ id: 1 }, { id: 2 }, { id: 3 }]
// 从索引 1 开始,删除一个元素,并切插入两个元素
arr.splice(1, 1, { id: 4 }, { id: 5 })
// [{ id: 1 }, { id: 4 }, { id: 5 },{ id: 3 }]
console.log(arr)
copyWithin()
Заменяет собственные элементы внутри массива, возвращая измененный текущий массив.
Array.copyWithin()
Синтаксис параметра:
- Первый параметр (обязательный): элемент, который нужно заменить с этой позиции.
- Второй параметр (необязательный): начать копирование данных с этой позиции, по умолчанию
0
. - Третий параметр (необязательный): индекс для остановки копирования (исключая себя), значение по умолчанию — длина массива.
// 将数组的前两个元素替换数组的最后两个位置:[1,2,1,2]
// 从索引2的位置开始替换
// 从索引0的位置开始复制数据
[1, 2, 3, 4].copyWithin(2,0)
const arr = [{id: 1},{id: 2},{id: 3}]
// [{id: 3},{id: 2},{id: 3}]
arr.copyWithin(0, 2)
// 从索引2的位置开始替换
// 从索引0的位置开始复制
// 在遇到索引1的时候停止复制(不包含自身)
// [1,2,1,4]
[1, 2, 3, 4].copyWithin(2,0)
fill()
Заполняет один или несколько элементов массива фиксированным значением.
- Первый параметр: значение, используемое для заполнения элементов массива.
- Второй параметр (необязательный): начальный индекс, значение по умолчанию
0
. - Второй параметр (необязательный): индекс завершения, значение по умолчанию — длина массива.
Когда передается параметр, весь массив заполняется значением этого параметра:
const arr = [{ id: 1 }, { id: 2 }, { id: 3 }]
arr.fill({ id: 4 })
// [{ id: 4 }, { id: 4 }, { id: 4 }]
console.log(arr)
// true
console.log(arr[0] === arr[1])
Когда передается несколько параметров, заполните часть массива значением этого параметра:
const arr = [{ id: 1 }, { id: 2 }, { id: 3 }]
// 从数组下标索引为1的元素开始填充
arr.fill({ id: 4 }, 1)
// [{ id: 1 }, { id: 4 }, { id: 4 }]
console.log(arr)
// 填充的元素不包括终止的索引元素。
const numbers = [1, 2, 3, 4]
numbers.fill(0, 1, 2)
// [1, 0, 3, 4]
console.log(numbers)
flat()
Превращает вложенные массивы в одномерные массивы. Вернуть новый массив.
Array.flat()
Синтаксис параметра:
- Первый параметр (необязательный): указывает глубину структуры для извлечения вложенного массива, значение по умолчанию — 1.
расширить один слой
const arr = [1, 2, [3, 4]]
const newArr = arr.flat()
//[1,2,3,4]
console.log(newArr)
Развернуть два слоя
const arr = [1, 2, [3, [4, 5]]]
const newArr = arr.flat(2)
// [1, 2, 3, 4, 5]
console.log(newArr)
Используя Infinity, можно расширять вложенные массивы произвольной глубины.
var arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
const newArr = arr.flat(Infinity)
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(newArr)
удалить пустые элементы из массива
var arr = [1, 2, , 4, 5]
const newArr = arr.flat()
// [1, 2, 4, 5]
console.log(newArr)
flatMap()
Выполняет функцию для каждого члена исходного массива, а затем выполняет метод flat() для массива возвращаемых значений. Этот метод возвращает новый массив без изменения исходного массива.
Array.flatMap()
Синтаксис параметра:
- Первый параметр (обязательный):
callback
Траверсная функция. Функция принимает три параметра:
element |
index |
array |
---|---|---|
текущий элемент | индекс текущего элемента (необязательно) | сам объект массива (необязательно) |
- Второй параметр (необязательный): значение этого параметра при выполнении функции обратного вызова.
var arr = [1, 2]
const newArr = arr.flatMap(el => [el, el * 2])
[1,2,2,4]
console.log(newArr)
flatMap()
Можно расширить только один уровень массива
var arr = [1, 2]
const newArr = arr.flatMap(el => [[el, el * 2]])
// [[1,2],[2,4]]
console.log(newArr)
includes()
Проверяет, содержит ли массив заданное значение, и возвращает, если содержитtrue
, иначе возвратfalse
. использоватьincludes()
При сравнении строк и символов учитывается регистр.
Array.includes()
Синтаксис параметра:
-
Первый параметр: значение элемента для поиска.
-
Второй параметр: указывает начальную позицию поиска, по умолчанию
0
.
const obj = { id: 1 }
var arr = [obj, { id: 2 }]
// true
console.log(arr.includes(obj))
Передайте второй параметр
console.log([1, 2, 3].includes(3)); // true
console.log([1, 2, 3].includes(3, 3)) // false
console.log([1, 2, 3].includes(3, 2)) // true
5. Метод сортировки
sort()
Сортирует элементы массива и возвращает отсортированный исходный массив.
Array.sort()
Синтаксис параметра:
- Первый параметр (необязательный): используется для указания функции для упорядочения в определенном порядке. Если он опущен, элементы преобразуются в строки в соответствии с
ASCII
код для сортировки. Функция принимает два параметра:
first |
second |
---|---|
первый элемент для сравнения | второй элемент для сравнения |
// Array的sort()方法默认把所有元素先转换为String再排序,结果'10'排在了'2'的前面,因为字符'1'比字符'2'的ASCII码小。
const arr = [10, 20, 1, 2].sort()
//[1, 10, 2, 20]
console.log(arr);
Вы можете получить функцию сравнения в качестве параметра для реализации пользовательской сортировки. Функция принимает два аргумента, если первый аргумент должен стоять перед вторым返回一个负数
, возвращает, если два аргумента равны0
, если первый аргумент должен идти после второго则返回一个正数
.
const arr = [10, 20, 1, 2]
arr.sort((value1, value2) => {
if (value1 < value2) {
return -1
}
if (value1 > value2) {
return 1
}
return 0
})
// [1, 2, 10, 20]
console.log(arr)
reverse()
Инвертирует элементы в массиве и возвращает массив. Этот метод изменяет исходный массив.
const values = [1, 2, 3, 4, 5]
values.reverse()
//[5, 4, 3, 2, 1]
console.log(values)
6. Метод преобразования
toLocaleString()
toLocaleString()
Возвращает строку, представляющую элементы массива. Элементы в массиве будут использовать соответствующиеtoLocaleString
в строки, которые будут использовать строку, специфичную для локали, разделенную запятыми.
const array1 = [1, 'a', { id: 1 }, new Date()]
// 1,a,[object Object],2020/1/15 上午7:50:38
console.log(array1.toLocaleString())
toString()
Возвращает строку, связанную запятой.
const array1 = [1, 'abc', { id: 1 }]
// 1,abc,[object Object]
console.log(array1.toString())
join()
Объединяет все элементы массива в строку и возвращает строку. Если массив имеет только один элемент, то этот элемент возвращается без разделителя.
Array.join()
Синтаксис параметра:
- Первый параметр (необязательный): укажите строку для разделения каждого элемента массива. Если не передано, элементами массива по умолчанию являются запятые (
,
) разделены. Если это пустая строка (""), между всеми элементами нет символов.
const arr = [1, 2, 3]
// 1,2,3
console.log(arr.join())
// 123
console.log(arr.join(''))
// 1+2+3
console.log(arr.join('+'))
Семь, метод слияния (перебор всех элементов массива, а затем построение окончательного возвращаемого значения)
reduce()
reduce()
Метод начинается с первого элемента массива, перебирает все элементы массива, строит окончательное возвращаемое значение и возвращает результат совокупной обработки функции.
Array.reduce()
Синтаксис параметра:
- Первый параметр (обязательный):
callback
Выполнить функцию для каждого значения в массиве. Функция принимает четыре параметра:
prev |
cur |
index |
array |
---|---|---|---|
Начальное значение или значение, возвращенное последним вызовом функции обратного вызова (обязательно) | Текущее значение элемента (обязательно) | значение индекса текущего элемента (необязательно) | сам объект массива (необязательно) |
Любое значение, возвращаемое этой функцией, автоматически передается следующему элементу в качестве первого аргумента.
- Второй параметр (необязательный):
initialValue
как первый звонокcallback
Значение первого параметра функции. Если начальное значение не указано, будет использован первый элемент массива. вызывается для пустого массива без начального значенияreduce
сообщит об ошибке.
//Uncaught TypeError: Reduce of empty array with no initial value
[].reduce(() => {})
const arr = ['L', 'O', 'V', 'E'].reduce((prev, cur) => {
console.log('prev: ', prev)
console.log('cur: ', cur)
return prev + cur
})
// LOVE
console.log(arr)
При первом выполнении функции обратного вызова prev равен L, а cur равен O. Во второй раз prev — это LO, а cur — это V (третий элемент массива). Этот процесс будет продолжаться до тех пор, пока не будет посещен каждый элемент массива и, наконец, не будет возвращен результат LOVE.
reduceRight()
reduceRight()
а такжеreduce()
работает аналогично, используйтеreduce()
ещеreduceRight()
, в зависимости от того, с чего начать обход массива. В остальном они точно такие же.
var values = [1,2,3,4,5]
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur
});
//15
alert(sum)
При первом выполнении функции обратного вызова prev равно 5, а cur равно 4. Во второй раз prev равно 9 (результат прибавления 5 к 4), а cur равно 3 (третий элемент массива). Этот процесс продолжается до тех пор, пока не будет посещен каждый элемент массива и не будет возвращен результат.
Восемь, демо
Разделите слова тире верблюд
camelize("background-color") === 'backgroundColor'
function camelize(str) {
return str
.split('-') // my-long-word -> ['my', 'long', 'word']
.map(
(word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1)
) // ['my', 'long', 'word'] -> ['my', 'Long', 'Word']
.join(''); // ['my', 'Long', 'Word'] -> myLongWord
}
Дедупликация массива
function unique(arr) {
let result = [];
for (let str of arr) {
if (!result.includes(str)) {
result.push(str)
}
}
return result
}
создать объект в существующем массиве,id
В качестве ключа каждый элемент массива используется как значение.
let users = [
{ id: '111', name: "zhangsan", age: 20 },
{ id: '222', name: "lisi", age: 24 },
{ id: '333', name: "wangwu", age: 31 },
]
function groupById(array) {
return array.reduce((obj, value) => {
obj[value.id] = value
return obj
}, {})
}
/*
{
111: { id: "111", name: "zhangsan", age: 20 },
222: { id: "222", name: "lisi", age: 24 },
333: { id: "333", name: "wangwu", age: 31 }
}
*/
console.log(groupById(users))
Ссылка на ссылку
Расширенное программирование с помощью JavaScript (3-е издание)
10 JavaScript array methods you should know
[Галантерейные товары] js подробный метод работы массива и сбор анализа