操作数组不要只会for循环
程序员文章站
2022-04-28 21:35:35
很多时候,我们在操作数组的时候往往就是一个for循环干到底,对数组提供的其它方法视而不见。看完本文,希望你可以换种思路处理数组,然后可以写出更加漂亮、简洁、函数式的代码。 reduce 数组里所有值的和 将二维数组转化为一维数组 计算数组中每个元素出现的次数 使用扩展运算符和initialValue ......
很多时候,我们在操作数组的时候往往就是一个for循环干到底,对数组提供的其它方法视而不见。看完本文,希望你可以换种思路处理数组,然后可以写出更加漂亮、简洁、函数式的代码。
reduce
数组里所有值的和
var sum = [0, 1, 2, 3].reduce(function (a, b) { return a + b; }, 0); // sum is 6
将二维数组转化为一维数组
var flattened = [[0, 1], [2, 3], [4, 5]].reduce( function (a, b) { return a.concat(b); }, [] ); // flattened is [0, 1, 2, 3, 4, 5]
计算数组中每个元素出现的次数
var names = ['alice', 'bob', 'tiff', 'bruce', 'alice']; var countednames = names.reduce(function (allnames, name) { if (name in allnames) { allnames[name]++; } else { allnames[name] = 1; } return allnames; }, {}); // countednames is: // { 'alice': 2, 'bob': 1, 'tiff': 1, 'bruce': 1 }
使用扩展运算符和initialvalue绑定包含在对象数组中的数组
// friends - an array of objects // where object field "books" - list of favorite books var friends = [{ name: 'anna', books: ['bible', 'harry potter'], age: 21 }, { name: 'bob', books: ['war and peace', 'romeo and juliet'], age: 26 }, { name: 'alice', books: ['the lord of the rings', 'the shining'], age: 18 }]; // allbooks - list which will contain all friends' books + // additional list contained in initialvalue var allbooks = friends.reduce(function (prev, curr) { return [...prev, ...curr.books]; }, ['alphabet']); // allbooks = [ // 'alphabet', 'bible', 'harry potter', 'war and peace', // 'romeo and juliet', 'the lord of the rings', // 'the shining' // ]
数组去重
var arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4]; var result = arr.sort().reduce( function (init, current) { if (init.length === 0 || init[init.length - 1] !== current) { init.push(current); } return init; }, [] ); console.log(result); //[1,2,3,4,5]
数组变整数
var arr = [1, 3, 5, 7, 9]; arr.reduce(function (x, y) { return x * 10 + y; }); // 13579
map
求数组中每个元素的平方根
var numbers = [1, 4, 9]; var roots = numbers.map(math.sqrt); // roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]
格式化数组中的对象
var kvarray = [{key: 1, value: 10}, {key: 2, value: 20}, {key: 3, value: 30}]; var reformattedarray = kvarray.map(function (obj) { var robj = {}; robj[obj.key] = obj.value; return robj; }); // reformattedarray 数组为: [{1: 10}, {2: 20}, {3: 30}], // kvarray 数组未被修改: // [{key: 1, value: 10}, // {key: 2, value: 20}, // {key: 3, value: 30}]
用一个仅有一个参数的函数来mapping一个数字数组
var numbers = [1, 4, 9]; var doubles = numbers.map(function(num) { return num * 2; }); // doubles数组的值为: [2, 8, 18] // numbers数组未被修改: [1, 4, 9]
反转字符串
var str = '12345'; array.prototype.map.call(str, function(x) { return x; }).reverse().join(''); // 输出: '54321' // bonus: use '===' to test if original string was a palindrome
every
检测所有数组元素的大小
function isbigenough(element, index, array) { return (element >= 10); } var passed = [12, 5, 8, 130, 44].every(isbigenough); // passed is false passed = [12, 54, 18, 130, 44].every(isbigenough); // passed is true
filter
筛选排除掉所有的小值
function isbigenough(element) { return element >= 10; } var filtered = [12, 5, 8, 130, 44].filter(isbigenough); // filtered is [12, 130, 44]
find
用对象的属性查找数组里的对象
var inventory = [ {name: 'apples', quantity: 2}, {name: 'bananas', quantity: 0}, {name: 'cherries', quantity: 5} ]; function findcherries(fruit) { return fruit.name === 'cherries'; } console.log(inventory.find(findcherries)); // { name: 'cherries', quantity: 5 }
寻找数组中的质数
function isprime(element, index, array) { var start = 2; while (start <= math.sqrt(element)) { if (element % start++ < 1) { return false; } } return element > 1; } console.log([4, 6, 8, 12].find(isprime)); // undefined, not found console.log([4, 5, 8, 12].find(isprime)); // 5
some
测试数组元素的值
function isbigenough(element, index, array) { return (element >= 10); } var passed = [2, 5, 8, 1, 4].some(isbigenough); // passed is false passed = [12, 5, 8, 1, 4].some(isbigenough); // passed is true
sort
升序排序
var list = [1, 3, 7, 6]; list.sort(function(a, b) { return a-b; });
降序排序
var list = [1, 3, 7, 6]; list.sort(function(a, b) { return b-a; });
使用映射改善排序
// 需要被排序的数组 var list = ['delta', 'alpha', 'charlie', 'bravo']; // 对需要排序的数字和位置的临时存储 var mapped = list.map(function (el, i) { return {index: i, value: el.tolowercase()}; }) // 按照多个值排序数组 mapped.sort(function (a, b) { return +(a.value > b.value) || +(a.value === b.value) - 1; }); // 根据索引得到排序的结果 var result = mapped.map(function (el) { return list[el.index]; });
上一篇: jQuery基础框架浅入剖析
下一篇: RxJS v6 学习指南