天天看點

JavaScript Array一、僅有以下2種方式來建立數組二、通路數組三、修改數組中已有的值四、添加元素五、删除元素六、for……in 循環輸出數組中的元素七、将數組的元素組成字元串八、合并兩個數組九、截取數組的一部分十、數組排序十一、反轉數組元素

數組對象用來在單獨的變量名中存儲一系列的值。在JavaScript中我們有且僅能使用關鍵詞 new 來建立數組對象。

一、僅有以下2種方式來建立數組

(1)先聲明數組後指派。

var myArray = new Array();
console.log(myArray.length); //輸出
myArray[] = 'China';
myArray[] = 'America';
myArray[] = 'Japan';
//輸出 [ 'China', 'America', 'Japan' ]
           

也可以使用一個整數來控制數組的容量:

var myArray = new Array();
console.log(myArray.length); //輸出3
//輸出 [ , , , ]
myArray[] = 'China';
myArray[] = 'America';
myArray[] = 'Japan';
//輸出 [ 'China', 'America', 'Japan' ]
           

(2)在聲明數組時直接定義其初始值。

如果聲明數組時括号内的變量不止一個或不是整數,那麼就不是數組容量,而是直接定義數組内的變量了。

也可以直接使用方括号初始化數組變量。

var myArray1 = new Array(,,);
//輸出 [ 1, 2, 3 ]
var myArray2 = [, , ];
//輸出 [ 1, 2, 3 ]
var myArray3 = new Array('1');
//輸出 [ 1 ]
           

二、通路數組

通過指定數組名以及索引号碼,你可以通路某個特定的元素。

即使數組下标越界也不會報錯,隻會傳回 undefined。

var myArray = new Array(,,); // [ 1, 2, 3 ]
myArray[]; // 1
myArray[]; // undefined, 在列印數組時會被顯示為空串
           

三、修改數組中已有的值

如需修改已有數組中的值,隻要向指定下标号添加一個新值即可。

JavaScript是弱類型的,數組中的所有變量類型都為var,是以在一個數組中可以同時出現諸如 “string” 和 “int”,之類不同類型的值。

如果下表越界,則會将超出部分至該位置之前的值全部定義為空(這裡既不是undefined,也不是null,也不是”)。

var myArray = new Array('China', 'America', 'Japan'); 
myArray[] = ; 
myArray[] = ;
//輸出 [ , 'America', 'Japan', ,  ]
           

四、添加元素

(1)直接添加

var arr = [,,];
arr[] = ;
console.log(arr);
//輸出 [ , , , , ,  ]
           

(2)push([item1 [item2 [… [itemN ]]]]) 将一個或多個新元素添加到數組結尾,并傳回數組新長度。

var arr = [,,];
arr.push('x', 'y', 'z');
//輸出 
console.log(arr);
//輸出 [ , , , 'x', 'y', 'z' ]
           

(3)unshift([item1 [item2 [… [itemN ]]]]) 将一個或多個新元素添加到數組開始,數組中的元素自動後移,傳回數組新長度。

var arr = [,,];
arr.unshift('x', 'y', 'z');
//輸出 
console.log(arr);
//輸出 [ 'x', 'y', 'z', , ,  ]
           

(4)splice(pos,count,[item1[, item2[, … [,itemN]]]]);//将零個、一個或多個新元素插入到數組的pos位置,同時删除插入位置後count個元素(包括原插入位置的元素),然後将插入位置的元素自動後移,傳回被删除的數組。

var arr = [,,,,];
arr.splice(, , 'm');
//輸出 []
console.log(arr);
//輸出 [ , 'm', , , ,  ]
arr.splice(, , 'x', 'y', 'z');
//輸出 [ 'm', '2', '3' ]
console.log(arr);
//輸出 [ , 'x', 'y', 'z', ,  ]
           

五、删除元素

(1)pop 移除最後一個元素并傳回該元素值。

var arr = [ , , ];
arr.pop();
//輸出 3
console.log(arr);
//輸出 [ 1, 2 ]
           

(2)shift 移除最前一個元素并傳回該元素值,數組中元素自動前移。

var arr = [ , , ];
arr.shift();
//輸出 1
console.log(arr);
//輸出 [ 2, 3 ]
           

(3)splice(pos,count,[item1[, item2[, … [,itemN]]]]);//将零個、一個或多個新元素插入到數組的pos位置,同時删除插入位置後count個元素(包括原插入位置的元素),然後将插入位置的元素自動後移,傳回被删除的數組。

var arr = [,,,,];
arr.splice(, );
//輸出 [  ]
console.log(arr);
//輸出 [ , , ,  ]
arr.splice(, , 'x', 'y', 'z');
//輸出 [ , ,  ]
console.log(arr);
//輸出 [ , 'x', 'y', 'z' ]
           

六、for……in 循環輸出數組中的元素

var myArray = new Array(,,);
for(var value in myArray) {
    console.log(value);
}
           

七、将數組的元素組成字元串

使用 join( [ separator ] ),separator 預設為逗号(,)。

toLocaleString 、toString 、valueOf:可以看作是join的特殊用法,不常用

var myArray = new Array(,,,undefined,);
myArray.join();      //輸出 '1,2,3,,4' 
myArray.join('-');   //輸出 '1-2-3--4'
myArray.join('-*-'); //輸出 '1-*-2-*-3-*--*-4'
myArray.toString();  //輸出 1,2,3,,4
myArray.toLocaleString(); //輸出 1,2,3,,4
           

八、合并兩個數組

使用 arrayA.concat( arrayB ) 方法來合并兩個數組,合并操作不會修改原數組。

var arrayA = new Array(,,);
var arrayB = new Array();
arrayB[] = 'a';
arrayB[] = 'b';
arrayB[] = 'c';
arrayA.concat(arrayB);
//輸出 [ , , , 'a', 'b', 'c' ], 該操作隻會生成一個新數組, 并不會修改原先的數組
//arrayA = [ , , ]
//arrayB = [ 'a', 'b', 'c']
           

九、截取數組的一部分

slice(start, [end]) 以數組的形式傳回數組的一部分,注意不包括 end 對應的元素,如果省略 end 将複制 start 之後的所有元素。

該操作傳回一個新的數組,并不會修改原來的數組。

var arr = [ , , , ,  ];
arr.slice();
//輸出 [3, 4, 5 ]
arr.slice(, );
//輸出 [ 3, 4 ]
console.log(arr);
//輸出 [ 1, 2, 3, 4, 5]
           

十、數組排序

使用 sort( [ function ] ),sort 預設按ASCII碼進行排序。

sort 會直接改變數組中的元素排列方式

(1)純數字的情況

var numArray = [, , , , -];
numArray.sort();
//輸出 [ -30, 1, 123, 55, 999 ]
numArray.sort(function(a, b){
//在排序後的數組中 a 應該出現在 b 之前,則傳回一個小于 0 的值。
    return a-b;
});
//輸出 [ -30, 1, 123, 55, 999 ]
numArray.sort(function(a, b){
    return b-a;
});
//輸出 [ 999, 123, 55, 1, -30 ]
           

(2)混合基本變量的預設排序方式(前2個比較方式均是錯誤的)

var myArray = ['bob', 'America', , undefined, 'Tina', 'China', , '=', '3', true ];
myArray.sort(function(a, b){
//當不是數字時,根本無法适用于減号('-')操作符,是以傳回,不進行排序
    return a-b;
});
// 輸出 ['bob', 'America', true, 'Tina', 'China', , '=', '3', undefined, ]
myArray.sort(function(a, b){
    return b-a;
});
// 輸出 [ 'bob', 'America', true, 'Tina', 'China', , '=', '3', undefined, ]
myArray.sort();
// 輸出 [ true, , '3', '=', 'America', 'China', 'Tina', 'bob', undefined, ], 兩個不可比較的數字, JS預設會按照ASCII碼進行排序。
           

(3)混合基本變量的自定義排序方式

var myArray = ['bob', 'America', undefined, , 'Tina', 'China', , '=', '3', true ];
var sortFunc = function(reverse) {
    return function(a, b) {
    /*
    根據我的測試,這一段可以不要,因為undefined和(空)根本不會進入比較。
        if(!a && !b) {
            return ;
        }
        if(a && !b) {
        console.log('a && !b');
            return reverse ? - : ;
        }
        if(!a && b) {
        console.log('!a && b');
            return reverse ?  : -;
        }
    */
        if(typeof a === typeof b) {
            if(reverse) {
                return a > b ? - : ;
            }
            return a < b ? - : ;
        }
        if(reverse) {
            return typeof a > typeof b ? - : ;
        }
        return typeof a < typeof b ? - : ;
    };
};
myArray.sort(sortFunc(false));
//輸出 [ true, , '3', '=', 'America', 'China', 'Tina', 'bob', undefined, ]
myArray.sort(sortFunc(true));
//輸出 [ 'bob', 'Tina', 'China', 'America', '=', '3', '1', true, undefined, ]
           

(4)JSON對象的自定義排序方式

var employees=[]
employees[]={name:"Bob", age:}
employees[]={name:"Tina", age:}
employees[]={name:"Bob", age:}
employees[]={name:"Tom", age:}
var sortBy = function(major, minorFunc) {
    return function(a, b) {
        if(typeof a === 'object' && typeof b === 'object') {
            var nameA = a[major];
            var nameB = b[major];
            if(nameA === nameB) {
                return typeof minorFunc === 'function' ? minorFunc(a,b) : ;
            }
            if(typeof nameA === typeof nameB) {
                return nameA < nameB ? -:;
            }
            return typeof nameA < typeof nameB ? - : ;
        }
        return ;
    };
};
employees.sort(sortBy('name',sortBy('age')));
/*
輸出
[ { name: 'Bob', age: 32 },
  { name: 'Bob', age: 62 },
  { name: 'Tina', age: 17 },
  { name: 'Tom', age: 58 } ]
*/
           

十一、反轉數組元素

reverse() 會直接修改數組中的元素排列方式

var arr = [,,];
arr.reverse();
//輸出 [ 3, 2, 1 ]
           

繼續閱讀