摘要：數(shù)組元素甚至可以是對(duì)象或其它數(shù)組。它執(zhí)行的是淺拷貝，這意味著如果數(shù)組元素是對(duì)象，兩個(gè)數(shù)組都指向相同的對(duì)象，對(duì)新數(shù)組中的對(duì)象修改，會(huì)在舊的數(shù)組的相同對(duì)象中反應(yīng)出來。

JS中的數(shù)組是弱類型的，數(shù)組中可以含有不同類型的元素。數(shù)組元素甚至可以是對(duì)象或其它數(shù)組。
JS引擎一般會(huì)優(yōu)化數(shù)組，按索引訪問數(shù)組常常比訪問一般對(duì)象屬性明顯迅速。
數(shù)組長(zhǎng)度范圍 from 0 to 4,294,967,295(2^23 - 1)

JavaScript 中的數(shù)據(jù)通常由一個(gè)數(shù)組來表示, 所以當(dāng)可視化或分析數(shù)據(jù)時(shí)往往也會(huì)操作數(shù)組. 常見的數(shù)組操作包括切片, 過濾, 遍歷等等. JavaScript 本身支持的數(shù)組操作可以參考 這里.

主要分為三大類：
JavaScript 中 修改數(shù)組自身 的方法:

array.pop - 移除最后一個(gè)元素.

array.push - 追加一個(gè)或多個(gè)元素.

array.reverse - 數(shù)組翻轉(zhuǎn).

array.shift - 移除第一個(gè)元素.

array.sort - 排序.

array.splice - 添加或者移除.

array.unshift - 在數(shù)組前添加一個(gè)或多個(gè)元素.

JavaScript 中數(shù)組的 存取 方法 :

array.concat - 將數(shù)組與數(shù)組或值合并.

再看看解構(gòu)方法

const arr1 = [1,2,3];
const arr2 = [4,5,6];

const result = [...arr1, ...arr2];

array.join - 只用指定的字符串將數(shù)組轉(zhuǎn)為一個(gè)字符串.

array.slice - 提取切片.

array.indexOf - 找出指定元素的索引.(搜索)

array.lastIndexOf - 找出指定元素的最后一個(gè)索引.

JavaScript 中數(shù)組的 迭代方法 :

array.filter - 過濾.

array.forEach - 對(duì)每個(gè)元素執(zhí)行某個(gè)方法.

array.every - 是否每個(gè)元素都符合給定的條件.

array.map - 根據(jù)指定的操作對(duì)每個(gè)元素執(zhí)行后返回一個(gè)新的數(shù)組.

array.some - 是否存在符合某個(gè)條件的元素.

array.reduce - 從左到右執(zhí)行 reduce 操作并返回一個(gè)值.

array.reduceRight - 從右到左執(zhí)行 reduce 操作并返回一個(gè)值.

數(shù)組在數(shù)學(xué)中也可以稱為“數(shù)列”，也就是以數(shù)字或其他類型內(nèi)容為元素的有序集合。

// 整型數(shù)字?jǐn)?shù)組
const intArray = [ 1, 2, 3, 4, 5 ]
// 浮點(diǎn)型數(shù)字?jǐn)?shù)組
const floatArray = [ 1.1, 1.2, 1.3, 1.4, 1.5 ]
// 字符串?dāng)?shù)組
const strArray = [ "a", "b", "c", "d", "e" ]...

在數(shù)據(jù)科學(xué)領(lǐng)域中，數(shù)組可以說是承載了絕大部分?jǐn)?shù)據(jù)的表達(dá)任務(wù)，無論是規(guī)整的數(shù)據(jù)表，還是隨時(shí)間排序的時(shí)間序列，或是復(fù)雜多變的非結(jié)構(gòu)化數(shù)據(jù)，都可以使用數(shù)組或類數(shù)組的形式表達(dá)。

數(shù)組是對(duì)象，對(duì)象不一定是數(shù)組

都可以繼承

都可以當(dāng)做對(duì)象添加刪除屬性

數(shù)組自動(dòng)更新length

數(shù)組操作通常被優(yōu)化

數(shù)組對(duì)象繼承Array.prototype上的大量數(shù)組操作方法

稀疏數(shù)組并不含有從0開始的連續(xù)索引。一般length屬性值比實(shí)際元素個(gè)數(shù)大。

for in 可以枚舉可枚舉屬性名，對(duì)象，數(shù)組都是可以使用的，可以把數(shù)組理解為一種特殊的對(duì)象，常用for in枚舉稀疏數(shù)組

