-
以下为数组的实例方法
- forEach()
-
返回:没有
对数组中的每一项执行给定函数。本质上与使用 for 循环迭代数组一样
原数组:不会被修改;仅仅使用数据
function foreach(arr, fn) {
for (let i = 0; i < arr.length; i++) {
fn(arr[i]);
}
}
foreach(arr, (item) => {
console.log(item);
})
- filter()
-
对数组中的每一项执行给定函数,返回执行结果为 true 的项组成的数组 - calls the predicate function one time for each element in the array
返回:符合条件的新数组
原数组:不会被修改
function filter(arr, fn) {
let res = []
for (let i = 0; i < arr.length; i++) {
if (fn(arr[i])) {
res.push(arr[i])
}
}
return res;
}
- [] 获取偶数
-
let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
let res = arr.filter(item => item % 2 === 0)
- [] 删除指定特征如 id 的数据项 - 购物车、歌单
-
let data = [{ id: 10, name: 'gl' }, { id: 11, name: 'cq' }, { id: 12, name: 'sz' }]
let res = data.filter(item => item.id != 11)
函数封装
function delItem(dataItem) {
data = data.filter(item => item.id != dataItem.id)
}
- map()
-
对数组中的每一项执行给定函数,返回每次函数调用的结果组成的数组
适合创建包含的项与另一个数组一一对应的数组 - 映射
返回:新数组
原数组:不会被修改
- [] 提取特征数据
-
从API请求的数据中获取数据项的 name 展示;也可以在请求时指定需要的数据,具体情况看API的支持
let data = [{ id: 10, name: 'gl' }, { id: 11, name: 'cq' }, { id: 12, name: 'sz' }]
let res = data.map(item => item.name)
- [] 修改数据
-
let data = [{ id: 10, name: 'gl' }, { id: 11, name: 'cq' }, { id: 12, name: 'sz' }]
修改格式
let res = data.map(item => ({ id: item.id, name: item.name.toUpperCase() }))
添加属性
let res = data.map(item => ({ ...item, pass: true }))
简单数组生成索引数组
let data = ['gl', 'cq', 'sz', 'sh', 'gz']
let res = data.map((item, ind) => ({ id: ind, location: item }))
- [] 创建 DOM
-
使用 join() 将数组转化为字符串使用
fetch('/utils/data/message.json')
.then(res => res.json())
.then(res => {
console.log(res);
let json = res.cont.map(item => `
- ${item.msg}
`).join('')
ul.innerHTML = json
})
- every()
-
返回:布尔值
对数组中的每一项执行给定函数;如果该函数对 每一项 都返回 true,则返回 true
函数实现原理如下
const every = (arr, fn) => {
let res = true
for (let v of arr) {
res = fn(v);
if (!res) {
break
}
}
return res;
}
res = every(arr, v => v > 10);
console.log(res);
- some()
-
返回类型:布尔值
对数组中的每一项执行给定函数;如果该函数 有一项 返回 true,则返回 true
函数实现原理如下
const some = (arr, fn) => {
let res = false
for (let v of arr) {
res = fn(v)
if (res) {
break
}
}
return res;
}
res = some(arr, v => v > 8);
console.log(res);
- [] 应用:查找数据列表中是否有符合条件的数据项,避免重名
-
let arr = [0, 1, 2, 3, 4, 5]
let flag = arr.some(item => item > 5)
console.log(flag); // false
let obj = [{ id: 10, name: 'gl' }, { id: 11, name: 'cq' }, { id: 12, name: 'sz' }]
let flag = obj.some(item => item.name == 'sz')
console.log(flag); // true
- find()
-
返回:查找到的数据,无则返回 undefined
查找符合条件的 第一个 数据项
let arr = [0, 1, 2, 3, 4, 5]
let res = arr.find(item => item > 3)
console.log(res); // 4
let obj = [{ id: 10, name: 'gl' }, { id: 11, name: 'cq' }, { id: 12, name: 'sz' }]
let res = obj.find(item => item.id === 11)
console.log(res); // { id: 11, name: 'cq' }