JavaScript初探 三 （學習js數組）

JavaScript初探 （三）

JavaScript數組

定義

建立數組

• var 數組名 = [元素0,元素1,元素2,……] ;

var arr = ["Huawei","China","Mirror"];

同時JavaScript也支持 new Array 建立數組。可是建議使用上面的文本方式建立數組

數組訪問

• 經過引用 索引號（下標） 來引用某個數組元素

var name = arr[0];
// name = Huawei

ps：數組的索引是從 0 開始的

• 能夠直接使用數組名不加索引屬性，直接訪問全部數組內容

var arr = ["Huawei","China","Mirror"];
document.getElementById("demo").innerHTML = arr ;
// 結果輸出: Huawei,China,Refueling

更新數組元素

• 直接使用數組索引賦值方式，就可更改數組內元素

數組是對象

• typeof arr_name 會返回 object

  JavaScript的數組其實是一種對象的表現，可是

  數組最好仍是以數組方式來描述

• 二者的區別：

  • 數組是利用索引位置訪問數組內容屬性的
  • 對象是利用對象屬性名來訪問屬性名對象的屬性值的

• 數組元素能夠是對象：

  因爲數組的特色，數組是特殊類型的對象

  故此，能夠在數組中存放不一樣類型的變量

  能夠數字、字符串、函數、函數……

  並且，還能夠在數組中存儲另外一個數組

數組屬性

length屬性

• length：返回數組的長度（數組的元素數目）

var arr = ["Huawei","China","Mirror"];
arr.length;
// 結果：返回 3

因爲arr索引是從零開始，而length數目計算是從1開始的

因此length-1 === 數組最後一個元素的下標索引

• 訪問數組最後一個元素的技巧：

var arr[arr.length - 1] ;
// 結果返回 Mirror

遍歷數組

• 遍歷數組理論上最好的是使用 for 循環

var arr = ["Huawei","China","Mirror"];
var text = "<ul>";
for（i = 0 ； i < arr.length-1 ; i ++){
    text += "<li>" + arr[i] + "</li>";
}

Array.foreach()

var arr = ["Huawei","China","Mirror"];
var text ;
text = "<ul>";
arr.forEach(myArr);
text += "</ul>";
function myArr(value){
    text += "<li>" + value + "</li>";
}

添加元素：push()

• push()：向數組添加新元素的最佳方法就是push()方法

var arr = ["Huawei","China","Mirror"];
arr.push("Refueling");

• 手動添加元素

arr[arr.length] = ("Refueling");
// 或者
arr[x] = ("Refueling");

關聯數組

• 在JavaScript中只支持數字索引；並不支持命名索引方法

var arr = [];
arr[0] = "Huawei";
arr[1] = "China";
arr[2] = "Refueling";
var x = arr.length ;   //返回  3
var y = arr[0];        //返回  Huawei

• 若是使用了命名索引，則會把數組重定義爲 對象

var arr = [];
arr["A"] = "Huawei";
arr["B"] = "China";
arr["C"] = "Refueling";
var x = arr.length ; 		// 返回 0 
var y = arr[0] ;		//返回 undefined

對象和數組的區別

• 在JavaScript中，數組 使用數字索引

• 在JavaScript中，對象使用命名索引

• 對象和數組的不一樣應用

  若是但願元素名爲字符串（文本），則使用對象

  若是但願元素名數字，則使用數組

• 避免 new Array()

  沒有必要使用內建數組構造器 new Array()

識別數組變量

• 咱們用 typeof 判斷數組數據類型的時候，會返回 object ，由於數組是特殊的對象，可是仍是區分不了對象和數字變量。咱們可使用數組的內建：**Array.isArray()**方法

數組方法

toString() 數組輸出

• 將數組轉爲字符串值輸出（元素間逗號分隔）

var arr = ["Huawei","China","Mirror"];
document.getElimentById("demo").innerHTML = arr.toString();
// 結果：Huawei,China,Mirror

join() 數組輸出

• join(c)：將全部數組元素結合爲一個字符串；同時還能夠規定分隔符 c

var arr = ["Huawei","China","Mirror"];
document.getElimentById("demo").innerHTML = arr.join("&");
// 結果：Huawei&China&Mirror

Pop<u>ping</u>()（刪除元素）

• pop()：從數組中**<u>刪除最後一個元素</u>**

var arr = ["Huawei","China","Mirror"];
arr.pop(); //刪除最後一個元素 Mirror

pop()：返回被刪除的那個數

Pushing()（添加元素）

