請教數(shù)組內(nèi)的數(shù)組元素如何合并？

一、reduce

var total = [0,1,2,3,4].reduce((a, b)=>a + b); //10

reduce接受一個函數(shù)，函數(shù)有四個參數(shù)，分別是：

• 1、上一次的值;
• 2、當(dāng)前值;
• 3、當(dāng)前值的索引;
• 4、數(shù)組;

我們還是以上面那個數(shù)組為例，把這幾個參數(shù)打印出來看看:

[0, 1, 2, 3,4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
});

reduce 還可以扁平化一個二維數(shù)組

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

二、splice

splice()
方法向/從數(shù)組中添加/刪除項目，然后返回被刪除的項目

[1,2,3,4,5].splice(2,0,9);
//[1,2,9,3,4,5]
[1,2,3,4,5].splice(2,2,9);
//[1,2,9,5]

三、concat

在現(xiàn)有數(shù)組后面追加數(shù)組，并返回新數(shù)組，不影響現(xiàn)有數(shù)組。

var arra = [1,2,3];
var arrb = [4,5,6];
var arrc = arra.concat(arrb);
//[1, 2, 3, 4, 5, 6]

四、join

用指定間隔符連起來，把數(shù)組轉(zhuǎn)為字符串。

var arrstr = ['a','b','c','d','e','f','g'];
arrstr.join("*");
///"a*b*c*d*e*f*g"

但需要注意的是只轉(zhuǎn)換一維數(shù)組里面，如果數(shù)組里面還有數(shù)組，將不是采用join指定的字符串接，而是采用默認(rèn)的toString();

var a = ['a','b','c','d','e','f','g',[11,22,33]];
a.join("*");  
// -> a * b * c * d * e * f * g *    11,22,33

五、pop shift unshift

1.pop：刪除數(shù)組最后一個元素，并返回該元素

var a = ["aa","bb","cc"];
a.pop();  //cc

2.shift：刪除數(shù)組第一個元素，并返回該元素

var a = ["aa","bb","cc"];
a.shift();   
// -> aa
a
// -> bb,cc

==注：當(dāng)數(shù)組為空時，返回undefined==

3.unshift：跟shift相反，往數(shù)組最前面添加元素，并返回數(shù)組新長度。

var a = ["aa","bb","cc"];
a.unshift();
//4 注：IE下返回undefined

六、sort reverse

1.sort: ANSI碼正序；

var a = [11,2,3,33445,5654,654,"asd","b"];
a.sort() // -> 11,2,3,33445,5654,654,asd,b

2.reverse ：ANSI碼倒序；

var a = [11,3,5,66,4];
a.reverse();  
// -> 4,66,5,3,11

==如果數(shù)組里面還包含數(shù)組，則當(dāng)為對象處理，并不會把元素解出來==

var a = ['a','b','c','d','e','f','g',[4,11,33]];
a.reverse(); 
// -> 4,11,33,g,f,e,d,c,b,a
a.join(" * "); 
// -> 4,11,33 * g * f * e * d * c * b * a

七、slice splice

1.slice：返回數(shù)組片段

var a = ['a','b','c','d','e','f','g'];
alert(a.slice(1,2));  // -> b
alert(a.slice(2));    // -> c,d,e,f,g
alert(a.slice(-4));   // -> d,e,f,g
alert(a.slice(-2,-6));    // -> 空

2.splice：從數(shù)組刪除某片段的元素，并返回刪除的元素

var a = [1,2,3,4,5,6,7,8,9];
document.write(a.splice(3,2));    // -> 4,5
document.write(a);        // -> 1,2,3,6,7,8,9
document.write(a.splice(4));  // -> 7,8,9 注：IE下返回空
document.write(a);        // -> 1,2,3,6
document.write(a.splice(0,1));    // -> 1
document.write(a);        // -> 2,3,6
document.write(a.splice(1,1,["aa","bb","cc"]));   // -> 3
document.write(a);        // -> 2,aa,bb,cc,6,7,8,9
document.write(a.splice(1,2,"ee").join("#")); // -> aa,bb,cc#6
document.write(a);        // -> 2,ee,7,8,9
document.write(a.splice(1,2,"cc","aa","tt").join("#"));  // -> ee#7
document.write(a);        // -> 2,cc,aa,tt,8,9

==注：注意該方法在IE下，第二個參數(shù)是必須的，不填則默認(rèn)為0，例如a.splice(4)，在IE下則返回空，效果等同于a.splice(4,0)==

八、toString toLocaleString valueOf

1.toString：把數(shù)組轉(zhuǎn)為字符串，不只數(shù)組，所有對象均可使用該方法

var a = [1,2,[3,4],5];
a.toString();
//1,2,3,4,5

var b = 10;
b.toString(2);
// 1010   2進(jìn)制轉(zhuǎn)換

var a =    [5,6,7,8,9,["A","BB"],100];
document.write(a.toString());    // -> 5,6,7,8,9,A,BB,100
var b = new Date()
document.write(b.toString());    // -> Sat Aug 8 17:08:32 UTC+0800    2009
var c = function(s){
alert(s);
}
document.write(c.toString());    // -> function(s){ alert(s); }

布爾值則返回true或false，對象則返回[object objectname]
相比join()方法，join()只對一維數(shù)組進(jìn)行替換，而toString()則把整個數(shù)組（不管一維還是多維）完全平面化
同時該方法可用于10進(jìn)制、2進(jìn)制、8進(jìn)制、16進(jìn)制轉(zhuǎn)換，例如：

var a =  [5,6,7,8,9,"A","BB",100];
for(var i=0; i<a.length; i++){
document.write(a[i].toString()    + " 的二進(jìn)制是 "    + a[i].toString(2) + " ，八進(jìn)制是 " + a[i].toString(8) + " ，十六進(jìn)制是 " + a[i].toString(16));  //    -> 4,5
}
/**
5 的二進(jìn)制是 101 ，八進(jìn)制是 5 ，十六進(jìn)制是 5
6 的二進(jìn)制是 110 ，八進(jìn)制是 6 ，十六進(jìn)制是 6
7 的二進(jìn)制是 111 ，八進(jìn)制是 7 ，十六進(jìn)制是 7
8 的二進(jìn)制是 1000 ，八進(jìn)制是 10 ，十六進(jìn)制是 8
9 的二進(jìn)制是 1001 ，八進(jìn)制是 11 ，十六進(jìn)制是 9
A 的二進(jìn)制是 A ，八進(jìn)制是 A ，十六進(jìn)制是 A
BB 的二進(jìn)制是 BB ，八進(jìn)制是 BB ，十六進(jìn)制是 BB
100 的二進(jìn)制是 1100100 ，八進(jìn)制是 144 ，十六進(jìn)制是 64
*/

==注：轉(zhuǎn)換只能在元素進(jìn)行，如果對整個數(shù)組進(jìn)行轉(zhuǎn)換，則原封不動返回該數(shù)組==

2.toLocaleString：返回本地格式字符串，主要用在Date對象上

var a = new Date();
document.write(a.toString());    // -> Sat Aug 8 17:28:36 UTC+0800    2009
document.write(a.toLocaleString());   // -> 2009年8月8日 17:28:36
document.write(a.toLocaleDateString());   // -> 2009年8月8日

區(qū)別在于，toString()返回標(biāo)準(zhǔn)格式，toLocaleString()返回本地格式完整日期（在【控制面板】>>【區(qū)域和語言選項】，通過修改[時間]和[長日期]格式），toLocaleDateString()跟toLocaleString()一樣，只是少了時間

3.valueOf：根據(jù)不同對象返回不同原始值，用于輸出的話跟toString()差不多，但是toString()是返回string類型，而valueOf()是返回原對象類型

var a = [1,2,3,[4,5,6,[7,8,9]]];
var b = new Date();
var c = true;
var d = function(){
alert("sunnycat");
};
document.write(a.valueOf());    // -> 1,2,3,4,5,6,7,8,9
document.write(typeof (a.valueOf()));  // -> object
document.write(b.valueOf());    // -> 1249874470052
document.write(typeof(b.valueOf()));  // -> number
document.write(c.valueOf());    // -> true
document.write(typeof(c.valueOf()));  // -> boolean
document.write(d.valueOf());    // -> function () {    alert("sunnycat"); }
document.write(typeof(d.valueOf()));  // -> function

數(shù)組也是對象，所以typeof (a.valueOf())返回object，返回的依然是個多維數(shù)組

var a = [1,2,3,[4,5,6,[7,8,9]]];
var aa = a.valueOf();
document.write(aa[3][3][1]); // -> 8

==注：Date對象返回的是距離1970年1月1日的毫秒數(shù)，Math和Error對象沒有valueOf方法==

九、every() filter() find() some() includes()

1.every

array.every(function(currentValue,index,arr), thisValue)

• currentValue 必須。當(dāng)前元素的值
• index 可選。當(dāng)期元素的索引值
• arr 可選。當(dāng)期元素屬于的數(shù)組對象

• every() 方法用于檢測數(shù)組所有元素是否都符合指定條件（通過函數(shù)提供）。
• every() 方法使用指定函數(shù)檢測數(shù)組中的所有元素：

如果數(shù)組中檢測到有一個元素不滿足，則整個表達(dá)式返回 false ，且剩余的元素不會再進(jìn)行檢測。
如果所有元素都滿足條件，則返回 true。

• 注意： every() 不會對空數(shù)組進(jìn)行檢測。
• 注意： every() 不會改變原始數(shù)組。

var a = [1,2,3,4,5];
function checkAdult(num){
    return num > 0
}
a.every(checkAdult);
//true
/**
array.every(function(currentValue,index,arr), thisValue)
currentValue    必須。當(dāng)前元素的值
index            可選。當(dāng)期元素的索引值
arr                可選。當(dāng)期元素屬于的數(shù)組對象
*/

2.filter

filter() 方法創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。

• 注意： filter() 不會對空數(shù)組進(jìn)行檢測。
• 注意： filter() 不會改變原始數(shù)組。

ar ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
//32,33,40

3.find

array.find(function(currentValue, index, arr),thisValue)

find() 方法返回傳入一個測試條件（函數(shù)）符合條件的數(shù)組第一個元素。
find() 方法為數(shù)組中的每個元素都調(diào)用一次函數(shù)執(zhí)行：
當(dāng)數(shù)組中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，之后的值不會再調(diào)用執(zhí)行函數(shù)。
如果沒有符合條件的元素返回 undefined

• 注意: find() 對于空數(shù)組，函數(shù)是不會執(zhí)行的。
• 注意: find() 并沒有改變數(shù)組的原始值。

var ages = [3, 10, 18, 20];
 
function checkAdult(age) {
    return age >= 18;
}
 
function myFunction() {
    document.getElementById("demo").innerHTML = ages.find(checkAdult);
}
//18

4.some

array.some(function(currentValue,index,arr),thisValue)

• some() 方法用于檢測數(shù)組中的元素是否滿足指定條件（函數(shù)提供）
• 如果有一個元素滿足條件，則表達(dá)式返回true , 剩余的元素不會再執(zhí)行檢測。

5.includes

Array.prototype.includes方法返回一個布爾值，表示某個數(shù)組是否包含給定的值，與字符串的includes方法類似。ES2016 引入了該方法。

• indexOf方法有兩個缺點，一是不夠語義化，它的含義是找到參數(shù)值的第一個出現(xiàn)位置，所以要去比較是否不等于-1，表達(dá)起來不夠直觀。二是，它內(nèi)部使用嚴(yán)格相等運算符（===）進(jìn)行判斷，這會導(dǎo)致對NaN的誤判。[NaN].indexOf(NaN)

// -1

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

下面代碼用來檢查當(dāng)前環(huán)境是否支持該方法，如果不支持，部署一個簡易的替代版本。

const contains = (() =>
  Array.prototype.includes
    ? (arr, value) => arr.includes(value)
    : (arr, value) => arr.some(el => el === value)
)();
contains(['foo', 'bar'], 'baz'); // => false

另外，Map 和 Set 數(shù)據(jù)結(jié)構(gòu)有一個has方法，需要注意與includes區(qū)分。

• Map 結(jié)構(gòu)的has方法，是用來查找鍵名的，比如Map.prototype.has(key)、WeakMap.prototype.has(key)、Reflect.has(target, propertyKey)。
• Set 結(jié)構(gòu)的has方法，是用來查找值的，比如Set.prototype.has(value)、WeakSet.prototype.has(value)。

十、fill

array.fill(value, start, end)

• fill() 方法用于將一個固定值替換數(shù)組的元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob");
//Runoob,Runoob,Runoob,Runoob

十一、entries() keys() values()

ES6 提供三個新的方法——entries()，keys()和values()——用于遍歷數(shù)組。它們都返回一個遍歷器對象（詳見《Iterator》一章），可以用for...of循環(huán)進(jìn)行遍歷，唯一的區(qū)別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

十二、Array.from()

類數(shù)組對象轉(zhuǎn)數(shù)組

let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};

// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];

十三、Array.of()

• Array.of方法用于將一組值，轉(zhuǎn)換為數(shù)組

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

//模擬實現(xiàn)
function ArrayOf(){
  return [].slice.call(arguments);
}

如果數(shù)組是多層的，用遞歸。代碼：

function flatten(arr){
    return arr.reduce(
          function(prev, cur){
             return prev.concat(Array.isArray(cur) ? flatten(cur) : cur ); 
             // prev should be an array, if cur is not an array, we can concat it, otherwise, we should use iteration here. 
          }, []) // [] is the initial value for cur, since we want to use Array.prototype.concat, so here we should give an empty array as initial value.
}

如果明確只有2層還比較好，如果不確定有多少層，就可能需要遞歸算法了。

扁平化兩層數(shù)組：[].concat(...arr) 這就是最簡單的了，沒有比這更簡單的。

扁平化多層數(shù)字?jǐn)?shù)組：arr.toString().split(',').map(x=>+x)

扁平化多層數(shù)組：JSON.parse('[' + JSON.stringify(arr).replace(/[|]/, '') + ']') 這個不完美，你要想簡單就去找lodash等第三方庫

數(shù)組去重：[...new Set(arr)] 這就是最簡單的了，沒有比這更簡單的。

手機黨，純手打

arr.reduce((a, b) => a.concat(b))
//[1, 2, 3, 4, 5, 6, 7]

function flattenArray(arr: Array<any>): Array<any> {
   let tempArr: Array<any> = [];
   for (let subarr of arr) {
     tempArr.push(...subarr);
   }
   return tempArr;
}

let arr = [[], [1,2,3], [4,5,6], [7]];
let flatArray = [];
arr.forEach((item,index)=>{
    flatArray = flatArray.concat(item);
});

let arr = [[], [1,2,3], [4,5,6], [7]];
let newArr = [];
arr.forEach(v=>newArr = newArr.concat(v))
console.log(newArr)