摘要:日常开发中,如果熟悉一般的数组处理方法,常能事半功倍,有更多时间学习其他技术,形成正向循环。这里总结常用的数组处理方法。
日常开发中,如果熟悉一般的数组处理方法,常能事半功倍,有更多时间学习其他技术,形成正向循环。
这里总结常用的js数组处理方法。
遍历查找 Array.filter() 过滤返回新数组,不改变原数组
不检查空数组
let holidays = [1, 3, 5, 7]; getSmaller = (item) => item > 3; holidays.filter(getSmaller); // [5, 7]Array.every()
返回 boolean
every() 方法用于检测数组所有元素是否都符合指定条件
every() 方法使用指定函数检测数组中的所有元素
every() 不会改变原始数组。
let holidays = [1, 3, 5, 7]; biggerThan3 = (item) => item > 3; holidays.every(biggerThan3); // falseArray.find()
const peoples = [ { name: "jane", age: 23 }, { name: "dannel", age: 43 }, { name: "bruce", age: 56 } ]; findJane = (item) => item.name === "jane"; const Jane = peoples.find(findJane) // {name: "jane", age: 23}
find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行:
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined
注意: find() 对于空数组,函数是不会执行的。
注意: find() 并没有改变数组的原始值。
求和排序 Array.reduce() 求和reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
const numbers = [1, 2, 3, 4, 5, 6]; getSum = (total, curValue) => total + curValue const sum = numbers.reduce(getSum) // 21Array.reduceRight()
与reduce() 类似
const sum = [0, 1, 2, 3].reduceRight((a, b) => a + b); // sum is 6 var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) { return a.concat(b); }); // flattened is [4, 5, 2, 3, 0, 1]
reduce与reduceRight区别
var a = ["1", "2", "3", "4", "5"]; var left = a.reduce((sum, cur) => sum + cur); var right = a.reduceRight((sum, cur) => sum + cur); console.log(left); // "12345" console.log(right); // "54321"Array.sort()
Array.sort()会将数组的数值转化成字符串,然后根据UTF-16 code 比较大小
var months = ["March", "Jan", "Feb", "Dec"]; months.sort(); console.log(months); // ["Dec", "Feb", "Jan", "March"] var array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); // [1, 100000, 21, 30, 4]
如果想要对数组降序、升序排序,就需要变通一点。原理:
function compare(a, b) { if (a 大于 b) { // a、b的类型可以是任意的,比较规则自己定义 return -1; } if (a 小于 b) { return 1; } // a 等于 b return 0; }
例如,1、如果是数字数组:
let numbers = [2, 31, 34, 1, 9]; numbers.sort(function(a, b) { return a - b; })
使用箭头函数,可以使代码更加简洁:
let numbers = [2, 31, 34, 1, 9]; numbers.sort((a, b) => a - b)
2、数组对象
var items = [ { name: "Edward", value: 21 }, { name: "Sharpe", value: 37 }, { name: "And", value: 45 }, { name: "The", value: -12 }, { name: "Magnetic", value: 13 }, { name: "Zeros", value: 37 } ]; // 根据value排序 items.sort(function (a, b) { return a.value - b.value; }); // 根据name排序 items.sort(function(a, b) { var nameA = a.name.toUpperCase(); // 去除大小写的影响 var nameB = b.name.toUpperCase(); // 去除大小写的影响 if (nameA < nameB) { return -1; } if (nameA > nameB) { return 1; } // names must be equal return 0; });判断 includes() 判断存在
includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false
[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true
参考:
1、mdn
2、菜鸟教程
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/109402.html
摘要:网上有很多前端的学习路径文章,大多是知识点罗列为主或是资料的汇总,数据量让新人望而却步。天了解一个前端框架。也可以关注微信公众号晓舟报告,发送获取资料,就能收到下载密码,网盘地址在最下方,获取教程和案例的资料。 前言 好的学习方法可以事半功倍,好的学习路径可以指明前进方向。这篇文章不仅要写学习路径,还要写学习方法,还要发资料,干货满满,准备接招。 网上有很多前端的学习路径文章,大多是知...
摘要:插件开发初体验懒加载前言闲来无事,想自己开发一个简单的懒加载插件,能力的提升我觉得是可以通过编写插件实现,研究了一下官网的插件编写。 Vue插件开发初体验——(懒加载) 前言 闲来无事,想自己开发一个简单的Vue懒加载插件,能力的提升我觉得是可以通过编写插件实现,研究了一下官网的Vue插件编写。马上自己独立开始编写懒加载插件。 一、写在前面 由于我在网上看了很多关于vue插件的实例,发...
摘要:功能三滴滴费用计算古人云细节决定成败,一个良好的微信小程序往往就是一些细节打动人心,居然是模仿,虽做不到百分百,至少还是很希望一模一样。 最近时常感叹道:时间总是那么的快,转瞬即逝。对于像我这种刚入门的小生来讲,技术每天都在更新,框架也层出不穷,有时候还没弄懂这个知识大牛们又推出了更好的技术。当然学习好的技术也是十分重要的。但是在学习之后怎样才能够得到自己想要的呢,一个好的建议便是静...
摘要:个人认为单页面应用的优势相当明显前后端职责分离,架构清晰前端进行交互逻辑,后端负责数据处理。上面的这种单页面应用也有其相应的一种开发工作流,当然这种工作流也适合非单页面应用进行产品功能原型设计。 未经允许,请勿转载。本文同时也发布在我的博客。 (如果对SPA概念不清楚的同学可以先自行了解相关概念) 平时喜欢做点小页面来玩玩,并且一直采用单页面应用(Single Page Appl...
阅读 1620·2021-11-15 11:37
阅读 3360·2021-09-28 09:44
阅读 1621·2021-09-07 10:15
阅读 2761·2021-09-03 10:39
阅读 2660·2019-08-29 13:20
阅读 1264·2019-08-29 12:51
阅读 2182·2019-08-26 13:44
阅读 2110·2019-08-23 18:02