/* 1.基本的增删查改
增:返回新数组长度
arr.push(元素) : 末尾新增元素
arr.unshift(元素) : 开头新增元素
删:返回删除的那个元素
arr.pop(啥都没有) : 删除数组最后一个元素
arr.shift(啥都没有):删除数组第一个元素
arr.splice(起始下标,删除数量,...插入元素)
查:返回查询到的元素数组
arr.slice(起始下标,结束下标):查询指定范围的元素
*/
// const res = arr.push
// console.log(res,arr);
// // 6 [1,2,3,4,5,8]
// const res = arr.pop()
// console.log(res,arr);
// // 5 [1,2,3,4,5]
// const res = arr.splice(2,2,8)
// console.log(res,arr);
// //3 [1,2,8,5]
/* 2.arr.concat( 数组 ) : 连接数组
应用场景:移动端列表 上拉加载更多
*/
// const arr1 = arr.concat([60,70,80])
// console.log(arr1);
// [1,2,3,4,5160,70,80]
// // 3.arr.join('分隔符') :把数组元素按照分隔符拼接成一个字符串
// console.log(arr.join('?'));
// // [1?2?3?4?5]
// // // 4.arr.reverse() : 翻转数组
// console.log(arr.reverse());
// console.log(arr);
// // [5,4,3,2,1]
// // [5,4,3,2,1]
// 5.arr.sort((a,b)=>{})数组排序
// let arr1 = [
// { name: '张三', age: 18 },
// { name: '张三', age: 19 },
// { name: '张三', age: 21 },
// { name: '张三', age: 8 },
// { name: '张三', age: 18 },
// ]
// const res = arr1.sort((a, b) => {
// console.log(a, b);
// return a.age - b.age
// })
// console.log(arr1);
// console.log(res);
// 结果都是:
// [
// { name: '张三', age: 8 },
// { name: '张三', age: 18 },
// { name: '张三', age: 18 },
// { name: '张三', age: 19 },
// { name: '张三', age: 21 }
// ]
// 6.数组map方法
arr = [20, 50, 88, 60, 56]
/*
0. map应用场景 : 根据规则映射数组，得到 "新数组"
* 后台返回的数组 和 页面元素 的数据不一致，需要映射成一致（例如echarts图表）
1. 循环次数 === 数组长度
2. 回调函数内部返回值
return 新数组元素
3. 方法自身返回值
return 映射后的数组
*/
// 需求： 全场5折
// const res = arr.map( (item,index) => {
// return item*0.5
// } )
// console.log(res)
// 箭头函数的函数体只有一行,则可以省略大括号。 此时也必须要省略return
const res = arr.map(item => item * 0.5)
console.log(res)
arr = [
{ name:'商品1', select:false },
{ name:'商品2', select:true },
{ name:'商品3', select:false },
{ name:'商品4', select:false },
]
// 7.forEach方法
/*
forEach应用场景 : 循环遍历数组元素
* 遍历修改数组每一个元素值(不需要得到新数组，仅仅只是修改数组自身元素)
1. 循环次数 === 数组长度
2. 回调函数内部返回值
无return
3. 方法自身返回值
无return
*/
// 需求： 全选(设置每一个元素的select值为true)
arr.forEach( (item,index) => {
item.select = true
} )
console.log( arr )
// 箭头函数的函数体只有一行,则可以省略大括号。 此时也必须要省略return
arr.forEach( item => item.select = true )
// 8.filter筛选数组
arr = [
{ name: '商品1', select: false },
{ name: '商品2', select: true },
{ name: '商品3', select: false },
{ name: '商品4', select: false },
{ name: '商品5', select: true },
]
/*
filter应用场景 : 根据条件筛选数组, 将满足条件的元素放入新数组
* 筛选数组元素
* 批量删除数组元素(相当于筛选出不需要删除的元素)
1. 循环次数 === 数组长度
2. 回调函数内部返回值
return true : 满足条件,放入新数组
return false : 不满足条件,不放入新数组
3. 方法自身返回值
return 新数组
*/
// 需求： 筛选用户选中的商品
// const res = arr.filter( (item,index)=>{
// if( item.select ){
// return true
// }else{
// return false
// }
// } )
// console.log( res )
res = arr.filter(item => item.select)
console.log(res)
// 需求 : 删除选中的商品(把true的剔除，保留false的商品)
// 等价于： 筛选用户没有选中的商品
arr = arr.filter(item => !item.select)
console.log(arr)
// 9.reduce方法
/*
1.数组reduce方法 : 为每一个元素执行一次回调,并得到最终结果
经典应用 : 求累加和
*/
arr = [20,50,18,30]
/*
第一个参数: 执行回调
(sum,item,index)=>{
return 下一次的sum值
}
第二个参数： sum初始值
* 建议一定要传初始值，一般为0. （不传遇到空数组就会报错）
reduce返回值： 最后一次sum结果
*/
// const res = arr.reduce( (sum,item,index)=>{
// return sum + item
// } , 0 )
res = arr.reduce( (sum,item)=> sum + item, 0 )
console.log( res )
