Techniques classiques pour les opérations sur les tableaux JavaScript (organisées et partagées)

Cet article vous présente quelques opérations connexes sur les tableaux en JavaScript, notamment les méthodes de prototype d'objet Array et les opérations courantes telles que la déduplication, l'aplatissement, le tri, etc. J'espère qu'il vous sera utile.

Opérations sur les tableaux JavasScript, comprenant principalement les méthodes de prototype d'objet Array et les opérations courantes telles que la déduplication, l'aplatissement, le tri, etc. ( callback(( currentValue [, index [, array]])[, thisArg])

callback est une fonction exécutée pour chaque élément du tableau. Cette fonction reçoit un à trois paramètres

La valeur actuelle du. l'élément actuel du tableau est en cours de traitement Index array facultatif [indique le tableau sur lequel l'opération est effectuée]

thisArg facultatif [lors de l'exécution de la fonction de rappel, utilisée comme valeur de this, lors de l'utilisation de la fonction fléchée, ce paramètre sera ignoré]
forEach() exécute la fonction donnée une fois pour chaque élément du tableau

• let arr = [1, 2, 3, 4, 5];
  let obj = {a: 1};
  arr.forEach(function(currentValue, index, array) {
    console.log("当前值：", currentValue);// 1
    console.log("当前值索引：", index);// 0
    console.log("当前处理数组：", array); // (5)[1, 2, 3, 4, 5]
    console.log("当前this指向：", this);// {a: 1}
    console.log("结束一次回调, 无需返回值");
    console.log("");
  }, obj);
  console.log(arr);// [1, 2, 3, 4, 5]不改变原数组

map
arr.map(callback(currentValue [, index [, array]])[, thisArg])
callback est une fonction exécutée par chaque élément du tableau. La fonction reçoit un à trois paramètres

currentValue L'élément actuel en cours de traitement dans le tableau index optionnel [l'index du tableau. élément actuel en cours de traitement dans le tableau]

array optionnel [tableau en cours d'utilisation]
thisArg facultatif [lors de l'exécution de la fonction de rappel, utilisée comme valeur de this, cette fonction sera ignorée lors de l'utilisation des fonctions fléchées]
map() crée un nouveau tableau dont le résultat est la valeur de retour de la fonction fournie appelée une fois pour chaque élément du tableau

• let arr = [1, 2, 3, 4, 5];
  let obj = {a: 1};
  let newArr = arr.map(function(currentValue, index, array) {
    console.log("当前值：", currentValue);// 1
    console.log("当前值索引：", index);// 0
    console.log("当前处理数组：", array); // (5)[1, 2, 3, 4, 5]
    console.log("当前this指向: ", this); // {a: 1}
    console.log("");
    return crrentValue + 10;
  }, obj);
  console.log(newArr);// [11, 12, 13, 14, 15]
  console.log(arr);// [1, 2, 3, 4, 5]不改变原数组

push
arr.push(element1[,.. ., elementN])

• elementN est l'élément qui est ajouté à la fin du tableau

push() ajoute un ou plusieurs éléments à la fin du tableau et renvoie la longueur du tableau

let arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.push('f', 'g'));// 7
console.log(arr);// ["a", "b", "c", "d", "e", "f", "g"] 改变原数组

pop pop() supprime le dernier élément du tableau et renvoie la valeur de l'élément, renvoie undefind lorsque le tableau est vide, cette méthode modifie la longueur du tableau

let arr = [1, 2, 3, 4, 5];
console.log(arr.pop());// 5
console.log(arr);// [1, 2, 3, 4] 改变原数组

shift

shift( ) supprime le premier élément du tableau et renvoie la valeur de l'élément, cette méthode modifiera le tableau d'origine

let arr = [1, 2, 3, 4, 5]
console.log(arr.shift());// 1
console.log(arr);// [2, 3, 4, 5] 改变原数组

unshift

arr.unshift(element1[, ..., elementN]) unshift() ajoute un ou plusieurs éléments au début du tableau, et renvoie La longueur du tableau, cette méthode modifie le tableau d'origine

let arr = [1, 2, 3, 4, 5]
console.log(arr.unshift(-1, 0));// 7
console.log(arr);// [-1, 0, 1, 2, 3, 4, 5] 改变原数组

splice

arrar.splice(start[, deleteCount[, item1 [, item2[, ...]]]])start spécifie la modification La position de départ de l'élément et est équivalent à array.length-1 Si la valeur absolue du nombre négatif est supérieure à la longueur du tableau, cela signifie que la position de départ est la position 0

