JS新手入门数组处理的实用方法汇总(2)

const newArr = myArr.filter(function (item, index, arr) { return item > 10 }) // 检测数组myArr中所有元素都大于10的元素,返回一个新数组newArr // 箭头函数写法 const newArr = myArr.filter((v, i, arr) => v > 10)

map()方法:返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值

map()方法按照原始数组元素顺序依次处理元素

举例:

const newArr = myArr.map(function (item, index, arr) { return item * 10 }) // 数组myArr中所有元素都乘于10,返回一个新数组newArr // 箭头函数写法 const newArr = myArr.map((v, i, arr) => v * 10)

举例(用于数组嵌套对象的类型):

const newArr = myArr.map(function (item, index, arr) { return { id: item.id, newItem: '123' } }) // 处理数组myArr中指定的对象元素里面的元素或新元素,返回一个新数组newArr // 箭头函数写法 const newArr = myArr.map((v, i, arr) => { return { id: v.id, newItem: '123' } })

find() / findIndex()方法:返回通过测试(函数内判断)的数组的第一个元素的 值 / 索引。如果没有符合条件的元素返回 undefined / -1

举例:

const val = myArr.find(function (item, index, arr) { return item > 10 }) // 返回数组myArr中第一个大于10的元素的值val,没有则返回undefined const val = myArr.findIndex(function (item, index, arr) { return item > 10 }) // 返回数组myArr中第一个大于10的元素索引,没有则返回-1

reduce()方法:返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值

这个方法接收两个参数:要执行的函数,传递给函数的初始值

要执行的函数(total, currentValue, currentValue, arr):

total:必选,初始值, 或者计算结束后的返回值

currentValue:必选,当前元素;

currentValue:可选,当前元素索引;

arr:可选,当前元素所属的数组对象

举例1:

const myArr = [1, 2, 3] const sum = myArr.reduce(function(pre, cur, index, arr) { console.log(pre, cur) return pre + cur }) console.log(sum) // 输出值分别为 // 1, 2 // 3, 3 // 6

举例2(设置初始迭代值):

const myArr = [1, 2, 3] const sum = myArr.reduce(function(pre, cur, index, arr) { console.log(pre, cur) return prev + cur }, 2) console.log(sum) // 输出值分别为 // 2, 1 // 3, 2 // 5, 3 // 8

应用:

1.求和、求乘积

const myArr = [1, 2, 3, 4] const result1 = myArr.reduce(function(pre, cur) { return pre + cur }) const result2 = myArr.reduce(function(pre, cur) { return pre * cur }) console.log(result1) // 6 console.log(result2) // 24

2.计算数组中每个元素出现的次数

const myArr = ['liang','qi','qi','liang','ge','liang'] const arrResult = myArr.reduce((pre,cur) =>{ if(cur in pre){ pre[cur]++ }else{ pre[cur] = 1 } return pre },{}) console.log(arrResult) // 结果:{liang: 3, qi: 2, ge: 1}

3.对对象的属性求和

const myArr = [ { name: 'liangqi', weigth: 55 },{ name: 'mingming', weigth: 66 },{ name: 'lele', weigth: 77 } ] const result = myArr.reduce((a,b) =>{ a = a + b.weigth return a },0) console.log(result) // 结果:198

Array.of()方法:用于将一组值转化为新数组

举例:

Array.of() // [] Array.of(undefined) // [undefined] Array.of(1) // [1] Array.of(1, 2) // [1, 2]

flat()方法:数组拍平方法也叫数组扁平化、数组拉平、数组降维,用于将嵌套的数组变成一维数组,返回一个新数组

举例:

const myArr = [1, [2, 3, [4, 5, [12, 3, "zs"], 7, [8, 9, [10, 11, [1, 2, [3, 4]]]]]]] console.log(myArr.flat(Infinity)) // [1, 2, 3, 4, 5, 12, 3, "zs", 7, 8, 9, 10, 11, 1, 2, 3, 4]

总结

到此这篇关于JS新手入门数组处理的文章就介绍到这了,更多相关JS数组处理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsddww.html