很多时候,我们在操作数组的时候往往就是一个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];
});

操作数组不要只会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. IntelliJ IDEA远程调试运行中的JAVA程序/项目

    一.IntelliJ IDEA配置 1.添加一个运行配置(remote项) 2.打开remote项配置对话框 3.远程jvm参数配置提示 4.远程调试的ip地址和端口号,ip就是java项目所在机器i ...

  2. PostgreSQL——前言

    PostgreSQL是以加州大学伯克利分校计算机系开发的POSTGRES, 版本 4.2为基础的对象关系型数据库管理系统(ORDBMS).POSTGRES 领先的许多概念在很久以后才出现在一些商业数据 ...

  3. StringEscapeUtils的常用使用,防止SQL注入及XSS注入

    StringEscapeUtils的常用使用,防止SQL注入及XSS注入 2017年10月20日 11:29:44 小狮王 阅读数:8974   版权声明:本文为博主原创文章,转载请注明出处. htt ...

  4. arcgis计算邻接矩阵

    求邻接矩阵 教程链接   http://m.blog.csdn.net/wan_yanyan528/article/details/49175673 (1) 将目标shp文件导出一份副本备用(以省级为 ...

  5. 函数和常用模块【day04】:内置函数分类总结(十一)

    重点掌握 字符串格式化format() 字符串格式化百分号 判断 转换 数据类型 帮助信息 map和filter()函数 局部变量全局变量 计算内置函数 常用内置函数(其他) 后续会讲 不常用

  6. 常见HTTP状态码(200、301、302、500等)解说

    对网站管理工作者来说有个词不陌生,HTTP状态码,它是用以表示网页服务器HTTP响应状态的3位数字代码.状态码的第一个数字代表了响应的五种状态之一. 1XX系列:指定客户端应相应的某些动作,代表请求已 ...

  7. ActiveMQ基础教程----简单介绍与基础使用

    概述 ActiveMQ是由Apache出品的,一款最流行的,能力强劲的开源消息总线.ActiveMQ是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现,它非常快速,支持多 ...

  8. Linux遇到的问题(一)Ubuntu报“xxx is not in the sudoers file.This incident will be reported” 错误解决方法

    提示错误信息 www@iZ236j3sofdZ:~$ ifconfig Command 'ifconfig' is available in '/sbin/ifconfig' The command ...

  9. JavaScript继承详解(一)

    面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++.C#.Java)的开发经验. 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例. 类定义了一类事物公共的行为和方法:而实例则 ...

  10. RPC笔记之初探RPC:DIY简单RPC框架

    一.什么是RPC RPC(Remote Procedure Call)即远程过程调用,简单的说就是在A机器上去调用B机器上的某个方法,在分布式系统中极其常用. rpc原理其实很简单,比较容易理解,在r ...