deleteCount est facultatif [entier], indiquant le nombre d'éléments du tableau à supprimer. Si deleteCount est supérieur au nombre total d'éléments après le démarrage, tous les éléments après starr seront supprimés. (y compris le bit de départ). Si deleteCount est omis ou si sa valeur est supérieure ou égale à array.length-start (c'est-à-dire si elle est supérieure ou égale au nombre de tous les éléments après le début), alors tous les éléments du tableau après le démarrage sera supprimé

item1, item2, ...facultatif [éléments à ajouter au tableau, à partir de la position de départ si non spécifié, alors splice() supprimera uniquement les éléments du tableau]

splice. () modifie le tableau en supprimant ou en remplaçant des éléments existants ou en ajoutant de nouveaux éléments en place, et renvoie le contenu modifié sous la forme d'un tableau. Cette méthode modifiera le tableau d'origine

let arr = [1, 2, 3, 4, 5]
console.log(arr.splice(1, 1));// [2]
console.log(arr);// [1, 3, 4, 5] 改变原数组

slice

arr.slice. ([begin[, end]])

begin optionnel [index au début de l'extraction] Commencez à extraire les éléments du tableau d'origine à partir de cet index Si ce paramètre est un nombre négatif, cela signifie Commencez l'extraction à partir des derniers éléments du. tableau d'origine. Si le début est omis, la tranche commence à partir de l'index 0 ; si le début est supérieur à la longueur du tableau d'origine, un tableau vide sera renvoyé

end est facultatif [index à la fin de l'extraction], terminez le. extraction des éléments du tableau d'origine à cet index. Slice extraira tous les éléments de l'index du début à la fin dans le tableau d'origine, y compris le début, mais pas la fin. Si la fin est omise, slice extraira jusqu'à la fin du tableau. tableau d'origine.Si end S'il est supérieur à la longueur du tableau, slice sera également extrait jusqu'à la fin du tableau

slice() renvoie un nouvel objet tableau. Cet objet est une copie superficielle du tableau d'origine déterminé. par début et fin, y compris le début, à l'exclusion de la fin, et l'original Le tableau ne sera pas modifié

let arr = [1, 2, 3, 4, 5];
console.log(arr.sclice(1, 3));// [2, 3]
console.log(arr);// [1, 2, 3, 4, 5] 不改变原数组

concat

let new_array = old_array.concat(value[, value2[, ...[, valueN] ]])

valueN facultatif[], convertissez un tableau ou une valeur Concaténer en un nouveau tableau Si le paramètre valueN est omis, concat renverra une copie superficielle du tableau existant auquel il est appelé

.

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

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr1.concat(arr2);
console.log(arr3);// [1, 2, 3, 4, 5, 6]
console.log(arr1);// [1, 2, 3] 不改变原数组

join

arr.join([separator])

separator可选 指定一个字符串来分隔数组的每个元素

join()将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串. 如果数组只有一个项目, 那么将返回该项目而不使用分隔符

let arr = ['a', 'b', 'c'];
console.log(arr.join("&"));// a&b&c
console.log(arr);// ["a", "b", "c"] 不改变数组

sort

arr.sort([compareFunction])

compareFunction可选 用来指定按某种顺序进行排列的函数. 如果省略, 元素按照转换为第字符串的各个字符的Unicode进行排序

firstEl第一个用于比较的元素

secondEl第二个用于比较的元素

sort()用原地算法对数组的元素进行排序, 并返回数组. 默认排序顺序是在将元素转换为字符串, 然后比较它们的UTF-16代码单元值序列时构建的

let arr = [1, 2, 3, 4, 5];
console.log(arr.sort((a, b) => b - a));// [5, 4, 3, 2, 1]
console.log(arr);// [5, 4, 3, 2, 1] 改变原数组

reverse

reverse()将数组中元素的位置颠倒, 并返回该数组, 该方法会改变原数组

let arr = [1, 2, 3, 4, 5];
console.log(arr.reverse());// [5, 4, 3, 2, 1]
console.log(arr);// [5, 4, 3, 2, 1] 改变原数组

every

every()测试一个数组内的所有元素是否都能通过某个指定函数的测试, 返回一个布尔值

let arr = [1, 2, 3, 4, 5];
console.log(arr.every(currentValue => currentValue > 1));// false
console.log(arr);// 不改变原数组

some

some()测试数组中是不是至少有1个元素通过了提供的测试函数, 返回一个Boolean类型的值

let arr = [1, 2, 3 ,4 ,5];
console.log(arr.some(currentValue => currentValue > 1));// true
console.log(arr);// [1, 2, 3, 4, 5] 不改变原数组

filter

filter()创建一个新数组, 其包含通过所提供的测试函数的所有元素

let arr = [1, 2, 3, 4, 5];
console.log(arr.filter(currentValue => currentValue > 2));// [3, 4, 5]
console.log(arr);// [1, 2, 3, 4, 5] 不改变原数组

find

find()返回数组中满足提供的测试函数的第一个元素的值, 否则返回undefined

let arr = [1, 2, 3, 4, 5];
console.log(arr.find(currentValue => currentValue > 2));// 3
console.log(arr);// [1, 2, 3, 4, 5] 不改变原数组

findIndex

findIndex()返回数组中满足提供的测试函数的第一个元素的索引, 否则返回-1

let arr = [1, 2, 3, 4, 5];
console.log(arr.findIndex(currentValue => currentValue > 2));// 2
console.log(arr);// [1, 2, 3, 4, 5] 不改变原数组

includes

includes()用来判断一个数组是否包含一个指定的值, 如果包含则返回true, 否则返回false

let arr = [1, 2, 3, 4, 5];
console.log(arr.includes(2));// true
console.log(arr);// [1, 2, 3, 4, 5] 不改变原数组

indexOf

indexof()返回指定元素在数组中的第一个索引, 否则返回-1

let arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(2));// 1
console.log(arr);// [1, 2, 3, 4, 5] 不改变原数组

lastIndexOf

lastIndexOf()返回指定元素在数组中的的最后一个索引, 如果不存在则返回-1

let arr = [1, 2, 3, 2, 1];
console.log(arr.lastIndexOf(2));// 3
console.log(arr);// [1, 2, 3, 2, 1] 不改变原数组

fill

fill()用一个固定值填充一个数组从起始索引到终止索引到全部元素, 不包括终止索引

let arr = [1, 2, 3, 4, 5];
console.log(arr.fill(0, 0, 5));// [0, 0, 0, 0, 0]
console.log(arr);// [0, 0, 0, 0 ,0] 改变数组

flat

flat()会按照一个可指定的深度递归遍历数组, 并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

let arr = [1, 2, [3, 4, [5]]];
console.log(arr.flat(2));// [1, 2, 3, 4, 5]
console.log(arr);// [1, 2, [3, 4, [5]]] 不改变原数组

keys

keys()返回一个包含数组中每个索引键的Array Iterator对象

let arr = [1, 2, 3, 4, 5];
let iterator = arr.keys();
for (const key of iterator) {
  console.log(key);
  // 0
  // 1
  // 2
}
console.log(arr);// [1, 2, 3, 4, 5] 不改变原数组

常用操作

数组去重

使用对象

let arr = [1, 2, 3, 1, 1, 1, 3, 5, 3];
let obj = {};
let newArr = [];
arr.forEach(v => {
  if(!ogj[v]) {
    ogj[v] = 1;
    newArr.push(v);
  }
})
console.log(newArr);// [1, 2, 3, 5]

使用Set

let arr = [1, 2, 3, 1, 1, 1, 3, 5, 3];
let newArr = Array.from(new Set(arr));
// let newArr = [...(new Set(arr))];// 使用ES6解构赋值
console.log(newArr);// [1, 2, 3, 5]

扁平化数组

使用flat

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

递归实现flat

function _flat(arr, maxN = 1, curN = 0) {
  let newArr = [];
  if (curN >= maxN) return arr;
  arr.forEach((v, i, array) => {
    if (Array.isArray(v)) {
      newArr.push(..._flat(v, maxN, curN + 1));
    } else newArr.push(v);
  })
  return newArr;
}
let arr = [1, 2, [3, 4, [5]]];
let newArr = _flat(arr, 1);// 扁平化一层
console.log(newArr);// [1, 2, 3, 4, [5]]

统计一个字符串中出现最多的字符

使用数组将字符的ASCII码作为key制作桶

let s = "ASASRKIADAA";
let arr = [];
let base = 65;// A-Z 65-90 a-z 97-122
Array.prototype.forEach.call(s, (v) => {
  let ascii = v.charCodeAt(0) - base;
  if (arr[ascii]) {
    ++arr[ascii];
  } else arr[ascii] = 1;
})
let max = 0;
let maxIndex = 0;
arr.forEach((v, i) => {
  if (v > max) {
    max = v;
    maxIndex = i;
  }
})
console.log(String.fromCharCode(maxIndex + base), arr[maxIndex]);// A 5

找出数组中的最大值

遍历数组

let arr = [1, 2, 3, 1, 1, 1, 3, 5, 3];
let max = -Infinity;
arr.forEach(v => {
  if (v > max) max = v;
})
console.log(max);// 5

使用Math

let arr = [1, 2, 3, 1, 1, 1, 3, 5, 3];
let max = Math.max(...arr);
console.log(max);// 5

使用reduce

let arr = [1, 2, 3, 1, 1, 1, 3, 5, 3];
let max = arr.reduce((a, v) => {
  return a > v ? a : v;
})
console.log(max);// 5

拷贝数组

遍历数组使用push

let arr = [1, 2, 3, 4, 5];
let newArr = [];
arr.forEach(v => newArr.push(v));
console.log(newArr);// [1, 2, 3, 4, 5]

使用concat

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

使用slice

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

随机打乱一个数组

随机交换N次

function randomInt(a, b) {
  return Number.parseInt(Math.random() * (b-a) + a);
}
let arr = [1, 2, 3, 4, 5];
let N = arr.length;
arr.forEach((v, i, arr) => {
  let ran = randomInt(0, N);
  [arr[i], arr[ran]] = [arr[ran], arr[i]];
})
console.log(arr);

随机排序

let arr = [1, 2, 3, 4, 5];
arr.sort((v1, v2) => {
  return Math.random() >= 0.5 ? 1 : -1;
})
console.log(arr);

【相关推荐：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!