es6遍歷數組都有什麼方法

es6遍歷陣列的方法：1、使用forEach()，可為陣列中的每個元素呼叫一個函數；2、使用map()，對陣列的每個元素呼叫指定的回呼函數； 3.使用filter()，會呼叫一個回呼函數來過濾數組中的元素，返回所有符合條件的元素；4、使用some()，遍歷數組，以檢測數組中是否存在指定條件的元素；5、使用every()，可判斷數組元素是否都符合條件；6、使用reduce()。

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

ES6常見的陣列遍歷(迭代)方法

• forEach
• map
• filter
• some
• every
• reduce

宣告一個需要遍歷的物件

下面的程式碼都是要引用這個物件的

 let data = {
                code: 1,
                list: [{
                        id: 23,
                        title: "女装1",
                        price: 300
                    },
                    {
                        id: 24,
                        title: "女装2",
                        price: 200
                    },
                    {
                        id: 27,
                        title: "男装1",
                        price: 100
                    },
                    {
                        id: 29,
                        title: "男装2",
                        price: 400
                    },
                    {
                        id: 230,
                        title: "女装3",
                        price: 600
                    },
                    {
                        id: 40,
                        title: "童装1",
                        price: 700
                    }
                ]
            }

forEach

forEach的話不能使用break 與continue語句

    // 有二个参数 第一个参数是数值 第二个参数是索引值 
     data.list.forEach(function(item,index){
    console.log(item,index)
    
 //输出结果是{
//   {id: 23, title: "女装1", price: 300} 0
//  {id: 24, title: "女装2", price: 200} 1
//  {id: 27, title: "男装1", price: 100} 2
//  {id: 29, title: "男装2", price: 400} 3
//  {id: 230, title: "女装3", price: 600} 4
//  {id: 40, title: "童装1", price: 700} 5
//     }
    
     })

map

    //map 映射
    //遍历数据并返回一个新的数组 对数据的处理会返回原先对应的位置

    let arr = [2, 3, 6];
    let newArr = arr.map(function (val, index) {
        // 第一个参数是值 第二个参数是索引值
        console.log(arr)
    })

 **遍歷資料並傳回一個新的陣列對資料的處理會傳回原先對應的位置

 要加入程式碼區塊map 不可以解析同一個區塊級作用域

 {}{}代表不同的區塊級作用域分別在不同里面寫**

// 浅拷贝
// 浅拷贝是指a把值 给了b 当b的值改变 a b 的值同时改变。
{
        let arr = [2, 3, 6];
        let newArr = arr.map(function (index, val) {
            // 第一个参数是索引值 第二个参数是值        })
        console.log(arr)// 0: 2
                        // 1: 3
                         // 2: 6    }
    {
        // 浅拷贝
        // 浅拷贝是指a把值 给了b 当b的值改变 a b 的值同时改变。
        let newArr = data.list.map((item, index) => {
            item.price = item.price * .6
            return item;
        });
        console.log(newArr)//打印的结果价格都是改变的，一样的{
        // 0: {id: 23, title: "女装1", price: 180}
        // 1: {id: 24, title: "女装2", price: 120}
        // 2: {id: 27, title: "男装1", price: 60}
        // 3: {id: 29, title: "男装2", price: 240}
        // 4: {id: 230, title: "女装3", price: 360}
        // 5: {id: 40, title: "童装1", price: 420}
        // }
        console.log(data.list)//同上    }

輸出結果深拷貝無論a b 值哪一個改變最終結果都不會隨著a b的改變而改變

//深拷貝2(簡單粗暴)

filter 過濾

filter會呼叫一個回呼函數來過濾陣列中的元素，返回符合條件的所有元素

過濾到價格小於300的列印出來

##some

作用是偵測數組中是否存在指定條件的元素；若存在指定的元素則傳回的結果是true，若不存在指定的元素則傳回的結果是false

every

every方法用來判斷陣列中是否任意一個元素都符合判斷條件，判斷同樣是在回呼函數的函數體內完成，並由回呼函數傳回一個布林值。如果回呼函數在某次傳回了false，則整個every方法傳回false，且結束遍歷。

這個是輸出的資訊

#reduce 用來實現累加的效果

輸出的總和是sum val(數值)

// reduce 用来实现累加的效果 (常用于写购物车价格的累加)
// 声明一个数组 数组里面放数字 让其里面的数字显示为累加的总和
//  let arr=[200,200,100]
//  let result =arr.reduce((sum,val,index)=>{
//                          200+200 index 
//                          400+100 index
// sum是总加后的和 val是变量里面的值 index为索引值 
//     console.log(sum,val,index)
//     return sum +val;
//  })
//  console.log(result)

【相關推薦：

javascript影片教學、web前端】#

以上是es6遍歷數組都有什麼方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！