數據類型總結——Array(數組類型）

相關文章

　　簡書原文：https://www.jianshu.com/p/1e4425383a65

　　數據類型總結——概述：https://www.cnblogs.com/shcrk/p/9266015.html

　　數據類型總結——String(字符串類型)：https://www.cnblogs.com/shcrk/p/9277107.html

　　數據類型總結——Number（數值類型）：https://www.cnblogs.com/shcrk/p/9277040.html

　　數據類型總結——Boolean類型（布爾類型）：https://www.cnblogs.com/shcrk/p/9265597.html

　　數據類型總結——null和undefined：https://www.cnblogs.com/shcrk/p/9266100.html

　　數據類型總結——基本包裝類型：https://www.cnblogs.com/shcrk/p/9266066.html

　　數據類型總結——Array(數組類型）：https://www.cnblogs.com/shcrk/p/9276989.html

大綱

　　前言
　　一、Array數組類型的相關概念
　　二、建立數組的基本方式有兩種
　　三、檢測某個變量是不是數組的方式
　　四、數組的遍歷：for...in語句
　　五、數組的經常使用方法

前言

　　數據類型是每一種語言都須要掌握的內容，掌握每一種數據類型的使用是掌握這門語言必不可少的。而我也對數據類型寫了一系列的博客，其中包含了對某一數據類型的概念的認識和理解以及常使用的方法。如下就是我對Array類型的一些認識和理解，但願能對讀者有所幫助。而且這是關於ES6以前的一篇，以後還會有一篇關於ES6對數組的新增的知識的總結。

一、Array數組類型的相關概念

　　一、數組是一種特殊的變量，他由多個數組元素構成，能夠保存多個不一樣類型的數據。數組的存在是爲了解決一個變量只能存儲一個數據的侷限，使用數組能夠保存多個數據項。
　　二、數組的聲明不一樣於變量的聲明，須要經過new Array()來建立數組。
　　三、每一個數組元素的索引是惟一的，經過索引就能夠爲指定的數組元素賦值或訪問指定的數組元素。
　　四、ECMAScript中的數組是數據的有序列表，不一樣於其它語言，ECMAScript數組的每一項能夠保存不一樣的任何類型的數據。ECMAScript數組的大小是能夠動態調整的，便可以隨着數據的添加自動增加以容納新增數據。

var colors = ["red","bule","green"];
colors[99] = "black";
console.log(colors.length);//100
console.log(colors[98]);//undefined
console.log(colors[99]);//black

　　五、JavaScript只支持一維數組，而不存在多維數組。JavaScript容許把一個數組的元素聲明爲一個新的數組，從而模擬出多維數組。

var personel = new Array();
personel[0] = new Array();
personel[0][0] = "Name0";
personel[0][1] = "Age0";
personel[0][2] = "Address0";

personel[1] = new Array();
personel[1][0] = "Name1";
personel[1][1] = "Age1";
personel[1][2] = "Address1";

personel[2] = new Array();
personel[2][0] = "Name2";
personel[2][1] = "Age2";
personel[2][2] = "Address2";

console.log(personel);

二、建立數組的基本方式有兩種

　　一、使用Array構造函數

var colors = new Array();
var colors = new Array(20);
var colors = new Array("red","blue","green");

　　二、使用數組字面量表示法,與對象同樣，在使用數組字面量表示法時，也不會調用Array構造函數。

var colors = ["red","blue","green"];
var colors[colors.length] = "black";

三、檢測某個變量是不是數組的方式

　　一、使用instanceof操做符（當使用框架的時候，在不一樣的框架中的全局執行環境不一樣可能會有問題）

var colors = ["red","bule","green"];
var isArr = colors instanceof Array;
console.log(isArr);

　　二、ES5新增的Array.isArray()方法，用於肯定某個值究竟是不是數組

var isArr2 = Array.isArray(colors);
console.log(isArr2);

四、數組的遍歷：for...in語句

　　在js中，數組不是數據類型，數組的數據類型其實就是對象。Js中的For.....in語句能夠實現對一個對象的全部屬性的遍歷。也可使用for...in語句實現對一個數組的全部元素的遍歷for( var i in array ){}。原理：數組中有幾個元素，for..in語句就循環執行多少次。每次執行時，將當前數組元素的下標存放到變量i中

var row = ['zhangsan','lisi','wangwu','xiaoqiang'];

for (var i in row){
     //document.write(i + ':' + row[i] + '<br>');
     console.log(row[i]);
} 
//zhangsan
//lisi
//wangwu
//xiaoqiang

五、數組的經常使用方法

5.一、棧方法：push()和pop()

　　ECMAScript數組提供了一種讓數組的行爲相似於棧的操做方法（棧：一種能夠限制插入和刪除的數據結構,LIFO:last-In-First-Out後進先出，在棧中項的插入叫作推入，移除叫作彈出）
　　ECMAScript數組提供了push()和pop()方法，以便實現相似棧的行爲

var colors = new Array();
var count = colors.push("red","green");
console.log(count);//2//push方法推入值並返回數組的長度
count = colors.push("black");
console.log(count);//3
var item = colors.pop();//pop方法彈出數組的最後進入的項，並返回該項
console.log(item);//black
console.log(colors.length);//2

5.二、隊列方法：push()和shift()

　　隊列數據結構的訪問規則是FIFO（First-In-First-Out先進先出，隊列在列表的末端添加項，從列表的前端移除項）
　　經過push向數組末端添加項，經過shift()方法取得數組前端項，結合使用即可以像使用隊列同樣使用數組

var colors = new Array();
var count = colors.push("red","green");
console.log(count);//2//push方法推入值並返回數組的長度
count = colors.push("black");
console.log(count);//3
var item = colors.shift();//shift方法彈出數組的第一項，並返回該項
console.log(item);//red
console.log(colors.length);//2

5.三、unshift()方法

　　ECMAScript還爲數組提供了一個unshift()方法。利用unshift()方法能在數組前端添加任意個項並返回數組長度。
　　利用pop()方法能夠取得數組末端的項。
　　結合unshif()方法和pop()方法能夠從相反的方向來模擬隊列，即在數組的前端添加項，從數組末端移除項。

5.四、排序方法：reverse()和sort()

　　數組中已經存在兩個能夠直接用來從新排序的方法：reverse()和sort()。

　　reverse()：該方法會反轉數組的順序

var values = [1,2,3,4,5];
values.reverse();
console.log(values);//(5) [5, 4, 3, 2, 1]

　　sort()方法按升序排列數組項，即最小的值位於最前面，最大的值排在最後面。爲了實現排序，sort()方法會調用每一個數組的toString()轉型方法，而後比較獲得字符串，以肯定如何排序，即便數組中的每一項都是數值，sort()方法比較的也是字符串。

var values = [0,1,5,10,15];
values.sort();
console.log(values);//(5) [0, 1, 10, 15, 5]

5.五、concat()方法

　　concat()方法用於將一個項或多個項推入數組中，並返回這個合成以後的數組。

var colors = ["red","bule","green"];
var colors2 = colors.concat("yellow",["black","brown"]);
console.log(colors);//(3) ["red", "bule", "green"]
console.log(colors2);//(6) ["red", "bule", "green", "yellow", "black", "brown"]

5.六、slice()方法

　　slice()方法用於從數組中導出一個或多個項從而返回一個由這些項組成的新數組。

var colors = ["red","bule","green","yellow","purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
console.log(colors);//(5) ["red", "bule", "green", "yellow", "purple"]
console.log(colors2);//(4) ["bule", "green", "yellow", "purple"]
console.log(colors3);//(3) ["bule", "green", "yellow"]

5.七、splice()方法

　　splice()方法用於對數組中一個或多個項進行刪除、插入、替換的操做。

//一、用做刪除數組中元素
var colors = ["red" , "green","blue"];
var removed = colors.splice(0,1);//刪除數組中0開始的第一項
console.log(colors);//(2) ["green", "blue"]
console.log(removed);//["red"]

//二、用於插入數組元素
var colors = ["red" , "green","blue"];
var inserted = colors.splice(0,0,"yellow","orange");//在數組中0的位置上插入兩項
console.log(colors);//(5) ["yellow", "orange", "red", "green", "blue"]
console.log(inserted);//[]

//三、替換數組中元素
var colors = ["red" , "green","blue"];
var inserted = colors.splice(0,1,"yellow","orange");//刪除數組上的0開始的1項並插入兩項
console.log(colors);//(4) ["yellow", "orange", "green", "blue"]
console.log(inserted);//["red"]

5.八、位置方法：查找元素所在位置——indexOf()和lastIndexOf()

　　ECMAScript爲數組添加了兩個位置方法：indexOf()和lastIndexOf()
　　這兩個方法都接收兩個參數：要查找的項和表示查找起點位置的索引（可選）
　　這兩個方法返回的都是要查找的項在數組中的位置，沒找到返回-1，查找的過程當中使用的嚴格的全等方式比較
　　indexOf()是從首位開始查找，lastIndexOf()是從末尾開始往回查找

5.九、迭代方法：every()、some()、filter()、map()、forEach()

　　ECMAScript爲數組定義了5個迭代方法。
　　每一個方法都接收兩個參數：要在每一項上運行的函數和運行該函數的做用域對象（可選的）——影響this的值
　　傳入這些方法中的函數會接收三個參數：數組項的值、該項在數組中的位置和數組對象自己。
　　迭代方法都須要傳入每一項上運行的函數，即須要對每一項進行操做的函數，這樣才能知道對數組的每一項進行什麼操做。

　　every()：若數組的每一個項都知足條件，返回true,如有一項不知足，返回false

var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item,index,array){
    return(item > 2);
    //return(index < 20);//true
});
console.log(everyResult);//false

　　some()：若數組的某一項知足條件，返回true，若沒有一項知足條件，則返回false

var numbers = [1,2,3,4,5,4,3,2,1];
var someResult = numbers.some(function(item,index,array){
    return(item > 2);
    //return(index > 20);//false
});
console.log(someResult);//true

　　filter()：將知足條件的項過濾出來

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item,index,array){
    return(item > 2);
    //return(index > 4);//(4) [4, 3, 2, 1]
});
console.log(filterResult);//(5) [3, 4, 5, 4, 3]

