处理Array方法及其实现新方式

2019年都快过完了&＃xff0c;你还在用老掉渣的for循环和forEach么&＃xff1f;

教你几招&＃xff0c;让你秒变代码最清爽的仔&＃xff01;&＃xff01;&＃xff01;

基础篇
数组方法map、filter、some、reduce与forEach的pk

Round 1: map vs forEach

// double number
const number &＃61; [1,2,3,4,5];// forEach Version
const doubleNumber &＃61; []&＃xff1b;
number.forEach(item &＃61;> doubleNumber.push(item * 2))// map Version
const douberNumber &＃61; number.map(item &＃61;> item * 2);


map函数一行搞定&＃xff0c;简直完胜&＃xff1b;

Round2&＃xff1a; filter vs forEach

// filter number that less than 10
const number &＃61; [1,12,3,24,5];// forEach Version
const filterNumber &＃61; [];
number.forEach(item &＃61;> {if (item <10) {filterNumber.push(item); }
})// filter Version
const filterNumber &＃61; number.filter(item &＃61;> item <10);


filter函数一行搞定&＃xff0c;forEach要6行。 filter简直是减轻工作量利器&＃xff01;

Round3: some vs forEach 类似的还有every方法

// is there anyone element greater than 10
const number &＃61; [1,12,3,24,5];// forEach Version
const flag &＃61; false;
number.forEach(item &＃61;> {if (flag > 10) {flag &＃61; true;}
})// some Version
const flag &＃61; number.some(item &＃61;> item > 10)


some同样一行搞定

Round4: reduce vs forEach

const number &＃61; [1,2,3,4,5];// forEach Version
const total &＃61; 0;
number.forEach(item &＃61;> total &＃43;&＃61; item)// reduce Version
const total &＃61; number.reduce((total, value) &＃61;> total &＃43; value)


reduce同样简洁明了

优势&＃xff08;使用map、filter、reduce、every、some等函数优势&＃xff09;

减少代码量
语义化表达其他人很容易明白代码用意
函数化编程&＃xff0c;少引入额外的作用
易于维护、测试和扩展
劣势

相比于for循环&＃xff0c;map这些方法可能在极其严苛的情况下会相对来说慢点。
但是和forEach相比性能是一样的。

提高篇
详细介绍具体数组方法及其实现

map介绍

map方法&＃xff1a; 接收两个参数&＃xff0c;一个是函数&＃xff0c;另一个是函数的this值。 arr.map(callback(currentValue[[, index[, array]]), [,thisArg])

[]中内容代表可选参数 下同

map用法

const number &＃61; [0.1, 1.5, 2.9];
const ceil &＃61; number.map(item &＃61;> Math.ceil(item));
// number值不会改变&＃xff0c; ceil值是[0,1,2]const number &＃61; [{a: 1}, {a: 2}, {a: 3}];
const sumNumber &＃61; number.map(function(item) {return item.a &＃43; this;
}, 100)
// number值不会改变&＃xff0c; sumNumber值为[101, 102, 103]
// notice: 当map有第二个参数时&＃xff0c;第一个参数callback就不能写成箭头函数的形式了。是由于箭头函数的this是在定义的时候已经确定&＃xff0c;而不是调用的时候确定。&＃39;paprika is a good gril&＃39;.split(&＃39;&＃39;).map(item &＃61;> item.charCodeAt(0));
Array.prototype.map.call(&＃39;paprika is a good gril&＃39;, item &＃61;> item.charCodeAt(0))
// 两种方式给字符串应用map方法[&＃39;1&＃39;, &＃39;2&＃39;, &＃39;3&＃39;].map(parseInt) // [1, NaN, NaN]
[&＃39;1&＃39;, &＃39;2&＃39;, &＃39;3&＃39;].map(item &＃61;> parseInt(item)) // [1, 2, 3]


map实现

if (!Array.prototype.map) {Array.prototype.map &＃61; function(callback, thisArg) {var T, A, k;if (this &＃61;&＃61; null) {throw new TypeError(&＃39;this is null not defined&＃39;);}// 让this一定会有length方法&＃xff1b;// 如果通过Array.prototype.map.call(111),这个时候this是Number类型111&＃xff0c;没有length方法。主要是处理这种类似的特殊情况。var O &＃61; Object(this);// >>> 0 的作用是让len的值始终为正整数var len &＃61; O.length >>> 0;if (typeof callback !&＃61;&＃61; &＃39;function&＃39;) {throw new TypeError(callback &＃43; &＃39;is not a functon&＃39;);}if (arguments.length > 1) {T &＃61; arguments[1];}A &＃61; new Array(len);k &＃61; 0;while (k }


filter介绍

arr.filter((callback[[, index], array])[, thisArg]) filter参数格式和map一致&＃xff0c;一个函数&＃xff0c;一个可选的this参数

filter用法

剩下内容&＃xff0c;我们后续见(#^.#)

引用&＃xff1a;
developer.mozilla.org/en-US/docs/…

有问题的话&＃xff0c;请多多交流ღ( ´&＃xff65;ᴗ&＃xff65;&＃96; )。

作者&＃xff1a;forgetandforward
链接&＃xff1a;https://juejin.im/post/5d79af9ef265da03f233fa04
来源&＃xff1a;掘金
著作权归作者所有。商业转载请联系作者获得授权&＃xff0c;非商业转载请注明出处。