1. 程式人生 > >初學JavaScript之陣列練習筆記

初學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();