1. 程式人生 > >JavaScript陣列Array

JavaScript陣列Array

Array型別也很常用,
ECMAScript陣列的每一項可以儲存任何型別的資料,陣列的大小也是可以動態調整的,既可以隨著資料的增加自動增長以容納新資料

建立陣列的方式

1.使用Array建構函式

     var names = new Array(20) //建立length為20的陣列
     var colors  = new Array("red","blue","green") //建立一個包含3個字串值的陣列

2.使用物件字面量的方式

     var colors = ["red","blue","green"] //建立一個包含3個字串值的陣列
     var names = [] //建立一個空陣列
檢測陣列

可以使用 instanceof 判斷

  if(value instanceof Array){
      //對陣列執行某些操作
  }

ES5 新增了 isArray()方法判斷變數是否為陣列

 var a=[];
 var b={};
 Array.isArray(a);//true
 Array.isArray(b)//false
轉換方法

1.陣列轉字串方法

var arr1 = ['bangbang',18,'programmer'];
console.log(arr1.toString());      //bangbang,18,programmer
console.log(arr1.toLocaleString());//bangbang,18,programmer
console.log(arr1.join());          //bangbang,18,programmer
console.log(arr1.join('-'));        //bangbang-18-programmer

console.log(arr1.valueOf());    //[ 'bangbang', 18, 'programmer' ]
console.log(typeof arr1.valueOf()); //Object

toString、toLocaleString、join的返回值都是字串,toString()和toLocaleString()把陣列變成了以逗號分隔的字串
join()預設的也是將數組合併成字串,但是,join可以改變合併的分隔符,上個例子就是把數組合併成用’-‘連線的字串. 但是valueOf返回 Array 物件的原始值。

var a, b,c; 
a = new Array(a,b,c,d,e); 
b = a.join('-'); //a-b-c-d-e  使用-拼接陣列元素
c = a.join(''); //abcde

2.字串轉陣列
實現方法為將字串按某個字元切割成若干個字串,並以陣列形式返回

var str = 'ab+c+de';
var a = str.split('+'); // [ab, c, de]
var b = str.split(''); //[a, b, +, c, +, d, e]
棧方法

1.push()
push方法可以接收任意數量的引數,把他們逐個新增到陣列末尾,並返回修改後陣列得到長度

      var colors = new Array() 
      var count = colors.push("red","green")
      console.log(count)  //2個
      

2.pop方法從陣列末尾移除最後一項,減少陣列的length值,然後返回移除的項

      var colors = new Array() 
      var count = colors.push("red","green")
      console.log(count)  //2個
      var item = colors.pop()
      console.log(item) //返回移除的項,返回green
佇列方法

佇列資料結構的訪問規則是FIFO(先進先出),佇列在列表的末端新增項,從列表的前端移除項
1.shift() 他能夠移除陣列的第一個項並返回該項

      var colors = new Array() 
      var count = colors.push("red","green")
      console.log(count)  //2個
       var item2 = colors.shift()
       console.log(item2) // 返回移除的項,返回red

2.unshift() 在陣列前端新增任意項並返回陣列的長度

       var colors = new Array()
       var count = colors.unshift("red","green")
       console.log(count)
重排序方法

1.reverse() 反轉陣列項的順序

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

2.sort() 按升序排列陣列項
sort() 方法用於對陣列的元素進行排序,並返回陣列。預設排序順序是根據字串UniCode碼。因為排序是按照字串UniCode碼的順序進行排序的,所以首先應該把陣列元素都轉化成字串(如有必要),以便進行比較。

          var values = [0,1,56,23,34,3];
          values.sort(function compare(value1,value2){
            if (value1 < value2) {
                return -1;
            } else if (value1 > value2) {
                return 1;
            }else{
                return 0;
            }
         });
         console.log(values);  //[0, 1, 3, 23, 34, 56]

對於compare函式的解釋:比較函式在第一個值應該位於第二個之後的情況下返回1,而在第一個值應該在第二個之前的情況下返回-1。交換返回值的意思是讓更大的值排位更靠前,也就是對陣列按照降序排序

image

操作方法

1.concat()基於當前陣列中的所有項,建立一個新的陣列

        var arr1 = [1,2,3,4];
        var arr2 = ["a","b","c"];
        var c = arr1.concat(arr2,"sv",4,{"a":18,"ss":"ddd"});
        console.log(arr1);//[1,2,3,4]
        console.log(c);//[1,2,3,4,"a","b","c","sv",4,{"a":18,"ss":"ddd"}]