我們前面講到數(shù)組是一個(gè)有序集合，那么就意味著它包含了若干個(gè)元素。當(dāng)然了，數(shù)組可空。因?yàn)樗且粋€(gè)包含了若干元素的集合，所以它就肯定天然地包含了一個(gè)屬性，那便是元素的數(shù)量。

const array = [ 1, 2, 3, 4, 5 ]
console.log(array.length) //=> 5

因?yàn)樵谟?jì)算機(jī)中的可用內(nèi)存是有限的，所以大部分程序在創(chuàng)建數(shù)據(jù)（比如數(shù)組）的時(shí)候，都需要先設(shè)定好該數(shù)據(jù)的所占長(zhǎng)度。但在 JavaScript 中這并不需要，因?yàn)閷?shí)際在 JavaScript 中數(shù)組就是一個(gè)特殊的對(duì)象。

所以在 JavaScript 中，對(duì)數(shù)組內(nèi)容的修改會(huì)比較方便。“增查改刪”是數(shù)據(jù)庫應(yīng)用領(lǐng)域中最常見的操作，這在數(shù)組中也是一樣的。

array.push

array.splice(start, deleteCount, element)

第二個(gè)參數(shù)deleteCount用來刪除數(shù)組中某個(gè)位置開始的若干個(gè)元素

如果設(shè)置為0，該方法第三參數(shù)以及后面的參數(shù)會(huì)被插入到start位置(array[start]開始)

    let keys = ["純新客", "品類轉(zhuǎn)化新客", "老客"]
    keys.splice(keys.indexOf("純新客"), 1)

vue源碼中就用的此方法

/**
 * Remove an item from an array
 */
function remove (arr, item) {
  if (arr.length) {
    var index = arr.indexOf(item);
    if (index > -1) {
      return arr.splice(index, 1)
    }
  }
}

數(shù)組是個(gè)有序集合,我們?cè)趯?duì)數(shù)組中的元素進(jìn)行查找的時(shí)候也是一個(gè)有序進(jìn)行的過程，而最常用的查找方法便是filter過濾器.

過濾器的邏輯是：定義一個(gè)過濾函數(shù)，該函數(shù)會(huì)有序地被傳入數(shù)組中當(dāng)前下標(biāo)的元素，而它則需返回該函數(shù)是否符合其過濾要求，即結(jié)果為true或false
在數(shù)組中找出偶數(shù)項(xiàng)：

常用于權(quán)限驗(yàn)證

Array.isArray([]);//true
[] instanceof Array; //true
({}).toString.apply([])==="[object Array]";//true
[].constructor ===Array;//true

js實(shí)現(xiàn)對(duì)象-數(shù)組-字符串之間的相互轉(zhuǎn)化
對(duì)象-數(shù)組-字符串：　　

　　例如：
　　var data = {
           user:”userName”,
     　　pass:”12121”
　　};//這是一個(gè)對(duì)象
　　
　　如果要給這個(gè)data 對(duì)象追加一個(gè)屬性就比如：
 
　　new Date( ).getTime( );//獲取當(dāng)前時(shí)間到那個(gè)時(shí)間的時(shí)間間隔單位是毫秒；
 
　　data.time = new Date( ).getTime( );
 
　　此時(shí)data 里面就多了一個(gè)屬性： time : “ 獲取到的那個(gè)毫秒數(shù)"      
　　即：　var data = {
　　　　　　user:”userName”,
　　　　　　pass:”12121”
　　　　　　time:"獲取的時(shí)間數(shù)值"
　　　　　};
　
　1:　對(duì)象轉(zhuǎn)化為數(shù)組：
 
　　var arr = [ ];
 　　for ( var i in data ){
         　　 var str = i + “=“ + data[ i ]// i 就代表 data 里面的 user pass 等等 而data[ i ] 就代表 userName    12121 就是 i 所對(duì)應(yīng)的值；
          　　arr.push( str );
　　}
　　這樣就會(huì)得到 arr  =  [ user = userName, pass = 12121 ];
　　
　2:數(shù)組轉(zhuǎn)化為字符串:
　　
　　兩種方法：
　　　　1：arr.join( “&”)//意思是用&f符代替“ ， ”然后把數(shù)組變成字符串連接；          這時(shí)候 arr 里面的內(nèi)容就是 user = tangcaiye&pass = 12121
　　　　2： 比如：
　　　　　　var arr = [1,2];
　　　　　　var str = JSON.stringify(arr);//這樣也能轉(zhuǎn)化為字符串但現(xiàn)在還是數(shù)組的形式不過類型已經(jīng)是字符串了；
　　　　　　var arr2 = JSON.parse(str);//這樣就是把字符串解析 其實(shí)就是把外面的中括號(hào)去掉；
 
　　　　前后臺(tái)交互的：
　　　　后臺(tái)接收的時(shí)候只能接收字符串類型的；
　　　　如果前臺(tái)要傳遞一個(gè)數(shù)組就必須先把數(shù)組進(jìn)行stringify( )的操作再進(jìn)行傳遞；
　　　　而后臺(tái)返回給前臺(tái)的也是字符串簡(jiǎn)稱json串；這時(shí)需要解析一下就需要 JSON.parse( );操作完了再用；
 
　3：字符串轉(zhuǎn)化為數(shù)組：
　　
　　例如：
　　有個(gè)這樣的 ： url = “l(fā)ogin.php?user=“+user.value+”&pass=“+pass.value;
 
　　那我想要得到login.php就是這樣寫：var urlArr = url.split(“?”);
 
　　上面那個(gè)意思就是以？為分割點(diǎn)把這個(gè)字符串劈開變成一個(gè)數(shù)組的兩部分；
 
　　那么 aa = urlArr[0];此時(shí) aa 就等于 login.php;
　　bb = urlArr[1];此時(shí)bb 就等于 后面那一坨

　　　　

js怎么實(shí)現(xiàn)類似python的range函數(shù)

Array.apply(null, {length: N}).map(Number.call, Number)為range的hack；

Array.from()ES6為Array增加了from函數(shù)用來將其他對(duì)象轉(zhuǎn)換成數(shù)組。

當(dāng)然，其他對(duì)象也是有要求，也不是所有的，可以將兩種對(duì)象轉(zhuǎn)換成數(shù)組。

1.部署了Iterator接口的對(duì)象，比如：Set，Map，Array。

2.類數(shù)組對(duì)象，什么叫類數(shù)組對(duì)象，就是一個(gè)對(duì)象必須有l(wèi)ength屬性，沒有l(wèi)ength，轉(zhuǎn)出來的就是空數(shù)組。

比如：

arguments對(duì)象不是數(shù)組，而是一個(gè)類似數(shù)組的對(duì)象。所以為了使用數(shù)組的方法，必須使用Array.prototype.slice.call先將其轉(zhuǎn)為數(shù)組。rest 參數(shù)就不存在這個(gè)問題，它就是一個(gè)真正的數(shù)組，數(shù)組特有的方法都可以使用。

// arguments變量的寫法
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// rest參數(shù)的寫法
const sortNumbers = (...numbers) => numbers.sort();

這里用到的 rest參數(shù)

注意這里加了鍵值 0

使用Array對(duì)象的　concat()　方法，將多維數(shù)組合并為一個(gè)單維數(shù)組：

使用Array的indexOf()和splice()方法，找到并刪除/替換數(shù)組元素　

使用Array對(duì)象的slice()方法，來提取已有數(shù)組的一部分的一個(gè)淺拷貝(shallow copy)

注意slice()方法復(fù)制一個(gè)已有的數(shù)組的一部分，返回一個(gè)新數(shù)組。
它執(zhí)行的是淺拷貝，這意味著：

如果數(shù)組元素是對(duì)象，兩個(gè)數(shù)組都指向相同的對(duì)象，對(duì)新數(shù)組中的對(duì)象修改，會(huì)在舊的數(shù)組的相同對(duì)象中反應(yīng)出來。

如果數(shù)組元素是基本數(shù)據(jù)類型，例如，字符串或數(shù)字，它們將按照值(by value）來復(fù)制（值是按照引用來復(fù)制的）,也就是說，對(duì)新數(shù)組的修改，不會(huì)在舊數(shù)組中反映出來（如最上面的例子）

注意：　不要從傳遞給forEach的函數(shù)返回一個(gè)值，因?yàn)樵撝禃?huì)被丟棄
但是用map就需要
因?yàn)椋簃ap()的結(jié)果是一個(gè)新的數(shù)組，而不是像forEach()一樣修改最初的數(shù)組

可以將forEach()強(qiáng)制地和一個(gè)NodeList(querySelectorAll()返回的集合)一起使用

//使用querySelector找到第二列中的所有單元格
var cells = document.querySelectorAll("td+td");
[].forEach.call(cells, function(cell) {
  sum += parseFloat(cell.firstChild.data);
});

