Une brève analyse de quelques méthodes de fonctionnement des objets Array en JS (avec code)

Dans l'article précédent "Un article expliquant certaines méthodes de fonctionnement des objets Objet en JS (partage)", nous avons découvert certaines méthodes de fonctionnement des objets Objet en JS. L'article suivant vous aidera à comprendre certaines méthodes de fonctionnement des objets Array dans JS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Quelques méthodes de fonctionnement efficaces de Array en javascriptjavascript中Array一些高效的操作方法

Array.from()

方法从一个类似数组或可迭代对象中创建一个新的数组实例。

console.log(Array.from("foo"));
// expected output: Array ["f", "o", "o"]
console.log(Array.from([1, 2, 3], (x) => x + x));
// expected output: Array [2, 4, 6]

Array.isArray()

用于确定传递的值是否是一个Array。

Array.isArray([1, 2, 3]);
// true
Array.isArray({ foo: 123 });
// false
Array.isArray("foobar");
// false
Array.isArray(undefined);
// false

Array.obsolete()

用于异步监视数组发生的变化

已被废弃 语法：Array.observe(arr, callback)

Array.of()

方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]
//es5
if (!Array.of) {
  Array.of = function () {
    return Array.prototype.slice.call(arguments);
  };
}

Array.concat()

方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

var array1 = ["a", "b", "c"];
var array2 = ["d", "e", "f"];

console.log(array1.concat(array2));
// expected output: Array ["a", "b", "c", "d", "e", "f"]

Array.copyWithin()

方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，而不修改其大小。

var array1 = [1, 2, 3, 4, 5];

// place at position 0 the element between position 3 and 4
console.log(array1.copyWithin(0, 3, 4));
// expected output: Array [4, 2, 3, 4, 5]

// place at position 1 the elements after position 3
console.log(array1.copyWithin(1, 3));
// expected output: Array [4, 4, 5, 4, 5]

Array.entries()

方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。

var array1 = ["a", "b", "c"];

var iterator1 = array1.entries();

console.log(iterator1.next().value);
// expected output: Array [0, "a"]

console.log(iterator1.next().value);
// expected output: Array [1, "b"]

Array.every()

方法测试数组的所有元素是否都通过了指定函数的测试。

var array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every((x) => x < 40));
//out true

Array.fill()

方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止

var array1 = [1, 2, 3, 4];
// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]
// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]
console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

Array.filter()

方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。

var words = ["spray", "limit", "elite", "exuberant", "destruction", "present"];

