Maison > interface Web > js tutoriel > le corps du texte

Résumé des méthodes de tableau JavaScript

大家讲道理
Libérer: 2017-01-23 11:10:54
original
1429 Les gens l'ont consulté

Les tableaux en JavaScript sont très spéciaux. Contrairement à C ou Java, qui ont tout un ensemble de tableaux et de listes, les tableaux en JS peuvent être utilisés comme une pile ou une file d'attente. décaler, décaler.

Pour une méthode tableau, il y a deux problèmes qui nous préoccupent le plus, Quelle est la valeur de retour et affectera-t-elle le tableau d'origine , des exemples typiques sont les méthodes d'épissage et de tranche. Pour les fonctions qui renvoient le tableau d'origine, nous pouvons enchaîner les appels directement au tableau, ce qui est plutôt cool (array.filter().sort().reverse()).

Je voudrais résumer la méthode array de Array avec ces deux questions.

Array

Array.length est la longueur du tableau. Chaque nouvel objet tableau aura un objet longueur. Le prototype peut être modifié via Array.prototype, mais l'utilisation et le fonctionnement de base de. les tableaux ne sont pas ce qu'ils sont aujourd'hui. Focus, regardons la méthode des tableaux.

Généralement, les méthodes tableau auront un paramètre thisArg à la fin, qui spécifiera le pointeur this interne. S'il existe une fonction de repli dans les paramètres, cette fonction de repli accepte généralement trois paramètres, valeur, index et tableau, qui représentent respectivement la valeur actuellement passée, l'index où se trouve la valeur actuellement passée et le tableau actuellement traité.

Index du répertoire :

concat

Cette méthode peut être utilisée pour épisser des tableaux. Le paramètre est un ou plusieurs tableaux, et le résultat renvoyé est un tableau épissé. La méthode

concat créera un nouveau tableau, puis appellera les éléments de l'objet (l'objet pointé par celui-ci, le tableau d'origine) et les éléments des paramètres de type tableau et des types non-tableaux dans tous paramètres Les paramètres eux-mêmes sont placés dans ce nouveau tableau dans l'ordre, et ce tableau est renvoyé. La méthode concat ne modifie pas le tableau d'origine ni le tableau de paramètres et a le même effet sur les objets non-tableaux.

  1. Renvoie le nouveau tableau épissé ;

  2. Ne modifie pas le tableau d'origine et le tableau de paramètres

  3. Les paramètres peuvent être des non-tableaux. La méthode

var a1 = [1, 2, 3],
  a2 = [4, 5, 6],
  a3 = [7, 8, 9];
var newarr = a1.concat(a2, a3);
newarr //[1, 2, 3, 4, 5, 6, 7, 8, 9]
a1 //[1, 2, 3]
newarr = a1.concat(4, a3);//[1, 2, 3, 4, 7, 8, 9]
newarr = a1.concat('hello');//[1, 2, 3, "hello"]
Copier après la connexion
every

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

arr.every(callback) exécutera la méthode de rappel sur chaque élément jusqu'à ce que le rappel renvoie false. Parfois, la méthode Every est comparée à la méthode forEach, car forEach ne peut pas être arrêté, mais la méthode Every peut s'arrêter à mi-chemin lorsqu'elle renvoie flase.

  1. Si tous les tests réussissent, la fonction renvoie vrai et quitte à mi-chemin et renvoie faux

  2. n'a aucun effet sur le tableau d'origine. La méthode

