博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
map、reduce、filter、for...of、for...in等总结
阅读量:6366 次
发布时间:2019-06-23

本文共 4393 字,大约阅读时间需要 14 分钟。

总结初衷

  1. 一直缺乏写文章的能力和动力,受大佬启发,都9102年了也要慢慢改变自己,寒冬来临只能从自我提升着手了。
  2. 另一方面是出于加深琐碎知识点印象的考虑,避免下次使用还要想一下。

map:

用法说明:

map()方法返回一个新数组,结果为该数组中的每一个元素都调用函数后返回的结果。

语法:

arr.map(callback(currentValue[, index[, array]])[, thisArg])

参数说明:

currentValue  数组当前元素index(可选)   数组当前元素的下标array(可选)   map方法调用的数组thisArg(可选) 执行callback函数时使用的this值复制代码

Demo:

// 将原数组统一加上8const arr1 = [1, 2, 3, 4, 5];const arr_temp = arr1.map(c => {  return c + 8;});console.log(arr_temp); // [9, 10, 11, 12, 13]console.log(arr1); // [1, 2, 3, 4, 5]// 格式化带对象的数组const arr_kv = [  {key: 1, value: 1},  {key: 2, value: 2},  {key: 3, value: 3},];const arr_format = arr_kv.map(c => {  let obj = {};  obj[c.key] = c.value;  return obj;});console.log(arr_format); // [{ '1': 1 }, { '2': 2 }, { '3': 3 }]console.log(arr_kv); // [{ key: 1, value: 1 }, { key: 2, value: 2 }, { key: 3, value: 3 }]复制代码

filter:

用法说明:

filter()方法返回一个新数组,新数组中的元素都是通过筛选,符合条件的所有元素,filter()不会对空数组检测。

语法:

arr.filter(callback(currentValue[, index[, array]])[, thisArg])

参数说明:

currentValue  数组当前元素index(可选)   数组当前元素的下标array(可选)   map方法调用的数组thisArg(可选) 执行callback函数时使用的this值复制代码

Demo:

// 返回数组中是奇数的元素const arr2 = [1, 2, 3, 4, 5];const arr2_odd = arr2.filter(c => {  return (c % 2) !== 0;});console.log(arr2_odd); // [1, 3, 5]console.log(arr2); // [1, 2, 3, 4, 5]复制代码

foreach:

用法说明:

foreach()方法没有返回值,该方法调用数组的每个元素,并将元素传递给回调函数。

缺点:不能中途控制,无法break和return终止循环一旦开始只能等循环结束。

语法:

arr.foreach(callback(currentValue[, index[, array]])[, thisArg])复制代码

参数说明:

currentValue  数组当前元素index(可选)   数组当前元素的下标array(可选)   map方法调用的数组thisArg(可选) 执行callback函数时使用的this值复制代码

Demo:

// 复制一个数组const arr3 = [1, 2, 3, 4, 5];const copy = [];arr3.forEach(c => {  copy.push(c);});console.log(copy); // [1, 2, 3, 4, 5]复制代码

reduce:

用法说明:

reduce()方法对数组中的每一个元素执行一次函数并将结果汇总为一个值,另外reduce也可作为高阶函数用于函数的compose。

语法:

arr.reduce(callback(accumulator[, currentValue[, currentIndex[, array]]]))[, initialValue]复制代码

参数说明:

accumulator          累计器累计回调的返回值或initialValuecurrentValue         数组中正在处理的元素currentIndex(可选)   数组中正在处理的元素的索引array(可选)          调用reduce()的数组initialValue(可选)   第一次调用callback函数的第一个参数值复制代码

Demo:

// 返回累积值const arr4 = [1, 2, 3, 4, 5];const arr4_result = arr4.reduce((a, c) => {  return a + c;});console.log(arr4_result); // 15const arr5 = [1, 2, 3, 4, 5];const arr5_result = arr5.reduce((a, c) => {  return a + c;}, 10);console.log(arr5_result); // 25// 取出对象中的 name 单独放在一个数组中const arr6 = [  {id: 10, name: 'zhangsan'},  {id: 11, name: 'lisi'},  {id: 12, name: 'wangwu'},];const arr6_result = arr6.reduce((a, c) => {  return [    ...a,    c.name  ];}, []);console.log(arr6_result); // [ 'zhangsan', 'lisi', 'wangwu' ]复制代码

for...in:

用法说明:

for...in任意顺序遍历一个对象的可枚举属性。对于每个不同的属性,语句都会被执行。但是只遍历可枚举的属性,需要注意的是枚举的时候还会枚举到对象从其构造函数原型中继承的属性。for...of读取的是键值 for...in读取的是键名

语法:

for (variable in object) {...}复制代码

参数说明:

variable 属性名object   被迭代枚举其属性的对象复制代码

Demo:

// 遍历keyconst obj = {  name: 'sonderzzz',  age: 26,  sex: 'male',};for (let v in obj) {  console.log(`${v} is ${obj[v]}`);}// 注意:有原型方法时,for...in会遍历到原型链上的属性const arr7 = [1, 2, 3, 4, 5];Array.prototype.len = function() {  return this.length;};arr7.len();for (let v in arr7) {  console.log(v); // 0 1 2 3 4 len}复制代码

for...of:

用法说明:

for...of一个数据结构只要部署了Symbol.iterator属性,就被视为具有 iterator 接口,就可以用for...of循环遍历它的成员。for...of读取的是键值 for...in读取的是键名

语法:

for (variable of object) {...}复制代码

参数说明:

variable 属性名object   被迭代枚举其属性的对象复制代码

Demo:

const arr8 = ['red', 'green', 'blue'];for (let v of arr8) {  console.log(v);}复制代码

some:

用法说明:

some()方法用于检测数组中的元素是否满足指定条件,依次执行数组中的每个元素,一旦有元素满足则后续不再执行返回true。

语法:

arr.some(callback(currentValue[, index[, array]])[, thisArg])复制代码

参数说明:

currentValue  数组当前元素index(可选)   数组当前元素的下标array(可选)   map方法调用的数组thisArg(可选) 执行callback函数时使用的this值复制代码

Demo:

// 判断数组中是否有大于5的元素const arr10 = [1, 2, 3, 4, 5];const arr10_result = arr10.some(c => {  return c > 5;});console.log(arr10_result); // false复制代码

every:

用法说明:

every()方法用于检测数组中每一个元素是否满足指定条件,有一个元素不满足则后续不再执行返回false。

语法:

arr.every(callback(currentValue[, index[, array]])[, thisArg])复制代码

参数说明:

currentValue  数组当前元素index(可选)   数组当前元素的下标array(可选)   map方法调用的数组thisArg(可选) 执行callback函数时使用的this值复制代码

Demo:

// 判断数组中是否每个元素都小于5const arr11 = [1, 2, 3, 4, 5];const arr11_result = arr11.every(c => {  return c < 5;});console.log(arr11_result); // false复制代码

总结

如果需要将数组按照某种规则映射为另一个数组应该用 map。

如果需要进行简单的遍历,用 forEach 或者 for...of。
如果需要对迭代器进行遍历,用 for...of。
如果需要过滤出符合条件的项,用 filter。
如果需要先按照规则映射为新数组,再根据条件过滤,那就用一个 map 加一个 filter。
最后慎用 for...in

转载地址:http://vnrma.baihongyu.com/

你可能感兴趣的文章
细说Unicode(一) Unicode初认识
查看>>
Node.js有了新的管理者
查看>>
Java 20年:历史与未来
查看>>
彻底理解Javascript中的原型链与继承
查看>>
腾讯最大规模裁撤中层干部,让贤年轻人
查看>>
gRPC-Web发布,REST又要被干掉了?
查看>>
如何:强化 TCP/IP 堆栈安全
查看>>
Spring3 MVC中使用Swagger生成API文档
查看>>
FastCGI PHP on Windows Server 2003
查看>>
LimeSDR Getting Started Quickly | LimeSDR上手指南
查看>>
JSP标签JSTL的使用(1)--表达式操作
查看>>
SAP顾问的人脉比技术更为重要
查看>>
FI/CO PA考试试卷
查看>>
汽车介质应用非常严苛?没关系,新技术带来的高精度传感器十分适应!
查看>>
天合光能 - 用计算捕捉“光的能量”
查看>>
使用sysbench压力测试MySQL(一)(r11笔记第3天)
查看>>
css知多少(11)——position
查看>>
【Spring】定时任务详解实例-@Scheduled
查看>>
先有的资源,能看的速度看,不能看的,抽时间看。说不定那天就真的打不开了(转)...
查看>>
[20161028]rman与filesperset=1.txt
查看>>