js中數組經常使用的方法和屬性

本文對 js中數組經常使用的方法和屬性 進行知識點總結

建立數組的三種方式

1，常規方法

var arr = new Array ();
  arr[0]="abc";
  arr[1]="def"

2，簡潔方式

var arr = new Array("abc","def");

3，字面量方式

var arr = [];
arr=["abc","def"];

或者

var arr=["abc","def"]

數組對象的屬性

屬性

描述

constructor

返回對建立此對象的數組函數的引用

length

設置或返回數組中元素的數目

prototype

使您有能力向對象添加屬性和方法

數組對象經常使用的方法

concat（）

鏈接兩個或更多的數組，並返回結果

例子1：

在本例中，把 concat() 中的參數鏈接到數組 a 中

var a = [1,2,3];
console.log(a.concat(4, 5));

運行結果

---

例子2：

在本例中，建立了兩個數組，而後使用 concat() 把它們鏈接起來

var arr = new Array(2)
arr[0] = "abc"
arr[1] = "def"

var arr2 = new Array(2)
arr2[0] = "ABC"
arr2[1] = "DEF"

console.log(arr.concat(arr2));

運行結果

---

例子3：

在本例中，建立了三個數組，而後使用 concat() 把它們鏈接起來

var arr = new Array(2)
arr[0] = "abc"
arr[1] = "def"

var arr2 = new Array(2)
arr2[0] = "ghi"
arr2[1] = "jkl"

var arr3 = new Array(2)
arr3[0] = "mno"
arr3[1] = "pqr"


console.log(arr.concat(arr2, arr3));

運行結果

---

join（）

把數組的全部元素放入一個字符串，元素經過指定的分隔符進行分割（注：默認是以"逗號"分割）

例子1：

在本例中，咱們建立一個數組，而後把它的全部元素放入一個字符串

var arr = new Array(2)
arr[0] = "abc"
arr[1] = "def"
console.log(arr.join());

運行結果

---

例子2：

在本例中，咱們使用分隔符來分隔數組中的元素

var arr = new Array(2)
arr[0] = "abc"
arr[1] = "def"
console.log(arr.join("."));

運行結果

---

pop（）

刪除並返回數組的最後一個元素

例子1：

在本例中，建立一個數組，而後刪除數組的最後一個元素（注意：這也會改變數組的長度）

var arr = new Array(3)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "hig"
console.log(arr);
console.log(arr.pop());
console.log(arr);

運行結果

---

push（）

向數組的末尾添加一個或更多元素，並返回新長度

例子1：

在本例中，建立一個數組，並經過添加一個元素來改變其長度

var arr = new Array(3)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"

console.log(arr)
console.log(arr.push("jlm"))
console.log(arr)

運行結果

---

reverse（）

顛倒數組中元素的順序

例子1：

在本例中，建立一個數組，而後顛倒其元素的順序

var arr = new Array(3)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"
console.log(arr)
console.log(arr.reverse())

運行結果

---

shift（）

刪除並返回數組的第一個元素

例子1：

在本例中，建立一個數組，並刪除數組的第一個元素 （注意：這也將改變數組的長度）

var arr = new Array(3)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"
console.log(arr)
console.log(arr.shift())
console.log(arr)

運行結果

---

slice（）

從某個已有的數組返回選定的元素

例子1：

在本例中，建立一個新數組，而後顯示從其中選取的元素

var arr = new Array(6)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"
arr[3] = "jkl"
arr[4] = "mno"
arr[5] = "pqr"
console.log(arr)
console.log(arr.slice(2,4))
console.log(arr)

運行結果

---

例子2：

在本例中，建立一個新數組，而後顯示從其中選取的元素

var arr = new Array(6)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"
arr[3] = "jkl"
arr[4] = "mno"
arr[5] = "pqr"
console.log(arr)
console.log(arr.slice(2,4))
console.log(arr)

運行結果

---

sort（）

對數組的元素進行排序

例子1：

在本例中，將建立一個數組，並按字母順序進行排序

var arr = new Array(6)
arr[0] = "abc"
arr[1] = "pqr"
arr[2] = "mno"
arr[3] = "jkl"
arr[4] = "ghi"
arr[5] = "def"
console.log(arr)
console.log(arr.sort())

運行結果

---

splice（）

刪除元素，並向數組添加新元素

例子1：

在本例中，建立一個新數組，並向其添加一個元素

var arr = new Array(6)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"
arr[3] = "jkl"
arr[4] = "mno"
arr[5] = "pqr"
console.log(arr)
arr.splice(2,0, "zzz")
console.log(arr)

運行結果

---

例子2：

在本例中，刪除位於 index 2 的元素，並添加一個新元素來替代被刪除的元素

var arr = new Array(6)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"
arr[3] = "jkl"
arr[4] = "mno"
arr[5] = "pqr"
console.log(arr)
arr.splice(2,1,"zzz")
console.log(arr)

運行結果

---

例子3：

在本例中咱們將刪除從 index 2 ("ghi") 開始的三個元素，並添加一個新元素 ("zzz") 來替代被刪除的元素