var arr = [1, 2, 3, 1, 2, 3, 4, 5, 5];
var resultArr = [];
//使用數(shù)組的sort()方法對(duì)arr進(jìn)行排序,也可以使用冒泡排序
arr.sort(function (a, b) {
    return a - b;
});
//排序后,arr變成了[1, 1, 2, 2, 3, 3, 4, 5, 5]

//使用for循環(huán),從上面的數(shù)組可以看出,如果數(shù)組元素arr[i]和arr[i+1]不相等,則表示arr[i]之后不再有與arr[i]相等的重復(fù)元素
for (i = 0; i < arr.length; i++) {
    if (arr[i] != arr[i + 1]) {
        //將arr[i]賦值給resultArr數(shù)組.
        resultArr[resultArr.length] = arr[i];
    }
}
console.log(resultArr); //1,2,3,4,5

[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]
    
    // [2, "12", 12, 1, 6, 13]

在這我們可以看見，重復(fù)的項(xiàng)目已經(jīng)被去掉了，包括NaN。正常情況下，NaN === NaN 返回的是false，但是在set里，一樣能夠幫你去重

但是這里大家可以看到，set返回的是一個(gè)對(duì)象，但是我們想要的是數(shù)組啊。

這回，就該輪到Array.from出場(chǎng)了，它的作用，就是可以把類數(shù)組對(duì)象、可迭代對(duì)象轉(zhuǎn)化為數(shù)組。

移除一個(gè)數(shù)組中的重復(fù)元素, 這些元素可能是多種不同數(shù)據(jù)類型
Lodash如何從數(shù)組中刪除重復(fù)項(xiàng)？

找出數(shù)組中的最小值

找出數(shù)組中的最大值

var arr = [1,2,3,4,5,6,7,8,9,10];
    arr.sort(function(){
        return Math.random() - 0.5;
    })
    console.log(arr);

首先： 當(dāng)return 的值

    小于 0 ，那么 a 會(huì)被排列到 b 之前；
    等于 0 ， a 和 b 的相對(duì)位置不變；
    大于 0 ， b 會(huì)被排列到 a 之前；

這里你會(huì) 發(fā)現(xiàn)起始 的時(shí)候數(shù)組是正序排列，每當(dāng)進(jìn)行一次排列的時(shí)候， 都會(huì)先隨機(jī)一個(gè)隨機(jī)數(shù) 
（注意這里的每一次排列 指 每一個(gè)紅框指一次排列， 共9次排列 ， 一次排列中可能存在多次比較）；

當(dāng)一次排列的 隨機(jī)數(shù)大于0.5 時(shí) 將會(huì)進(jìn)行第二次比較， 當(dāng)?shù)诙坞S機(jī)數(shù) 仍然大于0.5 時(shí) ，
    將會(huì)再 進(jìn)行一次比較， 直到 隨機(jī)數(shù)大于0.5 或者排列到第一位；

當(dāng)一次排列的 隨機(jī)數(shù) 小于0.5時(shí) 當(dāng)前比較的兩項(xiàng) 索引將不會(huì)改變 ，繼續(xù)下一次 的排列；

注意和下面的區(qū)別

更多查看Array.prototype.reduce()
這是reduce實(shí)現(xiàn)過程:

Array.prototype.reduce=function(callback){
    var total=0;
    this.forEach(function(e){ total=callback(total,parseInt(e));});
   return total;

 };

let arr = [2, 5, 8, 1, 4, 17, 89]

// filter 實(shí)現(xiàn)
let result = arr.filter(item => {
    return item > 9
}).length > 0


// find 實(shí)現(xiàn)
let result = arr.find(item => {
    return item > 9
})  !== undefined


// some 實(shí)現(xiàn)
let result =  arr.some(item => {
    return item > 9
})

下面是d3-array中涉及的一些數(shù)組操作

d3.min(array[, accessor]) <源碼>

對(duì)指定的 array 進(jìn)行自然排序返回最小值. 如果數(shù)組為空則返回 undefined. 可選的參數(shù) accessor 可以用來自定義如何訪問數(shù)組中的元素. accessor 將會(huì)被傳遞給 map 以在數(shù)組的每個(gè)元素上進(jìn)行調(diào)用, 返回值將會(huì)被作為對(duì)比依據(jù).

與內(nèi)置的 Math.min 不同, 這個(gè)方法可以忽略 undefined, null 和 NaN 等特殊值. 在可視化中用來忽略缺失數(shù)據(jù)是很有用的. 需要注意的是, 對(duì)比是以自然排序進(jìn)行的, 而非數(shù)值對(duì)比. 比如對(duì)字符串 ["20", "3"] 進(jìn)行 min 操作返回 20, 而對(duì)數(shù)值 [20, 3] 進(jìn)行 min 操作則返回 3.

d3.cross

d3.variance(array[, accessor])：　準(zhǔn)確的說它返回的是總體方差無偏估計(jì)量

let a = [ { name:"1", status:"1" }, { name:"2", status:"1" }, { name:"3", status:"2" }, { name:"4", status:"2" }, { name:"5", status:"3" }, { name:"6", status:"bbb" } ]
     
{ "1":[{ name:"1", status:"1" }, { name:"2", status:"1" }], "2":[{ name:"3", status:"2" }, { name:"4", status:"2" } ], "3":[ { name:"5", status:"3" }],"bbb":[{ name:"6", status:"bbb" }] }

用ES6如何把上面的變成下面這種結(jié)構(gòu).
不用一個(gè)一個(gè) push，對(duì)每一個(gè) status 直接 filter 一下就行了

let result = a.reduce((acc, {status}) => (
  acc[status] ? acc: {
    ...acc,
    [status]: a.filter(item => item.status === status)
  }
), {})

export function delFromArr (val, arr) {
  if (arr && arr.indexOf(val) !== -1) {
    arr.splice(arr.indexOf(val), 1)
  }
}

export function clearArr (...arrs) {
  arrs && arrs.forEach(arr => arr.splice(0, arr.length))
}

/**
 * key: "val"
 * arr: [{val: 1}, {val: 2}]
 * return [1, 2]
 */
export function getKeyMap (key, arr) {
  return arr.map(i => {
    return i[key]
  })
}

/**
 * key: "val"
 * arr: [{val: 1}, {val: 2}]
 * return 2
 */
export function getMax (key, arr) {
  let result = arr.reduce((pre, next) => {
    return parseInt(pre[key]) > parseInt(next[key]) ? pre : next
  })

  return result[key]
}

export function arrDelObj (arr, key, val) {
  if (!(arr && key && val)) {
    console.error("arrDelObj error: arr, key or val is undefined")
  }
  return arr.filter(item => {
    return item[key] !== val
  })
}

每個(gè)菜鳥前端都會(huì)遇到一個(gè)菜鳥后端督促你學(xué)習(xí)數(shù)據(jù)處理，下面羅列一些遇到過的數(shù)據(jù)處理.

歸一化下面數(shù)據(jù)，變成想要的格式

接口數(shù)據(jù)：

前端想要的數(shù)據(jù):

實(shí)現(xiàn)：

降維、去重、排序

給出：let arr = [[1, 2, 3], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10, 0];
需求：降維、去重、排序
做法：Array.from(new Set(arr.flat(Infinity).sort((a, b) => a - b)))


解析如下：
0. arr.flat(Infinity)  //直接降維值一維數(shù)組。
1. sort     //排序就不說了。
2. new Set()  //達(dá)到去重效果
3. Array.from(上一步輸出的結(jié)果)  //將上一步結(jié)果轉(zhuǎn)換為數(shù)組

Array.prototype.concat.apply([], arr)為啥這個(gè)方法會(huì)把數(shù)組的深度降 1 呢？

arr=[[1,2],3,4]。arr是一個(gè)二維數(shù)組，通過apply方法，apply方法第二個(gè)參數(shù)是arguments，即參數(shù)數(shù)組，前面的公式就變成了[].concat([1,2],[3,4],[5]),concat方法的參數(shù)是一個(gè)元素，該元素會(huì)被直接插入到新數(shù)組中；如果參數(shù)是一個(gè)數(shù)組，該數(shù)組的各個(gè)元素將被插入到新數(shù)組中；于是最后的結(jié)果就是[1,2,3,4,5]相當(dāng)于把原來的二維數(shù)組拉成了一緯數(shù)組

JS數(shù)組學(xué)習(xí)筆記
Array MDN
《數(shù)據(jù)結(jié)構(gòu)與算法javascript描述》
JavaScript30-Challenge/04 - Array Cardio Day 1/
ES6，Array.from()函數(shù)的用法
《javascript經(jīng)典實(shí)例》
Array.prototype.slice()
Array.prototype.forEach()
Array.prototype.map()
ES6的新方法實(shí)現(xiàn)數(shù)組去重
d3-array
lodash
d3-array 解釋
https://segmentfault.com/q/10...
d3array 測(cè)試
JavaScript數(shù)組方法速查手冊(cè)極簡(jiǎn)版