學習筆記: JS數組

時間  2020-09-29
標籤 學習 筆記 數組 欄目 JavaScript 简体版
原文   原文鏈接

JavaScript基礎 - - 數組

數組是一個有序的數據集合，使用數組名稱和索引進行訪問。javascript

let arr = [1,2,3];
arr[0] = 1;

在JavaScript中數組沒有明確數據類型。php

let arr = [1, 'hi', undefined, fun()];

1.建立數組

建立數組方法有3種：html

let arr = new Array(ele1, ele2, ele3, ..., eleN);
let arr = Array(ele1, ele2, ele3, ..., eleN);
let arr = [ele1, ele2, ele3, ..., eleN];

上面是已知數組元素，另一種還有建立一個長度不爲0，且有沒有任何元素的數組：前端

let len = 5;

let arr = new Array(len); // 方法1
let arr = Array(len);     // 方法2
let arr = [];             // 方法3
arr.length = len;

若傳入的數組長度不是整數，則報錯：vue

let arr = new Array(3.5); 
let arr = Array(3.5); 
let arr = [];
arr.length = 3.5;
//Uncaught RangeError: Invalid array length

其中要注意這兩種建立方法是不一樣的：java

let arr1 = new Array(4);   // [empty × 4]
let arr2 = [4];            // [4]
for(let k in arr1){
    console.log(k);
}  // undefined
for(let k in arr2){
    console.log(k);
}  // 0

2.使用數組

2.1 簡單使用

獲取數組指定位置的值：python

let a = [1,2,5];
a[0];  // 1
a[2];  // 5
a[3];  // undefined

獲取數組長度：git

let a = [1,2,5];
a.length;    // 3
a["length"]; // 3

設置數組指定位置的值：es6

let a = [1,2,5];
a[0] = 9;
a[2] = 99;
a[3] = 999;

2.2 理解數組length

  • 數組的索引值是從0開始，即上面數組索引0的是1,索引1的值是2，依次下去。
  • 數組length永遠返回的是數組最後一個元素的索引加1。
  • 可經過arr.length = 0來清空數組。
  • 可經過arr.length = len來設置數組長度。

2.3 遍歷數組

遍歷數組就是以某種方法處理數組的每一個元素，簡單以下：github

  • 使用for循環：
let arr = ["pingan", "leo", "robin"];
for (let i = 0; i<arr.length; i++){
    // 處理元素的操做
    console.log(`第${i}個元素是：${arr[i]}；`)
}
// 第0個元素是：pingan；
// 第1個元素是：leo；
// 第2個元素是：robin；
  • 使用for...in：
let arr = ["pingan", "leo", "robin"];
for(let i in arr){
    console.log(`第${i}個元素是：${arr[i]}；`)
}
// 第0個元素是：pingan；
// 第1個元素是：leo；
// 第2個元素是：robin；
  • 使用forEach：

arr.forEach(callback) 接收一個回調方法。

callback(val, index, array) : 接收三個參數：

  • val : 當前處理的元素；
  • index : 當前處理的元素的索引；
  • array : 正在處理的數組；

可參考MDN Array.prototype.forEach 的詳細介紹。

let arr = ["pingan", "leo", "robin"];
arr.forEach(function(val, i, array){
    console.log(`第${i}個元素是：${val}；`)
})

3. 數組方法（訪問和修改）

方法名稱 方法介紹
concat() 鏈接兩個或更多的數組，並返回結果。
join() 把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。
pop() 刪除並返回數組的最後一個元素
push() 向數組的末尾添加一個或更多元素，並返回新的長度。
reverse() 顛倒數組中元素的順序。
shift() 刪除並返回數組的第一個元素
slice() 從某個已有的數組返回選定的元素
sort() 對數組的元素進行排序
splice() 刪除元素，並向數組添加新元素。
toSource() 返回該對象的源代碼。
toString() 把數組轉換爲字符串，並返回結果。
toLocaleString() 把數組轉換爲本地數組，並返回結果。
unshift() 向數組的開頭添加一個或更多元素，並返回新的長度。
valueOf() 返回數組對象的原始值
indexOf() 在數組中搜索指定元素並返回第一個匹配的索引
lastIndexOf() 在數組中搜索指定元素並返回最後一個匹配的索引

可參考W3school JavaScript Array 對象 的詳細介紹。

3.1 concat()

鏈接兩個或更多的數組，並返回一個新數組。

  • 語法:

arr.concat(a1, a2, ..., an);

  • 參數:

arr：目標數組；

a1,a2,...,an：須要合併的元素；

let a1 = [1,2,3];
let a2 = [9,99,999];
let a = a1.concat(a2);
// [1, 2, 3, 9, 99, 999]

3.2 join()

使用指定分隔符，鏈接兩個或多個數組的元素，返回一個字符串。

  • 語法:

arr.join(sep);

  • 參數:

arr：目標數組；

sep：鏈接的分隔符，默認值爲「,」；

let arr = ["pingan", "leo", "robin"];
arr.join();    // "pingan,leo,robin"
arr.join("");  // "pinganleorobin"
arr.join(","); // "pingan,leo,robin"

3.3 pop()和push()

  • pop(): 刪除並返回數組最後一個元素，改變原數組。
  • push(item): 向數組末尾添加一個或多個元素，改變原數組，返回新的數組長度。

方便記憶和理解：兩個都是從數組末尾操做，pop()是刪除最後一個元素，push()是向最後一位添加新的元素。

let arr = ["pingan", "leo"];
let a1 = arr.pop();              // "leo"
let a2 = arr.push("robin","hi"); // 3
arr;   // ["pingan", "robin", "hi"]

3.4 shift()和unshift()

  • shift(): 刪除並返回數組第一個元素，改變原數組。
  • unshift(item): 向數組頭部添加一個或多個元素，改變原數組，返回新的數組長度。

方便記憶和理解：兩個都是從數組頭部操做，shift()是刪除第一個元素，unshift()是向第一位添加新的元素。

let arr = ["pingan", "leo"];
let a1 = arr.shift();               // "pingan"
let a2 = arr.unshift("robin","hi"); // 3
arr;   // ["robin", "hi", "leo"]

3.5 reverse()

顛倒數組中元素的順序，改變原數組。

let arr = [1, 2, 3, 4];
arr.reverse();  // [4, 3, 2, 1]

3.6 slice()

用於提取數組中一個片斷，做爲新數組返回。

slice(start[,end]): 接收2個參數：

  • start:  必需，指定起始索引，若負數則從數組最後開始算起，-1爲倒數第一位，-2爲倒數第二位，以此類推。
  • end： 可選，指定結束索引，若沒傳則表示到數組結束。

注意：

end如有指定的話，是不包含end索引上的值。

let arr = [1, 2, 3, 5, 6];
let a1 = arr.slice(2);    // [3, 5, 6]
let a2 = arr.slice(2,3);  // [3]

3.7 splice()

從數組中刪除指定索引開始的項目，而後返回被刪除的項目。

  • 語法：

arr.splice(index, num, a1, a2,...,an);

  • 參數：

index: 必需，起始位置的索引，若負數則從數組最後開始算起；

num：必需，刪除的數量，若爲0則不刪除；

a1,a2,...an：可選，爲數組添加的元素；

let arr = [1, 2, 3, 4];
let a = arr.splice(1, 2, "hi", "leo");
// a =>  [2, 3]
// arr =>  [1, "hi", "leo", 4]

3.8 sort()

對數組的元素進行排序，改變原數組。

可接受一個回調方法做爲比較函數，來決定排序方式。

比較函數應該具備兩個參數 a 和 b，返回值以下：

若 a 小於 b，在排序後的數組中 a 應該出如今 b 以前，則返回一個小於 0 的值。

若 a 等於 b，則返回 0。

若 a 大於 b，則返回一個大於 0 的值。

let a1 = [1,3,6,9,10];
a1.sort(); // [1, 10, 3, 6, 9]
a1.sort(function(a,b){
    return a > b ? 1 : a < b ? -1 : 0;
})         // [1, 3, 6, 9, 10]

3.9 indexOf()和lastIndexOf()

二者都是在數組搜索指定元素，只是indexOf()返回的是搜索到的第一個元素的索引，而lastIndexOf()返回的是搜索到的最後一個元素的索引。

語法：

indexOf(ele[,start])和lastIndexOf(ele[,start]);

參數：

  • ele:  須要搜索的元素。
  • start:  開始搜索的索引。
let arr = ["hh1", "hh2", "hh2", "hh2", "hh3", "hh4"];
let a1 = arr.indexOf("hh2");      // 1
let a2 = arr.lastIndexOf("hh2");  // 3
let a3 = arr.indexOf("hh2",2);    // 2

4. 數組方法（迭代）

方法名稱 方法介紹
forEach() 爲數組中的每一個元素執行一次回調函數。
every() 若是數組中的每一個元素都知足測試函數，則返回 true，不然返回 false。
some() 若是數組中至少有一個元素知足測試函數，則返回 true，不然返回 false。
filter() 將全部在過濾函數中返回 true 的數組元素放進一個新數組中並返回。
map() 返回一個由回調函數的返回值組成的新數組。
reduce() 從左到右爲每一個數組元素執行一次回調函數，並把上次回調函數的返回值放在一個暫存器中傳給下次回調函數，並返回最後一次回調函數的返回值。
reduceRight() 從右到左爲每一個數組元素執行一次回調函數，並把上次回調函數的返回值放在一個暫存器中傳給下次回調函數，並返回最後一次回調函數的返回值。

如下是ES6規範新增的數組方法：

方法名稱 方法介紹
keys() 返回一個數組迭代器對象，該迭代器會包含全部數組元素的鍵。
values() 返回一個數組迭代器對象，該迭代器會包含全部數組元素的值。
entries() 返回一個數組迭代器對象，該迭代器會包含全部數組元素的鍵值對。
find() 找到第一個知足測試函數的元素並返回那個元素的值，若是找不到，則返回 undefined。
findIndex() 找到第一個知足測試函數的元素並返回那個元素的索引，若是找不到，則返回 -1。

可參考MDN Array 的詳細介紹。

4.1 forEach()

對數組的每一個元素執行一次提供的函數。

語法：

arr.forEach(callback)。

參數：

callback(val, index, arr) : 須要執行的函數，接收三個參數：

  • val : 正在處理的當前元素;
  • index : 可選，正在處理的當前元素的索引;
  • arr : 可選，正在操做的數組;
let a = [1,3,5,7];
a.forEach(function(val, index, arr){
    arr[index] = val * 2
})
a ; // [2, 6, 10, 14]

4.2 every()

測試數組的全部元素是否都經過了指定函數的測試。

語法：

arr.every(callback)。

參數：

callback(val, index, arr) : 須要執行的函數，接收三個參數：

  • val : 正在處理的當前元素;
  • index : 可選，正在處理的當前元素的索引;
  • arr : 可選，正在操做的數組;

返回值：

若都經過返回true，不然返回false。

let a = [1, "", "aa", 13, 6];
let res = a.every(function(val, index, arr){
    return typeof val == "number";
})
res;// false

let b = [1, 2, 3];
let r = b.every(function(val, index, arr){
    return typeof val == "number";
})
r;  // true

4.3 some()

測試數組中的某些元素是否經過由提供的函數實現的測試。

語法：

arr.some(callback)。

參數：

callback(val, index, arr) : 須要執行的函數，接收三個參數：

  • val : 正在處理的當前元素;
  • index : 可選，正在處理的當前元素的索引;
  • arr : 可選，正在操做的數組;

返回值：

如有一個經過返回true，不然返回false。

let a = [1, "", "aa", 13, 6];
let res = a.some(function(val, index, arr){
    return typeof val == "number";
})
res;// true

let b = [1, 2, 3];
let r = b.some(function(val, index, arr){
    return typeof val == "number";
})
r;  // true

4.4 filter()

將全部在過濾函數中返回 true 的數組元素放進一個新數組中並返回。

語法：

arr.filter(callback)。

參數：

callback(val, index, arr) : 須要執行的函數，接收三個參數：

  • val : 正在處理的當前元素;
  • index : 可選，正在處理的當前元素的索引;
  • arr : 可選，正在操做的數組;

返回值：

一個返回經過測試的元素的數組，若都沒有則返回空數組。

let a = [1, "", "aa", 13, 6];
let res = a.filter(function(val, index, arr){
    return typeof val == "number";
})
res;//[1, 13, 6]

4.5 map()

傳入一個操做函數，對每一個元素執行此方法，並返回一個執行後的數組。

語法：

arr.map(callback)。

參數：

callback(val, index, arr) : 須要執行的函數，接收三個參數：

  • val : 正在處理的當前元素;
  • index : 可選，正在處理的當前元素的索引;
  • arr : 可選，正在操做的數組;

返回值：

一個新數組，每一個元素都是回調函數的結果。

let a = [1, 3, 5];
let b = a.map(function(val, index, arr){
    return val + 2;
})
b; //[3, 5, 7]

5. 數組的拓展(ES6)

5.1 拓展運算符

拓展運算符使用(...)，相似rest參數的逆運算，將數組轉爲用(,)分隔的參數序列。

console.log(...[1, 2, 3]);   // 1 2 3 
console.log(1, ...[2,3], 4); // 1 2 3 4

拓展運算符主要使用在函數調用。

function f (a, b){
    console.log(a, b);
}
f(...[1, 2]); // 1 2

function g (a, b, c, d, e){
    console.log(a, b, c, d, e);
}
g(0, ...[1, 2], 3, ...[4]); // 0 1 2 3 4

若拓展運算符後面是個空數組，則不產生效果。

[...[], 1]; // [1]

替代apply方法

// ES6以前
function f(a, b, c){...};
var a = [1, 2, 3];
f.apply(null, a);

// ES6以後
function f(a, b, c){...};
let a = [1, 2, 3];
f(...a);

// ES6以前
Math.max.apply(null, [3,2,6]);

// ES6以後
Math.max(...[3,2,6]);

拓展運算符的運用

  • (1)複製數組：

一般咱們直接複製數組時，只是淺拷貝，若是要實現深拷貝，可使用拓展運算符。

// 一般狀況 淺拷貝
let a1 = [1, 2];
let a2 = a1; 
a2[0] = 3;
console.log(a1,a2); // [3,2] [3,2]

// 拓展運算符 深拷貝
let a1 = [1, 2];
let a2 = [...a1];
// let [...a2] = a1; // 做用相同
a2[0] = 3;
console.log(a1,a2); // [1,2] [3,2]
  • (2)合併數組：

注意，這裏合併數組，只是淺拷貝。

let a1 = [1,2];
let a2 = [3];
let a3 = [4,5];

// ES5 
let a4 = a1.concat(a2, a3);

// ES6
let a5 = [...a1, ...a2, ...a3];

a4[0] === a1[0]; // true
a5[0] === a1[0]; // true
  • (3)與解構賦值結合：

與解構賦值結合生成數組，可是使用拓展運算符須要放到參數最後一個，不然報錯。

let [a, ...b] = [1, 2, 3, 4]; 
// a => 1  b => [2,3,4]

let [a, ...b] = [];
// a => undefined b => []

let [a, ...b] = ["abc"];
// a => "abc"  b => []

5.2 Array.from()

將 類數組對象 和 可遍歷的對象，轉換成真正的數組。

// 類數組對象
let a = {
    '0':'a',
    '1':'b',
    length:2
}
let arr = Array.from(a);

// 可遍歷的對象
let a = Array.from([1,2,3]);
let b = Array.from({length: 3});
let c = Array.from([1,2,3]).map(x => x * x);
let d = Array.from([1,2,3].map(x => x * x));

5.3 Array.of()

將一組數值，轉換成數組，彌補Array方法參數不一樣致使的差別。

Array.of(1,2,3);    // [1,2,3]
Array.of(1).length; // 1

Array();       // []
Array(2);      // [,] 1個參數時，爲指定數組長度
Array(1,2,3);  // [1,2,3] 多於2個參數，組成新數組

5.4 find()和findIndex()

find()方法用於找出第一個符合條件的數組成員，參數爲一個回調函數，全部成員依次執行該回調函數，返回第一個返回值爲true的成員，若是沒有一個符合則返回undefined。

[1,2,3,4,5].find( a => a < 3 ); // 1

回調函數接收三個參數，當前值、當前位置和原數組。

[1,2,3,4,5].find((value, index, arr) => {
    // ...
});

findIndex()方法與find()相似，返回第一個符合條件的數組成員的位置，若是都不符合則返回-1。

[1,2,3,4].findIndex((v,i,a)=>{
    return v>2;
}); // 2

5.5 fill()

用於用指定值填充一個數組，一般用來初始化空數組，並抹去數組中已有的元素。

new Array(3).fill('a');   // ['a','a','a']
[1,2,3].fill('a');        // ['a','a','a']

而且fill()的第二個和第三個參數指定填充的起始位置和結束位置。

[1,2,3].fill('a',1,2);//  [1, "a", 3]

5.6 entries(),keys(),values()

主要用於遍歷數組，entries()對鍵值對遍歷，keys()對鍵名遍歷，values()對鍵值遍歷。

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

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

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

5.7 includes()

用於表示數組是否包含給定的值，與字符串的includes方法相似。

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

第二個參數爲起始位置，默認爲0，若是負數，則表示倒數的位置，若是大於數組長度，則重置爲0開始。

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

5.8 flat(),flatMap()

flat()用於將數組一維化，返回一個新數組，不影響原數組。

默認一次只一維化一層數組，若需多層，則傳入一個整數參數指定層數。

若要一維化全部層的數組，則傳入Infinity做爲參數。

[1, 2, [2,3]].flat();        // [1,2,2,3]
[1,2,[3,[4,[5,6]]]].flat(3); // [1,2,3,4,5,6]
[1,2,[3,[4,[5,6]]]].flat('Infinity'); // [1,2,3,4,5,6]

flatMap()是將原數組每一個對象先執行一個函數，在對返回值組成的數組執行flat()方法，返回一個新數組，不改變原數組。

flatMap()只能展開一層。

[2, 3, 4].flatMap((x) => [x, x * 2]); 
// [2, 4, 3, 6, 4, 8]

6. 數組的拓展(ES7)

6.1 Array.prototype.includes()方法

includes()用於查找一個值是否在數組中，若是在返回true，不然返回false。

['a', 'b', 'c'].includes('a');     // true
['a', 'b', 'c'].includes('d');     // false

includes()方法接收兩個參數，搜索的內容和開始搜索的索引，默認值爲0，若搜索值在數組中則返回true不然返回false。

['a', 'b', 'c', 'd'].includes('b');      // true
['a', 'b', 'c', 'd'].includes('b', 1);   // true
['a', 'b', 'c', 'd'].includes('b', 2);   // false

與indexOf方法對比，下面方法效果相同：

['a', 'b', 'c', 'd'].indexOf('b') > -1;  // true
['a', 'b', 'c', 'd'].includes('b');      // true

includes()與indexOf對比：

  • includes相比indexOf更具語義化，includes返回的是是否存在的具體結果，值爲布爾值，而indexOf返回的是搜索值的下標。
  • includes相比indexOf更準確，includes認爲兩個NaN相等，而indexOf不會。
let a = [1, NaN, 3];
a.indexOf(NaN);     // -1
a.includes(NaN);    // true

另外在判斷+0與-0時，includes和indexOf的返回相同。

[1, +0, 3, 4].includes(-0);   // true
[1, +0, 3, 4].indexOf(-0);    // 1

參考資料

1.MDN 索引集合類
2.MDN 數組對象

JS中的數組是弱類型的，數組中能夠含有不一樣類型的元素。數組元素甚至能夠是對象或其它數組。
JS引擎通常會優化數組，按索引訪問數組經常比訪問通常對象屬性明顯迅速。
數組長度範圍 from 0 to 4,294,967,295(2^23 - 1)

JavaScript 中的數據一般由一個數組來表示, 因此當可視化或分析數據時每每也會操做數組. 常見的數組操做包括切片, 過濾, 遍歷等等. JavaScript 自己支持的數組操做能夠參考 這裏.

主要分爲三大類：
JavaScript 中 修改數組自身 的方法:

  • array.pop - 移除最後一個元素.
  • array.push - 追加一個或多個元素.
  • array.reverse - 數組翻轉.
  • array.shift - 移除第一個元素.
  • array.sort - 排序.
  • array.splice - 添加或者移除.
  • array.unshift - 在數組前添加一個或多個元素.

JavaScript 中數組的 存取 方法 :

  • array.concat - 將數組與數組或值合併.

圖片描述

再看看解構方法

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

const result = [...arr1, ...arr2];
  • array.join - 只用指定的字符串將數組轉爲一個字符串.
  • array.slice - 提取切片.
  • array.indexOf - 找出指定元素的索引.(搜索)
  • array.lastIndexOf - 找出指定元素的最後一個索引.

JavaScript 中數組的 迭代方法 :

  • array.filter - 過濾.
  • array.forEach - 對每一個元素執行某個方法.
  • array.every - 是否每一個元素都符合給定的條件.
  • array.map - 根據指定的操做對每一個元素執行後返回一個新的數組.
  • array.some - 是否存在符合某個條件的元素.
  • array.reduce - 從左到右執行 reduce 操做並返回一個值.
  • array.reduceRight - 從右到左執行 reduce 操做並返回一個值.

基礎

數組在數學中也能夠稱爲「數列」，也就是以數字或其餘類型內容爲元素的有序集合。

// 整型數字數組
const intArray = [ 1, 2, 3, 4, 5 ]
// 浮點型數字數組
const floatArray = [ 1.1, 1.2, 1.3, 1.4, 1.5 ]
// 字符串數組
const strArray = [ 'a', 'b', 'c', 'd', 'e' ]...

在數據科學領域中，數組能夠說是承載了絕大部分數據的表達任務，不管是規整的數據表，仍是隨時間排序的時間序列，或是複雜多變的非結構化數據，均可以使用數組或類數組的形式表達。

數組建立

圖片描述

數組讀寫

圖片描述

數組 VS. 通常對象

相同點

  • 數組是對象，對象不必定是數組
  • 均可以繼承
  • 均可以當作對象添加刪除屬性

不一樣點

  • 數組自動更新length
  • 數組操做一般被優化
  • 數組對象繼承Array.prototype上的大量數組操做方法

稀疏數組

稀疏數組並不含有從0開始的連續索引。通常length屬性值比實際元素個數大。
圖片描述

圖片描述

for in 能夠枚舉可枚舉屬性名，對象，數組都是可使用的，能夠把數組理解爲一種特殊的對象，經常使用for in枚舉稀疏數組

數組的length屬性

咱們前面講到數組是一個有序集合，那麼就意味着它包含了若干個元素。固然了，數組可空。由於它是一個包含了若干元素的集合，因此它就確定自然地包含了一個屬性，那即是元素的數量。

圖片描述

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

增刪改查

由於在計算機中的可用內存是有限的，因此大部分程序在建立數據（好比數組）的時候，都須要先設定好該數據的所佔長度。但在 JavaScript 中這並不須要，由於實際在 JavaScript 中數組就是一個特殊的對象。

因此在 JavaScript 中，對數組內容的修改會比較方便。「增查改刪」是數據庫應用領域中最多見的操做，這在數組中也是同樣的。

添加到末端append

  • array.push

圖片描述

添加首端prepend

圖片描述

添加到中間insert

圖片描述

array.splice(start, deleteCount, element)

  • 第二個參數deleteCount用來刪除數組中某個位置開始的若干個元素
  • 若是設置爲0，該方法第三參數以及後面的參數會被插入到start位置(array[start]開始)

刪除數組中某特定元素

let keys = ['純新客', '品類轉化新客', '老客']
    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)
    }
  }
}

查找內容

數組是個有序集合,咱們在對數組中的元素進行查找的時候也是一個有序進行的過程，而最經常使用的查找方法即是filter過濾器.

過濾器的邏輯是：定義一個過濾函數，該函數會有序地被傳入數組中當前下標的元素，而它則需返回該函數是否符合其過濾要求，即結果爲true或false
在數組中找出偶數項：

圖片描述

判斷字符串是不是數組中元素

經常使用於權限驗證

圖片描述

字符串轉數組

圖片描述

圖片描述

數組轉字符串

圖片描述
圖片描述

判斷是不是數組

Array.isArray([]);//true
[] instanceof Array; //true
({}).toString.apply([])==='[object Array]';//true
[].constructor ===Array;//true
js實現對象-數組-字符串之間的相互轉化
對象-數組-字符串：　　

　　例如：
　　var data = {
           user:」userName」,
     　　pass:」12121」
　　};//這是一個對象
　　
　　若是要給這個data 對象追加一個屬性就好比：
 
　　new Date( ).getTime( );//獲取當前時間到那個時間的時間間隔單位是毫秒；
 
　　data.time = new Date( ).getTime( );
 
　　此時data 裏面就多了一個屬性： time : 「 獲取到的那個毫秒數"      
　　即：　var data = {
　　　　　　user:」userName」,
　　　　　　pass:」12121」
　　　　　　time:"獲取的時間數值"
　　　　　};
　
　1:　對象轉化爲數組：
 
　　var arr = [ ];
 　　for ( var i in data ){
         　　 var str = i + 「=「 + data[ i ]// i 就表明 data 裏面的 user pass 等等 而data[ i ] 就表明 userName    12121 就是 i 所對應的值；
          　　arr.push( str );
　　}
　　這樣就會獲得 arr  =  [ user = userName, pass = 12121 ];
　　
　2:數組轉化爲字符串:
　　
　　兩種方法：
　　　　1：arr.join( 「&」)//意思是用&f符代替「 ， 」而後把數組變成字符串鏈接；          這時候 arr 裏面的內容就是 user = tangcaiye&pass = 12121
　　　　2： 好比：
　　　　　　var arr = [1,2];
　　　　　　var str = JSON.stringify(arr);//這樣也能轉化爲字符串但如今仍是數組的形式不過類型已是字符串了；
　　　　　　var arr2 = JSON.parse(str);//這樣就是把字符串解析 其實就是把外面的中括號去掉；
 
　　　　先後臺交互的：
　　　　後臺接收的時候只能接收字符串類型的；
　　　　若是前臺要傳遞一個數組就必須先把數組進行stringify( )的操做再進行傳遞；
　　　　然後臺返回給前臺的也是字符串簡稱json串；這時須要解析一下就須要 JSON.parse( );操做完了再用；
 
　3：字符串轉化爲數組：
　　
　　例如：
　　有個這樣的 ： url = 「login.php?user=「+user.value+」&pass=「+pass.value;
 
　　那我想要獲得login.php就是這樣寫：var urlArr = url.split(「?」);
 
　　上面那個意思就是以？爲分割點把這個字符串劈開變成一個數組的兩部分；
 
　　那麼 aa = urlArr[0];此時 aa 就等於 login.php;
　　bb = urlArr[1];此時bb 就等於 後面那一坨

　　　　

怎麼實現range函數

js怎麼實現相似python的range函數

Array.apply(null, {length: N}).map(Number.call, Number)爲range的hack；
圖片描述

圖片描述

圖片描述
圖片描述

對象轉數組

Array.from()ES6爲Array增長了from函數用來將其餘對象轉換成數組。
圖片描述

固然，其餘對象也是有要求，也不是全部的，能夠將兩種對象轉換成數組。

1.部署了Iterator接口的對象，好比：Set，Map，Array。

2.類數組對象，什麼叫類數組對象，就是一個對象必須有length屬性，沒有length，轉出來的就是空數組。

好比：

arguments對象不是數組，而是一個相似數組的對象。因此爲了使用數組的方法，必須使用Array.prototype.slice.call先將其轉爲數組。rest 參數就不存在這個問題，它就是一個真正的數組，數組特有的方法均可以使用。

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

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

這裏用到的 rest參數

圖片描述

在數組中搜索

圖片描述

數組轉對象

圖片描述

注意這裏加了鍵值 0

用concat()和apply()將一個兩維數組扁平化

使用Array對象的　concat()　方法，將多維數組合併爲一個單維數組：

圖片描述

刪除或替換數組元素

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

圖片描述

圖片描述

提取一個數組的一部分

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

圖片描述
圖片描述
圖片描述
注意slice()方法複製一個已有的數組的一部分，返回一個新數組。
它執行的是淺拷貝，這意味着：

  • 若是數組元素是對象，兩個數組都指向相同的對象，對新數組中的對象修改，會在舊的數組的相同對象中反應出來。

圖片描述

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

圖片描述

對每一個數組元素應用一個函數

圖片描述

注意：　不要從傳遞給forEach的函數返回一個值，由於該值會被丟棄
可是用map就須要
由於：map()的結果是一個新的數組，而不是像forEach()同樣修改最初的數組

圖片描述

使用forEach() and call() 遍歷querySelectAll()的結果

能夠將forEach()強制地和一個NodeList(querySelectorAll()返回的集合)一塊兒使用 
//使用querySelector找到第二列中的全部單元格
var cells = document.querySelectorAll("td+td");
[].forEach.call(cells, function(cell) {
  sum += parseFloat(cell.firstChild.data);
});

數組去重

sort()方法排序後比較

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

//使用for循環,從上面的數組能夠看出,若是數組元素arr[i]和arr[i+1]不相等,則表示arr[i]以後再也不有與arr[i]相等的重複元素
for (i = 0; i < arr.length; i++) {
    if (arr[i] != arr[i + 1]) {
        //將arr[i]賦值給resultArr數組.
        resultArr[resultArr.length] = arr[i];
    }
}
console.log(resultArr); //1,2,3,4,5

set方法

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

圖片描述

在這咱們能夠看見，重複的項目已經被去掉了，包括NaN。正常狀況下，NaN === NaN 返回的是false，可是在set裏，同樣可以幫你去重

可是這裏你們能夠看到，set返回的是一個對象，可是咱們想要的是數組啊。

這回，就該輪到Array.from出場了，它的做用，就是能夠把類數組對象、可迭代對象轉化爲數組。
圖片描述
圖片描述

filter方法

clipboard.png

緩存方法

clipboard.png

lodash實現

移除一個數組中的重複元素, 這些元素多是多種不一樣數據類型
Lodash如何從數組中刪除重複項？

數組元素比大小

找出數組中的最小值

圖片描述