const result = words.filter((word) => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

Array.find()

方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined。

var array1 = [5, 12, 8, 130, 44];

var found = array1.find((x) => x > 10);

console.log(found);
// expected output: 12

Array.findIndex()

方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

var array1 = [5, 12, 8, 130, 44];

var index = array1.findIndex((x) => x > 10);

console.log(index);
// expected output: 1

Array.flat()

方法会递归到指定深度将所有子数组连接，并返回一个新数组。

var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

Array.flatMap()

方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与map和深度值1的flat几乎相同，但flatMap通常在合并成一种方法的效率稍微高一些。

var arr1 = [1, 2, 3, 4];

arr1.map((x) => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap((x) => [x * 2]);
// [2, 4, 6, 8]

// only one level is flattened
arr1.flatMap((x) => [[x * 2]]);
// [[2], [4], [6], [8]]

Array.forEach()

方法对数组的每个元素执行一次提供的函数。

var array1 = ["a", "b", "c"];

array1.forEach((value, index, arr) => console.log(value));
// output 'a'
// output 'b'
// output 'c'

Array.includes(value,index)

方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false。

var array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

var pets = ["cat", "dog", "bat"];

console.log(pets.includes("cat"));
// expected output: true

console.log(pets.includes("at"));
// expected output: false

Array.indexOf()

方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

/var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

Array.join()

方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符

var elements = ["Fire", "Wind", "Rain"];

console.log(elements.join());
// expected output: Fire,Wind,Rain

console.log(elements.join(""));
// expected output: FireWindRain

console.log(elements.join("-"));
// expected output: Fire-Wind-Rain

//数组[1,2,3,3,4,5]求和
eval([1, 2, 3, 3, 4, 5].join("+")) = 18;

Array.keys()

方法返回一个新的Array迭代器，它包含数组中每个索引的键。

var array1 = ["a", "b", "c"];
var iterator = array1.keys();

for (let key of iterator) {
  console.log(key); // expected output: 0 1 2
}

Array.lastIndexOf(item，index)

方法返回指定元素（也即有效的JavaScript值或变量）在数组中的最后一个的索引，如果不存在则返回-1。从数组的后面向前查找，从fromIndex处开始。

var animals = ["Dodo", "Tiger", "Penguin", "Dodo"];

console.log(animals.lastIndexOf("Dodo"));
// expected output: 3

console.log(animals.lastIndexOf("Tiger"));
// expected output: 1

Array.map()

方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

var array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map((x) => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

Array.pop()

方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

var plants = ["broccoli", "cauliflower", "cabbage", "kale", "tomato"];
console.log(plants.pop());
// expected output: "tomato"
console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]
plants.pop();
console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]

Array.push()

方法将一个或多个元素添加到数组的末尾，并返回新数组的长度。

var animals = ["pigs", "goats", "sheep"];

console.log(animals.push("cows"));
// expected output: 4

console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push("chickens");

console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens"]

Array.reduce()

方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

Array.reduceRight()

方法接受一个函数作为累加器（accumulator

Array.from()

la méthode crée un nouvel objet à partir d'un objet de type tableau ou itérable instance de tableau.

const array1 = [
  [0, 1],
  [2, 3],
  [4, 5],
].reduceRight((accumulator, currentValue) => accumulator.concat(currentValue));

console.log(array1);
// expected output: Array [4, 5, 2, 3, 0, 1]

Array.isArray()

est utilisé pour déterminer si la valeur transmise est un Array.

var array1 = ["one", "two", "three"];
console.log("array1: ", array1);
// expected output: Array ['one', 'two', 'three']

var reversed = array1.reverse();
console.log("reversed: ", reversed);
// expected output: Array ['three', 'two', 'one']

/* Careful: reverse is destructive. It also changes
the original array */

console.log("array1: ", array1);
// expected output: Array ['three', 'two', 'one']

Array.obsolete()

Utilisé pour surveiller de manière asynchrone les modifications dans le tableau

est obsolète Syntaxe : Array.observe(arr , rappel)

Array.of()🎜🎜 crée une nouvelle instance de tableau avec un nombre variable d'arguments, quel que soit le nombre ou le type d'arguments. La méthode 🎜

var array1 = [1, 2, 3];

var firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

🎜Array.concat()🎜🎜 est utilisée pour fusionner deux tableaux ou plus. Cette méthode ne modifie pas le tableau existant, mais renvoie un nouveau tableau. La méthode 🎜

var animals = ["ant", "bison", "camel", "duck", "elephant"];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

🎜Array.copyWithin()🎜🎜 copie superficiellement une partie d'un tableau vers un autre emplacement du même tableau et la renvoie sans modifier sa taille. La méthode 🎜

var array = [1, 2, 3, 4, 5];

var even = function (element) {
  // checks whether an element is even
  return element % 2 === 0;
};

console.log(array.some(even));
// expected output: true

🎜Array.entries()🎜🎜 renvoie un nouvel objet Array Iterator contenant les paires clé/valeur pour chaque index du tableau. La méthode 🎜

var months = ["March", "Jan", "Feb", "Dec"];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

var array1 = [1, 30, 4, 21];
array1.sort();
console.log(array1);
// expected output: Array [1, 21, 30, 4]

🎜Array.every()🎜🎜 teste si tous les éléments du tableau réussissent le test de la fonction spécifiée. La méthode 🎜

var months = ["Jan", "March", "April", "June"];
months.splice(1, 0, "Feb");
// 增
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']

months.splice(4, 1, "May");
// 改
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'May']
// 删
months.splice(4, 1);
console.log(months);
//output： ["Jan", "Feb", "March", "April"]

🎜Array.fill()🎜🎜 remplit tous les éléments d'un tableau de l'index de début à l'index de fin avec une valeur fixe. L'exclusion de la terminaison 🎜

var array1 = [1, "a", new Date("21 Dec 1997 14:12:00 UTC")];
var localeString = array1.toLocaleString("en", { timeZone: "UTC" });

console.log(localeString);
// expected output: "1,a,12/21/1997, 2:12:00 PM",
// This assumes "en" locale and UTC timezone - your results may vary
var prices = ["￥7", 500, 8123, 12];
prices.toLocaleString("ja-JP", { style: "currency", currency: "JPY" });

// "￥7,￥500,￥8,123,￥12"

🎜Array.filter()🎜🎜 crée un nouveau tableau contenant tous les éléments du test implémenté par la fonction fournie. La méthode 🎜

var alpha = new Array("a", "b", "c");

alpha.toSource(); //返回["a", "b", "c"]

🎜Array.find()🎜🎜 renvoie la valeur du premier élément du tableau qui satisfait à la fonction de test fournie. Sinon, undefined est renvoyé. La méthode 🎜

var array1 = [1, 2, "a", "1a"];

console.log(array1.toString());
// expected output: "1,2,a,1a"

🎜Array.findIndex()🎜🎜 renvoie l'index du premier élément du tableau qui satisfait à la fonction de test fournie. Sinon, -1 est renvoyé. La méthode 🎜

var array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

🎜Array.flat()🎜🎜 reviendra à la profondeur spécifiée pour connecter tous les sous-tableaux et renvoyer un nouveau tableau. La méthode 🎜

const array1 = ["a", "b", "c"];
const iterator = array1.values();

for (const value of iterator) {
  console.log(value);
  // expected output: "a" "b" "c"
}