• push()：在數組的<u>最後一個數組元素</u>，向數組後添加一個新元素

var arr = ["Huawei","China","Mirror"];
arr.push("Refueling");  // 添加 Refueling到數組中，並返回最新數組的長度

push()：返回新數組的長度

位移元素（開頭元素添/刪）

• shift()：刪除**<u>首個數組元素</u>**，並把全部其餘元素」位移「到更低的索引

var arr = ["Huawei","China","Mirror"];
arr.shift();	// 返回 Huawei

shift() 返回被移出（刪除）的元素

• unshift()：在數組開頭添加元素 ，並把全部其餘元素向後」位移「索引標誌

var arr = ["Huawei","China","Mirror"];
arr.unshift("Refueling");	// 返回 新的數組長度 5

unshift()：返回新的數組長度

更改元素

• 經過對應的索引號引用直接賦值，來改變該索引位置的元素內容

刪除元素 delete

• JavaScript 數組屬於對象類型，其中的元素可使用 JavaScript delete 運算符來刪除

var arr = ["Huawei","China","Mirror"];
delete arr[0];		//把 "Huawei" 改成 undefined

不建議使用delete運算符，可使用pop() 或 shift() 代替

緣由：後者的數組方法，會自動抹除數組索引，而delete則會保留索引並致使空洞

拼接數組 splice()

• splice()：用於向數組添加新項

var arr = ["Huawei","China","Mirror"];
arr.splice(2,0,"Refueling","Hello");

第一個參數：定義添加新元素的位置

第二個參數：定義應刪除多少元素

其他參數：定義要添加的新元素

• splice()：刪除元素

var arr = ["Huawei","China","Mirror"];
arr.splice(0,1); // 刪除 arr 數組中的第一個元素

第一個參數：定義新元素添加的元素

第二個參數：定義刪除多個元素

其他參數： 被忽略，沒有新元素添加

splice()會返回被刪除的元素

而原數組的內容就會被修改

合併數組 concat()

• concat()：經過合併（鏈接）現有數組來建立一個新數組

var str1 = ["Huawei","Refueling"];
var str2 = ["China","Refueling"];
var myStr = str1.concat(str2) ;   // 鏈接 str1 和 str2

Array1.concat(Array2,……)

一樣的，concat()也能夠和數值合併

array1.concat([值,……])

裁剪數組 slice()

• slice()：裁剪數組的某個片斷，返回一個新的數組

var arr = ["Huawei","China","Refueling","Hello","World"];
var array = arr.slice(1);
var array = arr.slice(1,3);

第一個元素：裁剪的開始位置

第二個元素：裁剪的結束位置

若第二個元素被省略，

則從開始的位置截取到數組的最後一個元素

---

JavaScript數組排序

排序 sort()

• sort()：按照ASCII順序對數組(字符和數字)進行升序排序

var arr = ["Huawei","China","Refueling","Hello","World"];
arr.sort();
// 結果：China,Hello,Huawei,Refueling,World

反轉數組 reverse()

• reverse() ：將數組中的全部元素反轉

var arr = ["Huawei","China","Refueling","Hello","World"];
arr.reverse()

• 利用 sort() + reverse() 對數組進行降序排序

var arr = ["Huawei","China","Refueling","Hello","World"];
arr.sort();
arr.reverse();

比值函數 *

• 比較函數目的是定義另外一種排序順序

• 比較函數應該返回一個負、零或正值，這取決於參數

function(a,b){return a-b}

當 sort() 函數比較兩個值時，會將值發送到比較函數，並根據返回的值，對這些值進行排序。

• 實例：

  當比較 40 和 100 時，sort() 方法會調用比較函數 function(40,100)

  該函數計算 40 - 100 ，而後返回一個 負值

  排序函數將40排序爲比100更低的值

<div>
        <button onclick="myFunction1()">字母順序</button>
        <button onclick="myFunction2()">數字順序</button>
        <p id = "demo"></p>
    </div>
    <script>
        var points = [40,100,1,5,25,10] ;
        document.getElementById("demo").innerHTML = points ;
        
        function myFuntion1() {
            points.sort();
            document.getElementById("demo").innerHTML = points ;
        }
        
        function myFuntion2() {
            points.sort(function(a,b){return a - b}) ;
            document.getElementById("demo").innerHTML = points ;
        }
    </script>

以隨機順序排序

var points = [40,100,1,5,25,10] ;
points.sort(function(a,b){return 0.5 - Math.random()});

原理就是：0.5減去一個隨機數

查找最值

Math.max()

• Math.max.apply：查找數組中的最高值

function myArrayMax(arr) {
    return Math.max.apply(null,arr);
}

Math.max.apply([1,2,3]) === Math.max(1,2,3)

Math.min()

• Math.min.apply：查找數組中的最小值

function myArrayMin(arr) {
    return Math.min.apply([null,arr]);
}

Math.min.apply([1,2,3]) === Math.min(1,2,3)

自定義的max和min

function myArrayMax(arr) {
    var len = arr.length ;
    var max = -Infinity ;  //最小的負值
    while (len --) {
        if  (arr[len] > max) {
            max = arr[len] ;
        }
    }
    return max ;
}

function myArrayMin(arr) {
    var len = arr.length ;
    var min = Infinity ;
    while (len --) {
        if (arr[len] < min) {
            min = arr[len];
        }
    }
    return min ;
}

排序對象數組

• JavaScript 數組的定義中，是容許存儲對象的；

var cars = [
    {name:"HUAWEI",age:"good"},
    {name:"MI",age:"where"},
    {name:"Java",age:"No:1"}
];

即便對象擁有不一樣數據類型的屬性，sort()方法仍然能夠對數組進行排序

解決方法就是利用比較函數對比屬性值

cars.sort(function(a,b){return a.year - b.year});

經過比較函數，將屬性中的屬性值內容進行對比

---

JavaScript 數組迭代方法

Array.forEach()

• forEach()：爲每一個數組元素調用一次函數（回調函數）

var txt = "" ;
var number = [45,4,9,16,25] ;
numbers.forEach(myFunction) ;

function myFunction (value , index , array) {
    txt += value + "<br>" ;
}

• 註釋：
  • 項目值
  • 項目索引
  • 數組自己

上述代碼的做用：數組中每一個值傳遞並調用函數

Array.map()

• map()：經過對每一個數組元素執行函數來建立數組
• map()：不會對沒有值的數組元素執行函數
• map()：不會改變原始數組

var number1 = [45,4,9,16,25] ;
var number2 = number1.map(myFunction) ;
function myFunction(value,index,array){
    return value * 2 ; // 數組中的元素 * 2 並返回
}

• 註釋：
  • 項目值
  • 項目索引
  • 數組自己

Array.filter()

• filter()：建立一個包含經過測試的數組元素的新數組

var number = [45,4,9,16,25] ;
var over18 = number.filter(myFunction) ;
function myFunction(value , index , array){
    return value > 18 ; // 返回大於18的數組元素並組成一個新數組
}

• 註釋：
  • 項目值
  • 項目索引
  • 數組自己

Array.reduce()

• reduce()：在每一個數組元素上運行函數，生成單個值；方法在數組中從左到右運行；不會改變原始的數組。

var number = [45,4,9,16,25] ;
var sum = number.reduce(myFunction) ;
function myFunction(total , value , index , array){
    return total + value ;
}

• 註釋：
  • 總數（初始值/先前返回的值）
  • 項目值
  • 項目索引
  • 數組自己

reduce()：方法可以接收一個初始值

Array.reduceRight()

• 和reduce() 相似

Array.every()

• every()：檢查全部數組值是否能夠經過測試

var number = [45,4,9,16,25] ;
var allOver18 = number.every(myFunction) ;
function myFunction(value , index , array) {
    return value > 18 ;
}

Array.some()

• some()：檢查某些數組值是否經過測試

var number = [45,4,9,16,25] ;
var someOver18 = number.some(myFunction) ;
function myFunction(value , index , array) {
    return value > 18 ;
}

Array.indexOf()

• indexOf()：在數組中搜索元素值並返回其位置

var number = [45,4,9,16,25] ;
var a = number.indexOf(45);

array.indexOf(item,start)

​ item：必須，要檢索的項目

​ start：可選，檢索的起點

未找到項目，返回 -1

若是搜索的內容出現屢次，則返回第一個出現的位置

Array.lasIndexOf()

• lasIndexOf()：和indexOf()功能相似，不一樣的是，從數組結尾開始搜索

Array.find()

• find()：返回經過測試函數的<u>第一個</u>數組元素的值

var number = [45,4,9,16,25] ;
var first = number.find(myFunction) ;
function myFunction(value , index , array) {
    return value > 18 ;
}

Array.findIndex()

• findIndex()：返回經過測試函數的第一個數組元素的下標索引

var number = [45,4,9,16,25] ;
var first = number.findIndex(myFunction) ;
function myFunction(value , index , array){
    return value > 18 ;
}

---