js常見物件及方法

gecko23發表於2014-10-15

物件是某個特定引用型別的例項。新物件是使用new運算子後跟一個建構函式來建立的。
var person = new Object();
建構函式是Object,
person是Object引用型別的一個新例項

一. 建立例項的方法:
1.第一種是使用new運算子後跟Object建構函式
var person = new Object();
person.name = "Nicholas";
person.age = 29;
2.使用物件字面量表示法
var person = {
name : "Nicholas",
age : 29
};
var person = {}; //與new Object()相同
person.name = "Nicholas";
person.age = 29;
二.訪問物件屬性
alert(person["name"]); //"Nicholas"
alert(person.name); //"Nicholas"
從功能上看,這兩種訪問物件屬性的方法沒有任何區別。但方括號語法的主要優點是可以透過變數
來訪問屬性,例如:
var propertyName = "name";
alert(person[propertyName]); //"Nicholas"
如果屬性名中包含會導致語法錯誤的字元,或者屬性名使用的是關鍵字或保留字,也可以使用方括
號表示法。例如:
person["first name"] = "Nicholas";
由於"first name"中包含一個空格,所以不能使用點表示法來訪問它。然而,屬性名中是可以包
含非字母非數字的,這時候就可以使用方括號表示法來訪問它們。
通常,除非必須使用變數來訪問屬性,否則我們建議使用點表示法

Array型別
一.建立陣列的基本方式有兩種。

第一種是使用Array建構函式,如下面的程式碼所示。

var colors = new Array(); 
var colors = new Array(20);//建立陣列長度為20的陣列
var colors = new Array("red", "blue", "green");//新增資料項

第二種是使用陣列字面量表示法

var colors = ["red", "blue", "green"];  // 建立一個包含3個字串的陣列
var names = [];  // 建立一個空陣列
var values = [1,2,];  // 不要這樣!這樣會建立一個包含2或3項的陣列
var options = [,,,,,]; // 不要這樣!這樣會建立一個包含5或6項的陣列

陣列的length屬性很有特點——它不是隻讀的。
因此,透過設定這個屬性,可以從陣列的末尾移除項或向陣列中新增新項。
請看下面的例子:

var colors = ["red", "blue", "green"]; // 建立一個包含3個字串的陣列
colors.length = 2; 
alert(colors[2]); //undefined 

如果將其length屬性設定為大於陣列項數的值,
則新增的每一項都會取得undefined值

二.檢測陣列

value instanceof Array 
//兩個以上不同的全域性執行環境,從而存在兩個以上不同版本的Array建構函式
Array.isArray()

三.轉換方法

toString()
會返回由陣列中每個值的字串形式拼接而成的一個以逗號分隔的字串。
使用join(",")方法重現了toString()方法的輸出
valueOf()
返回的還是陣列

四.棧方法
push()和pop()方法

var colors = new Array();  // 建立一個陣列
var count = colors.push("red", "green");  // 推入兩項
alert(count);  //2 
count = colors.push("black");  // 推入另一項
alert(count); //3 
var item = colors.pop();  // 取得最後一項
alert(item); //"black" 
alert(colors.length); //2 

五.佇列方法
shift()和push()

var colors = new Array(); //建立一個陣列
var count = colors.push("red", "green"); //推入兩項
alert(count);  //2 
count = colors.push("black"); //推入另一項
alert(count); //3 
var item = colors.shift(); //取得第一項
alert(item); //"red" 
alert(colors.length); //2

unshift() 陣列的前端新增項
var count = colors.unshift("red", "green"); //推入兩項
alert(count); //2 

六.重新排序
reverse() 反轉陣列項的順序

var values = [1, 2, 3, 4, 5]; 
values.reverse(); 
alert(values); //5,4,3,2,1

sort()方法按升序排列陣列項

sort()方法會呼叫每個陣列項的toString()轉型方法,
然後比較得到的字串,
即使陣列中的每一項都是數值,sort()方法比較的也是字串

var values = [0, 1, 5, 10, 15]; 
values.sort(); 
alert(values);   //0,1,10,15,5

sort()方法可以接收一個比較函式作為引數,
以便我們指定哪個值位於哪個值的前面。

function compare(value1, value2){ 
    return value2 - value1; 
}
var a = [10,122,12,11,112];
console.log(a.sort(function(a,b) {
    return a-b; //由小到大
}));

返回一個小於零、等於零或大於零的值來影響排序結果,因此減法操作就可以適
當地處理所有這些情況。

七.操作方法

1.concat() 陣列連線
var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);
alert(colors); //red,green,blue
alert(colors2); //red,green,blue,yellow,black,brown

2.slice() 基於當前陣列中的一或多個項建立一個新陣列
接受一或兩個引數,即要返回項的起始和結束位置
負數,用陣列長度加上slice(-2,-1)與呼叫slice(3,4)相同

var colors = ["red", "green", "blue", "yellow", "purple"]; 
var colors2 = colors.slice(1); 
var colors3 = colors.slice(1,4); 
alert(colors2); //green,blue,yellow,purple 
alert(colors3); //green,blue,yellow 

3.splice()

1.刪除: 任意數量的項,只需指定2個引數:要刪除的第一項的位置和要刪除的項數。
    例如,splice(0,2)會刪除陣列中的前兩項

2.插入:可以向指定位置插入任意數量的項,只需提供3個引數:起始位置、0(要刪除的項數)
如果要插入多個項,可以再傳入第四、第五,以至任意多個項。例如,
splice(2,0,"red","green")會從當前陣列的位置2開始插入字串"red"和"green"。

3.插入:任意數量的項,且同時刪除任意數量的項,只需指定3個引數:起
始位置、要刪除的項數和要插入的任意數量的項。插入的項數不必與刪除的項數相等。例如,
splice (2,1,"red","green")會刪除當前陣列位置2的項,然後再從位置2開始插入字串
"red"和"green"。

var colors = ["red", "green", "blue"]; 
var removed = colors.splice(0,1);   // 刪除第一項
alert(colors); // green,blue 
alert(removed); // red,返回的陣列中只包含一項

removed = colors.splice(1, 0, "yellow", "orange"); // 從位置1開始插入兩項
alert(colors); // green,yellow,orange,blue 
alert(removed); // 返回的是一個空陣列

removed = colors.splice(1, 1, "red", "purple"); // 插入兩項,刪除一項
alert(colors); // green,red,purple,orange,blue 
alert(removed); // yellow,返回的陣列中只包含一項

八.位置方法

indexOf()和lastIndexOf()

indexOf()方法從陣列的開頭(位置0)開始向後查詢
lastIndexOf()方法則從陣列的末尾開始向前查詢。
返回要查詢的項在陣列中的位置,
或者在沒找到的情況下返回-1

九.迭代方法

每個方法都接收兩個引數:要在每一項上執行的函式和(可選的)執行該函式的作用域物件——影響this的值

  1. every() 對陣列中的每一項執行給定函式,如果該函式對每一項都返回true,則返回true。

    var numbers = [1,2,3,4,5,4,3,2,1]; 
    var everyResult = numbers.every(function(item, index, array){ 
    return (item > 2); 
    });
    alert(everyresult);//false
    
  2. some():對陣列中的每一項執行給定函式,如果該函式對任一項返回true,則返回true。

    var someResult = numbers.some(function(item, index, array){ 
    return (item > 2); 
    }); 
    alert(someResult); //true
    
  3. filter() 對陣列中的每一項執行給定函式,返回該函式會返回true的項組成的陣列

    var numbers = [1,2,3,4,5,4,3,2,1]; 
    var filterResult = numbers.filter(function(item, index, array){ 
    return (item > 2); 
    }); 
    alert(filterResult);  //[3,4,5,4,3]
    
  4. map() 對陣列中的每一項執行給定函式,返回每次函式呼叫的結果組成的陣列

    var numbers = [1,2,3,4,5,4,3,2,1]; 
    var mapResult = numbers.map(function(item, index, array){ 
    return item * 2; 
    }); 
    alert(mapResult); //[2,4,6,8,10,8,6,4,2] 
    
  5. forEach() 對陣列中的每一項執行給定函式。這個方法沒有返回值。
    var numbers = [1,2,3,4,5,4,3,2,1];
    numbers.map(function(item, index, array){
    console.log(item);
    });
    //[1,2,3,4,5,4,3,2,1]
    十.歸併方法
    reduce()和reduceRight()

    函式接收4個引數:前一個值、當前值、項的索引和陣列物件。
    這個函式返回的任何值都會作為第一個引數自動傳給下一項。
    第一次迭代發生在陣列的第二項上,
    因此第一個引數是陣列的第一項,第二個引數就是陣列的第二項。

    var values = [1,2,3,4,5]; 
    var sum = values.reduce(function(prev, cur, index, array){ 
        return prev + cur; 
    }); 
    alert(sum); //15 
    

相關文章