初學JavaScript之陣列練習筆記
阿新 • • 發佈:2019-02-07
"陣列遍歷==============".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();