JavaScript中的數組

數組

數組概述

• 數組是什麼

數組是值的有序集合 數組中的每個值叫作一個元素 而每一個元素在數組中都有一個惟一的位置
這個位置用數字表示 叫作索引數組; 用字符串表示 叫作關聯數組
JavaScript數組是無類型的 數組的元素能夠是任何類型 例如字符串 數字值 布爾值等 並且每一個數組中的不一樣元素多是不一樣類型
JavaScript數組是動態的 根據須要 能夠動態地向數組插入新的元素 或者從數組中刪除指定的元素

一維數組

• 定義數組

數組最大的做用就是用於儲存多個值
定義數組分爲三種形式:
1.使用數組字面量方式
2.使用數組函數方式
3.使用構造函數方式

/*
    1.字面量/直接量方式定義
    var 數組名稱 = [元素一,元素二,...]
*/
var arr1 = [];//定義一個數組
var arr2 = [100,'臥龍前端',true,undefined];
var arr6 = [10];

console.log(arr6);

/*
    2.函數構造方式
    var 數組名稱 = new Array(元素一,元素二,...)
    var 數組名稱 = new Array(length)
    * length - number類型 表示數組的長度(存在元素的個數)
*/
var arr3 = new Array();//定義一個空數組
var arr4 = new Array(100,'臥龍前端',true,undefined);
console.log(arr4);

var arr5 = new Array(10);
console.log(arr5);

/*
    3.函數方式定義
    var 數組名稱 = Array(元素一,元素二,...)
    var 數組名稱 = Array(length)
    * lenght - number類型 表示數組的長度(存在元素的個數)
*/
var arr7 = Array();// 定義一個空數組
var arr8 = Array(100, '臥龍前端', true, undefined);
var arr9 = Array(10);
console.log(arr9);

• 索引數組

索引數組 - 表示數組中元素的位置使用數字值來表示
1.數字值表示元素的位置 - 角標或下標
2.數組的長度與元素的個數是一致的
3.索引數組的下標是從0開始的

var arr = [];//定義同一個空數組
arr[0] = '莊周夢蝶';
arr[1] = true;

console.log(arr,length);

• 關聯數組

關聯數組 - 就是存儲元素的位置使用字符串來表示 通常稱之爲名稱(name或key)
注意:關聯數組的數組長度與元素的個數不一致
緣由:JaveScript的官方不支持關聯數組的
關聯數組的名稱(name或key)是字符串 必須使用單引號或雙引號將其包裹

var arr = [];//定義一個空數組
arr['name'] = '呂樹';
arr['age'] = 18
arr['jib'] = '大魔王';
//輸出的結果[name:'呂樹',age: 18, job:'大魔王']
console.log(arr.length);

• 稀疏數組

稀疏數組是包含0開始的不連續索引的數組
稀疏數組 - 數組的長度與元素的個數不一致的

var arr = [];
arr[0] = '呂樹';
arr[3] = 18;
arr[5] = '大魔王';

console.log(arr.length);

/*
    獲得undefined值的幾種方式：
    1.定義變量 但未初始化值
    2.定義變量 並初始化值爲 undefined
    3.訪問數組中未定義的位置的元素值(默認爲undefined)
 */

// 將稀疏數組進行處理，獲得正常的索引數組
var newArr = [];
for (var i=0; i<arr.length; i++) {
// 比較當前值是否等於 undefined
if (arr[i] !== undefined) {
    newArr.push(arr[i]);
    }
}
console.log(newArr);

• 訪問數組的元素

// 定義數組的默認爲索引數組
var arr = ['前端開發',100,null];
// 調用數組名稱時，獲得只是存儲全部元素數據的集合
console.log(arr);
// 訪問索引數組中的元素 - 數組名稱[索引值]
console.log(arr[0]);
// 若是訪問了數組中未定義的位置的元素時 - 語法不抱錯，結果爲 undefined
console.log(arr[5]);
// 索引數組中索引值最大爲 arr.length - 1

// JavaScript中的關聯數組定義與訪問都是沒有問題的
var arr1 = [];
arr1['name'] = '呂樹';
arr1['age'] = 18;
arr1['job'] = '大魔王';

