数组函数妙用

Sunday, April 28th 2019, 12:26:46 pm ( ISO 8601 )

标签:
  1. 统计数组元素出现次数
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 }
  1. 按属性对object分类
var people = [  
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

function groupBy(objectArray, property) {  
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

var groupedPeople = groupBy(people, 'age');  
// groupedPeople is:
// { 
//   20: [
//     { name: 'Max', age: 20 }, 
//     { name: 'Jane', age: 20 }
//   ], 
//   21: [{ name: 'Alice', age: 21 }] 
// }
  1. 使用扩展运算符和 initialValue 绑定包含在对象数组中的数组
// friends - 对象数组
// 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'
// ]

Toweave

关于作者
本人是前端工程师 Toweave. 一个努力成为优秀工程师的男人.了解更多...

文章精选.

程序员的文字障
Friday, May 28th 2021, 2:31:26 am ( ISO 8601 )
什么是文字障?
文件类型判断
Friday, April 12th 2019, 1:51:30 am ( ISO 8601 )
常用的文件类型判断
vue 实例生命周期钩子
Thursday, April 11th 2019, 9:15:48 am ( ISO 8601 )
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
浏览器运行环境判断
Thursday, April 11th 2019, 9:05:35 am ( ISO 8601 )
常用的浏览器运行环境判断
现在很多人开网约车,这样能赚多少钱,能够赚到大钱吗?
苏州-虎丘
Saturday, April 6th 2019, 3:05:22 am ( ISO 8601 )
苏州虎丘一日游。
日积月累,你将完成不可思议的事情。
Wednesday, April 3rd 2019, 8:08:38 am ( ISO 8601 )
日积月累,你将完成不可思议的事情。
JavaScript Date 对象
Wednesday, April 3rd 2019, 6:18:56 am ( ISO 8601 )
Date 对象用于处理日期和时间。
常用正则表达式
Wednesday, April 3rd 2019, 3:47:31 am ( ISO 8601 )
正则表达式,一个十分古老而又强大的文本处理工具,仅仅用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑。熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升。下面是在前端开发中经常使用到的20个正则表达式。
上海-一朵梨花压海棠
Wednesday, April 3rd 2019, 3:05:22 am ( ISO 8601 )
一朵梨花压海棠。
CSS Selector 选择器
Tuesday, April 2nd 2019, 10:15:53 am ( ISO 8601 )
了解并且熟用 CSS3 为我们提供的强大并且优雅的选择器,就可以简化我们的代码。
对前端工程师的误解
Tuesday, April 2nd 2019, 9:51:16 am ( ISO 8601 )
隔行如隔山,经常会有一些不太了解前端工作者对前端开发的误解。
Material Design 中文版
Tuesday, April 2nd 2019, 9:28:52 am ( ISO 8601 )
Material Design 的核心思想,就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性,保留其最原始纯净的形态、空间关系、变化与过渡,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。
Markdown - 使用指南
Tuesday, April 2nd 2019, 8:50:09 am ( ISO 8601 )
是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。
浮点数运算的精度问题
Monday, April 1st 2019, 10:33:53 am ( ISO 8601 )
根据浮点数的定义,非整数的 Number 类型无法用 `==` 来比较(`===` 也不行)
上海-顾村公园
Saturday, March 23rd 2019, 3:05:22 am ( ISO 8601 )
上海-顾村公园,摄影。
上海-世纪公园
Sunday, March 17th 2019, 3:05:22 am ( ISO 8601 )
上海-世纪公园,摄影。
Toweave's logo.
Sunday, March 3rd 2019, 8:08:38 am ( ISO 8601 )
Toweave's logo. 哈哈,2015 年,为自己设计的 logo。