数组的很多方法都可以实现对数组的操作,但是在使用的时候,有时候能够用对方法,往往能够达到事半功倍的效果
方法1—for of—得到每一次迭代的值for of是配合iterator迭代器使用的,js默认为数组,字符串,argument,set容器,map容器部署了iterator接口,除了这五种类型,别的数据类型不能使用for of来循环这里手写一个iterator的函数,充分了解内部原理
//手动构建一个iterator
function iterator(arr) {
let countIndex = 0
return {
next: function () {
return countIndex < arr.length ? {value: arr[countIndex++], done: false} : {
value: undefined,
done: true
}
}
}
}
const arr = [1, 2, 3, 4, 5]
const obj = iterator(arr)
console.log(obj.next())//1 false 然后依次下去迭代到5之后值为undefined,done的值为true这里写一下for of的简单用法
//iterator接口默认部署到了array ,argument,string,set容器,map容器中
//部署了iterator就可以用for of 遍历
for (const value of "arr") {
console.log(value)
}方法2—forEach()-----没有返回值,对原数组没有影响(当为对象组成的数组时,可以改变对象中属性值,为什么会这样呢?这里还是啰嗦解释一下:当数组数据类型为基本数据类型的时候,对其循环遍历的时候,实际是将栈中的数据复制一份给了item,修改item的值并不会改变数组中元素的值,但是当数组类型为对象时,是将指针给复制给了item,此时,item和数组里面的元素共同指向堆中同一个元素,就可以修改堆里面的数据了)
写法:
arr.forEach((item,index,arr)=>{
//拿到每一项之后看你要干嘛
})需求:假设这样的场景:我们在实现购物车商品结算的时候,默认加入购物车的商品是勾选的,全选按钮就会勾上,当我们取消全选按钮时,就应该遍历存商品的数组,让所用按钮的状态和全选按钮一致:具体代码如下
handleAllChecked() {
let {cart, allChecked} = this.data
allChecked = !allChecked
cart.forEach(v => v.checked = allChecked)
this.setCart(cart)
},这里cart是存放所有商品的数组,allChecked是全选状态,checked是每个商品的选中状态
这里的forEach方法用的是es6箭头函数的写法,有不懂的可以参考如下如(一次搞懂,终身受益~)
方法3—some()—有返回值
数组中的每一项去执行函数里面的方法,如果遇到一个正确的,则返回true,循坏结束,即遇到false就会一直执行下去
具体写法:
const arr = [1, 2, 3, 4]
const flag = arr.some(item => item < 0)
console.log(flag)//false这里没有return,原因看上面的箭头函数图
方法4—every()—有返回值
数组中的每一项去执行函数里面的方法,每一个回调函数返回true,则返回true,如果遍历过程中遇到了false,则跳出遍历,返回false,和上面every方法正好相反
const arr = [1, 2, 3, 4]
const flag = arr.every(item => item < 2)
console.log(flag)//false方法5—map()—有返回值
map这个单词我的解释为映射,对数组的每一项进行函数的操作,返回新数组
const arr = [1, 2, 3, 4]
const arr1 = arr.map(item => item +2)
console.log(arr1)//[3,4,5,6]map()方法使用频率是最高的,以下是在用户订单中数组中,重新加入过滤时间的属性orders.map(v=>({...v,create_time_cn:(new Date(v.create_time*1000).toLocaleString())})),使用map方法就可以很方便的实现
方法6—filter()—有返回值–不改变原数组,返回新数组
filter单词的意思为过滤.即对原数组的每一项进行操作,把需要的数据组成新数组返回
const arr = [1, 2, 3, 4]
const arr1 = arr.filter(item => item <2)
console.log(arr1)//[1]filter()和map()同样都是对数组的操作,返回新数组,有什么区别呢?
把上面代码换成map试一下
const arr = [1, 2, 3, 4]
const arr1 = arr.map(item => item <2)
console.log(arr1)//[true.false,false,false]filter()函数体里面的操作是一个判断式,而map是操作式(自创的名词)
自定义一个filter函数
let arr = [1, 2, 4, 3, 5, 6, 7, 6]
function filter(arr, callback) {
let newArr = []
for (const value of arr) {
if (calllback(value)) {
newArr.push(value)
}
}
return newArr
}
console.log(filter(arr, (v) => v < 5))方法7—find()–有返回值
返回数组中符合条件的第一项,没有找到则返回undefined
const arr = [1, 2, 3, 4]
const num = arr.find(item => item ===2)
console.log(num)//2find()和some()的区别在于,find()找到的是具体的项,而some是找到了就返回true,得到的结果是不一样的
方法8—findIndex()—有返回值
返回数组中符合条件项的索引,没有就返回-1(空数组也可以)
场景:在将物品加入到购物车的时候,我们就需要就购物车中商品数组,就行查找,如果商品数组中有这个元素,就只需要将它的数量加1,如果商品不在,则需要将商品的信息添加到数组中
let index = cart.findIndex(value => value.goods_id === this.goodsInfo.goods_id
)
if (index === -1) {//没有找到
//初始化数量为1
this.goodsInfo.num = 1
//默认加入购物车就选中了
this.goodsInfo.selected=true
cart.push(this.goodsInfo)
} else {//已经存在了
cart[index].num++;
}方法9:reduce()—超级好用方法
1 利用方法实现累加,pre为每次函数返回的值,第二个参数可以为pre设置初始值,如果没有初始值则默认为第一个,少一次迭代
//reduce方法-超级好用的reduce方法---实现累计的效果
let arr = [1, 2, 4, 3, 5, 6, 7, 6]
const num = arr.reduce((pre, cur) => {
return pre += cur
}, 0)
console.log(num)2 查找数组最大的值
//查找数组最大的值
let arr = [1, 2, 4, 3, 5, 6, 7, 6]
const num = arr.reduce((pre, cur) => pre > cur ? pre : cur)
console.log(num)3 数组去重
//数组去重
const arr = [1, 2, 4, 5, 1, 1, 2, 2, 3, 4, 3, 3]
const newArr = arr.reduce((arr, cur) => {
if (!arr.includes(cur)) {
arr.push(cur)
}
return arr
}, [])
console.table(newArr)这里随带提一下es6数组去重的最简单的方法----一行代码搞定
let arr1 = [1, 2, 4, 3, 5, 6, 7, 6]
console.log([...new Set(arr1)])4 查找价格区间的商品
//查找商品中超过9千到1万元的商品
let goodsList = [
{name: "奥迪", price: "12333"},
{name: "宝马", price: "9001"},
{name: "奔驰", price: "12333"},
{name: "五菱宏光", price: "12333"},
{name: "特斯拉", price: "10000"},
]
function choiceGoods(good, minPrice, maxPrice) {
return good.reduce((arr, cur) => {
cur.price < maxPrice && cur.price > minPrice ? arr.push(cur) : arr
return arr
}, [])
}
console.table(choiceGoods(goodsList, 9000, 12000))reduceRight() ES6新加的keys()，values()，entries()—以后用到了再来总结
有任何错误的地方,欢迎大家指正
