初學JavaScript之數組練習筆記

"數組遍歷==============".description();
Array.prototype.name = "Array";
var arr3 = [1,2,3,4,5,6,7,8,9,0];
for(var i in arr3)
{
    arr3[i].description();
}
"--------".description();
for(var i in arr3)
{
    if (! arr3.hasOwnProperty(i)) continue;//跳過繼承的屬性
    arr3[i].description();
}

"--------".description();

arr3.forEach(function(){
    arguments.description();
})


"多維數組==============".description();
var table = new Array(10);
for (var i = 0; i < table.length; i++) {
    table[i] = new Array(10);
}
for(var row = 0; row < table.length; row++)
{
    for (var col = 0; col < table[row].length; col++) {
        table[row][col] = row * col;
    }

}   
table.description();
table[2].description();
table[2][8].description();

"數組方法==============".description();
/**
// join() 將所有元素拼接成字符串
**/
"----------join".description();
table.join("").description();
table.join("******").description();
table.description();

/**
// reverse() 將數組中的元素顛倒順序，返回逆序的數組。
**/
"----------reverse".description();
var mArr = [1,2,3,4,5];
mArr.reverse().description();
mArr.description();

/**
// sort() 將數組中的元素排序並返回排序後的數組。當沒有參數的時候，按照ASCII表排序
**/
"----------sort".description();
var mArr = new Array("aadf","Basd","Adfd","Casdf","cads","123");
mArr.sort().description();
mArr.description();

var mArr = new Array(8,3,4,9,123,444,66,88);
mArr.sort().description();

mArr.sort(function(a,b){
    // arguments.length.description();
    return a > b;
}).description();

mArr.sort(function(a,b){
    // arguments.length.description();
    return a < b;
}).description();
// a 在 b 前面則返回小於0 ， a在b之後則返回大於0


/**
//concat 方法創建並返回一個新數組，它的元素包括調用concat()的原始數組和concat()的每個參數
**/
"----------concat".description();
var arr5 = [1,2,3,4,5];
arr5.concat(4,5,[66,88],[77,[123,456]]).description();

/**
// slice 方法返回指定數組的一個片段或者子數組。有兩個參數分別是開頭和結尾的位置 [star,end)
**/
"----------slice".description();
arr5.slice(1,3).description();
arr5.slice(2).description();
arr5.slice(1,-1).description();
arr5.slice(-4,-2).description();
arr5.description();

/**
// splice 是在數組中插入或刪除元素的通用方法。它會修改調用的數組
// 第一個參數：指定了插入或刪除的起始位置
// 第二個參數：指定了應從數組中刪除的元素個數。（如果省略的話，將從起始位置到數組的所有元素都將刪除）
// 返回值:由刪除元素組成的數組。
**/
 "----------splice".description();
var arr6 = [1,2,3,4,5,6,7,8,9,0];
arr6.splice(4).description()  // 刪除 [4,end]
arr6.description();
"--".description();
var arr6 = [1,2,3,4,5,6,7,8,9,0];
arr6.splice(2,4).description();
arr6.description();
"--".description();
var arr6 = [1,2,3,4,5,6,7,8,9,0];
arr6.splice(1,1).description();
arr6.description();
"--".description();
var arr6 = [1,2,3,4,5,6,7,8,9,0];
arr6.splice(2,0,['a','b']).description();// 在小標爲2的地方插入一個數組元素
arr6.description();
"--".description();
var arr6 = [1,2,3,4,5,6,7,8,9,0];
arr6.splice(2,2,'a','b').description();// 刪除下標2、3，然後在下標2的位置插入兩個元素
arr6.description();

/**
// push() 和 pop()
// 這兩個方法允許將數組當做棧來使用。push()在尾部添加一個或多個元素，返回數組長度
// pop()刪除數組的最後一個元素，長度減一，返回刪除的元素
**/
 "---------- push() 和 pop()".description();
 var stack = [];
 stack.push(1,2,6).description();    // [Number: 3]
 stack.description();                // [ 1, 2 ,6]
 stack.pop().description();          // [Number: 6]
 stack.push(8,9);                    
 stack.push([11,22,33]);             
 stack.push();
 stack.description();                // [ 1, 2, 8, 9, [ 11, 22, 33 ] ]
 stack.length.description();         // [Number: 5]
 stack.pop().description();          // [ 11, 22, 33 ]
 stack.description();                // [ 1, 2, 8, 9 ]


