JavaScript中的數組我的分享

數組

數組的概念

• 所謂數組就是 - 用來存儲多個值的容器,數組中的每個值叫元素,每一個元素都有惟一的一個位置,用數字表示的叫作索引數組,用字符串表示叫關聯數組
• 備註: 數組是無類型的:沒有特定類型要求(就是存啥都行)
• 注意: 數組是動態的:就是根據須要能夠插入新的東西,也能夠刪除指定的元素

---

一維數組

定義數組

• 就是隻有一個行或者一個列
• 一維數組分爲三種:

1.字面量/直接量方式:

• 語法:
• var 數組名稱 = [元素1,元素2,元素3,...]
• 注意: 變量聲明後只寫一箇中括號'[]' - 表示定義一個空數組

示例代碼:

/* 變量聲明(設置數組名稱)並給數組賦值 */
var arr1 = [];// 調用結果爲 [] - 表示空數組
var arr2 = [1000,'一花一世界',true];// 調用結果爲 [ 1000, '一花一世界', true ]

console.log(arr1);// 調用結果爲 []
console.log(arr2);// 調用結果爲 [ 1000, '一花一世界', true ]

控制檯調用結果圖:

2.構造函數方式:

• 語法:
• var 數組名稱 = new Array(元素1,元素2,元素3,...)
• var 數組名稱 = new Array(length)
• length - number類型, 表示數組的長度(也是存在元素的個數)的意思
• 注意: 變量聲明後new Array()小括號'()'中不填寫任何內容 - 表示定義一個空數組

示例代碼:

var arr3 = new Array();//調用結果爲 [] - 表示空數組
var arr4 = new Array(1000,'一花一世界',true);// 調用結果爲 [ 1000, '一花一世界', true ]

console.log(arr3);// 調用結果爲 []
console.log(arr4);// 調用結果爲 [ 1000, '一花一世界', true ]

控制檯調用結果圖:

3.函數方式:

• 語法:
• var 數組名稱 = Array(元素1,元素2,元素3,...)
• var 數組名稱 = Array(length)
• length - number類型,表示數組的長度(也是存在元素的個數)的意思

示例代碼:

var arr7 = Array();// 調用結果爲 [] - 表示空數組
var arr8 = Array(1000,'一花一世界',true);// 調用結果爲 [ 1000, '一花一世界', true ]
var arr9 = Array(10);// 調用結果爲 [ <10 empty items> ] - 表示個是數組的長度爲10個

console.log(arr7);// 調用結果爲 []
console.log(arr8);// 調用結果爲 [ 1000, '一花一世界', true ]
console.log(arr9);// 調用結果爲 [ <10 empty items> ]

控制檯調用結果圖:

• 注意:

1. 字面量/直接量方式中的中括號'[]'中直接寫'10'就是表示數組的意思
2. 構造函數方式中new Array()小括號中'()'直接寫'10'是表示數組的長度
3. 函數方式和構造函數方式同樣

示例代碼:

var arr6 = [10];//調用結果爲 [10]
var arr5 = new Array(10);// 調用結果爲 [ <10 empty items> ] - 表示個是數組的長度爲10個

console.log(arr5);// 調用結果爲 [ <10 empty items> ] - 表示個是數組的長度爲10個
console.log(arr6);// 調用結果爲 [10]

控制檯調用結果圖:

---

索引數組

• 索引數組就是表示數組中元素的位置.用數字值表示

  • 數字值表示元素的位置 - 叫角標或下標
  • 數組的長度與元素的個數是一致的
• 注意: 索引數組的角標是從0開始的

示例代碼:

var arr = [];// 定義一個空數組
arr [0] = '一花一世界';
arr [1] = true;

console.log(arr);// 調用結果爲 [ '一花一世界', true ]
console.log(arr.length);// 調用結果爲 2 - 表示被調用數組的長度和元素個數是 2 個

控制檯調用結果圖:

---

關聯數組

• 關聯數組就是表示數組中元素的位置使用字符串表示

  • 注意: 關聯數組的長度與元素的個數不一致
  • 緣由: JavaScript的官方目前不支持關聯數組
  • 因此: 關聯數組目前沒法調用到元素的個數和長度

示例代碼:

var arr = [];// 定義一個空數組
arr['name'] = '孫悟空';
arr['age'] = 500+'歲';
arr['job'] = '取經';

console.log(arr);// 調用結果爲 [ name: '孫悟空', age: '500歲', job: '取經' ]
console.log(arr.length);// 調用結果爲 0

控制檯調用結果圖:

---

稀疏數組

• 索引數組的位置容許不連續 - 沒有定義元素的位置默認爲空(undefined)
• 稀疏數組 - 數組的長度與元素的個數不一致

• 備註:

  • 獲得undefined值的幾種方式:

    1. 定義變量,但未初始化值
    2. 定義變量,並初始化值爲undefined
    3. 訪問數組中未定義的位置的元素值(默認爲undefined)

示例代碼:

var arr = [];// 定義一個空數組
arr[0] = '孫悟空';
arr[2] = 500+'歲';
arr[5] = '取經';

console.log(arr);// 調用結果爲 [ '孫悟空', <1 empty item>, '500歲', <2 empty items>, '取經' ]
console.log(arr.length);//調用結果爲 6


/* 處理稀疏數組,獲得正常的索引值 */
var newArr = [];
/* 利用循環語句獲取出全部的undefined */
for (var i = 0; i<arr.length; i++){
    /* 用條件判斷賽選出 undefined */
    if (arr[i] !== undefined) {
        /* 將當前獲取的元素插入指定的數組中 */
        newArr.push(arr[i]);
    }
}
console.log(newArr);// 調用結果爲 [ '孫悟空', '500歲', '取經' ]

控制檯調用結果圖:

---

訪問數組的元素

• 注意: 調用數組名稱時,獲得的只是存儲的全部元素數據的集合
• 注意: 數組默認定義未索引數組
• 注意: JavaScript中的關聯數組能夠定義和訪問

• 若是訪問了數組中未定義的位置元素,首先語法不報錯,其次結果爲undefined

  • 注意: 索引數組中的索引值最大爲 arr.length - 1

    • 就是索引值最大的減 1
    • 好比: 上面的索引數組有三個元素 - 就是 3 - 1
    • 由於: 索引數組的索引值第一個是 0

示例代碼:

/* 定義數組的默認爲索引數組 */
var arr = ['一花一世界',1000,true];
/* 調用數組名稱時,獲得的是存儲全部元素數據的集合 */
console.log(arr);// 調用結果爲 [ '一花一世界', 1000, true ]

/* 調用索引數組中的元素 - 用法: 數組名稱[索引值] */
console.log(arr[0]);// 調用結果爲 一花一世界

console.log(arr[4]);// 調用結果爲 undefined

//關聯數組
var arr = [];// 定義一個空數組
arr['name'] = '孫悟空';
arr['age'] = 500+'歲';
arr['job'] = '取經';

console.log(arr['name']);// 調用結果爲 孫悟空

---

數組的複製

• 表示一個數組對另外一個數組進行復制
• 複製分爲深複製和淺複製

示例代碼:

// 變量聲明並賦值
var v = 100;
// 變量聲明並賦值
var result = v;

console.log(v);// 調用結果爲 100
console.log(result);// 調用結果爲 100

v = 200;
console.log(result);// 調用結果爲 100


var arr1 = ['一花一世界',true];
var arr2 = arr1;

console.log(arr1);// 調用結果爲 [ '一花一世界', true ]
console.log(arr2);// 調用結果爲 [ '一花一世界', true ]

arr1 = [100];

console.log(arr1);// 調用結果爲 [ 100 ]
console.log(arr2);// 調用結果爲 [ '一花一世界', true ]

arr1[0] = 100;

console.log(arr1);// 調用結果爲 [ 100 ]
console.log(arr2);// 調用結果爲 [ '一花一世界', true ]

分析圖:

---

數組的修改

• 表示對數組中的數據值進行修改
• 經過數組的索引值找到對應元素的位置，在經過對指定數據進行從新賦值來完成數組修改

示例代碼:

// 索引數組
var arr1 = [];
arr1[0] = '一花一世界';
arr1[1] = true;

// 關聯數組
var arr2 = [];// 定義一個空數組
arr2['name'] = '孫悟空';
arr2['age'] = 500+'歲';
arr2['job'] = '取經';

// 經過數組的索引值找到對應元素的位置, 再經過從新賦值的操做進行修改
arr1[1] = '一葉一孤城';
console.log(arr1);// 調用結果爲 [ '一花一世界', '一葉一孤城' ]

arr2['job'] = '打妖怪';
console.log(arr2);// 調用結果爲 [ name: '孫悟空', age: '500歲', job: '打妖怪' ]

// 若是是新的索引值,就是給數組新增一個元素
arr1[2] = '極樂淨土';
console.log(arr1);// 調用結果爲 [ '一花一世界', '一葉一孤城', '極樂淨土' ]

控制檯調用效果圖:

---

數組的刪除

• 表示對數組中的數據值進行刪除
• 使用delete運算符來刪除數據值
• 可是隻刪除數據值，不刪除數據值所佔的位置空間
• 注意: 數組進行刪除後會變成稀疏數組

示例代碼:

// 索引數組
var arr1 = [];
arr1[0] = '一花一世界';
arr1[1] = true;

/*
    使用 delete 運算符進行刪除數組的元素
      * 注意: 只是刪除元素內容,而對應的位置會被保留
 */

delete arr1[1];
console.log(arr1);//調用結果爲 [ '一花一世界', <1 empty item> ]
console.log(arr1.length);//調用結果爲 2

// 關聯數組
var arr2 = [];// 定義一個空數組
arr2['name'] = '孫悟空';
arr2['age'] = 500+'歲';
arr2['job'] = '取經';


delete arr2['age'];
console.log(arr2);// 調用結果爲 [ name: '孫悟空', job: '取經' ]
console.log(arr2.length);// 調用結果爲 0

控制檯調用效果圖:

---

循環遍歷數組

示例代碼:

var arr = ['一花一世界', 101, true, undefined];
// while語句
/*var i = 0;
while (i < arr.length){
    console.log(arr[i]);

    i++;
}*/

// do...while語句
/*var i = 0;
do {
    console.log(arr[i]);

    i++;
} while (i < arr.length);*/

// for語句
for (var i=0; i<arr.length; i++) {
    console.log(arr[i]);
    /*
        調用結果爲：
       一花一世界
       101
       true
       ndefined
     */
}

控制檯調用效果圖:

---

for...in語句

• 注意: for..in語句能夠循環遍歷關聯數組, for語句不行
• 注意: for..in語句循環遍歷稀疏數組(直接獲得有效元素值), for語句不行

示例代碼:

// 關聯數組的length屬性爲 0
var arr1 = [];
arr1['name'] = '孫悟空';
arr1['age'] = 500+'歲';
arr1['job'] = '取經';

/*for (var i=0; i<arr1.length; i++) {
    console.log(arr1[i]);
}*/
// for..in語句能夠循環遍歷關聯數組, for語句不行
for (var i in arr1) {
    console.log(arr1[i]);
    /*
        調用結果爲:
            孫悟空
            500歲
            取經
     */
}

// 稀疏數組 - 數組的長度與元素的個數不一致
var arr2 = [];
arr2[0] = '豬八戒';
arr2[3] = 400+'歲';
arr2[5] = '天蓬元帥';

/*for (var i=0; i<arr2.length; i++) {
    console.log(arr2[i]);
}*/
// for..in語句循環遍歷稀疏數組(直接獲得有效元素值), for語句不行
for (var i in arr2) {
    console.log(arr2[i]);
    /*
        調用結果爲:
            豬八戒
            400歲
            天蓬元帥
     */
}