Heim > Web-Frontend > js-Tutorial > Hauptteil

Zusammenfassung der JavaScript-Array-Methoden

大家讲道理
Freigeben: 2017-01-23 11:10:54
Original
1439 Leute haben es durchsucht

Arrays in JavaScript sind etwas ganz Besonderes. Im Gegensatz zu C oder Java, die über eine ganze Reihe von Arrays und Listen verfügen, können Arrays in JS als Stapel oder Warteschlange verwendet werden. verschieben, verschieben.

Bei einer Array-Methode gibt es zwei Probleme, die uns am meisten beunruhigen: Was ist der Rückgabewert und wird er sich auf das ursprüngliche Array auswirken? Typische Beispiele sind die Splice- und Slice-Methoden. Für Funktionen, die das ursprüngliche Array zurückgeben, können wir Aufrufe direkt an das Array verketten, was ziemlich cool ist (array.filter().sort().reverse()).

Mit diesen beiden Fragen möchte ich die Array-Methode von Array zusammenfassen.

Array

Array.length ist die Länge des Arrays. Jedes neu erstellte Array-Objekt verfügt über ein Längenobjekt. Der Prototyp kann jedoch über Array.prototype geändert werden von Arrays sind nicht mehr das, was sie heute sind. Schauen wir uns die Array-Methode an.

Array-Methoden haben im Allgemeinen am Ende einen thisArg-Parameter, der den internen This-Zeiger angibt. Wenn in den Parametern eine Fallback-Funktion vorhanden ist, akzeptiert diese Fallback-Funktion im Allgemeinen drei Parameter: Wert, Index und Array, die jeweils den aktuell übergebenen Wert, den Index, an dem sich der aktuell übergebene Wert befindet, und das aktuell verarbeitete Array darstellen.

Verzeichnisindex:

concat

Diese Methode kann zum Spleißen von Arrays verwendet werden. Der Parameter ist ein oder mehrere Arrays, und das zurückgegebene Ergebnis ist ein gespleißtes Array. Die

concat-Methode erstellt ein neues Array und ruft es dann mit den Elementen im Objekt (dem Objekt, auf das es zeigt, das ursprüngliche Array) und den Elementen in den Array-Typparametern und Nicht-Array-Typen auf in allen Parametern Die Parameter selbst werden der Reihe nach in dieses neue Array eingefügt und dieses Array wird zurückgegeben. Die Concat-Methode ändert das ursprüngliche Array und das Parameterarray nicht und hat den gleichen Effekt auf Nicht-Array-Objekte.

  1. Gibt das gespleißte neue Array zurück

  2. Ändert das ursprüngliche Array und Parameter-Array nicht; >

    Parameter können keine Arrays sein. Die Methode
  3. every
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"]
Nach dem Login kopieren
every() testet, ob alle Elemente des Arrays den Test der angegebenen Funktion bestehen.

arr.every(callback) führt die Callback-Methode für jedes Element aus, bis callback false zurückgibt. Manchmal wird die every-Methode mit der forEach-Methode verglichen, da forEach nicht gestoppt werden kann, die every-Methode jedoch auf halbem Weg gestoppt werden kann, wenn sie flase zurückgibt.

Wenn alle Tests erfolgreich sind, gibt die Funktion true zurück und wird auf halbem Weg beendet. Die Rückgabe von false
  1. hat keine Auswirkung auf das ursprüngliche Array. Die Methode
  2. filter
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
Nach dem Login kopieren
filter() testet alle Elemente mit der angegebenen Funktion und erstellt ein neues Array mit allen Elementen, die den Test bestehen.

Tatsächlich handelt es sich bei dieser Methode um eine Filtermethode. Die vorherige Methode filtert nur einige, die die Bedingungen nicht erfüllen, und gibt ein neues Array zurück.

gibt ein neues Array zurück, das die Filterbedingungen erfüllt.
  1. ändert das ursprüngliche Array nicht. Die Methode
  2. forEach
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]
Nach dem Login kopieren
forEach() führt die bereitgestellte Funktion (Callback-Funktion) einmal für jedes Element des Arrays aus.

Die Funktion hat keinen Rückgabewert, d. h. unterdefiniert;
  1. hat keinen Einfluss auf das ursprüngliche Array. Die Methode
  2. indexOf
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
Nach dem Login kopieren
indexOf() gibt den ersten im Array gefundenen Indexwert für das angegebene Element zurück, andernfalls gibt sie -1 zurück.

Der Rückgabewert ist der Indexwert des gefundenen Elements oder -1;
  1. hat keine Auswirkung auf das ursprüngliche Array. Die
  2. join
var array = [1, 2, 5];
array.indexOf(5); // 2
array.indexOf(7); // -1
Nach dem Login kopieren
join()-Methode verbindet alle Elemente im Array zu einer Zeichenfolge.

Tatsächlich fällt mir als Erstes die Aufteilungsoperation von Zeichenfolgen ein. Diese beiden werden häufig zusammen verwendet, um Zeichenfolgen zu verarbeiten.

gibt die verkettete Zeichenfolge zurück;
  1. hat keinen Einfluss auf das ursprüngliche Array. Die Methode
  2. lastIndexOf
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"
Nach dem Login kopieren
lastIndexOf() gibt den Index des letzten Elements im Array zurück (d. h. einen gültigen JavaScript-Wert oder eine gültige JavaScript-Variable), falls nicht Falls vorhanden, wird -1 zurückgegeben. Suche vorwärts von der Rückseite des Arrays, beginnend bei fromIndex.

Tatsächlich ist dies eine Nachbildung von indexOf.

gibt den Index des ersten gefundenen Elements zurück;
  1. hat keine Auswirkung auf das ursprüngliche Array.
  2. 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]
    Nach dem Login kopieren

    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
    Nach dem Login kopieren

    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"
    Nach dem Login kopieren

    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
    Nach dem Login kopieren

    pop

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

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

    2. 肯定改变。

    var a1 = [1, 2, 3];
    var a2 = a1.pop();
    a1 //[1, 2]
    a2 //3
    Nach dem Login kopieren

    unshift

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

    1. 返回 length 值;

    2. 肯定改变。

    var a1 = [1, 2, 3];
    var a2 = a1.unshift(4);
    a1 //[4, 1, 2, 3]
    a2 //4
    Nach dem Login kopieren

    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
    Nach dem Login kopieren

    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]
    Nach dem Login kopieren

    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]
    Nach dem Login kopieren

    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
    Nach dem Login kopieren

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

    var sort_py = function(a, b){
      return a.localeCompare(b);
    }
    var a1 = ["北京", "上海", "南京", "合肥"];
    a1.sort(sort_py);
    //["北京", "合肥", "南京", "上海"]
    Nach dem Login kopieren

    toString

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

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

    1. 返回拼接的字符串;

    2. 不会改变原数组。

    var a1 = [1, 2, 3];
    var a2 = a1.toString();
    a2 //"1,2,3"
    Nach dem Login kopieren

    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
    Nach dem Login kopieren

    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
    Nach dem Login kopieren

    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
    Nach dem Login kopieren

    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 }
    Nach dem Login kopieren

    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"]
    Nach dem Login kopieren

    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
    Nach dem Login kopieren

     

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage