共计 24959 个字符，预计需要花费 63 分钟才能阅读完成。
JavaScript 数组的 API 常常会被 JS 开发者频繁应用，在整个 JavaScript 的学习过程中尤为重要。
数组作为一个最根底的一维数据结构，在各种编程语言中都充当着至关重要的角色，你很难设想没有数组的编程语言会是什么模样。特地是 JavaScript，它天生的灵活性，又进一步施展了数组的专长，丰盛了数组的应用场景。能够毫不夸大地说，不深刻地理解数组，就不足以写好 JavaScript。
随着前端框架的一直演进，React 和 Vue 等 MVVM 框架的风行，数据更新的同时视图也会随之更新。在通过前端框架实现大量的业务代码中，开发者都会用数组来进行数据的存储和各种“增删改查”等操作，从而实现对应前端视图层的更新。可见熟练掌握数组各种办法，并深刻理解数组是很有必要的。
数组概念的探索
截至 ES7 标准，数组共蕴含 33 个规范的 API 办法和一个非标准的 API 办法，应用场景和应用计划纷繁复杂，其中还有不少坑。为了不便你能够循序渐进地学习这部分的内容，上面我将从数组的概念开始讲起。
因为数组的 API 较多，很多相近的名字也容易导致混同，所以在这里我依照“会扭转本身值的”“不会扭转本身值的”“遍历办法”这三种类型离开解说，让你对这些 API 造成更结构化的意识。
Array 的结构器
Array 结构器用于创立一个新的数组。通常，咱们举荐应用对象字面量的形式创立一个数组，例如 var a = [] 就是一个比拟好的写法。然而，总有对象字面量表述乏力的时候，比方，我想创立一个长度为 6 的空数组，用对象字面量的形式是无奈创立的，因而只能写成下述代码这样。
// 应用 Array 结构器，能够自定义长度
var a = Array(6); // [empty × 6]
// 应用对象字面量
var b = [];
b.length = 6; // [undefined × 6]Array 结构器依据参数长度的不同，有如下两种不同的解决形式：
new Array(arg1, arg2,…)，参数长度为 0 或长度大于等于 2 时，传入的参数将依照程序顺次成为新数组的第 0 至第 N 项（参数长度为 0 时，返回空数组）；new Array(len)，当 len 不是数值时，解决同上，返回一个只蕴含 len 元素一项的数组；当 len 为数值时，len 最大不能超过 32 位无符号整型，即须要小于 2 的 32 次方（len 最大为 Math.pow(2,32)），否则将抛出 RangeError。
以上就是 Array 结构器的根本状况，咱们来看下 ES6 新增的几个构造方法。
ES6 新增的构造方法：Array.of 和 Array.from
鉴于数组的罕用性，ES6 专门扩大了数组结构器 Array，新增了 2 个办法：Array.of、Array.from。其中，Array.of 整体用得比拟少；而 Array.from 具备灵活性，你在平时开发中应该会常常应用。那么对于两者的应用细节你真的理解吗？上面开展来聊下这两个办法。
Array.of
Array.of 用于将参数顺次转化为数组中的一项，而后返回这个新数组，而不论这个参数是数字还是其余。它基本上与 Array 结构器性能统一，惟一的区别就在单个数字参数的解决上。
比方，在上面的这几行代码中，你能够看到区别：当参数为两个时，返回的后果是统一的；当参数是一个时，Array.of 会把参数变成数组里的一项，而结构器则会生成长度和第一个参数雷同的空数组。
Array.of(8.0); // [8]
Array(8.0); // [empty × 8]
Array.of(8.0, 5); // [8, 5]
Array(8.0, 5); // [8, 5]
Array.of('8'); // ["8"]
Array('8'); // ["8"]Array.from
Array.from 的设计初衷是疾速便捷地基于其余对象创立新数组，精确来说就是从一个相似数组的可迭代对象中创立一个新的数组实例。其实就是，只有一个对象有迭代器，Array.from 就能把它变成一个数组（留神：是返回新的数组，不扭转原对象）。
从语法上看，Array.from 领有 3 个参数：
- 相似数组的对象，必选；
- 加工函数，新生成的数组会通过该函数的加工再返回；
- this 作用域，示意加工函数执行时 this 的值。
这三个参数外面第一个参数是必选的，后两个参数都是可选的。咱们通过一段代码来看看它的用法。
var obj = {0: 'a', 1: 'b', 2:'c', length: 3};
Array.from(obj, function(value, index){console.log(value, index, this, arguments.length);
return value.repeat(3); // 必须指定返回值，否则返回 undefined
}, obj);后果中能够看出 console.log(value, index, this, arguments.length) 对应的四个值，并且看到 return 的 value 反复了三遍，最初返回的数组为 [“aaa”,”bbb”,”ccc”]。
这表明了通过 Array.from 这个办法能够本人定义加工函数的解决形式，从而返回想要失去的值；如果不确定返回值，则会返回 undefined，最终生成的也是一个蕴含若干个 undefined 元素的空数组。
实际上，如果这里不指定 this 的话，加工函数齐全能够是一个箭头函数。上述代码能够简写为如下模式。
Array.from(obj, (value) => value.repeat(3));
// 控制台返回 (3) ["aaa", "bbb", "ccc"]除了上述 obj 对象以外，领有迭代器的对象还包含 String、Set、Map 等，Array.from 通通能够解决，请看上面的代码。
// String
Array.from('abc'); // ["a", "b", "c"]
// Set
Array.from(new Set(['abc', 'def'])); // ["abc", "def"]
// Map
Array.from(new Map([[1, 'ab'], [2, 'de']]));
// [[1, 'ab'], [2, 'de']]
Array 的判断
Array.isArray 用来判断一个变量是否为数组类型，在 ES5 提供该办法之前，咱们至多有如下 5 种形式去判断一个变量是否为数组。
var a = [];
// 1. 基于 instanceof
a instanceof Array;
// 2. 基于 constructor
a.constructor === Array;
// 3. 基于 Object.prototype.isPrototypeOf
Array.prototype.isPrototypeOf(a);
// 4. 基于 getPrototypeOf
Object.getPrototypeOf(a) === Array.prototype;
// 5. 基于 Object.prototype.toString
Object.prototype.toString.apply(a) === '[object Array]';
ES6 之后新增了一个 Array.isArray 办法，能直接判断数据类型是否为数组，然而如果 isArray 不存在，那么 Array.isArray 的 polyfill 通常能够这样写：
if (!Array.isArray){Array.isArray = function(arg){return Object.prototype.toString.call(arg) === '[object Array]';
};
}
数组的基本概念到这里根本讲得差不多了，上面咱们就来看看让人目迷五色的 30 多个数组的根本办法。
扭转本身的办法
基于 ES6，会扭转本身值的办法一共有 9 个，别离为 pop、push、reverse、shift、sort、splice、unshift，以及两个 ES6 新增的办法 copyWithin 和 fill。
// pop 办法
var array = ["cat", "dog", "cow", "chicken", "mouse"];
var item = array.pop();
console.log(array); // ["cat", "dog", "cow", "chicken"]
console.log(item); // mouse
// push 办法
var array = ["football", "basketball", "badminton"];
var i = array.push("golfball");
console.log(array);
// ["football", "basketball", "badminton", "golfball"]
console.log(i); // 4
// reverse 办法
var array = [1,2,3,4,5];
var array2 = array.reverse();
console.log(array); // [5,4,3,2,1]
console.log(array2===array); // true
// shift 办法
var array = [1,2,3,4,5];
var item = array.shift();
console.log(array); // [2,3,4,5]
console.log(item); // 1
// unshift 办法
var array = ["red", "green", "blue"];
var length = array.unshift("yellow");
console.log(array); // ["yellow", "red", "green", "blue"]
console.log(length); // 4
// sort 办法
var array = ["apple","Boy","Cat","dog"];
var array2 = array.sort();
console.log(array); // ["Boy", "Cat", "apple", "dog"]
console.log(array2 == array); // true
// splice 办法
var array = ["apple","boy"];
var splices = array.splice(1,1);
console.log(array); // ["apple"]
console.log(splices); // ["boy"]
// copyWithin 办法
var array = [1,2,3,4,5];
var array2 = array.copyWithin(0,3);
console.log(array===array2,array2); // true [4, 5, 3, 4, 5]
// fill 办法
var array = [1,2,3,4,5];
var array2 = array.fill(10,0,3);
console.log(array===array2,array2);
// true [10, 10, 10, 4, 5], 可见数组区间 [0,3] 的元素全副替换为 10
不扭转本身的办法
基于 ES7，不会扭转本身的办法也有 9 个，别离为 concat、join、slice、toString、toLocaleString、indexOf、lastIndexOf、未造成规范的 toSource，以及 ES7 新增的办法 includes。
// concat 办法
var array = [1, 2, 3];
var array2 = array.concat(4,[5,6],[7,8,9]);
console.log(array2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(array); // [1, 2, 3], 可见原数组并未被批改
// join 办法
var array = ['We', 'are', 'Chinese'];
console.log(array.join()); // "We,are,Chinese"
console.log(array.join('+')); // "We+are+Chinese"
// slice 办法
var array = ["one", "two", "three","four", "five"];
console.log(array.slice()); // ["one", "two", "three","four", "five"]
console.log(array.slice(2,3)); // ["three"]
// toString 办法
var array = ['Jan', 'Feb', 'Mar', 'Apr'];
var str = array.toString();
console.log(str); // Jan,Feb,Mar,Apr
// tolocalString 办法
var array= [{name:'zz'}, 123, "abc", new Date()];
var str = array.toLocaleString();
console.log(str); // [object Object],123,abc,2016/1/5 下午 1:06:23
// indexOf 办法
var array = ['abc', 'def', 'ghi','123'];
console.log(array.indexOf('def')); // 1
// includes 办法
var array = [-0, 1, 2];
console.log(array.includes(+0)); // true
console.log(array.includes(1)); // true
var array = [NaN];
console.log(array.includes(NaN)); // true
下面我把不会扭转数组的几个办法大抵做了一个回顾，其中 includes 办法须要留神的是，如果元素中有 0，那么在判断过程中不论是 +0 还是 -0 都会判断为 True，这里的 includes 疏忽了 +0 和 -0。
另外还有一个值得强调的是 slice 不扭转本身，而 splice 会扭转本身，你还是须要留神不要记错了。其中，slice 的语法是：arr.slice([start[, end]])，而 splice 的语法是：arr.splice(start,deleteCount[, item1[, item2[, …]]])。咱们能够看到从第二个参数开始，二者就曾经有区别了，splice 第二个参数是删除的个数，而 slice 的第二个参数是 end 的坐标（可选）。
数组遍历的办法
基于 ES6，不会扭转本身的遍历办法一共有 12 个，别离为 forEach、every、some、filter、map、reduce、reduceRight，以及 ES6 新增的办法 entries、find、findIndex、keys、values。
// forEach 办法
var array = [1, 3, 5];
var obj = {name:'cc'};
var sReturn = array.forEach(function(value, index, array){array[index] = value;
console.log(this.name); // cc 被打印了三次, this 指向 obj
},obj);
console.log(array); // [1, 3, 5]
console.log(sReturn); // undefined, 可见返回值为 undefined
// every 办法
var o = {0:10, 1:8, 2:25, length:3};
var bool = Array.prototype.every.call(o,function(value, index, obj){return value >= 8;},o);
console.log(bool); // true
// some 办法
var array = [18, 9, 10, 35, 80];
var isExist = array.some(function(value, index, array){return value > 20;});
console.log(isExist); // true
// map 办法
var array = [18, 9, 10, 35, 80];
array.map(item => item + 1);
console.log(array); // [19, 10, 11, 36, 81]
// filter 办法
var array = [18, 9, 10, 35, 80];
var array2 = array.filter(function(value, index, array){return value > 20;});
console.log(array2); // [35, 80]
// reduce 办法
var array = [1, 2, 3, 4];
var s = array.reduce(function(previousValue, value, index, array){return previousValue * value;},1);
console.log(s); // 24
// ES6 写法更加简洁
array.reduce((p, v) => p * v); // 24
// reduceRight 办法 (和 reduce 的区别就是从后往前累计)
var array = [1, 2, 3, 4];
array.reduceRight((p, v) => p * v); // 24
// entries 办法
var array = ["a", "b", "c"];
var iterator = array.entries();
console.log(iterator.next().value); // [0, "a"]
console.log(iterator.next().value); // [1, "b"]
console.log(iterator.next().value); // [2, "c"]
console.log(iterator.next().value); // undefined, 迭代器处于数组开端时, 再迭代就会返回 undefined
// find & findIndex 办法
var array = [1, 3, 5, 7, 8, 9, 10];
function f(value, index, array){return value%2==0; // 返回偶数}
function f2(value, index, array){return value > 20; // 返回大于 20 的数}
console.log(array.find(f)); // 8
console.log(array.find(f2)); // undefined
console.log(array.findIndex(f)); // 4
console.log(array.findIndex(f2)); // -1
// keys 办法
[...Array(10).keys()]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
[...new Array(10).keys()]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
// values 办法
var array = ["abc", "xyz"];
var iterator = array.values();
console.log(iterator.next().value);//abc
console.log(iterator.next().value);//xyz
其中，要留神有些遍历办法不会返回解决之后的数组，比方 forEach；有些办法会返回解决之后的数组，比方 filter。这个细节你须要牢记，这样才会在面试过程中正确作答。
reduce 办法也须要重点关注，其参数简单且多，通常一些简单的逻辑解决，其实应用 reduce 很容易就能够解决。咱们重点看一下，reduce 到底能解决什么问题呢？先看下 reduce 的两个参数。
首先是 callback（一个在数组的每一项中调用的函数，承受四个参数）：
- previousValue（上一次调用回调函数时的返回值，或者初始值）
- currentValue（以后正在解决的数组元素）
- currentIndex（以后正在解决的数组元素下标）
- array（调用 reduce() 办法的数组）
而后是 initialValue（可选的初始值，作为第一次调用回调函数时传给 previousValue 的值）。
光靠文字描述其实看着会比拟懵，咱们还是通过一个例子来阐明 reduce 的性能到底有如许弱小。
/* 题目：数组 arr = [1,2,3,4] 求数组的和：*/
// 第一种办法：var arr = [1,2,3,4];
var sum = 0;
arr.forEach(function(e){sum += e;}); // sum = 10
// 第二种办法
var arr = [1,2,3,4];
var sum = 0;
arr.map(function(obj){sum += obj});
// 第三种办法
var arr = [1,2,3,4];
arr.reduce(function(pre,cur){return pre + cur});
从下面代码能够看出，咱们别离用了 forEach 和 map 都能实现数组的求和，其中须要另外新定义一个变量 sum，再进行累加求和，最初再来看 sum 的值，而 reduce 不仅能够少定义一个变量，而且也会间接返回最初累加的后果，是不是问题就能够轻松解决了？
类数组
JS 中始终存在一品种数组的对象，它们不能间接调用数组的办法，然而又和数组比拟相似，在某些特定的编程场景中会呈现。咱们先来看看在 JavaScript 中有哪些状况下的对象是类数组呢？次要有以下几种：
- 函数外面的参数对象 arguments；
- 用 getElementsByTagName/ClassName/Name 取得的 HTMLCollection；
- 用 querySelector 取得的 NodeList。
arguments
先来重点讲讲 arguments 对象，咱们在日常开发中常常会遇到各种类数组对象，最常见的便是在函数中应用的 arguments，它的对象只定义在函数体中，包含了函数的参数和其余属性。咱们通过一段代码来看下 arguments 的应用办法，如下所示。
function foo(name, age, sex) {console.log(arguments);
console.log(typeof arguments);
console.log(Object.prototype.toString.call(arguments));
}
foo('jack', '18', 'male');
这段代码比拟容易，就是间接将这个函数的 arguments 在函数外部打印进去，那么咱们看下这个 arguments 打印进去的后果，请看控制台的这张截图。
从后果中能够看到，typeof 这个 arguments 返回的是 object，通过 Object.prototype.toString.call 返回的后果是 ‘[object arguments]’，能够看进去返回的不是 ‘[object array]’，阐明 arguments 和数组还是有区别的。
HTMLCollection
HTMLCollection 简略来说是 HTML DOM 对象的一个接口，这个接口蕴含了获取到的 DOM 元素汇合，返回的类型是类数组对象，如果用 typeof 来判断的话，它返回的是 ‘object’。它是及时更新的，当文档中的 DOM 变动时，它也会随之变动。
var elem1, elem2;
// document.forms 是一个 HTMLCollection
elem1 = document.forms[0];
elem2 = document.forms.item(0);
console.log(elem1);
console.log(elem2);
console.log(typeof elem1);
console.log(Object.prototype.toString.call(elem1));NodeList
NodeList 对象是节点的汇合，通常是由 querySlector 返回的。NodeList 不是一个数组，也是一品种数组。尽管 NodeList 不是一个数组，然而能够应用 for…of 来迭代。在一些状况下，NodeList 是一个实时汇合，也就是说，如果文档中的节点树发生变化，NodeList 也会随之变动。
var list = document.querySelectorAll('input[type=checkbox]');
for (var checkbox of list) {checkbox.checked = true;}
console.log(list);
console.log(typeof list);
console.log(Object.prototype.toString.call(list));类数组利用场景
我在这里为你介绍三种场景，这些也是最常见的。
遍历参数操作
咱们在函数外部能够间接获取 arguments 这个类数组的值，那么也能够对于参数进行一些操作，比方上面这段代码，咱们能够将函数的参数默认进行求和操作。
function add() {
var sum =0,
len = arguments.length;
for(var i = 0; i < len; i++){sum += arguments[i];
}
return sum;
}
add() // 0
add(1) // 1
add(1，2) // 3
add(1,2,3,4); // 10
联合下面这段代码，咱们在函数外部能够将参数间接进行累加操作，以达到预期的成果，参数多少也能够不受限制，依据长度间接计算，返回出最初函数的参数的累加后果，其余的操作也都能够仿照这样的形式来做。咱们再看下一种场景。
定义链接字符串函数
咱们能够通过 arguments 这个例子定义一个函数来连贯字符串。这个函数惟一正式申明了的参数是一个字符串，该参数指定一个字符作为连接点来连贯字符串。该函数定义如下。
function myConcat(separa) {var args = Array.prototype.slice.call(arguments, 1);
return args.join(separa);
}
myConcat(",", "red", "orange", "blue");
// "red, orange, blue"
myConcat(";", "elephant", "lion", "snake");
// "elephant; lion; snake"
myConcat(".", "one", "two", "three", "four", "five");
// "one. two. three. four. five"
这段代码阐明了，你能够传递任意数量的参数到该函数，并应用每个参数作为列表中的项创立列表进行拼接。从这个例子中也能够看出，咱们能够在日常编码中采纳这样的代码形象形式，把须要解决的这一类问题，都形象成通用的办法，来晋升代码的可复用性。
传递参数应用
能够借助 arguments 将参数从一个函数传递到另一个函数，请看上面这个例子。
// 应用 apply 将 foo 的参数传递给 bar
function foo() {bar.apply(this, arguments);
}
function bar(a, b, c) {console.log(a, b, c);
}
foo(1, 2, 3) //1 2 3
上述代码中，通过在 foo 函数外部调用 apply 办法，用 foo 函数的参数传递给 bar 函数，这样就实现了借用参数的妙用。你能够联合这个例子再思考一下，对于 foo 这样的函数能够灵便传入参数数量，通过这样的代码编写形式是不是也能够实现一些性能的拓展场景呢？
如何将类数组转换成数组
在互联网大厂的面试中，类数组转换成数组这样的题目常常会问，也会问你 arguments 的相干问题
类数组借用数组办法转数组
apply 和 call 办法之前咱们有具体讲过，类数组因为不是真正的数组，所以没有数组类型上自带的那些办法，咱们就须要利用上面这几个办法去借用数组的办法。比方借用数组的 push 办法，请看上面的一段代码。
var arrayLike = {
0: 'java',
1: 'script',
length: 2
}
Array.prototype.push.call(arrayLike, 'jack', 'lily');
console.log(typeof arrayLike); // 'object'
console.log(arrayLike);
// {0: "java", 1: "script", 2: "jack", 3: "lily", length: 4}
从中能够看到，arrayLike 其实是一个对象，模仿数组的一个类数组，从数据类型上说它是一个对象，新增了一个 length 的属性。从代码中还能够看出，用 typeof 来判断输入的是 ‘object’，它本身是不会有数组的 push 办法的，这里咱们就用 call 的办法来借用 Array 原型链上的 push 办法，能够实现一个类数组的 push 办法，给 arrayLike 增加新的元素。
从控制台的后果能够看出，数组的 push 办法满足了咱们想要实现增加元素的诉求。咱们再来看下 arguments 如何转换成数组，请看上面这段代码。
function sum(a, b) {let args = Array.prototype.slice.call(arguments);
// let args = [].slice.call(arguments); // 这样写也是一样成果
console.log(args.reduce((sum, cur) => sum + cur));
}
sum(1, 2); // 3
function sum(a, b) {let args = Array.prototype.concat.apply([], arguments);
console.log(args.reduce((sum, cur) => sum + cur));
}
sum(1, 2); // 3
这段代码中能够看到，还是借用 Array 原型链上的各种办法，来实现 sum 函数的参数相加的成果。一开始都是将 arguments 通过借用数组的办法转换为真正的数组，最初都又通过数组的 reduce 办法实现了参数转化的真数组 args 的相加，最初返回预期的后果。
ES6 的办法转数组
对于类数组转换成数组的形式，咱们还能够采纳 ES6 新增的 Array.from 办法以及开展运算符的办法。那么还是围绕下面这个 sum 函数来进行扭转，咱们看下用 Array.from 和开展运算符是怎么实现转换数组的，请看上面一段代码的例子。
function sum(a, b) {let args = Array.from(arguments);
console.log(args.reduce((sum, cur) => sum + cur));
}
sum(1, 2); // 3
function sum(a, b) {let args = [...arguments];
console.log(args.reduce((sum, cur) => sum + cur));
}
sum(1, 2); // 3
function sum(...args) {console.log(args.reduce((sum, cur) => sum + cur));
}
sum(1, 2); // 3
从代码中能够看出，Array.from 和 ES6 的开展运算符，都能够把 arguments 这个类数组转换成数组 args，从而实现调用 reduce 办法对参数进行累加操作。其中第二种和第三种都是用 ES6 的开展运算符，尽管写法不一样，然而根本都能够满足多个参数实现累加的成果。
数组扁平化
扁平化的实现
数组的扁平化其实就是将一个嵌套多层的数组 array（嵌套能够是任何层数）转换为只有一层的数组。举个简略的例子，假如有个名为 flatten 的函数能够做到数组扁平化，成果如上面这段代码所示。
var arr = [1, [2, [3, 4，5]]];
console.log(flatten(arr)); // [1, 2, 3, 4，5]
其实就是把多维的数组“拍平”，输入最初的一维数组。那么你晓得了成果是什么样的了，上面就尝试着写一个 flatten 函数吧。实现形式有下述几种。
办法一：一般的递归实
一般的递归思路很容易了解，就是通过循环递归的形式，一项一项地去遍历，如果每一项还是一个数组，那么就持续往下遍历，利用递归程序的办法，来实现数组的每一项的连贯。咱们来看下这个办法是如何实现的，如下所示。
// 办法 1
var a = [1, [2, [3, 4, 5]]];
function flatten(arr) {let result = [];
for(let i = 0; i < arr.length; i++) {if(Array.isArray(arr[i])) {result = result.concat(flatten(arr[i]));
} else {result.push(arr[i]);
}
}
return result;
}
flatten(a); // [1, 2, 3, 4，5]
从下面这段代码能够看出，最初返回的后果是扁平化的后果，这段代码外围就是循环遍历过程中的递归操作，就是在遍历过程中发现数组元素还是数组的时候进行递归操作，把数组的后果通过数组的 concat 办法拼接到最初要返回的 result 数组上，那么最初输入的后果就是扁平化后的数组。
办法二：利用 reduce 函数迭代
从下面一般的递归函数中能够看出，其实就是对数组的每一项进行解决，那么咱们其实也能够用第 7 讲中说的 reduce 来实现数组的拼接，从而简化第一种办法的代码，革新后的代码如下所示。
// 办法 2
var arr = [1, [2, [3, 4]]];
function flatten(arr) {return arr.reduce(function(prev, next){return prev.concat(Array.isArray(next) ? flatten(next) : next)
}, [])
}
console.log(flatten(arr));// [1, 2, 3, 4，5]
这段代码在控制台执行之后，也能够失去想要的后果。这里你能够回顾一下之前说的 reduce 的参数问题，咱们能够看到 reduce 的第一个参数用来返回最初累加的后果，思路和第一种递归办法是一样的，然而通过应用 reduce 之后代码变得更简洁了，也同样解决了扁平化的问题。
办法三：扩大运算符实现
这个办法的实现，采纳了扩大运算符和 some 的办法，两者独特应用，达到数组扁平化的目标，还是来看一下代码。
// 办法 3
var arr = [1, [2, [3, 4]]];
function flatten(arr) {while (arr.some(item => Array.isArray(item))) {arr = [].concat(...arr);
}
return arr;
}
console.log(flatten(arr)); // [1, 2, 3, 4，5]从执行的后果中能够发现，咱们先用数组的 some 办法把数组中依然是组数的项过滤出来，而后执行 concat 操作，利用 ES6 的开展运算符，将其拼接到原数组中，最初返回原数组，达到了预期的成果。
前三种实现数组扁平化的形式其实是最根本的思路，都是通过最一般递归思路衍生的办法，尤其是前两种实现办法比拟相似。值得注意的是 reduce 办法，它能够在很多利用场景中实现，因为 reduce 这个办法提供的几个参数比拟灵便，能解决很多问题，所以是值得纯熟应用并且精通的。
办法四：split 和 toString 独特解决
咱们也能够通过 split 和 toString 两个办法，来独特实现数组扁平化，因为数组会默认带一个 toString 的办法，所以能够把数组间接转换成逗号分隔的字符串，而后再用 split 办法把字符串从新转换为数组，如上面的代码所示。
// 办法 4
var arr = [1, [2, [3, 4]]];
function flatten(arr) {return arr.toString().split(',');
}
console.log(flatten(arr)); // [1, 2, 3, 4]通过这两个办法能够将多维数组间接转换成逗号连贯的字符串，而后再从新分隔成数组，你能够在控制台执行一下查看后果。
办法五：调用 ES6 中的 flat
咱们还能够间接调用 ES6 中的 flat 办法，能够间接实现数组扁平化。先来看下 flat 办法的语法：
arr.flat([depth])其中 depth 是 flat 的参数，depth 是能够传递数组的开展深度（默认不填、数值是 1），即开展一层数组。那么如果多层的该怎么解决呢？参数也能够传进 Infinity，代表不管多少层都要开展。那么咱们来看下，用 flat 办法怎么实现，请看上面的代码。
// 办法 5
var arr = [1, [2, [3, 4]]];
function flatten(arr) {return arr.flat(Infinity);
}
console.log(flatten(arr)); // [1, 2, 3, 4，5]
能够看出，一个嵌套了两层的数组，通过将 flat 办法的参数设置为 Infinity，达到了咱们预期的成果。其实同样也能够设置成 2，也能实现这样的成果。
因而，你在编程过程中，发现对数组的嵌套层数不确定的时候，最好间接应用 Infinity，能够达到扁平化。
办法六：正则和 JSON 办法独特解决
咱们在第四种办法中曾经尝试了用 toString 办法，其中依然采纳了将 JSON.stringify 的办法先转换为字符串，而后通过正则表达式过滤掉字符串中的数组的方括号，最初再利用 JSON.parse 把它转换成数组。请看上面的代码。
// 办法 6
let arr = [1, [2, [3, [4, 5]]], 6];
function flatten(arr) {let str = JSON.stringify(arr);
str = str.replace(/(\[|\])/g, '');
str = '[' + str + ']';
return JSON.parse(str);
}
console.log(flatten(arr)); // [1, 2, 3, 4，5]
能够看到，其中先把传入的数组转换成字符串，而后通过正则表达式的形式把括号过滤掉。通过这个在线网站 https://regexper.com/ 能够把正则剖析成容易了解的可视化的逻辑脑图。其中咱们能够看到，匹配规定是：全局匹配（g）左括号或者右括号，将它们替换成空格，最初返回解决后的后果。之后拿着正则解决好的后果从新在外层包裹括号，最初通过 JSON.parse 转换成数组返回。
数组排序
数据结构算法中排序有很多种，常见的、不常见的，至多蕴含十种以上。依据它们的个性，能够大抵分为两种类型：比拟类排序和非比拟类排序。
- 比拟类排序：通过比拟来决定元素间的绝对秩序，其工夫复杂度不能冲破 O(nlogn)，因而也称为非线性工夫比拟类排序。
- 非比拟类排序：不通过比拟来决定元素间的绝对秩序，它能够冲破基于比拟排序的工夫下界，以线性工夫运行，因而也称为线性工夫非比拟类排序。
冒泡排序
冒泡排序是最根底的排序，个别在最开始学习数据结构的时候就会接触它。冒泡排序是一次比拟两个元素，如果程序是谬误的就把它们替换过去。走访数列的工作会反复地进行，直到不须要再替换，也就是说该数列曾经排序实现。请看上面的代码。
var a = [1, 3, 6, 3, 23, 76, 1, 34, 222, 6, 456, 221];
function bubbleSort(array) {
const len = array.length
if (len < 2) return array
for (let i = 0; i < len; i++) {for (let j = 0; j < i; j++) {if (array[j] > array[i]) {const temp = array[j]
array[j] = array[i]
array[i] = temp
}
}
}
return array
}
bubbleSort(a); // [1, 1, 3, 3, 6, 6, 23, 34, 76, 221, 222, 456]
疾速排序
疾速排序的根本思维是通过一趟排序，将待排记录分隔成独立的两局部，其中一部分记录的关键字均比另一部分的关键字小，则能够别离对这两局部记录持续进行排序，以达到整个序列有序。
var a = [1, 3, 6, 3, 23, 76, 1, 34, 222, 6, 456, 221];
function quickSort(array) {var quick = function(arr) {if (arr.length <= 1) return arr
const index = Math.floor(len >> 1)
const pivot = arr.splice(index, 1)[0]
const left = []
const right = []
for (let i = 0; i < arr.length; i++) {if (arr[i] > pivot) {right.push(arr[i])
} else if (arr[i] <= pivot) {left.push(arr[i])
}
}
return quick(left).concat([pivot], quick(right))
}
const result = quick(array)
return result
}
quickSort(a);// [1, 1, 3, 3, 6, 6, 23, 34, 76, 221, 222, 456]
下面的代码在控制台执行之后，也能够失去预期的后果。最次要的思路是从数列中挑出一个元素，称为“基准”（pivot）；而后从新排序数列，所有元素比基准值小的摆放在基准后面、比基准值大的摆在基准的前面；在这个辨别搞定之后，该基准就处于数列的两头地位；而后把小于基准值元素的子数列（left）和大于基准值元素的子数列（right）递归地调用 quick 办法排序实现，这就是快排的思路。
插入排序
插入排序算法形容的是一种简略直观的排序算法。它的工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应地位并插入，从而达到排序的成果。
var a = [1, 3, 6, 3, 23, 76, 1, 34, 222, 6, 456, 221];
function insertSort(array) {
const len = array.length
let current
let prev
for (let i = 1; i < len; i++) {current = array[i]
prev = i - 1
while (prev >= 0 && array[prev] > current) {array[prev + 1] = array[prev]
prev--
}
array[prev + 1] = current
}
return array
}
insertSort(a); // [1, 1, 3, 3, 6, 6, 23, 34, 76, 221, 222, 456]
从执行的后果中能够发现，通过插入排序这种形式实现了排序成果。插入排序的思路是基于数组自身进行调整的，首先循环遍历从 i 等于 1 开始，拿到以后的 current 的值，去和后面的值比拟，如果后面的大于以后的值，就把后面的值和以后的那个值进行替换，通过这样一直循环达到了排序的目标。
抉择排序
抉择排序是一种简略直观的排序算法。它的工作原理是，首先将最小的元素寄存在序列的起始地位，再从残余未排序元素中持续寻找最小元素，而后放到已排序的序列前面……以此类推，直到所有元素均排序结束。
var a = [1, 3, 6, 3, 23, 76, 1, 34, 222, 6, 456, 221];
function selectSort(array) {
const len = array.length
let temp
let minIndex
for (let i = 0; i < len - 1; i++) {
minIndex = i
for (let j = i + 1; j < len; j++) {if (array[j] <= array[minIndex]) {minIndex = j}
}
temp = array[i]
array[i] = array[minIndex]
array[minIndex] = temp
}
return array
}
selectSort(a); // [1, 1, 3, 3, 6, 6, 23, 34, 76, 221, 222, 456]这样，通过抉择排序的办法同样也能够实现数组的排序，从下面的代码中能够看出该排序是体现最稳固的排序算法之一，因为无论什么数据进去都是 O(n 平方) 的工夫复杂度，所以用到它的时候，数据规模越小越好。
堆排序
堆排序是指利用堆这种数据结构所设计的一种排序算法。沉积是一个近似齐全二叉树的构造，并同时满足沉积的性质，即子结点的键值或索引总是小于（或者大于）它的父节点。堆的底层实际上就是一棵齐全二叉树，能够用数组实现。
根节点最大的堆叫作大根堆，根节点最小的堆叫作小根堆，你能够依据从大到小排序或者从小到大来排序，别离建设对应的堆就能够。
var a = [1, 3, 6, 3, 23, 76, 1, 34, 222, 6, 456, 221];
function heap_sort(arr) {
var len = arr.length
var k = 0
function swap(i, j) {var temp = arr[i]
arr[i] = arr[j]
arr[j] = temp
}
function max_heapify(start, end) {
var dad = start
var son = dad * 2 + 1
if (son >= end) return
if (son + 1 < end && arr[son] < arr[son + 1]) {son++}
if (arr[dad] <= arr[son]) {swap(dad, son)
max_heapify(son, end)
}
}
for (var i = Math.floor(len / 2) - 1; i >= 0; i--) {max_heapify(i, len)
}
for (var j = len - 1; j > k; j--) {swap(0, j)
max_heapify(0, j)
}
return arr
}
heap_sort(a); // [1, 1, 3, 3, 6, 6, 23, 34, 76, 221, 222, 456]
从代码来看，堆排序相比下面几种排序整体上会简单一些，不太容易了解。不过你应该晓得两点：一是堆排序最外围的点就在于排序前先建堆；二是因为堆其实就是齐全二叉树，如果父节点的序号为 n，那么叶子节点的序号就别离是 2n 和 2n+1。
你了解了这两点，再看代码就比拟好了解了。堆排序最初有两个循环：第一个是解决父节点的程序；第二个循环则是依据父节点和叶子节点的大小比照，进行堆的调整。通过这两轮循环的调整，最初堆排序实现。
归并排序
归并排序是建设在归并操作上的一种无效的排序算法，该算法是采纳分治法的一个十分典型的利用。将已有序的子序列合并，失去齐全有序的序列；先使每个子序列有序，再使子序列段间有序。若将两个有序表合并成一个有序表，称为二路归并。
var a = [1, 3, 6, 3, 23, 76, 1, 34, 222, 6, 456, 221];
function mergeSort(array) {const merge = (right, left) => {const result = []
let il = 0
let ir = 0
while (il < left.length && ir < right.length) {if (left[il] < right[ir]) {result.push(left[il++])
} else {result.push(right[ir++])
}
}
while (il < left.length) {result.push(left[il++])
}
while (ir < right.length) {result.push(right[ir++])
}
return result
}
const mergeSort = array => {if (array.length === 1) {return array}
const mid = Math.floor(array.length / 2)
const left = array.slice(0, mid)
const right = array.slice(mid, array.length)
return merge(mergeSort(left), mergeSort(right))
}
return mergeSort(array)
}
mergeSort(a); // [1, 1, 3, 3, 6, 6, 23, 34, 76, 221, 222, 456]从下面这段代码中能够看到，通过归并排序能够失去想要的后果。下面提到了分治的思路，你能够从 mergeSort 办法中看到，通过 mid 能够把该数组分成左右两个数组，别离对这两个进行递归调用排序办法，最初将两个数组依照程序归并起来。
归并排序是一种稳固的排序办法，和抉择排序一样，归并排序的性能不受输出数据的影响，但体现比抉择排序好得多，因为始终都是 O(nlogn) 的工夫复杂度。而代价是须要额定的内存空间。
push 办法的底层实现
为了更好地实现 push 的底层办法，你能够先去 ECMA 的官网去查一下对于 push 的根本形容（链接：ECMA 数组的 push 规范），咱们看下其英文的形容，如下所示。
When the push method is called with zero or more arguments, the following steps are taken:
1. Let O be ? ToObject(this value).
2. Let len be ? LengthOfArrayLike(O).
3. Let argCount be the number of elements in items.
4. If len + argCount > 2^53 - 1, throw a TypeError exception.
5. For each element E of items, do
a. Perform ? Set(O, ! ToString(F(len)), E, true).
b. Set len to len + 1.
6. Perform ? Set(O, "length", F(len), true).
7. Return F(len).
从下面的形容能够看到边界判断逻辑以及实现的思路，依据这段英文，咱们将其转换为容易了解代码，如下所示。
Array.prototype.push = function(...items) {let O = Object(this); // ecma 中提到的先转换为对象
let len = this.length >>> 0;
let argCount = items.length >>> 0;
// 2 ^ 53 - 1 为 JS 能示意的最大正整数
if (len + argCount > 2 ** 53 - 1) {throw new TypeError("The number of array is over the max value")
}
for(let i = 0; i < argCount; i++) {O[len + i] = items[i];
}
let newLength = len + argCount;
O.length = newLength;
return newLength;
}
从下面的代码能够看出，关键点就在于给数组自身循环增加新的元素 item，而后调整数组的长度 length 为最新的长度，即可实现 push 的底层实现。
pop 办法的底层实现
Array.prototype.pop = function() {let O = Object(this);
let len = this.length >>> 0;
if (len === 0) {
O.length = 0;
return undefined;
}
len --;
let value = O[len];
delete O[len];
O.length = len;
return value;
}
其外围思路还是在于删掉数组本身的最初一个元素，index 就是数组的 len 长度，而后更新最新的长度，最初返回的元素的值，即可达到想要的成果。另外就是在当长度为 0 的时候，如果执行 pop 操作，返回的是 undefined，须要做一下非凡解决。
map 办法的底层实现
Array.prototype.map = function(callbackFn, thisArg) {if (this === null || this === undefined) {throw new TypeError("Cannot read property'map'of null");
}
if (Object.prototype.toString.call(callbackfn) != "[object Function]") {throw new TypeError(callbackfn + 'is not a function')
}
let O = Object(this);
let T = thisArg;
let len = O.length >>> 0;
let A = new Array(len);
for(let k = 0; k < len; k++) {if (k in O) {let kValue = O[k];
// 顺次传入 this, 以后项，以后索引，整个数组
let mappedValue = callbackfn.call(T, KValue, k, O);
A[k] = mappedValue;
}
}
return A;
}
有了下面实现 push 和 pop 的根底思路，map 的实现也不会太难了，根本就是再多加一些判断，循环遍历实现 map 的思路，将解决过后的 mappedValue 赋给一个新定义的数组 A，最初返回这个新数组 A，并不扭转原数组的值。
reduce 办法的底层实现
Array.prototype.reduce = function(callbackfn, initialValue) {
// 异样解决，和 map 相似
if (this === null || this === undefined) {throw new TypeError("Cannot read property'reduce'of null");
}
// 解决回调类型异样
if (Object.prototype.toString.call(callbackfn) != "[object Function]") {throw new TypeError(callbackfn + 'is not a function')
}
let O = Object(this);
let len = O.length >>> 0;
let k = 0;
let accumulator = initialValue; // reduce 办法第二个参数作为累加器的初始值
if (accumulator === undefined) {throw new Error('Each element of the array is empty');
// 初始值不传的解决
for(; k < len ; k++) {if (k in O) {accumulator = O[k];
k++;
break;
}
}
}
for(;k < len; k++) {if (k in O) {
// 留神 reduce 的外围累加器
accumulator = callbackfn.call(undefined, accumulator, O[k], O);
}
}
return accumulator;
}sort 办法的底层实现
如果要排序的元素个数是 n 的时候，那么就会有以下几种状况：
- 当
n<=10时，采纳插入排序； - 当
n>10时，采纳三路疾速排序； 10<n <=1000，采纳中位数作为哨兵元素；n>1000，每隔 200\~215 个元素挑出一个元素，放到一个新数组中，而后对它排序，找到两头地位的数，以此作为中位数。
- 为什么元素个数少的时候要采纳插入排序？
尽管插入排序实践上是均匀工夫复杂度为 O(n^2) 的算法，疾速排序是一个均匀 O(nlogn) 级别的算法。然而别忘了，这只是实践上均匀的工夫复杂度估算，然而它们也有最好的工夫复杂度状况，而插入排序在最好的状况下工夫复杂度是 O(n)。
在理论状况中两者的算法复杂度后面都会有一个系数，当 n 足够小的时候，疾速排序 nlogn 的劣势会越来越小。假使插入排序的 n 足够小，那么就会超过快排。而事实上正是如此，插入排序通过优化当前，对于小数据集的排序会有十分优越的性能，很多时候甚至会超过快排。因而，对于很小的数据量，利用插入排序是一个十分不错的抉择。
- 为什么要花这么大的力量抉择哨兵元素？
因为疾速排序的性能瓶颈在于递归的深度，最坏的状况是每次的哨兵都是最小元素或者最大元素，那么进行 partition（一边是小于哨兵的元素，另一边是大于哨兵的元素）时，就会有一边是空的。如果这么排下去，递归的层数就达到了 n , 而每一层的复杂度是 O(n)，因而快排这时候会进化成 O(n^2) 级别。
这种状况是要尽力防止的，那么如何来防止？就是让哨兵元素尽可能地处于数组的两头地位，让最大或者最小的状况尽可能少。这时候，你就能了解 V8 外面所做的各种优化了。
function ArraySort(comparefn) {CHECK_OBJECT_COERCIBLE(this,"Array.prototype.sort");
var array = TO_OBJECT(this);
var length = TO_LENGTH(array.length);
return InnerArraySort(array, length, comparefn);
}
function InnerArraySort(array, length, comparefn) {
// 比拟函数未传入
if (!IS_CALLABLE(comparefn)) {comparefn = function (x, y) {if (x === y) return 0;
if (%_IsSmi(x) && %_IsSmi(y)) {return %SmiLexicographicCompare(x, y);
}
x = TO_STRING(x);
y = TO_STRING(y);
if (x == y) return 0;
else return x < y ? -1 : 1;
};
}
function InsertionSort(a, from, to) {
// 插入排序
for (var i = from + 1; i < to; i++) {var element = a[i];
for (var j = i - 1; j >= from; j--) {var tmp = a[j];
var order = comparefn(tmp, element);
if (order > 0) {a[j + 1] = tmp;
} else {break;}
}
a[j + 1] = element;
}
}
function GetThirdIndex(a, from, to) { // 元素个数大于 1000 时寻找哨兵元素
var t_array = new InternalArray();
var increment = 200 + ((to - from) & 15);
var j = 0;
from += 1;
to -= 1;
for (var i = from; i < to; i += increment) {t_array[j] = [i, a[i]];
j++;
}
t_array.sort(function(a, b) {return comparefn(a[1], b[1]);
});
var third_index = t_array[t_array.length >> 1][0];
return third_index;
}
function QuickSort(a, from, to) { // 疾速排序实现
// 哨兵地位
var third_index = 0;
while (true) {if (to - from <= 10) {InsertionSort(a, from, to); // 数据量小，应用插入排序，速度较快
return;
}
if (to - from > 1000) {third_index = GetThirdIndex(a, from, to);
} else {
// 小于 1000 间接取中点
third_index = from + ((to - from) >> 1);
}
// 上面开始快排
var v0 = a[from];
var v1 = a[to - 1];
var v2 = a[third_index];
var c01 = comparefn(v0, v1);
if (c01 > 0) {
var tmp = v0;
v0 = v1;
v1 = tmp;
}
var c02 = comparefn(v0, v2);
if (c02 >= 0) {
var tmp = v0;
v0 = v2;
v2 = v1;
v1 = tmp;
} else {var c12 = comparefn(v1, v2);
if (c12 > 0) {
var tmp = v1;
v1 = v2;
v2 = tmp;
}
}
a[from] = v0;
a[to - 1] = v2;
var pivot = v1;
var low_end = from + 1;
var high_start = to - 1;
a[third_index] = a[low_end];
a[low_end] = pivot;
partition: for (var i = low_end + 1; i < high_start; i++) {var element = a[i];
var order = comparefn(element, pivot);
if (order < 0) {a[i] = a[low_end];
a[low_end] = element;
low_end++;
} else if (order > 0) {
do {
high_start--;
if (high_start == i) break partition;
var top_elem = a[high_start];
order = comparefn(top_elem, pivot);
} while (order > 0);
a[i] = a[high_start];
a[high_start] = element;
if (order < 0) {element = a[i];
a[i] = a[low_end];
a[low_end] = element;
low_end++;
}
}
}
// 快排的外围思路，递归调用疾速排序办法
if (to - high_start < low_end - from) {QuickSort(a, high_start, to);
to = low_end;
} else {QuickSort(a, from, low_end);
from = high_start;
}
}
}
从下面的源码剖析来看，当数据量小于 10 的时候用插入排序；当数据量大于 10 之后采纳三路快排；当数据量为 10\~1000 时候间接采纳中位数为哨兵元素；当数据量大于 1000 的时候就开始寻找哨兵元素。