菜鳥筆記-數組基礎

一 建立方法

1. 空數組 var Obj = new Array();

2. 指定長度數組 var Obj = new Array(size);

3. 制定元素數組 var Obj = new Array(元素1， 元素2， 元素3，.....元素N)

4. 單維數組 var Obj = new Array(元素1， 元素2， 元素3，.....元素N)

5. 多維數組 var Obj = new Array([數組序列1]，[數組序列2]，.....[數組序列N])

 

二 基本操做

1. 存取數組元素

(1) 單維數組 -- arr[index]

(2) 多維數組 -- arr[外層數組下標][內層數組下標]

(3) 特性：

a. 數組長度是彈性的，可自由伸縮
b. 數組下標從0開始
c. 下標類型--- 數值
--- 非數值(轉爲字符串||生成關聯數組||下標將做爲對象屬性的名字)

 1               // 轉爲字符串 
 2                 var mycars = new Array()
 3                 mycars["aa"] = ["寶馬",12];
 4                 mycars[1] = "奔馳"
 5                 mycars[2] = "賓利"
 6 
 7                 for (x in mycars){
 8                     document.write(mycars[x] + "<br />");
 9                     document.write(x + "<br />");
10                 }

 

// Javascript的數組其實不像PHP或者其餘一些語言同樣擁有真正的字符串下標，當咱們試圖爲一個js數組添加字符串下標的時候，其實就至關於爲該數組對象添加了一個屬性，屬性名稱就是咱們所謂的「字符串下標」。因爲爲數組對象添加屬性不會影響到同爲該對象屬性的length的值，所以該值將始終爲零。一樣地，.pop()和.shift()等做用於數組元素的方法也不可以做用於這些對象屬性。所以，若是要使用的是一個徹底由「字符串下標」組成的數組，那仍是將其聲明爲一個Object類型的對象要更好一些。

 1 var array = [];
 2 array["a"] = "hello";
 3 array["b"] = "world";
 4 array["c"] = "yes";
 5 console.log("length: " + array.length);// length:0
 6 
 7 var array = [];
 8 array["a"] = "hello";
 9 array["b"] = "world";
10 array["c"] = "yes";
11 array["10"] = "no";
12 console.log("length: " + array.length);// length:11
13 console.log(array);//[undefined*10, 'no']

 

d. 數組元素可添加到對象中去

 1 //普通作法-------------------------------------
 2 
 3 var obj = {};
 4 
 5 var pusharr = [11,3,4,5,6,7];
 6 
 7 for (var i = 0; i < pusharr.length; i++) {
 8 obj[i] = pusharr[i]
 9 }
10 
11 console.log(obj)
12 
13 //簡單作法---------------------------------------
14 
15 var obj1 = {};
16 
17 [].push.apply(obj1, [1,6,8,0,86])
18 
19 console.log(obj1)

2. 增長數組 使用「[]」運算符指定一個新下標

3. 刪除數組 delete 數組名[下標]

4. 遍歷數組 for (var 數組元素 in 數組)

 

三 數組屬性

1. constructor 引用數組對象的構造函數

 1 var arr = new Array();
 2 arr[0] = '11';
 3 arr[1] = '9994';
 4 arr[2] = '678';
 5 
 6 if (arr.constructor == Array){
 7 document.write('這是一個數組')
 8 }
 9 
10 function Person(name, job, born){
11 this.name = name;
12 this.job = job;
13 this.born = born
14 }
15 
16 var abby = new Person('anna', 'work', 'shanghai');
17 document.write(abby.constructor)

 

2. length 返回數組的長度

3. prototype 經過增長屬性和方法擴展數組定義

 1 function person(name, job, born){
 2 this.name = name;
 3 this.job = job;
 4 this.born = born;
 5 }
 6 
 7 var bill = new person('andy', 'work', 'shanghai')
 8 
 9 person.prototype.salary = null;
10 
11 document.write(bill.salary)//null

 

四 ES3方法

1.添加

(1) push()向數組的末尾添加一個或多個元素，並返回新的長度。

1 var arr = [1,4,5,6,8,90];
2 document.write(arr.push('James'));// 返回數組長度 6

 

(2) unshift() 向數組的開頭添加一個或更多元素，並返回新的長度。

1 var arr = new Array()
2 arr[0] = "George"
3 arr[1] = "John"
4 arr[2] = "Thomas"
5 
6 document.write(arr + "<br />") //George,John,Thomas
7 document.write(arr.unshift("William") + "<br />")//4
8 document.write(arr)//William,George,John,Thomas

 

(3)concat() //用於鏈接兩個或多個數組。該方法不會改變現有的數組，而僅僅會返回被鏈接數組的一個副本。

 1 --------------------
 2 var a = [1,2,3];
 3 document.write(a.concat(4,5));//1,2,3,4,5
 4 --------------------------
 5 var arr = new Array(3)
 6 arr[0] = "George"
 7 arr[1] = "John"
 8 arr[2] = "Thomas"
 9 
10 var arr2 = new Array(3)
11 arr2[0] = "James"
12 arr2[1] = "Adrew"
13 arr2[2] = "Martin"
14 
15 var arr3 = new Array(2)
16 arr3[0] = "William"
17 arr3[1] = "Franklin"
18 
19 document.write(arr.concat(arr2,arr3))//George,John,Thomas,James,Adrew,Martin,William,Franklin

 

2. 刪除

(1) pop()刪除 arrayObject 的最後一個元素，把數組長度減 1，而且返回它刪除的元素的值。若是數組已經爲空，則 pop() 不改變數組，並返回 undefined 值。

1 var arr = new Array(3)
2 arr[0] = "George"
3 arr[1] = "John"
4 arr[2] = "Thomas"
5 
6 document.write(arr.pop())//Thomas

 

