Umfassende Analyse von Javascript-Array-Methoden

In diesem Artikel werden hauptsächlich Javascript-Array-Methoden vorgestellt, in der Hoffnung, Ihnen dabei zu helfen, Javascript-Arrays besser zu verstehen.

Vollständige Analyse von Javascript-Array-Methoden (einschließlich es6)

Arrays haben ihre eigenen Attribute

<span style="font-size: 14px;"> constructor //返回创建数组对象的原型函数<br> length //返回数组对象的长度<br> prototype //这个是老熟人了，可以增加数组的原型方法和属性，这个放在后面的继承中讲<br></span>

2. Array-Methoden

<span style="font-size: 14px;">//首先让我们看看数组的对象属性。<br>Array.prototype<br></span>

1. concat

<span style="font-size: 14px;">用法：用来连接多个数组的方法<br>有了这个方法之后我们连接多个数组就方便了<br>array1.concat(array2,array3,...,arrayX) 该参数可以是一个具体的值也可以是数组对象<br></span>

<span style="font-size: 14px;">let arr = [];<br>let arr1 = [1,2,3,4,5,6];<br>let pos = 7;<br>console.log(arr.concat(arr1,pos)); // =>[1,2,3,4,5,6,7]<br><br>//ok 我们再看一个厉害的，合并一维数组和二维数组<br>var num1 = [[1]];<br>var num2 = [2, [3]];<br><br>var nums = num1.concat(num2); <br><br>console.log(nums); // =>[[1], 2, [3]] <br>console.log(nums[0][0]); // =>1<br></span>

2. copyWithin()Verwendung: Kopieren Sie einen Teil des Arrays flach an eine andere Stelle im selben Array und geben Sie ihn zurück, ohne seine Größe zu ändern
Es geht nicht darum, die Größe zu ändern

<span style="font-size: 14px;">arr.copyWithin(target)<br><br>arr.copyWithin(target, start)<br><br>arr.copyWithin(target, start, end)<br><br>arr.copyWithin(目标索引, [源开始索引], [结束源索引])<br></span>

Ziel (erforderlich) 0 ist der Index der Basis. Wenn Ziel eine negative Zahl ist, ist das Ziel Länge+Ziel.Start (optional) 0 ist der Index von die Basis, wenn Start eine negative Zahl ist, dann ist Start Länge+Start. Wenn es weggelassen wird, ist es 0
Ende (optional) Wenn Ende eine negative Zahl ist, dann ist Ende Länge+ Wenn es weggelassen wird, ist es arr.length
start=> Ende ist [) in der Mathematik. Beispielsweise bedeutet (0,2), den Index 0 zu wählen, 1 (1,4) bedeutet, den Index zu wählen 1, 2, 3 usw.
Schauen wir uns ein paar Beispiele an

<span style="font-size: 14px;">[1, 2, 3, 4, 5].copyWithin(-2); <br>//=> [1,2,3,1,2] targer为-2，也可以等于-2+5=3 start和end省略 所以等同于copyWithin(3,0,5)<br><br>[1, 2, 3, 4, 5].copyWithin(0, 3); // => [4,5,3,4,5]<br><br>[1, 2, 3, 4, 5].copyWithin(0, 3, 4); //=> [4,2,3,4,5] <br><br>[1, 2, 3, 4, 5].copyWithin(-2, -3, -1); <br>//=>[1, 2, 3, 3, 4]  -2等同于-2+5=3 -3等同2 -1等同于4 所以等同于copyWithin(3,2,4)<br><br>//ok,我们再来看一个特殊的，copyWithin并不单单能对数组对象使用还能对类数组对象使用<br>[].copyWithin.call({length:5, 3:1},0,3); //=> {0:1,3:1, length:5}<br>/*为什么会出这么个玩意？别急待我一步一步和你说<br>{length:5, 3:1} => {0:undefined,1:undefined,2:undefined,3:1,4:undefined,length:5}<br>[].copyWithin => Array.prototype.copyWithin.call()这一步也就是把类数组能使用数组的copyWithin方法.<br>[].copyWithin.call({length:5, 3:1},0,3)=>[undefined,undefined,undefined,1,undefined].copyWithin(0,3)=>[1,undefined,undefined,1,undefined]=>{0:1,3:1, length:5}<br>*/<br></span>