/**
// unshift() 和 shift()
// unshift()在頭部添加一個或多個元素，並將已存在的元素移動到更高索引的位置來獲得足夠的空間，最後返回數組長度。
// shift()刪除數組的第一個元素並將其返回，其他元素前移，長度減一
// 注意：unshift()參數是一次性插入的，
**/
 "---------- unshift() 和 shift()".description();
 var mArray = [];
 mArray.unshift(1).description();                  // [Number: 1]
 mArray.unshift(22);
 mArray.description();                             // [ 22, 1 ]
 mArray.length.description();                      // [Number: 2]

 mArray.shift().description();                     // [Number: 22]
 mArray.description();                             // [ 1 ]
 mArray.length.description();                      // [Number: 1]
 mArray.unshift(88,['a','b']).description();       // [Number: 3]
 mArray.description();                             // [ 88, [ 'a', 'b' ], 1 ]



/**
// toString() 方法將數組每個元素轉化成字符串並且輸出用都好分割的字符串列表。
// toLocaleString()是toString()方法的本地化版本。
**/
 "---------- toString() 和 toLocaleString()".description();             
[1,2,3,4,5].toString().description();                          //[String: '1,2,3,4,5']
["a","b","c"].toString().description();                        //[String: 'a,b,c']
[1,2,3,'a','b','c'].toString().description();                  //[String: '1,2,3,a,b,c']
[1,2,[88,99],['a','c'],[666,'520']].toString().description();  //[String: '1,2,88,99,a,c,666,520']


/**
 *  map()方法將調用的數組的每個元素傳遞給指定的函數，並返回一個數組，它包含該函數的返回值。
 */
"---------- map()".description();  
var array1 = [1,2,3,4];
var array2 = array1.map(function(value,index,array){
    return value * value;
}) 
array2.description();  //[ 1, 4, 9, 16 ]

var array3 = array1.map(function(){
}) 
array3.description();  //[ undefined, undefined, undefined, undefined ]


/**
 * filter() 方法返回的數組元素是調用的數組的一個子集。
 * 傳遞的函數是用來邏輯判定的，該函數返回true/false.(返回是true代表是這個子集的成員)
 * 注意： filer()會跳過稀疏數組中缺少的元素，它的返回數組總是稠密的。
 */
"---------- filter()".description(); 
var array2 = [9,8,7,6,5,4,3,2,1,0];
var subArr = array2.filter(function(value){
    return !(value % 2);
})
subArr.description();           // [ 8, 6, 4, 2, 0 ]
array2.description();           // [ 9, 8, 7, 6, 5, 4, 3, 2, 1, 0 ]
// 這裏可以壓縮稀疏數組的空缺
var sparse = new Array(3);
sparse[0] = sparse[2] = "lalal";
sparse.description();           // [ 'lalal', <1 empty item>, 'lalal' ]
var dense = sparse.filter(function(){return true;});
dense.description();            // [ 'lalal', 'lalal' ]


/**
 * every() 和 some()方法是數組的邏輯判定：它們對數組元素應用指定的函數進行判定,返回ture或false
 * every() 當數組中所有元素都爲true 的時候 返回才爲true
 * some() 數組中至少有一個元素返回爲true 就返回爲ture
 */
"---------- every() 和 some()".description()
var array3 = [1,2,3,4,5,6,7,8,9];
array3.every(function(value){ return value < 10}).description(); // [Boolean: true]
array3.every(function(value){ return value < 5}).description();  // [Boolean: false]

array3.some(function(value){ return value > 10}).description();  // [Boolean: false]
array3.some(function(value){ return value > 5}).description();   // [Boolean: true]


/**
 * reduce() 和 reduceRight() 方法使用指定的函數將數組元素進行組合，生成單個值。
 * 在函數式編程中是常見的操作，也可以成爲 "注入" 和 "摺疊"。
 *
 * reduce 兩個參數，第一個參數是簡化操作的函數，第二個參數是初始值（如沒有指定，默認值是數組第一個數）。
 * 操作函數的參數，第一個爲初始值，接下來就是  value 、index array。
 * 這個初始值 第一次調用的時候就是 reduce()的第二個參數，第二次就是操作函數返回的值
 *
 * reduceRight() 和 reduce原理一樣，只是他按照數組索引從高到低。
 */
