【JavaScript】Обзор метода массива (обновлено до ES7~)

множество

1.`Array.push()`

Добавляет один или несколько элементов в конец массива и возвращает новую длину массива.Исходный массив меняется. Параметры могут быть добавлены от одного до многих.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x=fruits.push("Kiwi");
console.log(fruits)//(5) ["Banana", "Orange", "Apple", "Mango", "Kiwi"]    
console.log(x)//5  x是 新的数组长度

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x=fruits.push("Kiwi","Java");
console.log(fruits) //(6) ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Java"]  
console.log(x)   // 6 x是 新的数组长度

2. `Array.unshift()`，

к массивуначалодобавить водин или большеэлемент и возвращает новую длину массива.Исходный массив меняется。

let arr = [1, 2, 3, 4, 5]
let res = arr.unshift(6, 7)
console.log(arr) //[6, 7, 1, 2, 3, 4, 5]
console.log(res) //7

3.`Array.pop()`

Удаляет и возвращает последний элемент массива или возвращает, если массив пуст undefined.Исходный массив меняется。

pop()Метод удаляет последний элемент из массива.

pop() 方法Возвращаемое значение — удаленный элемент.

let arr = [1, 2, 3, 4, 5]
let res = arr.pop()
console.log(arr) //[1, 2, 3, 4]
console.log(arr.length) //4
console.log(res) // 5

4.`Array.shift()`

Удаляет первый элемент массива и возвращает значение первого элемента. Возвращает, если массив пуст undefined.Исходный массив меняется。

let arr = [1, 2, 3, 4, 5]
let res = arr.shift()
console.log(arr) //[2, 3, 4, 5]
console.log(arr.length) //4
console.log(res) // 1

5.`Array.find()、findIndex()、findLast()、findLastIndex()`

find()Метод возвращает значение первого элемента массива, прошедшего проверку (оценивается функцией).

find()Метод вызывает выполнение функции один раз для каждого элемента массива:

Когда элементы в массиве возвращаются при проверке условия true, find()возвращается элемент, удовлетворяющий условию, и функция выполнения не будет вызываться для последующего значения. Возвращает, если нет подходящего элементаundefined

Примечание. find()Для пустых массивов функция выполняться не будет.

Примечание. find()Исходное значение массива не изменяется.

var ages = [3, 10, 18, 20];
 
function checkAdult(age) {
    
    
    return age >= 18;
}
 
console.log(ages.find(checkAdult)); // 18
console.log(ages); //  [3, 10, 18, 20]

[1, 4, -5, 10].find((n) => n < 0)
// -5

[1, 5, 10, 15].find(function(value, index, arr) {
    
    
  return value > 9;
}) // 10

findIndex(): очень похож на метод find(), возвращает позицию первого допустимого члена массива или -1, если все члены не соответствуют критериям.

[1, 5, 10, 15].findIndex(function(value, index, arr) {
    
    
  return value > 9;
}) // 2

Оба метода могут принимать второй параметр, который используется для привязки объекта this функции обратного вызова.

// find()函数接收了第二个参数person对象，回调函数中的this对象指向person对象。
function f(v){
    
    
  return v > this.age;
}
let person = {
    
    name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26

find()и findIndex()оба проверяются в обратном направлении, начиная с 0-го бита массива. ES2022 добавляет два новых метода findLast()и findLastIndex(), начиная с последнего члена массива, проверяет вперед по очереди, а все остальное оставляет прежним.

const array = [
  {
    
     value: 1 },
  {
    
     value: 2 },
  {
    
     value: 3 },
  {
    
     value: 4 }
];

array.findLast(n => n.value % 2 === 1); // { value: 3 }
array.findLastIndex(n => n.value % 2 === 1); // 2

6 .`Array.concat(arr1,arr2…)`

объединить два или более массива,создать новый массив。Исходный массив остается неизменным.

let arr1 = [1, 2, 3]
let arr2 = [4, 5]
let arr = arr1.concat(arr2)
console.log(arr)//[1, 2, 3, 4, 5]

7.`Array.join()`

Объедините каждый элемент массива с указанными символами, чтобы сформировать строку. Символ соединения по умолчанию — запятая ",".

let arr = [1, 2, 3, 4, 5];
let str1 = arr.join('*')
let str2 = arr.join('-')
let str3 = arr.join('#')
console.log(str1)  // 1*2*3*4*5
console.log(str2)  // 1-2-3-4-5
console.log(str3)  // 1#2#3#4#5

8.`Array.reverse()`

Переверните массив.Исходный массив меняется。

let arr=[1,2,3,4,5];
let newArr=arr. reverse();
console.log(newArr,arr) //newArr=[5,4,3,2,1]; arr=[5,4,3,2,1];

9.`Array.sort()`

Отсортируйте элементы массива. Сортировать по строке UniCode,Исходный массив меняется。

по умолчанию:

пусть arr=[2,3,5,1,4];

let newArr=arr.sort();
console.log(newArr,arr)//newArr=[1,2,3,4,5]; arr =[1,2,3,4,5]

Сортировка по правилам функции:

①Из детства во взрослую жизнь

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
    
    
  return a - b;
});
console.log(numbers);