function isBigEnough(element, index, array) {
  console.log(index);
  return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// 0
// 1
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// 0 1 2 3 4
// passed is true
Copier après la connexion
filter

filter() teste tous les éléments à l'aide de la fonction spécifiée et crée un nouveau tableau contenant tous les éléments qui réussissent le test.

En fait, cette méthode est une méthode de filtrage. La méthode précédente ne fait que juger et ne filtre pas. Le filtre filtrera ceux qui ne remplissent pas les conditions et renverra un nouveau tableau.

  1. renvoie un nouveau tableau qui répond aux conditions de filtrage ;

  2. ne modifie pas le tableau d'origine. La méthode

function isBigEnough(element, index, array) {
  return (element >= 10);
}
var a1 = [19, 22, 6, 2, 44];
var a2 = a1.filter(isBigEnough);
a1 //[19, 22, 6, 2, 44]
a2 //[19, 22, 44]
Copier après la connexion
forEach

forEach() exécute la fonction fournie (fonction de rappel) une fois pour chaque élément du tableau.

  1. La fonction n'a pas de valeur de retour, c'est-à-dire sous-définie ;

  2. n'affecte pas le tableau d'origine. La méthode

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}

// 注意索引2被跳过了,因为在数组的这个位置没有项
var result = [2, 5, 9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 9
result //underfined
Copier après la connexion
indexOf

indexOf() renvoie la première valeur d'index trouvée dans le tableau pour l'élément donné, sinon elle renvoie -1.

  1. La valeur de retour est la valeur d'index de l'élément trouvé ou -1 ;

  2. n'a aucun effet sur le tableau d'origine. La méthode

var array = [1, 2, 5];
array.indexOf(5); // 2
array.indexOf(7); // -1
Copier après la connexion
join

join() joint tous les éléments du tableau en une chaîne.

En fait, la première chose qui vient à l'esprit pour la jointure est l'opération de division des chaînes. Ces deux opérations sont souvent utilisées ensemble pour traiter les chaînes.

  1. renvoie la chaîne concaténée

  2. n'affecte pas le tableau d'origine. La méthode

var a1 = [1, 2, 3];
var a2 = a1.join();
a1 //[1, 2, 3]
a2 //"1,2,3"
a2 = a1.join("");//"123"
a2 = a1.join("-");//"1-2-3"
Copier après la connexion
lastIndexOf

lastIndexOf() renvoie l'index du dernier élément du tableau (c'est-à-dire une valeur ou une variable JavaScript valide), sinon Renvoie -1 s'il existe. Effectuez une recherche vers l'avant à partir de l'arrière du tableau, en commençant par fromIndex.

En fait, il s'agit d'une réplique d'indexOf.

  1. renvoie l'index du premier élément trouvé ;

  2. n'a aucun effet sur le tableau d'origine.

map

map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。 

map reduce 这两个函数在处理数组上一直都是一把手,带来很大的便捷性。

  1. 返回一个经过回掉函数处理的新数组;

  2. 不对原数组产生影响。

var a1 = [1, 4, 9];
var a2 = a1.map(Math.sqrt);
a1 //[1, 4, 9]
a2 //[1, 2, 3]
Copier après la connexion

reduce

reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值。 

reduce 是一个合并的过程,从左到右,直到把所有元素合并到一起,并返回最终的结果。它接受两个参数,第一个参数是一个回掉函数,第二个参数是一个初始值,表示处理第一个元素时的前一个值。这个回掉函数接受四个参数,依次是 accumulator(上次处理的结果),currentValue(当前元素的值),index(当前元素索引),array(调用 reduce 的数组)。

  1. 返回最终合并的结果,即回掉函数的输出,可以为字符串,对象,数组等任意结果;

  2. 不对原数组产生影响。

var getAdd = (pre, cur) => pre + cur;
var a1 = [1, 2, 3];
var a2 = a1.reduce(getAdd, 0);
a1 //[1, 2, 3]
a2 //6
Copier après la connexion

reduceRight

reduceRight() 方法接受一个函数作为累加器(accumulator),让每个值(从右到左,亦即从尾到头)缩减为一个值。(与 reduce() 的执行方向相反)

var toStr = (pre, cur) => '' + pre + cur;
var a1 = [1, 2, 3];
var a2 = a1.reduce(toStr, '');
a2 //"123"
a2 = a1.reduceRight(toStr, '');
a2 //"321"
Copier après la connexion

