Maison > Article > interface Web > Résumé et partage des opérations courantes sur les tableaux JavaScript
Cet article vous apporte des connaissances sur les opérations courantes sur les tableaux en javascript, y compris les problèmes liés à la création de tableaux, à la détermination s'il s'agit de tableaux, aux conversions de type tableau et de tableau, et à la déduplication de tableau. J'espère qu'il sera utile à tout le monde.
Recommandations associées : Tutoriel d'apprentissage Javascript
La création de tableaux est une compétence de base, et ses méthodes incluent principalement les suivantes :
const arr = [1,2,3] // 数组字面量const arr = [,,,] // 三元素空位数组(hole array)const arr = new Array(4) // [,,,,]const arr = new Array(4,2) // [4,2]const arr = Array.of(1,2,3) // [1,2,3]
Parmi elles, la méthode la plus couramment utilisée est le tableau littéral méthode.
Les principales méthodes pour déterminer s'il s'agit d'un tableau sont :
// 方法一[1,2,3] instanceof Array // 方法二[1,2,3].constructor === Array // 方法三Object.prototype.toString.call([1,2,3]) === '[object Array]' // 方法四Array.isArray([1,2,3]) // 方法五(兼容写法)function isArray(arr){ return Array.isArray ? Array.isArray(arr):Object.prototype.toString.call(arr) === '[object Array]'}
Généralement, la méthode la plus couramment utilisée devrait être la méthode isArray
. isArray
方法。
我们有时碰到的数据结构不是纯数组,一般将其归类为“类数组”,类数组可以借助以下方法转为纯数组:
const x = document.querySelectorAll('a'); // 方法一Array.prototype.slice.call(x); // 方法二Array.from(x);Array.from(x,mapFn,thisArg); // 方法三[...x] // 方法四function toArray(x){ let res = [] for(item of x){ res.push(item) } return res} // 方法五Array.apply(null,x) // 方法六[].concat.apply([],x)
方法五和六本质上都是利用了 apply 的特点,即传给 apply 的第二个参数(数组或者类数组)会被转换为一个参数列表,这些参数再送到调用的方法(new Array 或者 concat)中。
数组去重,本质上都需要比较两个元素是否相等,如果相等,则抛弃一个元素。为了准确地判断,这里统一使用 Object.is
进行比较。
set 要求元素不重复,因此将数组转换为 set 之后就可以去重了,接着再转换回数组即可。
function unique(arr){ return Array.from(new Set(arr)) // return [...new Set(arr)]}
外层循环遍历所有元素,里层循环遍历当前元素往后的所有元素,若发现相等则利用 splice 移除掉一个。记得里层循环每次要回退一格,否则会遗漏掉某些元素
function unique(arr){ for(let i = 0;i < arr.length;i++){ for(let j = i + 1;i < arr.length;j++){ if(Object.is(arr[i],arr[j])){ arr.splice(j,1) j-- } } } return arr}
新建数组,每次往数组中添加元素之前都检查数组中是否已有该元素:
function unique(arr){ const res = [] arr.forEach((item,index) => { // 也可以 if(res.indexOf(item) == -1),但是无法正确判断 NaN if(!res,includes(item)){ res.push(item) } })}
function unique(arr){ return arr.reduce((acc,cur) => { // return acc.includes(cur) ? acc : acc.concat(cur) return acc.includes(cur) ? acc : [...acc,cur] },[])}
根据 sort 的机制(在每个元素上调用 toStrng,之后在字符串层面进行排序),让相等的元素聚集在一起。新建数组,每次往数组中添加元素之前都检查该元素是否等于前面的元素,是则属于重复元素:
function unique(arr){ arr.sort() const res = [arr[0]] for(let i = 1;i < arr.length;i++){ if(!Object.is(arr[i],arr[i-1])){ res.push(arr[i]) } } return res}
这种方法其实和“新建数组 + includes”一样。新建数组,每次往数组中添加元素之前都检查该元素是否已经作为对象的属性:
// 对象属性值可以认为是元素重复的次数function unique(arr){ const res = [] const obj = {} arr.forEach((item,index) => { if(!obj[item]){ res.push(item) obj[item] = 1 } else { obj[item]++ } }) return res}
这里检测的是对象的属性名,而属性名本质上是一个字符串,因此会认为 obj[true]
和 obj["true"]
是相等的,从而导致元素 true
或者元素 "true"
function unique(arr){ let map = new Map() for(item of arr){ if(!map.has(item)){ map.set(item,true) } } return [...map.keys()]}Méthodes 5 et 6 Essentiellement, elles profitent toutes des caractéristiques de apply, c'est-à-dire que le deuxième paramètre (tableau ou de type tableau) passé à apply sera converti en une liste de paramètres, et ces paramètres seront ensuite envoyé à la méthode appelante (new Array ou concat). Déduplication de tableau
La déduplication de tableau nécessite essentiellement de comparer si deux éléments sont égaux et, si c'est le cas, d'en supprimer un. Afin de juger avec précision, Object.is
est utilisé ici à des fins de comparaison. 1) Utilisez set pour supprimer les doublons
function unique(arr){ return arr.filter((item,index) => index === arr.indexOf(item))}2) Double boucle + splice
La boucle externe traverse tous les éléments et la boucle interne traverse tous les éléments après l'élément actuel. S'ils s'avèrent égaux, utilisez splice pour en supprimer un. N'oubliez pas que la boucle interne doit reculer d'un espace à chaque fois, sinon certains éléments seront manquésrrreee
3) Créez un nouveau tableau + inclut
sera considéré comme obj[true]
et obj["true"]
sont égaux, ce qui donne l'élément true
ou le l'élément "true"
n'est pas Peut être placé dans un nouveau tableau🎜🎜7) L'utilisation de map🎜🎜 est essentiellement la même que la méthode ci-dessus, mais il n'est pas nécessaire de créer un nouveau tableau :🎜rrreee 🎜8) filter + indexOf🎜🎜Supprimez les éléments en double, comprenez-le sous un autre angle. Conservez les éléments dont 🎜index🎜 est égal à l'index🎜 lorsque 🎜Ces éléments peuvent être filtrés avec un filtre et placés dans un tableau : 🎜rrreee🎜L'inconvénient de l'utilisation de indexOf est qu'il ne peut pas juger correctement NaN. 🎜🎜Recommandations associées : 🎜Tutoriel d'apprentissage 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!