②От большого к маленькому

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
    
    
  return b - a;
});
console.log(numbers);  // [5, 4, 3, 2, 1]

③Сортировка по значению в объекте массива

var arr = [
    {
    
    name:'zopp',age:0},
    {
    
    name:'gpp',age:18},
    {
    
    name:'yjj',age:8}
];

function compare(property){
    
    
    return function(a,b){
    
    
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
    }
}
console.log(arr.sort(compare('age')))

// 打印结果：按照age排序

(3) [{
    
    …}, {
    
    …}, {
    
    …}]
0: {
    
    name: "zopp", age: 0}
1: {
    
    name: "yjj", age: 8}
2: {
    
    name: "gpp", age: 18}
length: 3
__proto__: Array(0)

10.`Array.map(function())`

После того, как каждый элемент исходного массива выполняет функцию, возвращается новый массив. Исходный массив остается неизменным. (Обратите внимание на разницу между этим методом и forEach).

var arr = ['a','b','c','d'];
arr.map(function(item,index,arr){
    
       //参数含义同forEach
       console.log(item);
       console.log(index);
   });
	3 a
	4 0
	3 b
	4 1
	3 c
	4 2
	3 d
	4 3

maporEachотличие от ф

mapМетод возвращает новый массив, а элементы в массиве — это обработанные значения исходных элементов массива после вызова функции.

forEachВозвращаемое значение метода всегда не определено. (Можно также сказать, что возвращаемого значения нет)

11.`Array.slice(start,end)`

Начинается с начала, заканчивается до конца и не достигает конца;
если конечное значение не задано, он начинается с начала до конца массива. start может быть задано отрицательное значение, -1 означает последнюю позицию массива, -2 означает предпоследнюю и так далее, независимо от прошлого.

Когда есть только одно значение, удалить с текущей позиции до конца массива

Перехватить содержимое указанного местоположения скопированного массива

slice (начальная позиция, конечная позиция); второй параметр по умолчанию не записывается в конец, его можно перехватывать только спереди назад; возвращаемое значение — новый массив, образованный перехваченным содержимым;

let arr=[1,2,3,4,5]
let copyArr=arr.slice(); // slice()或者slice(0)都可以复制数组；
let newArr=arr.slice(1,3);//截取索引1到索引3(不包括3)的值;
console.log(newArr,arr,copyArr)//newArr=[2,3];arr=[1,2,3,4,5];

12.`Array.splice(index,howmany,arr1,arr2…)`

index необходимый. Целое число, указывающее, куда добавлять/удалять элементы, используйте отрицательные значения, чтобы указать позицию с конца массива.
howmanyнеобязательный. Количество элементов для удаления. Если установлено значение 0, элементы не будут удалены.
arr1, …, arr2необязательный. Новый элемент для добавления в массив.
Удаление элементов и добавление элементов, indexудаление howmanyэлементов, начиная с позиции, и вставка arr1、arr2…данных indexпоследовательно с позиции. howmanyПри 0 элемент не удаляется. Исходный массив меняется.

let arr = [1,2,3,4,5];
let num1 = arr.splice(1);
console.log(num1,arr) //num1=[2,3,4,5];arr=[1];

При наличии двух значений первое значение — это место удаления, а второе — количество удалений;

let arr=[1,2,3,4,5]
let num1=arr.splice(2,3)//删除从索引值2开始的3个元素
console.log(num1,arr);// num1=[3,4,5],arr=[1,2]

Когда имеется три или более значений, первое значение — это позиция вставленного элемента, второе значение — количество замен, а следующие значения — все новые вставленные элементы;

let arr=[1,2,3,4,5]
let num2=arr.splice(2,1,6,7,8);//从索引值2开始替换掉1个元素，并且插入6,7,8

//如果第二个值为0，则不替换，直接插入6,7,8;
console.log(num2,arr);//被替换的值num2=[3]; arr=[1,2,6,7,8,4,5]

13.`Array.forEach(function())`

Вызывается для каждого элемента массива, передавая элемент функции обратного вызова. Исходный массив остается неизменным. (Обратите внимание на разницу между этим методом и картой: если вы печатаете Array.forEach напрямую, результат не определен).

var arr = [1, 3, 5, 13, 2];
var res = arr.forEach(function(item,index) {
    
    
    console.log(`数组第${
      
      index+1}个元素是${
      
      item}`);
 })
    console.log(res);//forEach的返回值为undefined,
// 数组第1个元素是1
// 数组第2个元素是3
// 数组第3个元素是5
// 数组第4个元素是13
// 数组第5个元素是2

14.`Array.filter(function)`

Отфильтруйте элементы в массиве, соответствующие критериям, и верните новый массив.

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    
    
    return age >= 18;
}
console.log(ages.filter(checkAdult))
VM57:6 (3) [32, 33, 40]

однострочная стрелочная функция с одним аргументом

Как показано в следующем фрагменте кода, это очень просто:

const fn= foo =>`${
      
      foo} world`;

Это наиболее компактная форма стрелочной функции, которая часто используется для простых функций обработки, таких как фильтрация. Как показано в следующем фрагменте кода:

let array=['a','bc','def','ghij'];
array=array.filter(item=>item.length>=2);

15.`Array.every(function())`

Оцените каждый элемент в массиве и верните, если они совпадают true, в противном случае верните false.

every()Метод используется для проверки соответствия всех элементов массива заданным условиям (обеспечиваемым функцией).

every()метод проверяет все элементы массива с помощью указанной функции:

Если обнаруживается, что элемент массива неудовлетворителен, все выражение возвращает false, а остальные элементы не проверяются.

Возвращает true, если все элементы удовлетворяют условию.

Примечание. every()Проверка на наличие пустых массивов невозможна.

ПРИМЕЧАНИЕ. every()Исходный массив не будет изменен.

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    
    
    return age >= 18;
}
console.log(ages.every(checkAdult)) // false

16.`Array.some(function())`

Оцените каждый элемент в массиве и верните, если ни один не соответствует false, в противном случае верните true.

some()Метод используется для проверки соответствия элементов массива заданным условиям (обеспечиваемым функцией).

some()Метод выполняет каждый элемент массива по очереди:

Если один элемент удовлетворяет условию, выражение возвращает true, а остальные элементы не проверяются.
Возвращает, если ни один элемент не удовлетворяет условию false.

Примечание. some()Проверка на наличие пустых массивов невозможна.

ПРИМЕЧАНИЕ. some()Исходный массив не будет изменен.

var ages = [3, 10, 18, 20];

function checkAdult(age) {
    
    
    return age >= 18;
}
console.log(ages.some(checkAdult))  // true

`Array.every`и `Array.some`разница

разница методов

every(): каждый элемент возвращает true, чтобы вернуть true

some(): возвращает true, пока один элемент возвращает true

17.`Array.reduce(function())`

reduce()В качестве аккумулятора метод получает функцию, и каждое значение в массиве (слева направо) сначала сокращается, а затем вычисляется как значение.

let arr = [1, 2, 3, 4, 5]
const add = (a, b) => a + b
let sum = arr.reduce(add)
console.log(sum) // 4 15

18.`Array.isArray()`

isArray()Метод используется для определения того, является ли объект массивом.

Возврат, если объект является массивом true, иначе возврат false.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
console.log(Array.isArray(fruits)) // true

19.`Array.forEach()`

var arr = [1, 3, 5, 13, 2];
var res = arr.forEach(function(item,index) {
    
    
console.log(`数组第${
      
      index+1}个元素是${
      
      item}`);
    })