3. Einträge

Verwendung: array.entries(); ein neues Array-Iterator-Objekt, das die Schlüssel-Wert-Paare für jeden Index im Array enthält Uns Schauen wir uns zuerst einen Code an:

<span style="font-size: 14px;">var arr= ['a','b','c'];<br><br>var Iterator = arr.entries(); //返回一个Array Iterator对象<br>console.log(Iterator.next().value); //=>[0:"a"]<br>console.log(Iterator.next().value); //=>[1:"b"]<br>console.log(Iterator.next().value); //=>[2:"c"]<br></span>

ok, nach der Einführung Werfen wir einen Blick auf die grundlegende Verwendung. Schauen wir uns die spezifische Anwendung an. . of Schleife kann das Iteratorobjekt durchlaufen // Ich werde die Details in einem zukünftigen Artikel erklären

4.Array.from

<span style="font-size: 14px;">//二维数组排序<br>var arr = [[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]];<br><br>function sortArr(arr){<br><br>    var pos = true;<br>    var Iteartor = arr.entries();<br><br>    while(pos){<br><br>        var result = Iteartor.next();<br>        if(result.done !== true){ //当循环到最后一个的时候result.done会变成true<br>             <br>             result.value[1].sort((a,b)=>a-b);<br><br>        }else{<br>             <br>             pos = false;<br>        }<br><br>    }<br><br>}<br><br>sortArr(arr);<br></span>

Verwendung: Sie können ein neues Array aus einem Array erstellen -ähnliches oder iterierbares Objekt (das ursprüngliche Array wird nicht geändert)

Lassen Sie uns ein kleines Beispiel geben

<span style="font-size: 14px;">var arr = ['a','b','c'];<br>var iteartor = arr.entries();<br><br>for(let i of iteartor){<br>    console.log(i);<br>}<br><br>//[0, "a"]<br>//[1, "b"]<br>//[2, "c"]<br></span>

Als nächstes schauen wir uns ein magisches Beispiel an, eine Codezeile zu Elemente in einem Array deduplizieren

5.every
every(callback[, thisArg])
Verwendung: Wird verwendet, um zu testen, ob jedes Element im Array a erfüllt bestimmte RegelTestfunktionsparameter: (Wert, Index, arr) sind der Wert des Arrays, der Index des Arrays und das Array

Rückgabewert: Boolescher Wert wahr oder falsch

<span style="font-size: 14px;">Array.from('abc'); //=>['a','b','c']<br>Array.from({0:'a',1:'b',length:2}) //=> ['a','b']<br></span>

6.some

<span style="font-size: 14px;">Array.from(new Set([4,2,4,2,6,6,7,8])); //=>[4,2,6,7,8] <br></span>

some(callback[,thisArg])

Verwendung: Wird verwendet, um das Array zu testen. Ob es Elemente gibt, die bestimmte Regeln erfüllenFunktionsparameter testen: (Wert, Index, arr) sind der Wert des Arrays, der Index des Arrays und das Array
Rückgabewert: Boolean true oder false

7.filter

<span style="font-size: 14px;">var arr = [1,3,5,12,50,6];<br>var flag = arr.every(chenckIsBig);<br>function chenckIsBig(ele,index,arr){<br>     return ele<20;<br/>}<br/>console.log(flag) //=>false<br></span>

filter( callback[,thisArg])

Verwendung: Wird verwendet, um ein neues Array zu erstellen, das alle Funktionstests erfüllt, die den Parameterfunktionstest bestehen. Funktionsparameter: (Wert, Index, arr) sind der Wert des Arrays, der Index des Arrays und des Arrays
Rückgabewert: Gibt ein neues Array zurück
Schauen wir uns zunächst ein kleines Beispiel an

<span style="font-size: 14px;">var arr = [1,3,5,12,50,6];<br>var flag = arr.some(chenckIsBig);<br>function chenckIsBig(ele,index,arr){<br>     return ele<20;<br/>}<br/>console.log(flag) //=>true<br></span>

ok, lassen Sie mich Ihnen ein weiteres Beispiel geben Ich benutze es oft. Manchmal werden die JSON-Daten über Ajax übertragen, aber tatsächlich können nicht alle Daten von uns verwendet werden. In diesem Fall ist der Filter wichtiger, schauen wir uns das Beispiel an

8.find
find(callback[,thisArg])
Verwendung: Wie ist es mit den oben genannten vergleichbar, die Verwendung ist ähnlich wie bei Filter, aber der Rückgabewert von find ist der erste Wert, der mit der Testfunktion übereinstimmtDie Testfunktionsparameter: (Wert, Index, arr) sind der Wert des Arrays, der Index des Arrays und das Array

Rückgabewert: Der Wert des Wenn kein qualifizierter Wert vorhanden ist, ist die Verwendung ähnlich wie bei find, aber der Rückgabewert von findIndex ist der Index, der mit dem ersten Wert der Testfunktion übereinstimmt Funktionsparameter: (Wert, Index, arr) sind jeweils die Werte des Arrays, und der Index des Arrays ist auch Es gibt dieses Array

<span style="font-size: 14px;">const checkIsBigEnough = (value) => value >= 10<br>let arr = [6,12,50,77,95];<br>console.log(arr.filter(checkIsBigEnough)); //=> [12,50,77,95]<br></span>

Rückgabewert: Der Wert des ersten Arrays, das mit der Testfunktion übereinstimmt, Wenn keine passende Bedingung vorhanden ist, geben Sie -1 zurück

<span style="font-size: 14px;">//我从后台获取了一个数组，数组中包含多个对象如下：<br>let json = [<br>{"CostTime": "310", "FromStation": "上海"},<br>{"CostTime": "336", "FromStation": "北京"},<br>{"CostTime": "310", "FromStation": "上海"},<br>{"CostTime": "336", "FromStation": "北京"},<br>{"CostTime": "310", "FromStation": "上海"},<br>{"CostTime": "336", "FromStation": "北京"},<br>{"CostTime": "310", "FromStation": "上海"},<br>{"CostTime": "336", "FromStation": "北京"},<br>{"CostTime": "310", "FromStation": "上海"},<br>{"CostTime": "310", "FromStation": "上海"},<br>{"CostTime": "336", "FromStation": "北京"}<br>]<br>//这个时候我只需要获取FromStation值为北京的对象，这个时候filter就派上用场了<br>let filterMethod = (value) => value.FromStation == "北京"<br>let finallyData = json.filter(filterMethod);<br>console.log(finallyData);<br>//=> [{"CostTime": "336", "FromStation": "北京"},{"CostTime": "336", "FromStation": "北京"},{"CostTime": "336", "FromStation": "北京"},{"CostTime": "336", "FromStation": "北京"},{"CostTime": "336", "FromStation": "北京"}]<br></span>

10.fill

arr .fill(value)arr.fill(value, start)
arr.fill(value, start, end)


Verwendung: Alle Elemente im Array vom tatsächlichen Index bis zum Endindex mit einem festen Wert füllen

Parameter:

<br><span style="font-size: 14px;">    let json = [<br>    {"CostTime": "310", "FromStation": "上海"},<br>    {"CostTime": "336", "FromStation": "北京"},<br>    {"CostTime": "340", "FromStation": "杭州"},<br>    ]<br>    <br>    let checkMethod = (value) => value.CostTime == "340"<br>    <br>    console.log(json.find(checkMethod)); //=>{"CostTime": "340", "FromStation": "杭州"}<br></span>

Wert (erforderlich) Der zum Füllen des Arrays verwendete Wert

Start (optional) Startindex, der Standardwert ist 0, wenn es eine negative Zahl ist. Wenn start = start+arr.lengthend (optional) Endindex , der Standardwert ist arr.length Wenn es eine negative Zahl ist, end = end+arr.length
start=>end In der Mathematik ist es [) , wählen Sie einen Wert größer oder gleich start und kleiner als end
Rückgabewert: modifiziertes Array