該方法不會改變原有的陣列。引數可以是array,string,number,object。

返回一個新的陣列,如果有陣列作為引數傳入concat()方法裡時,新增的是陣列中的元素而不是陣列本身。

2.slice()
基於當前陣列的一個或者多個項,建立一個新陣列
arrayObject.slice(start,end)
返回一個新的陣列,包含從 start 到 end (不包括該元素)的 arrayObject 中的元素

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

console.log(colors2); // green, blue, yellow, purple
console.log(colors3); // green, blue, yellow

3.splice()
作用:刪除、插入、替換
需要注意的是: splice()方法是直接修改原陣列的
(1)刪除
語法: array.splice(start,n)
start 指的是從哪個位置開始(不包含start)
n指的是需要刪除的個數


	var array=[1,2,3,4,5];  
    var deletes = array.splice(3,2);  
    console.log(array);   //[1,2,3] 索引為3的位置刪除2項
    console.log(deletes) //[4,5]

(2)插入
插入需要三個引數:起始位置、0(要刪除的項數)和要插入的項
在哪個位置插入,原來插入位置的值向後順移

var colors = ["red", "green", "blue"];
var removed = colors.splice(1,0,"yellow", "orange");
console.log(colors); // ["red", "yellow", "orange", "green", "blue"]
console.log(removed); // 返回空

(3)替換
替換需要三個引數:起始位置、要刪除的項數和要插入的任意數量的項。

var colors = ["red", "green", "blue"];
var removed = colors.splice(1,1,"yellow", "orange");
console.log(colors);  // ["red", "yellow", "orange", "blue"]
console.log(removed); // ["green"]
4.位置方法

indexOf()方法從陣列的開頭(位置為0)開始向後查詢。indexOf()方法返回指定陣列項在陣列中找到的第一索引值。如果通過indexOf()查詢指定的陣列項在陣列中不存在,那麼返回的值會是-1
lastIndexOf()方法和indexOf()剛好相反,從一個數組中末尾向前查詢陣列項,並且返回陣列項在陣列中的索引值,如果不存在,則返回的值是-1。著作權歸作者所有。

let arr = ['orange', '2016', '2016'];
 
arr.indexOf('orange'); //0
arr.indexOf('o'); //-1
 
arr.indexOf('2016'); //1
arr.indexOf(2016); //-1

arr.indexOf(‘orange’) 輸出 0 因為 ‘orange’ 是陣列的第 0 個元素,匹配到並返回下標。
arr.indexOf(‘o’) 輸出 -1 因為此方法不會在每一個元素的基礎上再次執行 indexOf 匹配。
arr.indexOf(’2016′) 輸出 1 因為此方法從頭匹配直到匹配到時返回第一個陣列元素的下表,而不是返回全部匹配的下標。
arr.indexOf(2016) 輸出 -1 注意:這裡不會做隱式型別轉換。

5.迭代方法

(1)every()
方法測試陣列的所有元素是否都通過了指定函式的測試

對陣列中的每一項執行給定函式,如果每一項的執行結果都返回 true,則返回 true

//檢測陣列元素的大小
function isBigEnough(element, index, array) {
  return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true

(2)some()
與 every 方法作用類似,但 every 是隻有每一項都為 true 才整體返回 true,而 some 是隻要陣列任何一項返回 true 則整體返回 true
只要有一個數組成員的返回值是true,就返回true,否則false

let arr = [1, 2, 3];
arr.some(value => value > 2);
// true

(3)fliter()
filter用於把Array的某些元素過濾掉,然後返回剩下的元素。Array的filter()可以接收一個函式

 var arr = [1,2,3,4,5,6,7];
 var ar = arr.filter(function(elem){
     return elem>5;
 });
 console.log(ar);//[6,7]
console.log(arr);//[1,2,3,4,5,6,7]

filter可以解決陣列去重問題

var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7];
var arr2 = arr.filter(function(x, index,self) {
        return self.indexOf(x)===index;
});
console.log(arr2); //[1, 2, 3, 4, 5, 6 ,7]

filter(x,index,self)可以為陣列提供過濾功能,其中x代表元素,index是與X一同傳入元素的索引,而self代表陣列本身

(4)find()
回通過測試的陣列的第一個元素的值
返回值:返回符合測試條件的第一個陣列元素的值,如果沒有符合條件的則返回undefined

 var arr = [1,2,3,4,5,6,7];
 var ar = arr.find(function(elem){
     return elem>5;
 });
 console.log(ar);//6
console.log(arr);//[1,2,3,4,5,6,7]

(5)Foreach()
array.forEach(function(value, index, arr),thisValue)
用於呼叫陣列每個元素,並將元素傳遞給回撥函式(注意沒有辦法跳出或終止forEach語句,除非丟擲異常)

 var arr = [1,2,3,4,5,6,7];
 var sum = 0;
 var ar = arr.forEach(function(elem){
    sum+=elem*4;
 });
 console.log(ar);//undefined
 console.log(arr);//[1,2,3,4,5,6,7]
 console.log(sum);//112

(6) map()
array.map(function(value, index, arr),thisValue)
返回一個新陣列,陣列中的元素為原始陣列元素呼叫函式處理後的值,map()方法按照原始陣列元素順序依次處理元素

 var arr = [1,2,3,4,5,6,7];
 var ar = arr.map(function(elem){
    return elem*4;
 });
 console.log(ar);//[4, 8, 12, 16, 20, 24, 28]
console.log(arr);//[1,2,3,4,5,6,7]
歸併方法

reduce()
reduce()方法是處理陣列的方法,它接收一個函式和一個初始值,然後將陣列中的每個元素和初始值當作引數傳入這個函式中進行處理,最後返回和初始值相同型別的值
例如,將某個值減去陣列中的每個元素:

var items = [5, 10, 15];
var reducer = function minus(minusSum, item) {
    return minusSum - item;
}
var total = items.reduce(reducer, 61);
console.log(total); // 31

上例中初始值為number型別,所以返回的結果也是number型別的,如果我們想返回object型別的值,也可以傳入object型別的初始值

var items = [5, 10, 15];
var reducer = function minus(minusSum, item) {
    minusSum.sum = minusSum.sum - item;
    return minusSum;
}
var total = items.reduce(reducer, {sum: 61});
console.log(total); // {sum: 31}
 let sum = [1, 2, 3, 4, 5, 6].reduce((prev, item) => { return prev + item }, 1);
 console.log(sum) //22

reduce()是一個很強大的方法,我們還可以用它來處理更復雜的業務邏輯 ,
例如,求購物車中商品的總價,購物車資料如下

 var goodList = [
    {
        good: 'paper',
        price: 12
    },
    {
        good: 'book',
        price: 58
    },
    {
        good: 'CD',
        price: 15
    }       
]

然後運用reduce()方法可以輕鬆的獲得所有商品的總價格:

var count = goodList.reduce(function(prev, cur) {
    return cur.price + prev;
}, 0);
console.log(count); // 85

如果使用者有10元的優惠券的話,我們只需要將 -10作為初始值傳入reduce()方法中就可以了

var count = goodList.reduce(function(prev, cur) {
    return cur.price + prev;
}, -10);
console.log(count); // 75

我們給例子增加一點難度,商城在搞促銷,對商品有一定的折扣,我們應該如何求得商品的總價格呢?利用reduce方法也可以很容易解決的。

var goodList = [
    {
        good: 'paper',
        price: 12
    },
    {
        good: 'book',
        price: 58
    },
    {
        good: 'CD',
        price: 15
    }       
];

var dis = {
    paper: 0.5,
    book: 0.8,
    CD: 0.2
}

var count = goodList.reduce(function(prev, cur) {
    return cur.price + prev;
}, -10);

var qcount = goodList.reduce(function(prev, cur) {
    return cur.price * dis[cur.good] + prev;
}, 0);

console.log(count, qcount); // 75 55.400000000000006

求一串字串中每個字母出現的次數,傳統的求法

var arrString = 'fghffgaga';
var strArr = arrString.split('');
var rel = {};
var count = 1;
for (var i = 0; i < strArr.length; i++) {
    for (var j = i + 1; j < strArr.length; j++) {
        if (strArr[i] == strArr[j]) {
            count++;
            strArr.splice(j, 1);
            j = j - 1;              
        }

    }
    var qcount = count;
    count = 1;
    rel[strArr[i]] = qcount;    
}

利用reduce()方法的程式碼如下:

var arrString = 'fghffgaga';
var rel = arrString.split('').reduce(function(res, cur) {
  res[cur] ? res[cur] ++ : res[cur] = 1
  return res;
}, {})
console.log(rel); // {f: 3, g: 3, h: 1, a: 2}