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 過濾

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

some

定義的是找到一個值並且返回

every

這個返回的是如果其中一個為假 全部返回為假 返回的是每個條件

這個是輸出的資訊

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)

【相關推薦：、】

以上就是es6遍歷陣列都有什麼方法的詳細內容，更多請關注TW511.COM其它相關文章！