<span style="font-size: 14px;">[1,2,3].fill(5) //=> [5,5,5] 不传start默认为0，不传end默认为arr.length<br>[1,2,3].fill(5,1) //=>[1,5,5] <br>[1,2,3].fill(5,1,2) //=>[1,5,3]<br>[1,2,3].fill(5,1,1) //=>[1,2,3] 不变因为大于等于1小于1的值没有<br>[1,2,3].fill(5,-3,-2) //=>[5,2,3] start = -3 => -3+3 = 0  end = -2 =>-2 + 3 = 1 =>fill(5,0,1)<br>Array(3).fill(5) //=> [5,5,5] 这个方法比较有用，可以初始化数组（将所有值初始化为一个值）<br></span>

11.indexOf
arr.indexOf(searchElement,formIndex)
参数：
searchElement要查找的元素
formIndex从哪开始查找 （formIndex为一个整数，可以为负数，当formIndex为负数的时候formIndex可以转化成formIndex+arr.length 如果还为负数的话表示查找整个元素）
返回值：-1（没有找到元素） 或者 元素的下标（找到元素）

<span style="font-size: 14px;">// 找出指定元素在数组中出现的位置<br>var positionIndex = [];<br>var arr = [1,5,6,1,7,8,1,6,6,6];<br>var pos = arr.indexOf(1);<br>while(pos!=-1){<br>   positionIndex.push(pos);<br>   pos = arr.indexOf(1,pos+1);<br>}<br>console.log(positionIndex); // => [0,3,6]<br></span>

12.reduce
用法：方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。（这个是mdn文档上写的,看起来感觉特别难懂，其实他就是一个将数组元素不断递归执行一个函数之后返回的值）
我们还是先看例子：

<span style="font-size: 14px;">//数组累加<br>var arr = [3,6,5,1];<br>arr.reduce((pre,cur)=>pre+cur,10) //10+3+6+5+1 => 25<br><br>//数组累乘<br>var arr = [3,6,5,1];<br>arr.reduce((pre,cur) => pre*cur) //3*6*5*1 =>90<br></span>

ok,我们先来看看reduce函数
reduce((preValue,curValue,index,array)=>{},initialValue)
我们先看回调函数中的值：
preValue: 上一次调用回调返回的值，或者是提供的初始值（initialValue）著作权归作者所有。
curValue: 数组中当前被处理的数组项
index: 当前数组项在数组中的索引值
array: 调用 reduce()方法的数组
我们写一个demo来看看这个方法是如果实行的

<span style="font-size: 14px;">let arr = [1,2,3,4,5,6,7];<br>arr.reduce((pre,cur)=>{<br>   console.log(pre,cur);<br>   return pre+cur;<br>})<br>/*<br>1,2<br>3,3<br>6,4<br>10,5<br>15,6<br>21,7<br>28<br>*/<br><br>arr.reduce((pre,cur)=>{<br>   console.log(pre,cur);<br>   return pre+cur;<br>},10)<br>/*<br>10,1<br>11,2<br>13,3<br>16,4<br>20,5<br>25,6<br>31,7<br>38<br>*/<br></span>

由此可以看出：

1. 在initialValue没有传入的时候
     pre在第一次循环的时候为数组第一个数
     cur为数组第二个值

2. 在initialValue有值的时候
     在第一次循环pre初始为initialValue
     cur为数组第一个值

其实reduce以递归的思想可以理解为：
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
再举一个reduce的常用例子吧，二维数组的合并

<span style="font-size: 14px;">var twoArr = [['a','b'],['c','d'],['e','f']];<br>twoArr.reduce((pre,cur)=>{<br>   return pre.concat(cur)<br>},[])<br>//=> a,b,c,d,e,f<br></span>

13.reduceRight
用法其实和reduce基本没有区别，唯一的区别是他是从右到左执行回调函数

<span style="font-size: 14px;">var twoArr = [['a','b'],['c','d'],['e','f']];<br>twoArr.reduceRight((pre,cur)=>{<br>   return pre.concat(cur)<br>},[])<br>//=> f,e,d,c,b,a<br></span>