console.log(res);//forEach的返回值为undefined,
// 数组第1个元素是1
// 数组第2个元素是3
// 数组第3个元素是5
// 数组第4个元素是13
// 数组第5个元素是2
// undefined //敲黑板——forEach()是没有返回值的！

20.`Array.toString()`

Этот метод преобразует массив в строку:

let arr = [1, 2, 3, 4, 5];
let str = arr.toString()
console.log(arr)   // [1, 2, 3, 4, 5]
console.log(str)  // 1,2,3,4,5

21.`Array.from()`

Array.from()Этот метод используется для преобразования двух типов объектов в настоящие массивы: массивоподобные объекты и итерируемые объекты (включая новые структуры данных ES6 Setи Map).

Подобно массиву: есть только одна существенная особенность, то есть он должен иметь атрибут длины, поэтому любой объект с атрибутом длины может быть преобразован в массив с помощью метода Array.from().

let arrayLike = {
    
    
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5 的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6 的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

В общих практических приложениях распространенными массивоподобными объектами являются коллекция NodeList, возвращаемая операциями DOM, и объект аргументов внутри функции.

Пока структура данных интерфейса Iterator развернута, Array.from() может преобразовать ее в массив.

Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']

let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

Array.from() также может принимать функцию в качестве второго параметра, что аналогично методу map() массива, который используется для обработки каждого элемента и помещения обработанного значения в возвращаемый массив.

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

22.`flat()、flatMap() 扁平化`

flat()
Array.prototype.flat()Он используется для «выравнивания» вложенного массива в одномерный массив. Этот метод возвращает новый массив и не влияет на исходные данные.

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

flat()По умолчанию только один слой будет «сведен». Если вы хотите «свести» многослойный вложенный массив, вы можете записать параметр flat()метода как целое число, указывающее количество слоев, которые вы хотите свести. значение равно 1.

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

Если вы хотите преобразовать его в одномерный массив независимо от того, сколько слоев вложенности существует, вы можете использовать ключевое слово Infinity в качестве параметра.

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

Если в исходном массиве есть место, метод flat() пропустит его.

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

flatMap()
flatMap()Это эквивалентно Map()+flat()выполнению сначала каждого значения map, а затем всегоflat

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]

flatMap()Можно расширить только один уровень массива.

// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]

flatMap()Параметр метода — это функция обхода, которая может принимать три параметра: текущий элемент массива, положение текущего элемента массива (начиная с нуля) и исходный массив.

arr.flatMap(function callback(currentValue[, index[, array]]) {
    
    
  // ...
}[, thisArg])

flatMap()Метод также может иметь второй параметр, который используется для привязки этого в функции обхода.

23.`toReversed()，toSorted()，toSpliced()，with()`

Традиционный метод общего массива изменит исходный массив, например, и push()、pop()、shift()、unshift()т. д., поэтому существует метод, который позволяет выполнять операции с массивом без изменения исходного массива и возвращает копию исходного массива.

Array.prototype.toReversed() -> Array
Array.prototype.toSorted(compareFn) -> Array
Array.prototype.toSpliced(start, deleteCount, ...items) -> Array
Array.prototype.with(index, value) -> Array

Они соответственно соответствуют исходному методу массива.

toReversed()Соответствующий reverse(), используемый для изменения позиции членов массива.
toSorted()Соответствующий sort(), используемый для сортировки элементов массива.
toSpliced()Соответствующий splice()используется для удаления указанного количества элементов и вставки новых элементов в указанную позицию.
with(index,value)Соответствующий splice(index, 1, value)используется для замены члена в указанной позиции новым значением.

Выше приведены исходные методы, соответствующие этим четырем новым методам. Смысл и использование точно такие же. Единственное отличие состоит в том, что исходный массив не будет изменен, а будет возвращена копия исходного массива.

const arr= [1, 2, 3];
arr.toReversed() // [3, 2, 1]
arr// [1, 2, 3]

const arr1= [3, 1, 2];
arr1.toSorted() // [1, 2, 3]
arr1// [3, 1, 2]

const array = [1, 2, 3, 4];
array.toSpliced(1, 2, 5, 6, 7) // [1, 5, 6, 7, 4]
array // [1, 2, 3, 4]

const arr2= [1, 1, 3];
arr2.with(1, 2) // [1, 2, 3]
arr2// [1, 1, 3]