很多时候,我们在操作数组的时候往往就是一个for循环干到底,对数组提供的其它方法视而不见。看完本文,希望你可以换种思路处理数组,然后可以写出更加漂亮、简洁、函数式的代码。

reduce

数组里所有值的和

  1. var sum = [0, 1, 2, 3].reduce(function (a, b) {
  2. return a + b;
  3. }, 0);
  4. // sum is 6

将二维数组转化为一维数组

  1. var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  2. function (a, b) {
  3. return a.concat(b);
  4. },
  5. []
  6. );
  7. // flattened is [0, 1, 2, 3, 4, 5]

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

  1. var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
  2. var countedNames = names.reduce(function (allNames, name) {
  3. if (name in allNames) {
  4. allNames[name]++;
  5. }
  6. else {
  7. allNames[name] = 1;
  8. }
  9. return allNames;
  10. }, {});
  11. // countedNames is:
  12. // { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

使用扩展运算符和initialValue绑定包含在对象数组中的数组

  1. // friends - an array of objects
  2. // where object field "books" - list of favorite books
  3. var friends = [{
  4. name: 'Anna',
  5. books: ['Bible', 'Harry Potter'],
  6. age: 21
  7. }, {
  8. name: 'Bob',
  9. books: ['War and peace', 'Romeo and Juliet'],
  10. age: 26
  11. }, {
  12. name: 'Alice',
  13. books: ['The Lord of the Rings', 'The Shining'],
  14. age: 18
  15. }];
  16. // allbooks - list which will contain all friends' books +
  17. // additional list contained in initialValue
  18. var allbooks = friends.reduce(function (prev, curr) {
  19. return [...prev, ...curr.books];
  20. }, ['Alphabet']);
  21. // allbooks = [
  22. // 'Alphabet', 'Bible', 'Harry Potter', 'War and peace',
  23. // 'Romeo and Juliet', 'The Lord of the Rings',
  24. // 'The Shining'
  25. // ]

数组去重

  1. var arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
  2. var result = arr.sort().reduce(
  3. function (init, current) {
  4. if (init.length === 0 || init[init.length - 1] !== current) {
  5. init.push(current);
  6. }
  7. return init;
  8. },
  9. []
  10. );
  11. console.log(result); //[1,2,3,4,5]

数组变整数

  1. var arr = [1, 3, 5, 7, 9];
  2. arr.reduce(function (x, y) {
  3. return x * 10 + y;
  4. }); // 13579

map

求数组中每个元素的平方根

  1. var numbers = [1, 4, 9];
  2. var roots = numbers.map(Math.sqrt);
  3. // roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]

格式化数组中的对象

  1. var kvArray = [{key: 1, value: 10},
  2. {key: 2, value: 20},
  3. {key: 3, value: 30}];
  4. var reformattedArray = kvArray.map(function (obj) {
  5. var rObj = {};
  6. rObj[obj.key] = obj.value;
  7. return rObj;
  8. });
  9. // reformattedArray 数组为: [{1: 10}, {2: 20}, {3: 30}],
  10. // kvArray 数组未被修改:
  11. // [{key: 1, value: 10},
  12. // {key: 2, value: 20},
  13. // {key: 3, value: 30}]

用一个仅有一个参数的函数来mapping一个数字数组

  1. var numbers = [1, 4, 9];
  2. var doubles = numbers.map(function(num) {
  3. return num * 2;
  4. });
  5. // doubles数组的值为: [2, 8, 18]
  6. // numbers数组未被修改: [1, 4, 9]

反转字符串

  1. var str = '12345';
  2. Array.prototype.map.call(str, function(x) {
  3. return x;
  4. }).reverse().join('');
  5. // 输出: '54321'
  6. // Bonus: use '===' to test if original string was a palindrome

every

检测所有数组元素的大小

  1. function isBigEnough(element, index, array) {
  2. return (element >= 10);
  3. }
  4. var passed = [12, 5, 8, 130, 44].every(isBigEnough);
  5. // passed is false
  6. passed = [12, 54, 18, 130, 44].every(isBigEnough);
  7. // passed is true

filter

筛选排除掉所有的小值

  1. function isBigEnough(element) {
  2. return element >= 10;
  3. }
  4. var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
  5. // filtered is [12, 130, 44]

find

用对象的属性查找数组里的对象

  1. var inventory = [
  2. {name: 'apples', quantity: 2},
  3. {name: 'bananas', quantity: 0},
  4. {name: 'cherries', quantity: 5}
  5. ];
  6. function findCherries(fruit) {
  7. return fruit.name === 'cherries';
  8. }
  9. console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }

寻找数组中的质数

  1. function isPrime(element, index, array) {
  2. var start = 2;
  3. while (start <= Math.sqrt(element)) {
  4. if (element % start++ < 1) {
  5. return false;
  6. }
  7. }
  8. return element > 1;
  9. }
  10. console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
  11. console.log([4, 5, 8, 12].find(isPrime)); // 5

some

测试数组元素的值

  1. function isBigEnough(element, index, array) {
  2. return (element >= 10);
  3. }
  4. var passed = [2, 5, 8, 1, 4].some(isBigEnough);
  5. // passed is false
  6. passed = [12, 5, 8, 1, 4].some(isBigEnough);
  7. // passed is true

sort

升序排序

  1. var list = [1, 3, 7, 6];
  2. list.sort(function(a, b) {
  3. return a-b;
  4. });

降序排序

  1. var list = [1, 3, 7, 6];
  2. list.sort(function(a, b) {
  3. return b-a;
  4. });