push

push() 方法添加一个或多个元素到数组的末尾,并返回数组新的长度(length 属性值)。

如果把数组当作栈,push pop 操作是栈进和出,而往往很多人会忽略函数执行后的返回值。

  1. 返回 push 操作执行之后数组的长度;

  2. 肯定改变。

var a1 = [1, 2, 3];
var a2 = a1.push(4);
a1 //[1, 2, 3, 4]
a2 //4
Copier après la connexion

pop

pop() 方法删除一个数组中的最后的一个元素,并且返回这个元素。 

  1. 返回删除的这个元素;

  2. 肯定改变。

var a1 = [1, 2, 3];
var a2 = a1.pop();
a1 //[1, 2]
a2 //3
Copier après la connexion

unshift

unshift() 方法在数组的开头添加一个或者多个元素,并返回数组新的 length 值。

  1. 返回 length 值;

  2. 肯定改变。

var a1 = [1, 2, 3];
var a2 = a1.unshift(4);
a1 //[4, 1, 2, 3]
a2 //4
Copier après la connexion

shift

shift() 方法删除数组的 第一个 元素,并返回这个元素。该方法会改变数组的长度。 

shift 方法和 push 方法可以组成一个队列的操作啦。

  1. 返回删除的这个元素;

  2. 肯定改变。

reverse

reverse() 方法颠倒数组中元素的位置。第一个元素会成为最后一个,最后一个会成为第一个。 

  1. 函数返回值是修改了的原数组;

  2. 原数组会修改。

var a1 = [1, 2, 3];
var a2 = a1.reverse();
a1 //[3, 2, 1]
a1 === a2; //true
Copier après la connexion

slice

slice() 方法会浅复制(shallow copy)数组的一部分到一个新的数组,并返回这个新数组。 

slice 的参数包括拷贝的初识位置,结束位置(左闭右开),与 splice 有区别。由于不会改变原数组,这个数组可以用于前拷贝,比如经常看别人使用: arr.slice(0) ,表示拷贝数组。

  1. 返回浅拷贝后的新数组;

  2. 不会改变原数组。

var a1 = [1, 2, 3, 4, 5];
var a2 = a1.slice(1, 3);
a1 //[1, 2, 3, 4, 5]
a2 //[2, 3]
Copier après la connexion

splice

splice() 方法用新元素替换旧元素,以此修改数组的内容。 

如其名,分割,会修改原数组的内容,返回一个新数组,而且它的参数也比较多,第一个参数表示初始位置,第二个参数表示分割长度,第三个参数及以后表示分割后在分割处添加新元素。

  1. 返回分割的元素组成的数组;

  2. 会对数组进行修改,原数组会减去分割数组。

var a1 = [1, 2, 3, 4];
var a2 = a1.splice(1, 2);
a1 //[1, 4]
a2 //[2, 3]
a1 = [1, 2, 3, 4];
a2 = a1.splice(1, 2, 5, 6);
a1 //[1, 5, 6, 4]
Copier après la connexion

some

some() 方法测试数组中的某些元素是否通过了指定函数的测试。 

sort

sort() 方法对数组的元素做原地的排序,并返回这个数组。 sort 排序可能是不稳定的。默认按照字符串的Unicode码位点(code point)排序。 

sort 函数用于排序,比较常用,若没有制定排序函数,则按照 unicode 位点进行排序,而且数字会被转成字符串,所以 ‘123’ 要排在 ‘11’ 的后面。

我们会用 sort 做一些有意思的排序,比如汉字按照拼音排序。

  1. 返回排序后的原数组;

  2. 会对数组进行修改。

var big = function(a, b){
  return a - b;
}
var a1 = [2, 4, 77, 1];
var a2 = a1.sort(big);
a1 //[1, 2, 4, 77]
a1 === a2; //true
Copier après la connexion

localeCompare 可以对汉字进行排序,当同时出现汉字和字母的时候会有 bug:

var sort_py = function(a, b){
  return a.localeCompare(b);
}
var a1 = ["北京", "上海", "南京", "合肥"];
a1.sort(sort_py);
//["北京", "合肥", "南京", "上海"]
Copier après la connexion

toString

toString() 返回一个字符串,表示指定的数组及其元素。 

显然,这个方法和 join 方法比较一下。

  1. 返回拼接的字符串;

  2. 不会改变原数组。

var a1 = [1, 2, 3];
var a2 = a1.toString();
a2 //"1,2,3"
Copier après la connexion

ES6 中新添的数组方法

上面的这些方法都是 ES5 的,来看看 ES6 添加了哪些新方法。

copyWithin

copyWithin() 方法会浅拷贝数组的部分元素到同一数组的不同位置,且不改变数组的大小,返回该数组。 

接受三个参数,分别是要拷贝到的位置 target,拷贝开始位置 start 和结束位置 end。

  1. 返回修改了的原数组;

  2. 会对数组进行修改,且是浅拷贝;

  3. 参数可负,负值时倒推,且 end 为空表示数组长度。

var a1 = [1, 2, 3, 4, 5];
var a2 = a1.copyWithin(0, 2, 4);
a1 //[3, 4, 3, 4, 5]
a2 //[3, 4, 3, 4, 5]
a1 === a2; //true
Copier après la connexion

find

如果数组中某个元素满足测试条件,find() 方法就会返回满足条件的第一个元素,如果没有满足条件的元素,则返回 undefined。 MDN array.find

  1. 返回找到的那个元素,若未找到,返回 underfined

  2. 不对原数组产生影响。

function isBigEnough(element, index, array) {
  return (element >= 10);
}
var a1 = [8, 18, 14];
var num = a1.find(isBigEnough); //18
Copier après la connexion

findIndex

findIndex()方法用来查找数组中某指定元素的索引, 如果找不到指定的元素, 则返回 -1。 

这个方法可以参考 find 方法,只是返回值是元素的索引而非元素本身。

fill

使用 fill() 方法,可以将一个数组中指定区间的所有元素的值, 都替换成或者说填充成为某个固定的值。 

fill 方法接受三个参数,第一个参数 value 表示要填充到值,后面两个 start 和 end 表示开始和结束位置,可选,且左闭右开。

  1. 函数返回值是修改了的原数组;

  2. 可对数组产生影响。

var a1 = [1, 2, 3, 4, 5];
var a2 = a1.fill(6, 1, 4);
a1 //[1, 6, 6, 6, 5]
a2 //[1, 6, 6, 6, 5]
a1 === a2; //true
Copier après la connexion

keys

数组的 keys() 方法返回一个数组索引的迭代器。 

这个方法会返回一个数组索引的迭代器,迭代器在 ES6 中有特殊的用途。

  1. 函数返回一个迭代器对象;

  2. 不会改变原数组。

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

console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
Copier après la connexion

entries

entries() 方法返回一个 Array Iterator 对象,该对象包含数组中每一个索引的键值对。 

var arr = ["a", "b", "c"];
var eArr = arr.entries();

console.log(eArr.next().value); // [0, "a"]
console.log(eArr.next().value); // [1, "b"]
console.log(eArr.next().value); // [2, "c"]
Copier après la connexion

includes

includes() 方法用来判断当前数组是否包含某指定的值,如果是,则返回 true,否则返回 false。 

该函数接受两个参数,第二个参数表示开始查找位置,起始位置为 0。这个方法与 indexOf 方法最大的区别不仅在于返回值一个是索引,一个是布尔值,indexOf 方法使用的是 === 来判断,无法判断 NaN 情况,而 includes 可以判断。

  1. 返回 true 或 false;

  2. 不会改变原数组。

var a1 = [1, NaN];
a1.indexOf(NaN);//-1
a1.includes(NaN);//true
Copier après la connexion

 

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal