数组方法总结

本文内容：

1. ES5常见的数组方法：

• forEach ，map ，filter ，some ，every ，reduce
• 除了forEach，其他都有回调，都有return

2. 其他数组方法

---

1. forEach(循环迭代)

查看代码

forEach(f(item[,index]){})语法
f:是回调函数
item：数组中的每一个值
index:表示下标值

查看代码

let arr=[12,5,8,9];
arr.forEach((item,index)=>{
	console.log(item,index);
})

缺点： 不能使用break和continue。一旦循环，不能停止，必须循环完毕。没有return返回值

2.map(映射)

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

需求：所有产品的价格都打6折，代码如下：

查看代码

let newData = data.list.map((item, index) => {
  return {
    id: item.id,
    title: item.title,
    price: item.price * 0.6
  }
})
console.log(newData);

查看代码

let newData = data.list.map((item, index) => {
  let {id,title,price} = item;
  return {id,title,price: price * 0.6}
})
console.log(newData);

 

3.filter(过滤) 

return true,则把当前记录存入新数组，否则不存。

查看代码

let newData = data.list.filter((item, index) => {
  return item.price > 400
})
console.log(newData);

 

4.some

some()方法用于检测数组中是否有满足条件的元素

注意它返回值是布尔值，如果查找到这个元素，就返回true，如果查找不到就返回false

如果找到第一个满足条件的元素，则终止循环不再继续查找！

查看代码

let newData = data.list.some((item, index) => {
  console.log(index);
  return item.price == 400
})
console.log(newData);

 

5.every

every()方法用于判断数组中是否每项都满足条件，如果每一个都符合条件，则返回真，否则返回假。

查看代码

let newData = data.list.every((item, index) => {
  console.log(index);
  return item.price > 600
})
console.log(newData);

 

5.reduce（累积）

查看代码

const arr = [
      { id: 1, name: '西瓜', state: true, price: 10, count: 1 },
      { id: 2, name: '榴莲', state: false, price: 80, count: 2 },
      { id: 3, name: '草莓', state: true, price: 20, count: 3 },
]

// 需求：把购物车数组中，已勾选的水果，总价累加起来！
// 1. 用 forEach 方法
let amt = 0 // 总价
      arr.filter(item => item.state).forEach(item => {
        amt += item.price * item.count
      })

// 2. 用 reduce 方法
// arr.filter(item => item.state).reduce((累加的结果, 当前循环项) => { }, 初始值)
const result = arr.filter(item => item.state).reduce((amt, item) => amt += item.price * item.count, 0)

 

6. 其他

Array.join( ) 将数组元素连接起来以构建一个字符串

Array.pop( ) 删除并返回数组的最后一个元素
Array.push( ) 末尾添加元素

Array.unshift( ) 在数组头部插入一个元素
Array.shift( ) 在数组头部删除一个元素

Array.reverse( ) 颠倒数组中元素的顺序
Array.sort( ) 对数组元素进行排序
Array.splice( ) 插入、删除或替换数组的元素
Array.slice( ) 返回数组的一部分
Array.concat( ) 连接数组

Array.toLocaleString( ) 把数组转换成局部字符串
Array.toString( ) 将数组转换成一个字符串

Array.length 数组的大小