1. 程式人生 > >數據類型總結——Array(數組類型)

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

{} 賦值 沒有 就是 ... asc 解決 nbsp remove

原文

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

大綱

  前言
  1、Array數組類型的相關概念
  2、創建數組的基本方式有兩種
  3、檢測某個變量是否是數組的方式
  4、數組的遍歷:for...in語句
  5、數組的常用方法

前言

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

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

  1、數組是一種特殊的變量,他由多個數組元素構成,可以保存多個不同類型的數據。數組的存在是為了解決一個變量只能存儲一個數據的局限,使用數組可以保存多個數據項。
  2、數組的聲明不同於變量的聲明,需要通過new Array()來創建數組。
  3、每個數組元素的索引是唯一的,通過索引就可以為指定的數組元素賦值或訪問指定的數組元素。
  4、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

  5、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);

2、創建數組的基本方式有兩種

  1、使用Array構造函數

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

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

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

3、檢測某個變量是否是數組的方式

  1、使用instanceof操作符(當使用框架的時候,在不同的框架中的全局執行環境不同可能會有問題)

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

  2、ES5新增的Array.isArray()方法,用於確定某個值到底是不是數組

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

4、數組的遍歷: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、數組的常用方法

5.1、棧方法: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.2、隊列方法: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.3、unshift()方法

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

5.4、排序方法: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.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.6、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.7、splice()方法

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

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

//2、用於插入數組元素
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);//[]

//3、替換數組中元素
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.8、位置方法:查找元素所在位置——indexOf()和lastIndexOf()

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

5.9、叠代方法: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);
//1、(9) [1, 2, 3, 4, 5, 4, 3, 2, 1]
//2、(9) [2, 4, 6, 8, 10, 8, 6, 4, 2]
//3、(9) [2, 4, 6, 8, 10, 8, 6, 4, 2]

5.10、縮小方法: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

  

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