suchen

Heim >Web-Frontend >js-Tutorial >Zusammenfassung der JS-Array-Array-Methoden

Zusammenfassung der JS-Array-Array-Methoden

一个新手
一个新手Original
2017-10-26 10:50:182661Durchsuche

1.ArrayArray-Methoden

  • MutatorMethoden——„Mutationsmethode“ ändert das Array selbst Wert;

  • AccessorMethode – „Zugriffsmethode“ ändert den Wert des Arrays selbst nicht

  • IterationMethode – ———„Traversal-Methode“;

2.MutatorMethode

  • ①[ ].push—作用: Fügen Sie ein oder mehrere Elemente am Ende des Arrays hinzu, 传参: (einzelnes oder mehrere Array-Elemente); 返回值: Die Länge des neuen Arrays; 

     //标准用法
 arr.push(el1, el2 ……elN)；
 //合并两个数组
 [].push.apply(arr1, arr2)
  • ②

    , [].pop(): letztes Element löschen, 作用: Keines; 传参: gelöschtes Element. 返回值

    //标准用法
let a = [1 ,2 ,3 ];
a.pop();//3
  • ③

    —[ ].unshift: Fügen Sie ein oder mehrere Elemente am Anfang des Arrays hinzu, 作用: (einzelnes oder mehrere Array-Elemente);传参: die Länge des neuen Arrays; 返回值

     //标准用法
 arr.unshift(el1, el2 ……elN)；
  • ④

    , [].shift(): das erste Element löschen, 作用: keins; . 传参返回值

    //标准用法
let a = [1 ,2 ,3 ];
a.shift();//1
    • ⑤
  • ,

    : umgekehrte Position der Array-Elemente, [].reverse(): Keine; 作用: umgekehrtes Array. 传参返回值

    //标准用法
arr.reverse()
    • ⑥
  • ,

    : umgekehrte Position der Array-Elemente, [].splice(): (Index, zu löschende Nummer [auswählen], hinzuzufügendes Element [auswählen ] ); 作用: ein Array bestehend aus gelöschten Elementen. 传参返回值

    //标准用法
array.splice(start)
array.splice(start, deleteCount) 
array.splice(start, deleteCount, item1, item2, ...)
    • ⑦
  • ,

    : Füllen Sie alle Elemente in einem Array vom Startindex bis zum Endindex mit einem festen Wert, [].fill(): (Verwenden Sie To Füllen Sie den Wert des Array-Elements, Startindex [Auswahl], Endindex [Auswahl]); 作用: modifiziertes Array. 传参返回值

    //标准用法
arr.fill(value) 
arr.fill(value, start) 
arr.fill(value, start, end)
//例子
[1, 2, 3].fill(4)            // [4, 4, 4]
[1, 2, 3].fill(4, 1)         // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2)      // [1, 4, 3]
    • ⑧
  • ,

    : Sortieren Sie die Elemente des Arrays und geben Sie das Array zurück, [].sort(): (Funktion zum Festlegen der Sortierreihenfolge [optional]) ; 作用: Angeordnetes Array. 传参返回值

    //标准用法
arr.sort() 
arr.sort(compareFunction)
//例子
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
return a - b;
});// [1, 2, 3, 4, 5]
3.

MethodeAccessor

    ①
  • —

    : Verkettet alle Elemente eines Arrays (oder eines arrayähnlichen Objekts) zu einer Zeichenfolge. , [ ].join: (Geben Sie eine Zeichenfolge an, um jedes Element des Arrays zu trennen [optional]); 作用: eine Zeichenfolge, die alle Array-Elemente verbindet; 传参返回值

    //标准用法
var a = ['Wind', 'Rain', 'Fire'];
var myVar1 = a.join();      // myVar1的值变为"Wind,Rain,Fire"
var myVar2 = a.join(', ');  // myVar2的值变为"Wind, Rain, Fire"
    • ②
  • —

    : Vereinigung von zwei oder mehr Arrays. , [ ].concat: (Arrays und/oder Werte zu einem neuen Array verbinden [optional]); 作用: Zusammengeführtes Array 传参返回值

    //标准用法
var alpha = ['a', 'b', 'c'];
var numeric = [1, 2, 3];
alpha.concat(numeric);
//['a', 'b', 'c', 1, 2, 3]
    • ③
  • —

    : Die Methode gibt eine flache Kopie eines Teils des ausgewählten Arrays vom Anfang bis zum Ende (exklusiv) in ein neues Array zurück. , [ ].slice: (Startindex [Auswahl], Endindex [Auswahl]); 作用: abgeschnittenes Array 传参返回值

    //标准用法
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);
//['Orange','Lemon'] 
  //类数组转数组
function list() {
 return [].slice.call(arguments)}
var list1 = list(1, 2, 3); // [1, 2, 3]
    • ④
  • –

    : Gibt eine Zeichenfolge zurück, die das angegebene Array und seine Elemente darstellt: [ ].toString: konvertierte Zeichenfolge; (作用) 传参返回值=[].join()

    //标准用法
var monthNames = ['Jan', 'Feb', 'Mar', 'Apr'];
var myVar = monthNames.toString(); // assigns "Jan,Feb,Mar,Apr" to myVar.
    ⑤
    • —
  • : Bestimmen Sie, ob ein Array einen angegebenen Wert enthält,

    : (das zu findende Element); [ ].includes作用传参返回值

    ⑥ 
    //标准用法
let a = [1, 2, 3];
a.includes(2); // true 
a.includes(4); // false
    –
    • : der erste Index, in dem ein bestimmtes Element im Array gefunden werden kann,
  • : (das zu findende Element);

    [ ].indexOf作用传参返回值

    4.
    var array = [2, 5, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
    Methode

Iteration

  • ①
    —

    : Jedes Element führt die bereitgestellte Funktion einmal aus,
    • : (callback(aktuelles Element, Index, das Array));

    • [ ].forEach作用②传参—返回值: Gibt den Wert des ersten Elements im Array zurück, das die bereitgestellte Testfunktion erfüllt,

      : (callback (aktuelles Element , Index, das Array)); 
       //标准用法
 array.forEach(callback(currentValue, index, array){
 //do something
}, this)
      : das Element; (
      • gibt den Index zurück)

    • [ ].find作用传参③返回值 —[].findIndex(): Ein neues erstellen Array, das alle Elemente des Tests enthält, der von der bereitgestellten Funktion implementiert wird,

      : (Callback(aktuelles Element, Index, das Array));
       //标准用法
 let arr = array. filter(callback(currentValue, index, array){
 //do something
 }, this)

    • ④[ ].map—作用：创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。，传参：（callback(当前元素,索引，该数组)）；返回值：一个新数组，每个元素都是回调函数的结果；

       //标准用法
 var numbers = [1, 4, 9];
 var roots = numbers.map(Math.sqrt);
 // roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]

    • ⑤[ ].every—作用：测试数组的所有元素是否都通过了指定函数的测试；传参：（callback(当前元素,索引，该数组)）；返回值：true或false；

         //标准用法
   function isBigEnough(element, index, array) {
    return (element >= 10);}
   var passed = [12, 5, 8, 130, 44].every(isBigEnough);// passed is false
   passed = [12, 54, 18, 130, 44].every(isBigEnough);// passed is true

    • ⑥[ ].some—作用：测试数组的某些元素是否都通过了指定函数的测试；传参：（callback(当前元素,索引，该数组)）；返回值：true或false；

         //标准用法
   function isBigEnough(element, index, array) {
    return (element >= 10);}
   var passed = [1, 5, 8, 3, 4].some(isBigEnough);// passed is false
   passed = [2, 4, 18, 13, 4].some(isBigEnough);// passed is true

    • ⑦[ ].reduce—作用：对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值；传参：（callback(累加器accumulator，当前元素,索引，该数组)）；返回值：函数累计处理的结果；

         //标准用法
   var total = [0, 1, 2, 3].reduce(function(sum, value) {
    return sum + value;
  }, 0);// total is 6

   var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
    return a.concat(b);}, []);
    // flattened is [0, 1, 2, 3, 4, 5]

    • ⑧[ ].entries—作用：返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对；传参：（无)）；返回值：一个新的 Array 迭代器对象；

         //标准用法
   var arr = ["a", "b", "c"];
   var iterator = arr.entries();// undefined
   console.log(iterator);// Array Iterator {}
   console.log(iterator.next().value); // [0, "a"]
   console.log(iterator.next().value); // [1, "b"]
   console.log(iterator.next().value); // [2, "c"]

    • ⑨[ ].values—作用：数组转对象；传参：（无)）；返回值：一个新的 Array 迭代器对象；

         //标准用法
   let arr = ['w', 'y', 'k', 'o', 'p'];
   let eArr = arr.values();// 您的浏览器必须支持 for..of 循环
   // 以及 let —— 将变量作用域限定在 for 循环中
  for (let letter of eArr) {
         console.log(letter);}

    参考资料：https://developer.mozilla.org...


    1.Array数组的方法

    • Mutator方法————"突变方法"会改变数组自身的值；

    • Accessor方法————"访问方法"不会改变数组自身的值；

    • Iteration方法————"遍历的方法" ；

    2.Mutator方法

    • ①[ ].push—作用：将一个或多个元素添加到数组的末尾，传参：（单个或多个数组元素）；返回值：新数组的长度；

       //标准用法
 arr.push(el1, el2 ……elN)；
 //合并两个数组
 [].push.apply(arr1, arr2)

    • ②[].pop()，作用：删除最后一个元素，传参：无；返回值：删除的元素。

      //标准用法