找出數組中的最大值

圖片描述

快速的讓一個數組亂序

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

圖片描述

首先： 當return 的值

    小於 0 ，那麼 a 會被排列到 b 以前；
    等於 0 ， a 和 b 的相對位置不變；
    大於 0 ， b 會被排列到 a 以前；

這裏你會 發現起始 的時候數組是正序排列，每當進行一次排列的時候， 都會先隨機一個隨機數 
（注意這裏的每一次排列 指 每個紅框指一次排列， 共9次排列 ， 一次排列中可能存在屢次比較）；

當一次排列的 隨機數大於0.5 時 將會進行第二次比較， 當第二次隨機數 仍然大於0.5 時 ，
    將會再 進行一次比較， 直到 隨機數大於0.5 或者排列到第一位；

當一次排列的 隨機數 小於0.5時 當前比較的兩項 索引將不會改變 ，繼續下一次 的排列；

數組求最大值

圖片描述

複製數組

圖片描述

數組合並

圖片描述

圖片描述

注意和下面的區別
圖片描述

圖片描述

迭代輸出

圖片描述

數組內元素求和

圖片描述
更多查看Array.prototype.reduce()
這是reduce實現過程:

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 實現
let result = arr.filter(item => {
    return item > 9
}).length > 0


// find 實現
let result = arr.find(item => {
    return item > 9
})  !== undefined


// some 實現
let result =  arr.some(item => {
    return item > 9
})

d3-array

下面是d3-array中涉及的一些數組操做
圖片描述

統計類方法 Statistics

對指定的 array 進行天然排序返回最小值. 若是數組爲空則返回 undefined. 可選的參數 accessor 能夠用來自定義如何訪問數組中的元素. accessor 將會被傳遞給 map 以在數組的每一個元素上進行調用, 返回值將會被做爲對比依據.

與內置的 Math.min 不一樣, 這個方法能夠忽略 undefined, null 和 NaN 等特殊值. 在可視化中用來忽略缺失數據是頗有用的. 須要注意的是, 對比是以天然排序進行的, 而非數值對比. 好比對字符串 ['20', '3'] 進行 min 操做返回 20, 而對數值 [20, 3] 進行 min 操做則返回 3.

笛卡爾乘積

d3.cross

圖片描述

方差

d3.variance(array[, accessor])：　準確的說它返回的是整體方差無偏估計量
圖片描述

將數組中相鄰的兩個元素兩兩結合

圖片描述

數組元素最大值

圖片描述

數組元素佔最大值比例（數據歸一化）

圖片描述

lodash

常見數組操做問題

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如何把上面的變成下面這種結構.
不用一個一個 push，對每個 status 直接 filter 一下就好了

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

圖片描述

圖片描述

ramda

常見數組utils

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
  })
}

圖片描述
圖片描述

特異性數據處理

每一個菜鳥前端都會遇到一個菜鳥後端督促你學習數據處理，下面羅列一些遇到過的數據處理.

歸一化下面數據，變成想要的格式

接口數據：
clipboard.png
前端想要的數據:

clipboard.png

實現：

圖片描述

clipboard.png

clipboard.png

clipboard.png

降維、去重、排序 
給出：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)  //直接降維值一維數組。
1. sort     //排序就不說了。
2. new Set()  //達到去重效果
3. Array.from(上一步輸出的結果)  //將上一步結果轉換爲數組

降維

Array.prototype.concat.apply([], arr)爲啥這個方法會把數組的深度降 1 呢？

arr=[[1,2], 3,4]。arr是一個二維數組，經過apply方法，apply方法第二個參數是arguments，即參數數組，前面的公式就變成了[].concat([1,2],[3,4],[5]),concat方法的參數是一個元素，該元素會被直接插入到新數組中；若是參數是一個數組，該數組的各個元素將被插入到新數組中；因而最後的結果就是[1,2,3,4,5]至關於把原來的二維數組拉成了一緯數組

給對象包裹一個[]

圖片描述
圖片描述

參考

JS數組學習筆記
Array MDN
《數據結構與算法javascript描述》
JavaScript30-Challenge/04 - Array Cardio Day 1/
ES6，Array.from()函數的用法
《javascript經典實例》
Array.prototype.slice()
Array.prototype.forEach()
Array.prototype.map()
ES6的新方法實現數組去重
d3-array
lodash
d3-array 解釋
https://segmentfault.com/q/10...
d3array 測試
JavaScript數組方法速查手冊極簡版
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程