"---------- reduce() 和 reduceRight()".description()
var array4 = [1,2,3,4,5,6,7,8,9];
// 求和
var sum = array4.reduce(function(initNumb,value,index,array){
    return initNumb + value;
},0);
sum.description();      // [Number: 45]
// 求積
var product = array4.reduce(function(initNumb,value,index,array){
    return initNumb * value;
},1);
product.description();  // [Number: 362880]
// 找出最大值
var max = array4.reduce(function(initNumb,value,index,array){
    return (initNumb > value) ? initNumb : value;
},0);
max.description();      // [Number: 9]

// 默認初始值爲 9 （因爲數組索引最高值爲9）
var max = array4.reduceRight(function(){
    let initNumb = arguments[0];
    let value =arguments[1];
    return (initNumb > value) ? initNumb : value;
});
max.description();      // [Number: 9]

// union()函數，它計算兩個對象的"並集"，返回另一個新對象，新對象具備兩者的屬性
var objects = [{x:1},{y:2},{z:3}];
var merged = objects.reduce(union);
merged.description();   //{ x: 1, description: [Function], y: 2, z: 3 } //忽略description屬性

/**
 * 把p中的可枚舉屬性複製到o中，並返回o
 * 如果o和p含有同名屬性，則覆蓋o中的屬性
 * 這個函數並不處理getter和setter以及賦值屬性
 */
function extend(o,p)
{
    for(prop in p)
    {
        o[prop] = p[prop];
    }
    return o;
}
/**
 * 返回一個新對象，這個對象同事擁有o和p的屬性
 * 如果o和p中有重名屬性，使用p中的屬性值
 */
function union(o,p){return extend(extend({},o),p);}

var objects = [{x:1,a:1},{y:2,a:2},{z:3,a:3}];
objects.reduce(union).description();       //{ x: 1, a: 3, description: [Function], y: 2, z: 3 }  //忽略description屬性
objects.reduceRight(union).description();  //{ z: 3, a: 1, description: [Function], y: 2, x: 1 }  //忽略description屬性


/**
 * indexOf()和 lastIndexOf()搜索整個數組中具有給定的元素，返回找到的第一個索引（如果沒有返回-1）
 * indexOf() 從頭到尾搜索
 * lastIndexOf() 從尾到頭搜索。（我理解的是最後一個給定元素的索引）
 *
 * 第一個參數是需要搜索的值，第二個參數是可選的：從哪個索引開始搜索，如果省略就從頭開始
 */
"---------- indexOf() 和 lastIndexOf()".description()
var a = [0,1,2,0,3,4,6];
a.indexOf(2).description();          // [Number: 2]
a.lastIndexOf(4).description();      // [Number: 5]
a.indexOf(9).description();          // [Number: -1]
a.indexOf(0,2).description();        // [Number: 3]
/**
 * 找出數組中所有出現的指定元素的索引
 */
var b = [1,2,3,1,3,5,6,7,3,45,7,2,3,4,6,1,2,4,1];
function findall(array,x)
{
    var result = [],
        len = array.length;
        pos = 0;
    while(pos < len){
        pos = array.indexOf(x,pos);
        if (pos === -1) break;
        result.push(pos);
        pos++;
    }
    return result;
}
findall(b,1).description();   // [ 0, 3, 15, 18 ]



"數組類型==============".description();
// 判斷一個對象是否是數組
Array.isArray([]).description();   // [Boolean: true]
Array.isArray({}).description();   // [Boolean: false]

"類數組對象==============".description();
var a = {};
var i = 0;
while(i < 10){
    a[i] = i * i;
    ++i;
}
a.length = i;
// 現在當做真正的數組遍歷它
var total = 0;
for(var j = 0; j< a.length; j++) total += a[j];
total.description();

a.description();
//我們可以使用Function.call方法來調用
Array.prototype.join.call(a,"+").description(); // [String: '0+1+4+9+16+25+36+49+64+81']
//返回一個真正的數組
Array.prototype.slice.call(a,0).description();  // [ 0, 1, 4, 9, 16, 25, 36, 49, 64, 81 ]
Array.prototype.map.call(a,function(value){
    return value * 10;
}).description();                               //[ 0, 10, 40, 90, 160, 250, 360, 490, 640, 810 ]

/**
 * 在一些瀏覽器中 它們在構造函數上直接定義函數，方便使用。例如：Array.join()
 * 爲了保證使用這些函數之前是存在的 可以做如下操作
 */
Array.join = Array.join || function(array,sep){
    return Array.prototype.join.call(array,sep);
}


"作爲數組的字符串==============".description();
var str = "test";
str.charAt(0).description();
str.charAt(2).description();
str[1].description();