Массив является наиболее часто используемым сбором данных в js. Существует множество встроенных методов. Освоение этих методов может эффективно повысить эффективность нашей работы, а также оказать большое влияние на качество нашего кода.
1. Создайте массив
1. Используйте литеральную запись массива
var arr4 = []; //创建一个空数组
var arr5 = [20]; // 创建一个包含1项数据为20的数组
var arr6 = ["lily","lucy","Tom"]; // 创建一个包含3个字符串的数组
2. Используйте конструктор массива
Конструктор без аргументов
var arr1 = new Array(); //创建一个空数组
параметризованная конструкция
Если передается только один числовой параметр, это означает создание пустого массива, начальная длина которого равна указанному значению.
var arr2 = new Array(20); // 创建一个包含20项的数组
Если передан нечисловой параметр или количество параметров больше 1, это означает создание массива, содержащего указанные элементы
var arr3 = new Array("lily","lucy","Tom"); // 创建一个包含3个字符串的数组
var array4 = new Array('23'); // ["23"]
3. Метод Array.of для создания массива (новое в es6)
Одна из целей нового метода создания массивов в ES6 — помочь разработчикам избежать особенностей языка js при использовании конструктора Array.
Метод Array.of() всегда создает массив всех переданных аргументов, независимо от количества и типа аргументов.
let arr = Array.of(1, 2);
console.log(arr.length);//2
let arr1 = Array.of(3);
console.log(arr1.length);//1
console.log(arr1[0]);//3
let arr2 = Array.of('2');
console.log(arr2.length);//1
console.log(arr2[0]);//'2'
4. Метод Array.from для создания массива (новое в es6)
в js будетПреобразование объектов, не являющихся массивами, в настоящие массивыочень хлопотно. В ES6 Array.from() может возвращать массив, передавая итерируемый объект или объект, подобный массиву, в качестве первого параметра.
function arga(...args) { //...args剩余参数数组,由传递给函数的实际参数提供
let arg = Array.from(args);
console.log(arg);
}
arga('arr1', 26, 'from'); // ['arr1',26,'from']
преобразование отображения
Если вы хотите выполнить дальнейшее преобразование массива, вы можете передать функцию сопоставления в качестве второго параметра методу Array.from(). Эта функция преобразует каждое значение объекта массива в целевую форму и сохраняет его в соответствующей позиции целевого массива.
function arga(...args) {
return Array.from(args, value => value + 1);
}
let arr = arga('arr', 26, 'pop');
console.log(arr);//['arr1',27,'pop1']
Если функция сопоставления должна работать с объектами, вы можете вручную передать третий параметр в метод Array.from(), указав это значение внутри функции сопоставления.
const helper = {
diff: 1,
add(value) {
return value + this.diff;
}
}
function translate() {
//arguments 是一个对应于传递给函数的参数的类数组对象
return Array.from(arguments, helper.add, helper);
}
let arr = translate('liu', 26, 'man');
console.log(arr); // ["liu1", 27, "man1"]
Во-вторых, метод массива
Методы прототипа массива в основном включают следующие
-
join(): объединить каждый элемент массива в строку с указанным разделителем. -
push(): добавить новый элемент в конец массива -
pop(): удалить последний элемент массива -
shift(): удалить первый элемент массива -
unshift(): добавить новый элемент в первый элемент массива -
slice(): Найдите некоторые элементы в соответствии с условиями -
splice(): Добавляет, удаляет и изменяет массив -
fill(): метод заполнения одного или нескольких элементов массива определенным значением. -
filter(): Функция "Фильтр" -
concat(): используется для объединения двух или более массивов -
indexOf(): Определяет индекс позиции первого вхождения текущего значения в массиве. -
lastIndexOf(): Определяет индекс позиции последнего вхождения текущего значения в массиве. -
every(): определяет, удовлетворяет ли каждый элемент массива условию -
some(): определить, есть ли в массиве элемент, удовлетворяющий условию -
includes(): определяет, содержит ли массив указанное значение. -
sort(): сортирует элементы массива -
reverse(): перевернуть массив -
forEach(): ES5 и ниже перебирают каждый элемент массива. -
map(): цикл ES6 по каждому элементу массива -
copyWithin(): используется для копирования элементов из указанной позиции массива в другую указанную позицию массива. -
find(): возвращает совпадающее значение -
findIndex(): возвращает индекс соответствующей позиции -
toLocaleString()、toString(): преобразовать массив в строку -
flat()、flatMap(): сглаженный массив -
entries() 、keys() 、values(): пройтись по массиву
Подробное объяснение основных функций каждого метода
1.join()
join()Метод используется для преобразования всех элементов массива в строку.
Элементы разделяются указанным разделителем. Использовать запятую в качестве разделителя по умолчанию
var arr = [1,2,3];
console.log(arr.join()); // 1,2,3
console.log(arr.join("-")); // 1-2-3
console.log(arr); // [1, 2, 3]（原数组不变）
пройти черезМетод join() может реализовывать повторяющиеся строки., вам нужно только передать строку и количество повторений, чтобы вернуть повторяющуюся строку.Функция выглядит следующим образом:
function repeatString(str, n) {
//一个长度为n+1的空数组用string去拼接成字符串,就成了n个string的重复
return new Array(n + 1).join(str);
}
console.log(repeatString("abc", 3)); // abcabcabc
console.log(repeatString("Hi", 5)); // HiHiHiHiHi
2.push() и поп()
push()методДобавить элемент в массив с конца массива, вы можете добавить один или несколько элементов.
pop()метод дляудалить последний элемент массиваи возвращает удаленный элемент.
var arr = ["Lily","lucy","Tom"];
var count = arr.push("Jack","Sean");
console.log(count); // 5
console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]
var item = arr.pop();
console.log(item); // Sean
console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]
3.shift() и unshift()
shift()метод дляудалить из него первый элемент массиваи возвращает значение первого элемента.
unshift()метод можетДобавить один или несколько элементов в начало массиваи возвращает новую длину.
var arr = ["Lily","lucy","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count); // 5
console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]
var item = arr.shift();
console.log(item); // Jack
console.log(arr); // ["Sean", "Lily", "lucy", "Tom"]
4.sort()
Метод sort() используется для сортировки элементов массива.
Порядок сортировки может быть буквенно-цифровой и в порядке возрастания или убывания.
Порядок сортировки по умолчанию — в возрастающем алфавитном порядке.
var arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort()); // ["a", "b", "c", "d"]
arr2 = [13, 24, 51, 3];
console.log(arr2.sort()); // [13, 24, 3, 51]
console.log(arr2); // [13, 24, 3, 51](元数组被改变)
Чтобы решить вышеупомянутую проблему, метод sort() может получить функцию сравнения в качестве параметра, чтобы мы могли указать, какое значение предшествует какому значению.
Функция сравнения принимает два аргумента и возвращает отрицательное число, если первый аргумент должен стоять перед вторым, 0, если два аргумента равны, и положительное число, если первый аргумент должен идти после второго. Вот простая функция сравнения:
function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [3, 13, 24, 51]
Если вам нужно использовать функцию сравнения для генерации результатов в порядке убывания, просто поменяйте местами значения, возвращаемые функцией сравнения:
function compare(value1, value2) {
if (value1 < value2) {
return 1;
} else if (value1 > value2) {
return -1;
} else {
return 0;
}
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [51, 24, 13, 3]
5.reverse()
Метод reverse() используется для изменения порядка элементов в массиве.
var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13](原数组改变)
6.concat()
Метод concat() используется для объединения двух или более массивов.
Этот метод не изменяет существующий массив, а просто возвращает копию объединенного массива.
var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
console.log(arr); // [1, 3, 5, 7](原数组未被修改)
Из приведенных выше результатов теста видно, что если входящие данные не являются массивом, параметры добавляются непосредственно в конец массива, а если передается массив, то каждый элемент массива добавляется в массив. Но что, если вы передадите двумерный массив?
var arrCopy2 = arr.concat([9,[11,13]]);
console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]]
console.log(arrCopy2[5]); //[11, 13]
7.slice()
slice(): возвращает новый массив элементов от указанного начального индекса до конечного индекса в исходном массиве.
Метод slice() может принимать один или два аргумента, начальную и конечную позиции возвращаемых элементов.
существуеттолько один параметр, метод slice() возвращает все элементы от позиции, указанной этим параметром, до конца текущего массива.
еслиимеет два параметра, который возвращает элемент между начальной и конечной позициями, но не конечной позицией.
Когда встречается отрицательное число, добавьте отрицательное число к значению длины массива (6), чтобы заменить число в этой позиции.
var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = arr.slice(1,-2);//相当于arr.slice(1,4)
var arrCopy4 = arr.slice(-4,-1);//相当于arr.slice(2,5)
console.log(arr); //[1, 3, 5, 7, 9, 11](原数组没变)
console.log(arrCopy); //[3, 5, 7, 9, 11]
console.log(arrCopy2); //[3, 5, 7]
console.log(arrCopy3); //[3, 5, 7]
console.log(arrCopy4); //[5, 7, 9]
8.splice()
splice(): очень мощный метод массива, он имеет множество применений, можетРеализовать удаление, вставку и замену.
1. Удалить элемент и вернуть удаленный элемент
Любое количество элементов можно удалить, указав 2 параметра: позицию первого удаляемого элемента и количество удаляемых элементов. Например, splice(0,2) удаляет первые два элемента массива.
var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11]
console.log(arrRemoved); //[1, 3]
2. Добавить элемент в указанный индекс
В указанную позицию можно вставить любое количество элементов, указав только 3 параметра: начальную позицию, 0 (количество элементов для удаления) и элемент для вставки. Например, splice(2,0,4,6) вставит 4 и 6, начиная с позиции 2 в текущем массиве.
var array1 = [22, 3, 31, 12];
array1.splice(1, 0, 12, 35); //[]
console.log(array1); // [22, 12, 35, 3, 31, 12]
3. Заменить элемент в указанной позиции индекса
В указанную позицию можно вставить любое количество элементов, и одновременно можно удалить любое количество элементов, указав всего 3 параметра: начальную позицию, количество элементов для удаления и любое количество элементов для вставки. Количество вставленных элементов не обязательно должно быть равно количеству удаленных элементов. Например, splice (2,1,4,6) удаляет элемент в позиции 2 текущего массива, а затем вставляет 4 и 6, начиная с позиции 2.
const array1 = [22, 3, 31, 12];
array1.splice(1, 1, 8); //[3]
console.log(array1); // [22, 8, 31, 12]
9. indexOf() и lastIndexOf()
Принимает два параметра: Элемент для поиска и (необязательно) указатель, указывающий, с чего начать поиск.
indexOf(): поиск в обратном направлении от начала массива (позиция 0).
lastIndexOf: Поиск вперед с конца массива.
Оба эти метода возвращают позицию искомого элемента в массиве или вВозврат -1, если не найден. При сравнении первого параметра с каждым элементом массиваИспользовать конгруэнтный оператор.
var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2
console.log(arr.lastIndexOf(5)); //5
console.log(arr.indexOf(5,2)); //2
console.log(arr.lastIndexOf(5,4)); //2
console.log(arr.indexOf("5")); //-1
10.forEach()
forEach(): прокручивать массив, запуская данную функцию для каждого элемента в массиве. Этот метод не имеет возвращаемого значения. Параметры — это все типы функций, которые передаются по умолчанию.
Параметры: пройденное содержимое массива; соответствующий индекс массива, сам массив
var arr = [11, 22, 33, 44, 55];
arr.forEach(function(x, index, a){
console.log(x + '|' + index + '|' + (a === arr));
});
输出为：
11|0|true
22|1|true
33|2|true
44|3|true
55|4|true
11.map()
map()Метод возвращает новый массив, элементами массива являются значения, обработанные вызывающей функцией исходных элементов массива.
map()Метод последовательно обрабатывает элементы в исходном порядке элементов массива.
Этот метод не изменяет исходный массив
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]
12.filter()
filter(): функция «фильтр», каждый элемент массива запускает заданную функцию и возвращает массив, удовлетворяющий условиям фильтрации.
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
});
console.log(arr2); //[1, 4, 7, 8, 9, 10]
13.fill() es6 новый
Метод fill() заполняет один или несколько элементов массива определенным значением. Когда используется только один параметр, метод заполняет весь массив значением этого параметра.
let arr = [1, 2, 3, 'cc', 5];
arr.fill(1);
console.log(arr);//[1,1,1,1,1];
Если вы не хотите изменять все элементы в массиве, а только некоторые из них, вы можете использовать необязательные параметры начальной и конечной позиции (исключая элемент в конечной позиции)
3 параметра:Значение заполнения, параметр начальной позиции, параметр конечной позиции (исключая элемент в конечной позиции)
let arr = [1, 2, 3, 'arr', 5];
arr.fill(1, 2);
console.log(arr);//[1,2,1,1,1]
arr.fill(0, 1, 3);
console.log(arr);//[1,0,0,1,1];
14.every()
Every(): определяет, удовлетворяет ли каждый элемент массива условию, и возвращает значение true, только если все элементы удовлетворяют условию.
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
});
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
});
console.log(arr3); // false
15.some()
some(): определяет, есть ли в массиве элемент, удовлетворяющий условию. Пока есть элемент, удовлетворяющий условию, возвращается значение true.
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
});
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x < 1;
});
console.log(arr3); // false
16.includes() es7 новый
Метод include() используется для определения того, содержит ли массив указанное значение, и возвращает true, если это так, иначе false.
Есть два параметра, где первое — (обязательное) значение элемента, который нужно искать, а второе — (необязательное) место начала поиска элемента
const array1 = [22, 3, 31, 12, 'arr'];
const includes = array1.includes(31);
console.log(includes); // true
const includes1 = array1.includes(31, 3); // 从索引3开始查找31是否存在
console.log(includes1); // false
Примечание: включаетИспользуйте оператор ===для сравнения по значению, за одним исключением:NaN считается равным самому себе.
let values = [1, NaN, 2];
console.log(values.indexOf(NaN));//-1
console.log(values.includes(NaN));//true
17. уменьшить() и уменьшитьПраво()
Оба этих метода реализуют итерацию по всем элементам массива (т. е. аккумулятора) с последующим построением окончательного возвращаемого значения.
reduce()Метод начинается с первого элемента массива и последовательно проходит до конца.
reduceRight()Затем начните с последнего элемента массива, распространяйтесь вперед на первый элемент.
4 параметра: предыдущее значение, текущее значение, индекс элемента и объект массива
var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10); //数组一开始加了一个初始值10,可以不设默认0
console.log(sum); //25
18. toLocaleString() и toString()
преобразовать массив в строку
const array1 = [22, 3, 31, 12];
const str = array1.toLocaleString();
const str1 = array1.toString();
console.log(str); // 22,3,31,12
console.log(str1); // 22,3,31,12
19. найти() и найтииндекс()
Оба метода find() и findIndex() принимают два параметра: функцию обратного вызова и необязательное значение, указывающее это внутри функции обратного вызова.
Функция обратного вызова принимает три параметра: элемент массива, позицию индекса, соответствующую элементу, и сам массив.
Функция обратного вызова должна возвращать значение true, когда данный элемент удовлетворяет заданному вами условию, и оба метода find() и findIndex() будут возвращены в функции обратного вызова.Прекратите находить в первый раз, когда он возвращает true.
Разница между ними: метод find() возвращает совпадающее значение, а findIndex() возвращает индекс совпадающей позиции.
let arr = [1, 2, 3, 'arr', 5, 1, 9];
console.log(arr.find((value, keys, arr) => {
return value > 2;
})); // 3 返回匹配的值
console.log(arr.findIndex((value, keys, arr) => {
return value > 2;
})); // 2 返回匹配位置的索引
20.copyWithin() [новый es6]
Метод copyWithin() используется для копирования элемента из указанной позиции массива в другую указанную позицию массива.
Этот метод изменяет существующий массив
//将数组的前两个元素复制到数组的最后两个位置
let arr = [1, 2, 3, 'arr', 5];
arr.copyWithin(3, 0);
console.log(arr);//[1,2,3,1,2]
По умолчанию метод copyWithin() всегда копирует весь массив до конца, но вы можете указать необязательный параметр, чтобы ограничить количество перезаписываемых элементов. Этот третий параметр указывает место, где останавливается репликация (без самого места).
let arr = [1, 2, 3, 'arr', 5, 9, 17];
//从索引3的位置开始粘贴
//从索引0的位置开始复制
//遇到索引3时停止复制
arr.copyWithin(3, 0, 3);
console.log(arr);//[1,2,3,1,2,3,17]
21. flat() и flatMap(), новое в es6
Метод flat() рекурсивно проходит массив до указанной глубины и возвращает все элементы, объединенные с элементами в пройденных подмассивах, в новый массив.
Этот метод возвращает новый массив и не влияет на исходные данные.
параметр:Указывает глубину структуры для извлечения вложенных массивов, значение по умолчанию равно 1.
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());
// expected output: [0, 1, 2, 3, 4]
const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2));
// expected output: [0, 1, 2, [3, 4]]
//使用 Infinity，可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// 扁平化数组空项,如果原数组有空位，flat()方法会跳过空位
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]
flatMap()Метод выполняет функцию для каждого члена исходного массива, что эквивалентно выполнению Array.prototype.map(), а затемВыполнить метод flat() для массива возвращаемых значений.
Этот метод возвращает новый массив без изменения исходного массива.
// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
22. Записи(), ключи() и значения() [ES6]
entry(), keys() и values() — для обхода массива. Оба они возвращают объект итератора, который можно пройти с помощью цикла for...of
Разница в том,keys() - это обход имен ключей,values() - это обход ключевых значений,entry() — это обход пар ключ-значение
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
Если вы не используете цикл for...of, вы можете вручную вызвать объект итератораследующий методВидео.
let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']