　　map()：對數組中的每一個項都進行一樣的操做

var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function(item,index,array){
    return(item * 2);
});
console.log(mapResult);//(9) [2, 4, 6, 8, 10, 8, 6, 4, 2]

　　forEach()：對數組中的每一個項都進行一樣的操做，不一樣於map()，map()方法是拷貝一個數組副本，而後對數組中的每一個元素進行操做，可是forEach()則是對數組自己進行操做。

var numbers = [1,2,3,4,5,4,3,2,1];
var forEachResult = numbers.forEach(function(item,index,array){
//1     item = item * 2;//1
//2     array[index] = array[index] * 2;//2
    array[index] = item * 2;//3
//     console.log(item*2 === array[index]);//true
//     console.log(array[index]);
});
console.log(forEachResult);//undefined
console.log(numbers);
//一、(9) [1, 2, 3, 4, 5, 4, 3, 2, 1]
//二、(9) [2, 4, 6, 8, 10, 8, 6, 4, 2]
//三、(9) [2, 4, 6, 8, 10, 8, 6, 4, 2]

5.十、縮小方法：reduce()和reduceRight()

　　ECMAScript 5中新增了兩個縮小數組的方法：reduce()和reduceRight()。這兩個方法都會迭代數組的全部項，而後構建一個最終返回的值。reduce()方法從數組的第一項開始遍歷，reduceRight()從數組最後一項開始遍歷。這兩個方法都接收兩個參數：一個在每一項上調用的函數和做爲縮小基礎的初始值（可選）。傳給reduce()和reduceRight()的操做函數接收4個參數：前一個值、當前值、項的索引、數組對象。

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev,cur,index,array){
    return prev + cur;
})
console.log(sum);//15