let a = [1 ,2 ,3 ];
a.pop();//3

    • ③[ ].unshift—作用：将一个或多个元素添加到数组的开头，传参：（单个或多个数组元素）；返回值：新数组的长度；

       //标准用法
 arr.unshift(el1, el2 ……elN)；

    • ④[].shift()，作用：删除第一个元素，传参：无；返回值：删除的元素。

      //标准用法
let a = [1 ,2 ,3 ];
a.shift();//1

    • ⑤[].reverse()，作用：数组元素颠倒位置，传参：无；返回值：颠倒后的数组。

      //标准用法
arr.reverse()

    • ⑥[].splice()，作用：数组元素颠倒位置，传参：（索引，删除个数【选】，要添加的元素【选】）；返回值：被删除的元素组成的一个数组。

      //标准用法
array.splice(start)
array.splice(start, deleteCount) 
array.splice(start, deleteCount, item1, item2, ...)

    • ⑦[].fill()，作用：用一个固定值填充一个数组中从起始索引到终止索引内的全部元素，传参：（用来填充数组元素的值，起始索引【选】，终止索引【选】）；返回值：修改后的数组。

      //标准用法
arr.fill(value) 
arr.fill(value, start) 
arr.fill(value, start, end)
//例子
[1, 2, 3].fill(4)            // [4, 4, 4]
[1, 2, 3].fill(4, 1)         // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2)      // [1, 4, 3]

    • ⑧[].sort()，作用：对数组的元素进行排序，并返回数组，传参：（指定排列顺序的函数【选】）；返回值：排列后的数组。

      //标准用法
arr.sort() 
arr.sort(compareFunction)
//例子
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
return a - b;
});// [1, 2, 3, 4, 5]

    3.Accessor方法

    • ①[ ].join—作用：将数组（或一个类数组对象）的所有元素连接到一个字符串中。，传参：（指定一个字符串来分隔数组的每个元素【选】）；返回值：一个所有数组元素连接的字符串；

      //标准用法
var a = ['Wind', 'Rain', 'Fire'];
var myVar1 = a.join();      // myVar1的值变为"Wind,Rain,Fire"
var myVar2 = a.join(', ');  // myVar2的值变为"Wind, Rain, Fire"

    • ②[ ].concat—作用：并两个或多个数组。，传参：（将数组和/或值连接成新数组【选】）；返回值：合并后的数组；

      //标准用法
var alpha = ['a', 'b', 'c'];
var numeric = [1, 2, 3];
alpha.concat(numeric);
//['a', 'b', 'c', 1, 2, 3]

    • ③[ ].slice—作用：方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组。，传参：（开始索引【选】，结束索引【选】）；返回值：截去后的数组；

      //标准用法
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);
//['Orange','Lemon'] 
  //类数组转数组
function list() {
 return [].slice.call(arguments)}
var list1 = list(1, 2, 3); // [1, 2, 3]

    • ④[ ].toString—作用：返回一个字符串，表示指定的数组及其元素，传参：（无）；返回值：转化成的字符串；（=[].join()）

      //标准用法
var monthNames = ['Jan', 'Feb', 'Mar', 'Apr'];
var myVar = monthNames.toString(); // assigns "Jan,Feb,Mar,Apr" to myVar.

    • ⑤[ ].includes—作用：判断一个数组是否包含一个指定的值，传参：（要查找的元素）；返回值：true或 false；

      //标准用法
let a = [1, 2, 3];
a.includes(2); // true 
a.includes(4); // false

    • ⑥[ ].indexOf—作用：在数组中可以找到一个给定元素的第一个索引，传参：（要查找的元素）；返回值：找不到-1，找得到索引；

      var array = [2, 5, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1

    4.Iteration方法


    • ①[ ].forEach—作用：每个元素执行一次提供的函数，传参：（callback(当前元素,索引，该数组)）；返回值：无；

       //标准用法
 array.forEach(callback(currentValue, index, array){
 //do something
}, this)

    • ②[ ].find—作用：返回数组中满足提供的测试函数的第一个元素的值，传参：（callback(当前元素,索引，该数组)）；返回值：该元素；（[].findIndex()返回索引）

       //标准用法
 array. find(callback(currentValue, index, array){
 //do something
}, this)

    • ③[ ].filter—作用：创建一个新数组, 其包含通过所提供函数实现的测试的所有元素，传参：（callback(当前元素,索引，该数组)）；返回值：通过测试的元素的集合的数组；

       //标准用法
 let arr = array. filter(callback(currentValue, index, array){
 //do something
 }, this)

    • ④[ ].map—作用：创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。，传参：（callback(当前元素,索引，该数组)）；返回值：一个新数组，每个元素都是回调函数的结果；

       //标准用法
 var numbers = [1, 4, 9];
 var roots = numbers.map(Math.sqrt);
 // roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]

    • ⑤[ ].every—作用：测试数组的所有元素是否都通过了指定函数的测试；传参：（callback(当前元素,索引，该数组)）；返回值：true或false；

         //标准用法
   function isBigEnough(element, index, array) {
    return (element >= 10);}
   var passed = [12, 5, 8, 130, 44].every(isBigEnough);// passed is false
   passed = [12, 54, 18, 130, 44].every(isBigEnough);// passed is true

    • ⑥[ ].some—作用：测试数组的某些元素是否都通过了指定函数的测试；传参：（callback(当前元素,索引，该数组)）；返回值：true或false；

         //标准用法
   function isBigEnough(element, index, array) {
    return (element >= 10);}
   var passed = [1, 5, 8, 3, 4].some(isBigEnough);// passed is false
   passed = [2, 4, 18, 13, 4].some(isBigEnough);// passed is true

    • ⑦[ ].reduce—作用：对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值；传参：（callback(累加器accumulator，当前元素,索引，该数组)）；返回值：函数累计处理的结果；

         //标准用法
   var total = [0, 1, 2, 3].reduce(function(sum, value) {
    return sum + value;
  }, 0);// total is 6

   var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
    return a.concat(b);}, []);
    // flattened is [0, 1, 2, 3, 4, 5]

    • ⑧[ ].entries—作用：返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对；传参：（无)）；返回值：一个新的 Array 迭代器对象；

         //标准用法
   var arr = ["a", "b", "c"];
   var iterator = arr.entries();// undefined
   console.log(iterator);// Array Iterator {}
   console.log(iterator.next().value); // [0, "a"]
   console.log(iterator.next().value); // [1, "b"]
   console.log(iterator.next().value); // [2, "c"]

    • ⑨[ ].values—作用：数组转对象；传参：（无)）；返回值：一个新的 Array 迭代器对象；

         //标准用法
   let arr = ['w', 'y', 'k', 'o', 'p'];
   let eArr = arr.values();// 您的浏览器必须支持 for..of 循环
   // 以及 let —— 将变量作用域限定在 for 循环中
  for (let letter of eArr) {
         console.log(letter);}


Das obige ist der detaillierte Inhalt vonZusammenfassung der JS-Array-Array-Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So implementieren Sie eine asynchrone Echtzeitsuche mithilfe des Select-Plug-Ins in jQueryNächster Artikel：So implementieren Sie eine asynchrone Echtzeitsuche mithilfe des Select-Plug-Ins in jQuery

In Verbindung stehende Artikel

Mehr sehen