console.log(arr1['name']);

• 數組的複製

var arr = ['蝶夢莊周', true];
var result = arr;

console.log(arr);
console.log(result);

arr = [100];
console.log(arr);

console.log(result);

arr[0] = 100;
console.log(arr);

console.log(result);

• 數組元素的修改

不只能夠從數組中讀取指定的元素 還能夠根據需求修改數組中指定的元素值

// 索引數組
var arr1 = [];
arr1[0] = 'web前端';
arr1[1] = true;
// 關聯數組
var arr2 = [];
arr2['name'] = '呂樹';
arr2['age'] = 18;
arr2['job'] = '大魔王';
// 經過數組的索引值找到對應元素的位置，再經過從新賦值的操做進行修改
arr1[0] = 100;
console.log(arr1);

arr2['name'] = '呂小魚';
console.log(arr2);
// 若是索引值是新的，就是新增數組的元素操做
arr1[4] = 'web前端';
console.log

• 數組元素的刪除

不只能夠根據需求修改數組中指定的元素值 也能夠刪除數組中指定的元素值
數組刪除指定元素值使用delete關鍵字

// 索引數組
var arr1 = [];
arr1[0] = 'web前端';
arr1[1] = true;
// 關聯數組
var arr2 = [];
arr2['name'] = '呂樹';
arr2['age'] = 18;
arr2['job'] = '大魔王';

/*
      使用 delete 運算符進行刪除數組的元素
    * 注意 - 只是刪除元素的數據內容 而對應的位置被保留 - 稀疏數組
  */
delete arr1[0];
console.log(arr1);

• 循環遍歷數組

遍歷數組通俗點就是說把數組中的每一個數都讀一遍（部分有if條件+break的則可能不會徹底遍歷）能夠對於數組中的每一個數進行處理 亦或者是找到數組中那個本身須要的數
循環遍歷數組有三種語句:

var arr = ['web前端',100,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]);
}

• for...in語句

在ECMAScript5中新增了for...in語句 一樣可用於遍歷數組
for...in語句還能夠用於遍歷稀疏數組 循環的每次將一個有效元素返回
for語句: 循環的開始和結束 都是由程序員決定的
for..in語句: 循環只能從開始到結束

var arr = ['前端課程', 100, true, undefined];
/*
    for (var 變量 in 數組) {
        語句塊
    }
    * 變量 - 獲得的是數組的索引值
 */
for (var i in arr) {
    console.log(arr[i]);
}

for (var i=0; i<arr.length; i++) {
    console.log(arr[i]);
}

二維數組

• 二維數組是什麼

數組是能夠嵌套的 代表一個數組能夠做爲一個元素被包含在另外一個素組裏面
利用JavaScript這個特色 建立二維數組 即數組的數組

• 定義二維數組

定義一個規整的二維數組:
所謂規整的二維數組 就是指做爲外層數組的元素的內部數據中元素的個數是一致的
定義一個不規整的二維數組:
所謂不規整的二維數組 就是指做爲外層數組的元素的內部數據中元素的個數是不一致的

• 使用二維數組

操做二維數組中的具體元素:
讀取二維數組中真正的元素內容 須要連續兩個索引值才能實現 第一個索引值表示外層數組的 第二個索引值表示內部數組的

• 遍歷二維數組

遍歷二維數組須要使用嵌套結構的循環語句才能實現 外部循環語句是遍歷外層數組的 內部循環語句是遍歷內部數組的

• 二維數組

var arr = [];// 定義一個空數組
arr[0] = [100,200,300];
arr[1] = [400,500,600];
arr[2] = [700,800,900];

//console.log(arr);
// 訪問二維數組中的元素
var result = arr[0];

// 循環遍歷二維數組
for (var i=0; i<arr.length; i++) {
    console.log(arr[i]);
    for (var j=0; j<arr[i].length; j++) {
        console.log(arr[i][j]);
    }
}

• 打印形狀

var num = 9;/* 一行打印星號的數量 */
var star = '';/* 一行要打印的星號 */
for (var i=0; i<num; i++) {
    star += '*';
}
var stars = star;
// for語句 - 打印矩形效果
for (var i=0; i<10; i++) {
    console.log(stars);
}