(2) shift()用於把數組的第一個元素從其中刪除，並返回第一個元素的值。

1 var arr = new Array(3)
2 arr[0] = "George"
3 arr[1] = "John"
4 arr[2] = "Thomas"
5 
6 document.write(arr.shift() + "<br />")//George

 

3. 子數組

(1) splice(index, 刪除個數，增長元素) 方法向/從數組中添加/刪除項目，而後返回被刪除的項目。

1 var arr1 = ['jjj', 'lll', 'hhhh', 'oooo']
2 -------------------------------
3 console.log(arr1.splice(1));//若是隻有一位數字，那麼選取從第二位一直到最後一位
4 console.log(arr1) // jjj
5 -----------------------------
6 console.log(arr1.splice(2, 1, 'Anna'))//hhhh
7 console.log(arr1) //['jjj', 'lll', 'oooo']

 

(2) slice()方法可從已有的數組中返回選定的元素。此方法並不改變原來的數組.
slice(起始位置，結束位置-1)//若是數值是負數，則用數組長度加上該值肯定位置

 1 ---------------------------------
 2 var arr = new Array(3)
 3 arr[0] = "George"
 4 arr[1] = "John"
 5 arr[2] = "Thomas"
 6 
 7 document.write(arr.slice(1) + "<br />")//John,Thomas 若是隻有一位數字，那麼選取從第二位一直到最後一位
 8 document.write(arr) //George,John,Thomas
 9 ---------------------------------
10 
11 var arr = new Array(6)
12 arr[0] = "George"
13 arr[1] = "John"
14 arr[2] = "Thomas"
15 arr[3] = "James"
16 arr[4] = "Adrew"
17 arr[5] = "Martin"
18 
19 document.write(arr + "<br />")
20 document.write(arr.slice(2,4) + "<br />")//Thomas,James 選取index爲2到4以前的元素，及2-3
21 document.write(arr)
22 -----------------------------------------

 

4. 數組排序

(1) reverse()方法用於顛倒數組中元素的順序。

1 var arr = [1,4,5,6,8,90];
2 console.log(arr.reverse())// [90,8,6,5,4,1]

 

(2) sort() 排序

//默認按字符編碼排序
// 1. -----------------------
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
document.write(arr.sort())//Adrew,George,James,John,Martin,Thomas

// 2. ---------------------------
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort())//1,10,1000,25,40,5

//請注意，上面的代碼沒有按照數值的大小對數字進行排序，要實現這一點，就必須使用一個排序函數：
function sortNumber(a,b)
{
return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort(sortNumber))//1,5,10,25,40,1000

 

5. 數組轉換

(1) toString()方法可把數組轉換爲字符串，並返回結果。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.toString())//George,John,Thomas

 

(2) toLocaleString 把數組轉換爲本地字符串。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.toLocaleString())//George, John, Thomas

 

//詳細舉例區別 toString() 和 toLocaleString()

---------------------------
var a=1234

a.toString()
"1234"

a.toLocaleString()
"1,234"
---------------------------
var sd=new Date()


sd
Wed Feb 15 2017 11:21:31 GMT+0800 (CST)


sd.toLocaleString()
"2017/2/15 上午11:21:31"


sd.toString()
"Wed Feb 15 2017 11:21:31 GMT+0800 (CST)"

------------------------------------------

 

(3) join 用數組的元素組成字符串

var arr = new Array();
arr[0] = 'Judy';
arr[1] = 'Anna';
arr[2] = 'back';

document.write(arr.join('.'));//Judy.Anna.back
document.write(arr.join('---'));//Judy---Anna---back

 

五 ES5方法

1. 位置方法

(1) indexOf()

//indexof(要查找的項， 查找起點位置的索引) 從左往右查找
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.indexOf("Apple");
console.log(a)//2

 

(2) lastIndexOf()

//lastIndexOf(要查找的項， 查找起點位置的索引)從左往右查找
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.indexOf("Apple");
console.log(a)//6

 

2. 迭代方法

(1) every()

//判斷數組中每一項都是否知足條件，只有全部項都知足條件，纔會返回true。
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
}); 
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
}); 
console.log(arr3); // false

 

(2)filter()

//「過濾」功能，數組中的每一項運行給定函數，返回知足過濾條件組成的數組。
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

 

(3)forEach()

//對數組進行遍歷循環，對數組中的每一項運行給定函數。這個方法沒有返回值。參數都是function類型，默認有傳參，參數分別爲：遍歷的數組內容；第對應的數組索引，數組自己。
var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
console.log(x + '|' + index + '|' + (a === arr));
});
// 輸出爲：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

 

(4)map()

//指「映射」，對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組。
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

(5)some()
//判斷數組中是否存在知足條件的項，只要有一項知足條件，就會返回true。
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some(function(x) {
return x < 1;
}); 
console.log(arr3); // false

 

3.縮小方法

(1) reduce()

(2)reduceRight()

//這兩個方法都會實現迭代數組的全部項，而後構建一個最終返回的值。reduce()方法從數組的第一項開始，逐個遍歷到最後。而 reduceRight()則從數組的最後一項開始，向前遍歷到第一項。

//這兩個方法都接收兩個參數：一個在每一項上調用的函數和（可選的）做爲歸併基礎的初始值。

//傳給 reduce()和 reduceRight()的函數接收 4 個參數：前一個值、當前值、項的索引和數組對象。這個函數返回的任何值都會做爲第一個參數自動傳給下一項。第一次迭代發生在數組的第二項上，所以第一個參數是數組的第一項，第二個參數就是數組的第二項。

//下面代碼用reduce()實現數組求和，數組一開始加了一個初始值10。

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