var arr = new Array(6)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"
arr[3] = "jkl"
arr[4] = "mno"
arr[5] = "pqr"
console.log(arr)
arr.splice(2,3,"zzz")
console.log(arr)

運行結果

---

toSourse（）

返回該對象的源代碼

例子1：

toSource() 方法的用法

function employee(name,job,born)
{
    this.name=name;
    this.job=job;
    this.born=born;
}
var bill=new employee("Bill Gates","Engineer",1985);
document.write(bill.toSource());

運行結果

---

toString（）

把數組轉換爲字符串，並返回結果

例子1：

toString() 方法的用法

var arr = new Array(3)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"
console.log(arr.toString());

運行結果

---

toLocaleString（）

把數組轉換爲本地數組，並返回結果

例子1：

var arr = new Array(3)
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"
console.log(arr.toLocaleString());

運行結果

---

unshift（）

向數組的開頭添加一個或更多元素，並返回新的長度

例子1：

在本例中，建立一個數組，並把一個元素添加到數組的開頭，並返回數組的新長度

var arr = new Array()
arr[0] = "abc"
arr[1] = "def"
arr[2] = "ghi"
console.log(arr);
console.log(arr.unshift("zzz"));
console.log(arr);

運行結果

---

valueOf（）

返回數組對象的原始值

例子1：

var arr = new Array(1,2,3)
console.log(arr.valueOf());

運行結果

---

數組對象的幾種遍歷方法

1，普通的for循環

最簡單的一種，也是使用頻率最高的一種，雖然性能不弱，但仍有優化空間

例子1：

let arr1 = [1, 2, 3, 4, 5]
for (let i = 0; i < arr1.length; i++) {
    console.log(arr1[i])
}

運行結果

---

2，優化版的for循環

使用臨時變量，將長度緩存起來，避免重複獲取數組長度，當數組較大時優化效果纔會比較明顯

例子1：

let arr = [1, 2, 3, 4, 5];
for (i = 0, len = arr.length; i < len; i++) {
    console.log(arr[i]);
}

運行結果

說明：使用臨時變量，將長度緩存起來，避免重複獲取數組長度，當數組較大時優化效果纔會比較明顯

---

3，forEach()循環

數組自帶的foreach循環，使用頻率較高，實際上性能比普通for循環弱

例子1：

var arr = [1,2,3,4,5]
arr.forEach(function (value) {
    console.log(value)
})

運行結果

---

4，for-in循環

在衆多的循環遍歷方式中,它的效率是最低的；for...in循環會遍歷一個object全部的可枚舉屬性，for...in循環主要是爲遍歷對象而設計的，不適用於遍歷數組

例子1：

var arr =[1,2,3,4,5]
for(var item in arr){
    console.log(arr[item])
}

運行結果

---

5，map循環

這種方式也是用的比較普遍的，雖然用起來比較優雅，但實際效率還比不上foreach

例子1：

var arr =[1,2,3,4,5]
arr.map(function (value) {
    console.log(value)
})

運行結果

---

es6數組新增方法

foreach（）

foreach遍歷數組，無返回值，不改變原數組，僅僅只是遍歷，經常使用於註冊組件、指令等等

forEach()有三個參數

• 第一個參數是當前元素
• 第二個參數是當前元素的索引
• 第三個參數是當前元素所屬的數組

let array = [1, 2, 3, 4];
array.forEach((item, index, arr) => {
console.log(item);
});
複製代碼

運行結果

---

map（）

map遍歷數組，返回一個新數組，不改變原數組,主要做用是建立一個新的數組

let array = [1, 2, 3, 4 ,5];
let temp = array.map((item, index, arr) => {
return item + 1;
});
console.log(temp);
console.log(array);

運行結果

---

filter（）

filter過濾掉數組中不知足條件的值,返回一個新數組,不改變原數組

let array = [1, 2, 3, 4, 5];
let temp = array.filter((item, index, arr) => {
return item > 3;
});
console.log(temp);
console.log(array);

運行結果

---

reduce（）

reduce讓數組的先後兩項進行某種計算,而後返回其值，並繼續計算,不改變原數組,返回計算的最終結果，從數組的第二項開始遍歷

let array = [1, 2, 3, 4, 5];
let total = array.reduce((a, b) => {
  return a + b;
});
console.log(total);
複製代碼

運行結果

---

some（）

遍歷數組每一項,有一項返回true,則中止遍歷，結果返回true。不改變原數組

let array = [1, 2, 3, 4, 5];
array.some((item, index, arr) => {
  console.log(item);
  return item > 3;
});

運行結果

---

every（）

遍歷數組每一項，每一項返回true,最終結果爲true.有一項返回false,中止遍歷,結果返回爲false。不改變原數組

let array = [1, 2, 3, 4, 5];
let bo = array.every((item, index, arr) => {
  return item > 2;
});
console.log(bo);

運行結果

最後

但願看到文章的同窗都有收穫！

文章要是有不對的地方還望指正！

最後祝你們都愈來愈優秀！

歡迎你們加入，一塊兒學習前端，共同進步！