Zusammenfassung der Wissenspunkte zu neuen Methoden in ES6-Arrays

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript. Er stellt hauptsächlich die Probleme im Zusammenhang mit den neuen Methoden von es6-Arrays vor, einschließlich Iterationsmethoden und Zusammenführungsmethoden. Ich hoffe, dass er für alle hilfreich ist. Hilfreich.

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend】

Iterationsmethode:

ECMAScript definiert 5 Iterationsmethoden für Arrays. Jede Methode akzeptiert zwei Parameter: eine Funktion, die mit jedem Element als Argument ausgeführt wird, und ein optionales Bereichsobjekt als Kontext, in dem die Funktion ausgeführt wird (was sich auf den Wert dieses Elements in der Funktion auswirkt). Die an jede Methode übergebene Funktion empfängt drei Parameter: das Array-Element, den Elementindex und das Array selbst. Abhängig von der spezifischen Methode können die Ergebnisse dieser Funktion den Rückgabewert der Methode beeinflussen oder auch nicht. Die 5 Iterationsmethoden des Arrays sind wie folgt.

1. Kartenmethode: Führen Sie die übergebene Funktion für jedes Element des Arrays aus und geben Sie ein Array zurück, das aus den Ergebnissen jedes Funktionsaufrufs besteht. Dies kann auch so verstanden werden: Nachdem für jedes Element im Array eine spezielle Verarbeitung durchgeführt wurde array , gibt ein neues Array zurück.

Zum Beispiel: Preisarray

Vor der Vereinfachung:

let prices=[50,80,90]
prices=prices.map((item,index)=>{
     return item+"元"
})
console.log(prices)

Nach der Abkürzung:

let price=[50,80,120]
//在单价后面添加上"元"
price=price.map(item=>item+"元")
console.log(price)//输出为['50元', '80元', '90元']

Seine Anwendungsszenarien sind zum Beispiel: WeChat-Applet Douban Movie Review

Verwenden Sie die Kartenmethode, um xxx durch www zu ersetzen

replace()

-Methode Wird verwendet, um einige Zeichen durch andere Zeichen in einer Zeichenfolge zu ersetzen oder eine Teilzeichenfolge zu ersetzen, die einem regulären Ausdruck entspricht.

        let movies=[{id:1,name:"肖申克的救赎",imgUrl:"http://xxx.douban.com/1.jpg"},{id:2,name:"肖申克的救赎",imgUrl:"http://xxx.douban.com/2.jpg"},{id:3,name:"肖申克的救赎",imgUrl:"http://xxx.douban.com/1.jpg"}]
        movies=movies.map(item=>{
            item.imgUrl=item.imgUrl.replace("xxx","www")
            return item
        })
        console.log(movies)

2. Filtermethode:

Führen Sie die übergebene Funktion für jedes Element des Arrays aus. Die Elemente, die die Funktion „true“ zurückgibt, bilden ein Array und geben zurück. kann auch so verstanden werden: Filtern Sie die Elemente heraus, die den Anforderungen im Array entsprechen, und geben Sie ein neues Array zurück.

        let scores=[80,59,10,55,90,88]
        let arr=scores.filter(item=>{
			if(item>60){
				return true
			}
		})
		console.log(arr)//输出如下图：

Die Ausgabe ist wie unten gezeigt. Filtern Sie die Arrays mit weniger als 60 heraus.

Nach der Abkürzung:

let scores=[80,59,10,55,90,88]
let arr=scores.filter(item=>item>=60)
console.log(arr)//(3) [80, 90, 88]

Seine Anwendungsszenarien können sein: Platzieren Sie eine Reihe von Städtenamen und suchen Sie dann nach Schlüsselwörtern. Dies ist nur geeignet, wenn die Datenmenge klein ist. Ich werde später in dem Beispiel ein Anwendungsszenario für ein Bibliotheksverwaltungssystem angeben, das die Schlüsselwortsuche umfasst . Sie können sich darauf beziehen.

Drei und vier, einige und alle Methoden

some wird im Englischen als some übersetzt, und every wird als all, every übersetzt, sodass die some-Methode „true“ zurückgibt, solange eine von ihnen wahr ist. Im Gegenteil , die Methode every() muss nur dann true zurückgeben, wenn alle true zurückgeben. Auch wenn es ein false gibt, wird false zurückgegeben.

Im Beurteilungsprozess des Arrays wird beurteilt, ob jedes Element des Ganzen a erfüllt Grundanforderung

irgendeine Methode: Eine Wahrheit und wahr. Solange eine von ihnen die Anforderungen erfüllt, wird sie als wahr zurückgegeben.

Jede Methode: Wenn sie falsch ist, ist sie falsch Erfüllen Sie die Anforderungen, wird es zurückgegeben, false

//let一个班的所有学生的成绩  看看是否所有人都及格了
         let scores=[80,49,12,50,69]
         let result=scores.every(item=>item>=60)
         console.log(result)//返回false  所有并不是都及格了