let arr = [1,2,3,4,5,6];
arr.slice(0,2); // =>[1,2]
arr.slice(-1) // =>[6]
arr.slice(0) // => [1,2,3,4,5,6]
arr.slice(-7) //=> [1,2,3,4,5,6]
arr.slice(2,-3) // => [3]

字符串方法和数组方法相似
let str = 'I am Bob';
str.slice(-5); //=> m Bob
str.slice(0,6); //=> I am B

数组方法之splice
splice(start,deleteCount,item...)
用法:万精油方法，可以对数组进行增加，删除，插入,可以从数组中移除一个或者多个元素，并且用后面的item来替换它，返回值为删除的元素的数组，并且改方法会改变原数组
let arr = [1,2,3,4,5,6];
arr.splice(0,5); [1,2,3,4,5]返回一个呗删除的数组
console.log(arr); // =>[6]
arr.splice(0,0,7,8,9); //返回一个空数组[]
arr // =>[7,8,9,6]

数组的遍历

<span style="font-size: 14px;">let arr = [1,2,3,4];<br>//普通for循环<br>for(var i = 0,length=arr.length;i < length;i++){<br/>    //do someThing<br/>}<br/><br/>//forEach循环<br/>arr.forEach((value, index)=>{<br>   //do someThing<br>})<br><br>//map循环<br>arr.map((value, index)=>{<br>   //do someThing<br>})<br><br>//其实还有两个循环一个for in ，还有一个是for of，不过强烈介意不要用for in，一个是效率比普通for循环差好多，因为它会遍历整个数组的原型对象，我们来看一个例子<br>//我们给数组原型添加一个haha的方法<br>Array.prototype.haha = function(){<br>    //do somthing<br>}<br>//然后我们再用for in来输出数组<br>for(let i in arr){<br>    console.log(arr[i]);<br>}<br>//=> 1,2,3,4 haha<br>最后竟然输出了haha，这是因为for in这个循环会遍历数组的原型对象，所以会输出haha，那么要解决这个有方法么？其实也有:<br>for(let i in arr){<br>    if(arr.hasOwnProperty(i))<br>    console.log(arr[i]);<br>}<br>//可以看到遍历输出了正确的值，但是还是不建议大家使用for in去循环数组，不单单是效率低，而且容易出问题，特别是当项目引用了许多第三方类库的时候。<br>有大牛做过一个测速,遍历数组的时间对比 for in > map > forEach > for<br></span>

数组元素的添加和删除

1. push 将一个或者多个数组添加到数组的末尾,并且返回数组的长度
     Array.prototype.push(ele1,ele2,ele3,ele4)

2. pop 删除数组的最后一个值，并且返回删除元素的值
     Array.prototype.pop()

3. shift删除数组第一个值，并且返回删除元素的值，用法和pop相似
     Array.prototype.shift()

4. unshift 用法和push相似，将一个或者多个元素添加到数组的开头，并且返回数组的长度

   <span style="font-size: 14px;">Array.prototype.unshift(ele1,ele2,ele3,ele4)<br></span>

数组和字符串之间的相互转化

1. 数组转化成字符串
     join：首先join方法不会改变原数组，只会返回一个生成的新字符串

<span style="font-size: 14px;">let a = ['a','b','c'];<br><br>console.log(a.join()) //=> 'a,b,c'<br>console.log(a.join("")) //=> 'abc'<br>console.log(a.join('-')) //=> 'a-b-c'<br></span>

ok，这个比较简单，我们在来看一个复杂点的，类数组转化成字符串

<span style="font-size: 14px;">function f(a,b,c){<br>   let e = Array.prototype.join.call(arguments,"");<br>   console.log(e);<br>}<br>f('Hello',' ','World'); //=> Hello World<br></span>

1. 字符串转化成数组

用字符串的split方法，具体先不多说，等写字符串方法全解析的时候再进行具体说明。

相关推荐：

几种javascript数组定义的方法详解

Zusammenfassung verschiedener häufiger Verwendungen von JavaScript-Arrays

Zusammenfassung von JavaScript-Array-Operationen

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