使用映射改善排序

  1. // 需要被排序的数组
  2. var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
  3. // 对需要排序的数字和位置的临时存储
  4. var mapped = list.map(function (el, i) {
  5. return {index: i, value: el.toLowerCase()};
  6. })
  7. // 按照多个值排序数组
  8. mapped.sort(function (a, b) {
  9. return +(a.value > b.value) || +(a.value === b.value) - 1;
  10. });
  11. // 根据索引得到排序的结果
  12. var result = mapped.map(function (el) {
  13. return list[el.index];
  14. });

操作数组不要只会for循环的更多相关文章

  1. Java学习笔记十:Java的数组以及操作数组

    Java的数组以及操作数组 一:什么是数组: 数组可以理解为是一个巨大的“盒子”,里面可以按顺序存放多个类型相同的数据,比如可以定义 int 型的数组 scores 存储 4 名学生的成绩 数组中的元 ...

  2. 一些ES5的操作数组的方法

    在ES5规范中新增了不少操作数组的方法,特此罗列一下以备使用 1. forEach循环 有点类似jQuery的each循环 [12,23,36,4,5].forEach(function(v,k){ ...

  3. javascript 红宝书笔记之如何使用对象 如何操作数组

    对象定义  ===  引用类型,描述的是一类对象所具有的属性和方法     新对象的创建 方法     new + 构造函数       var person = new Object(); 对象字面 ...

  4. 关于javascript里面仿python切片操作数组的使用方法

    其实在使用了好一段时间的 python之后,我觉得最让我念念不忘的并不是python每次在写函数或者循环的时候可以少用{}括号这样的东西(ps:其实也是了..感觉很清爽,而且又开始写js的时候老是想用 ...

  5. php foreach 操作数组的代码

    php foreach 操作数组的代码.   foreach()有两种用法:  foreach(array_name as $value)  {  statement;  }  这里的array_na ...

  6. php操作数组函数

    整理了一份PHP开发中数组操作大全,包含有数组操作的基本函数.数组的分段和填充.数组与栈.数组与列队.回调函数.排序.计算.其他的数组函数等. 一.数组操作的基本函数 数组的键名和值 array_va ...

  7. JS操作数组的常用方式

    一.JS操作数组一:删除指定的元素 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. //查找指定元素下标 Array.prototype.indexOf = function ...

  8. 剑指Offer - 九度1351 - 数组中只出现一次的数字

    剑指Offer - 九度1351 - 数组中只出现一次的数字2013-11-23 01:23 题目描述: 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. ...

  9. thinkphp中cookie和session中操作数组的方法

    thinkphp中cookie和session中操作数组的方法 一.ThinkPHP模板中如何操作session,以及如果session中保存的是数组的情况 在ThinkPHP的模板中操作sessio ...

随机推荐

  1. dp乱写2:论dp在不在dp中(但在dp范畴)内的应用

    最近正儿八经的学习了dp,有一些题目非常明显看出来就是dp了比如说:过河卒.方格取数.导弹拦截.加分二叉树.炮兵阵地更加明显的还有:采药.装箱问题.过河.金明的预算方案.今天来谈谈dp的dp在不在dp ...

  2. luogu2679 [NOIp2015]子串 (dp)

    设f[i][j][k][b]表示在A串第i位.这是第j组.B串第k位.i号选不选(b=0/1) 那么就有$f[i][j][k][1]=(A[i]==B[k])*(f[i-1][j-1][k][0]+f ...

  3. 【uoj126】 NOI2013—快餐店

    http://uoj.ac/problem/126 (题目链接) 题意 求基环树直径. Solution zz选手迟早退役,唉,右转题解→_→:LCF 细节 拓扑排序的时候度数为0时入队.我在想什么w ...

  4. 使用IntelliJ IDEA工具创建SSM(Spring+MyBatis)项目

    1. 安装和使用IntelliJ IDEA 参考:IntelliJ IDEA 的安装和使用教程 2. 创建Web项目 参考:IntelliJ IDEA 创建Java Web项目 3. Spring整合 ...

  5. 异步IO的并发能力:backlog的配置很重要

    今天中午正准备完工的时候,发现一个让人抓狂的问题. 一个精简版的AIO应用理论上应该比一个完整版的AIO应用并发能力高一些(因为完整版的事务处理复杂一些),在同一台机器上测试. 但测试结果显示,精简版 ...

  6. ByteBuffer的allocate与allocateDirect2013-01-11

    在Java中当我们要对数据进行更底层的操作时,通常是操作数据的字节(byte)形式,这时常常会用到ByteBuffer这样一个类.ByteBuffer提供了两种静态实例方式:   public sta ...

  7. AngularJS 项目里使用echarts 2.0 实现地图功能

    项目中有一页是显示全国地图, echarts官网的地图实例里,有一个模拟迁徙的实例,比较符合项目需求.所以大部分配置项是参考此实例. angular 就不过多介绍了, Google出品的mvc(或者说 ...

  8. HTTP header location 重定向 URL

    http头信息 头信息的作用很多,最主要的有下面几个:1.跳转当浏览器接受到头信息中的 Location: xxxx 后,就会自动跳转到 xxxx 指向的URL地址,这点有点类似用 js 写跳转.但是 ...

  9. win7下PLSQL Developer提示“ORA-12154: TNS:无法解析指定的连接标识符”

    解决方法:卸载掉重新安装,注意安装的目录的文件夹不要有特殊的符号,例如64位系统的的安装目录会到Program Files (x86),这时候就会出现"ORA-12154: TNS:无法解析 ...

  10. Django 2.0.1 官方文档翻译: 编写你的第一个 Django app,第一部分(Page 6)

    编写你的第一个 Django app,第一部分(Page 6)转载请注明链接地址 Django 2.0.1 官方文档翻译: Django 2.0.1.dev20171223092829 documen ...