🎜Array.flatMap()🎜🎜 mappe d'abord chaque élément à l'aide d'une fonction de mappage, puis compresse le résultat dans un nouveau tableau. Il est presque identique à map et flat avec une valeur de profondeur de 1, mais flatMap est généralement combiné en une méthode Légèrement plus efficace. La méthode 🎜rrreee🎜Array.forEach()🎜🎜 exécute la fonction fournie une fois pour chaque élément du tableau. La méthode 🎜rrreee🎜Array.includes(value,index)🎜🎜 est utilisée pour déterminer si un tableau contient une valeur spécifiée. Selon la situation, si c'est le cas, il renverra true, sinon il le fera. renvoie fauxcode>. La méthode 🎜rrreee🎜Array.indexOf()🎜🎜 renvoie le premier index où un élément donné peut être trouvé dans le tableau, ou -1 s'il n'existe pas. La méthode 🎜rrreee🎜Array.join()🎜🎜 joint tous les éléments d'un tableau (ou d'un objet de type tableau) dans une chaîne et renvoie ce caractère 🎜rrreee🎜Array.keys()🎜🎜La méthode renvoie un nouveau ArrayItérateur qui contient la clé de chaque index du tableau. La méthode 🎜rrreee🎜Array.lastIndexOf(item, index)🎜🎜 renvoie l'index du dernier élément du tableau (c'est-à-dire une valeur ou une variable JavaScript valide), ou renvoie -1. Recherchez vers l'avant à partir de l'arrière du tableau, en commençant par fromIndex. La méthode 🎜rrreee🎜Array.map()🎜🎜 crée un nouveau tableau dont le résultat est le résultat de l'appel d'une fonction fournie sur chaque élément du tableau. La méthode 🎜rrreee🎜Array.pop()🎜🎜 supprime le dernier élément du tableau et renvoie la valeur de cet élément. Cette méthode modifie la longueur du tableau. La méthode 🎜rrreee🎜Array.push()🎜🎜 ajoute un ou plusieurs éléments à la fin du tableau et renvoie la longueur du nouveau tableau. La méthode 🎜rrreee🎜Array.reduce()🎜🎜 applique une fonction à l'accumulateur et à chaque élément du tableau (de gauche à droite), en le réduisant à une seule valeur. La méthode 🎜rrreee🎜Array.reduceRight()🎜🎜 accepte une fonction comme accumulateur (accumulateur) et réduit chaque valeur du tableau (de droite à gauche) à une seule valeur. La méthode 🎜rrreee🎜Array.reverse()🎜🎜 inverse la position des éléments dans le tableau. La méthode 🎜rrreee🎜Array.shift()🎜🎜 supprime le premier élément du tableau et renvoie la valeur de cet élément. Cette méthode modifie la longueur du tableau. La méthode 🎜rrreee🎜Array.slice()🎜🎜 renvoie une copie superficielle d'une partie du tableau sélectionné du début à la fin (exclusive) vers un nouvel objet tableau. Et le tableau d'origine ne sera pas modifié. La méthode 🎜rrreee🎜Array.some()🎜🎜 teste si certains éléments du tableau réussissent un test implémenté par la fonction fournie. 🎜

var array = [1, 2, 3, 4, 5];

var even = function (element) {
  // checks whether an element is even
  return element % 2 === 0;
};

console.log(array.some(even));
// expected output: true

Array.sort()

方法用原地算法对数组的元素进行排序，并返回数组。排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。

var months = ["March", "Jan", "Feb", "Dec"];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

var array1 = [1, 30, 4, 21];
array1.sort();
console.log(array1);
// expected output: Array [1, 21, 30, 4]

Array.splice()

方法通过删除现有元素和/或添加新元素来更改一个数组的内容。

var months = ["Jan", "March", "April", "June"];
months.splice(1, 0, "Feb");
// 增
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']

months.splice(4, 1, "May");
// 改
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'May']
// 删
months.splice(4, 1);
console.log(months);
//output： ["Jan", "Feb", "March", "April"]

Array.toLocaleString()

返回一个字符串表示数组中的元素。数组中的元素将使用各自的toLocaleString方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 ","）隔开。

var array1 = [1, "a", new Date("21 Dec 1997 14:12:00 UTC")];
var localeString = array1.toLocaleString("en", { timeZone: "UTC" });

console.log(localeString);
// expected output: "1,a,12/21/1997, 2:12:00 PM",
// This assumes "en" locale and UTC timezone - your results may vary
var prices = ["￥7", 500, 8123, 12];
prices.toLocaleString("ja-JP", { style: "currency", currency: "JPY" });

// "￥7,￥500,￥8,123,￥12"

Array.toSource()

返回一个字符串,代表该数组的源代码。

该特性是非标准的，请尽量不要在生产环境中使用它！

var alpha = new Array("a", "b", "c");

alpha.toSource(); //返回["a", "b", "c"]

Array.toString()

返回一个字符串，表示指定的数组及其元素。

var array1 = [1, 2, "a", "1a"];

console.log(array1.toString());
// expected output: "1,2,a,1a"

Array.unshift()

方法将一个或多个元素添加到数组的开头，并返回新数组的长度。

var array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

Array.values()

方法返回一个新的Array Iterator对象，该对象包含数组每个索引的值。

const array1 = ["a", "b", "c"];
const iterator = array1.values();

for (const value of iterator) {
  console.log(value);
  // expected output: "a" "b" "c"
}

推荐学习：JavaScript视频教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!