建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要為大家展示了“es6遍歷數(shù)組有哪些方法”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“es6遍歷數(shù)組有哪些方法”這篇文章吧。
成都創(chuàng)新互聯(lián)公司專注于遼陽企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),成都商城網(wǎng)站開發(fā)。遼陽網(wǎng)站建設(shè)公司,為遼陽等地區(qū)提供建站服務(wù)。全流程專業(yè)公司，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)
es6遍歷數(shù)組的方法：1、使用forEach()，可為數(shù)組中的每個元素調(diào)用一個函數(shù)；2、使用map()，對數(shù)組的每個元素調(diào)用指定的回調(diào)函數(shù)；3、使用filter()；4、使用some()；5、使用every()；6、使用reduce()。
本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
ES6常見的數(shù)組遍歷(迭代)方法
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語句
// 有二個參數(shù) 第一個參數(shù)是數(shù)值 第二個參數(shù)是索引值
data.list.forEach(function(item,index){
console.log(item,index)
//輸出結(jié)果是{
// {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 映射
//遍歷數(shù)據(jù)并返回一個新的數(shù)組 對數(shù)據(jù)的處理會返回原先對應(yīng)的位置
let arr = [2, 3, 6];
let newArr = arr.map(function (val, index) {
// 第一個參數(shù)是值 第二個參數(shù)是索引值
console.log(arr)
})**遍歷數(shù)據(jù)并返回一個新的數(shù)組 對數(shù)據(jù)的處理會返回原先對應(yīng)的位置
要添加代碼塊 map 不可以解析同一個塊級作用域
{}{}代表不同的塊級作用域 分別在不同里面寫**
// 淺拷貝
// 淺拷貝是指a把值 給了b 當(dāng)b的值改變 a b 的值同時(shí)改變。
{
let arr = [2, 3, 6];
let newArr = arr.map(function (index, val) {
// 第一個參數(shù)是索引值 第二個參數(shù)是值 })
console.log(arr)// 0: 2
// 1: 3
// 2: 6 }
{
// 淺拷貝
// 淺拷貝是指a把值 給了b 當(dāng)b的值改變 a b 的值同時(shí)改變。
let newArr = data.list.map((item, index) => {
item.price = item.price * .6
return item;
});
console.log(newArr)//打印的結(jié)果價(jià)格都是改變的，一樣的{
// 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)//同上 }
輸出結(jié)果 深拷貝無論a b 值哪個改變 最終結(jié)果都不會隨著a b的改變而改變
// 深拷貝 2(簡單粗暴)
filter 過濾
過濾到價(jià)格小于300的 打印出來
some
定義的是找到一個值并且返回
every
這個返回的是如果其中一個為假 全部返回為假 返回的是每個條件
這個是輸出的信息
reduce 用來實(shí)現(xiàn)累加的效果
輸出的總和是 sum+val(數(shù)值)
// reduce 用來實(shí)現(xiàn)累加的效果 (常用于寫購物車價(jià)格的累加)
// 聲明一個數(shù)組 數(shù)組里面放數(shù)字 讓其里面的數(shù)字顯示為累加的總和
// 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遍歷數(shù)組有哪些方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)站標(biāo)題：es6遍歷數(shù)組有哪些方法
文章轉(zhuǎn)載：http://www.dlmjj.cn/article/iiochs.html