Verwendungsszenario: Front-End-Validator Vor dem Absenden einer AJAX-Anfrage sind normalerweise alle Überprüfungen erforderlich. Es kann nur gesendet werden, wenn alles erfolgreich ist. Ein separater Front-End-Datenvalidator wird gesendet veröffentlicht in nachfolgenden Artikeln über Codebeispiele.

Merge-Methode:

5. Reduce-Methode:

ECMAScript bietet zwei Merge-Methoden für Arrays: Reduce() und ReduceRight(). Beide Methoden durchlaufen alle Elemente des Arrays und konstruieren darauf basierend einen endgültigen Rückgabewert. Die Methode „reduce()“ durchläuft vom ersten Element zum letzten Element im Array. Und reduRight() geht vom letzten Element zum ersten Element. Es kann auch einfach so verstanden werden: die Elemente in das Array integrieren und einen neuen Inhalt zurückgeben. Beide Methoden erhalten zwei Parameter: eine Zusammenführungsfunktion, die für jedes Element ausgeführt wird, und einen optionalen Anfangswert, von dem aus die Zusammenführung gestartet wird. Die an Reduce() und ReduceRight() übergebenen Funktionen empfangen vier Parameter: den vorherigen zusammengeführten Wert, das aktuelle Element, den Index des aktuellen Elements und das Array selbst. Jeder von dieser Funktion zurückgegebene Wert wird als erstes Argument beim nächsten Aufruf derselben Funktion verwendet. Wenn der optionale zweite Parameter (als Startwert für die Zusammenführung) nicht an diese beiden Methoden übergeben wird, beginnt die erste Iteration mit dem zweiten Element des Arrays, sodass der erste Parameter, der an die Zusammenführungsfunktion übergeben wird, das erste Element ist. Der zweite Parameter ist das zweite Element des Arrays.

Verstehen Sie das Konzept zunächst anhand des folgenden Codes:

Die Bedeutung der vier Parameter im folgenden Code:

prev: das von der vorherigen Operation zurückgegebene Ergebnis
item: das Element dieser Operation
index: Der Indexwert des Elements in dieser Operation.
Array: Das Array der aktuellen Operation

为什么只循环了三次？prev因为可以设置默认值，如果不设置默认值，那么第一个元素就作为第一个prev 
为什么第二次循环和第三次循环时prev拿到undefined呢？在第二次循环时 得拿到第一次循环的return值  因为第一次没有设置return 所以拿到undefined 以此类推 

如果上面的理解了，那么我们就开始实现数组求和：

        let arr=[20,40,50,21]
        let values=arr.reduce((prev,item,index,array)=>{
            console.log("prev"+prev)
            return prev+item
 //给个return 循环四次 第一次输出prev是20，第二次40+20是60，第三次是110 最后一次输出131
        })
        console.log(values)  //131

什么时候必须设置prev的默认值呢？

给每一个数组元素添加 

 

let arr=["陈奕迅","杨千嬅","古巨基","李克勤"]
//给prev设置默认值：作用1.所有元素参加循环  作用2.确定返回内容
let result=arr.reduce((prev,item)=>{
      //console.log(prev)
      return prev+"<li>"+item+"</li>"
},"")//加一个空字符串
console.log(result)//<li>陈奕迅</li><li>杨千嬅</li><li>古巨基</li><li>李克勤</li>

再来个案例：

利用reduce实现数组去重，创建一个空数组，把原有数组依次遍历，空数组没有的就插入进去，有的就不再插入了

        let arr=["张三","李四","李四","王二","李四","麻子","张三"]
        let result=arr.reduce((prev,item)=>{
            //includes判断是有具有指定元素 有返回t 没有返回f
            if(!prev.includes(item)){
                prev.push(item)  //.push()向数组添加一个新项目
            }
            return prev
        },[])//设置一个默认空数组
        console.log(result)//(4) ['张三', '李四', '王二', '麻子']

再来个案例：（reduce方法可以做很多事情）

统计字符的出现次数：见下码

        let arr=["a","b","a","c","b","a","c"]
        //返回一个对象 统计每一个字符的出现次数 {a:2,w:3}
        let result=arr.reduce((prev,item)=>{
            //  //判断对象 是否存在对应的属性 
             if(item in prev){
                 //找到对应属性值 ++  
                 prev[item]++ 
                 //如果将来要设置或者获取对象属性时，这个属性由变量表示的时候用中括号的形式[]++，如果直接是.属性名称用.的形式
             }else{
                 prev[item]=1
             }
             return prev
        },{})
        console.log(result)//{a: 3, b: 2, c: 2}

【相关推荐：javascript视频教程、web前端】

Das obige ist der detaillierte Inhalt vonZusammenfassung der Wissenspunkte zu neuen Methoden in ES6-Arrays. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!