從零開始學 Web 之 JavaScript（四）數組

你們好，這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公衆號，歡迎你們訂閱關注。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！

1、數組

一、數組定義

1. 經過字面量定義數組： var arr = [10,20,30];
2. 經過構造函數定義數組： var arr = new Array(參數); // 參數位置爲一個數值時爲數組長度，多個數值時爲數組中的元素。若是沒有參數的時候 Array後面的括號能夠省略。

二、數組操做

1. 數組長度： 數組名.length;

問：數組中存儲的數據類型必定是同樣的嗎？

類型能夠不同。

問：數組的長度是否是能夠改變呢？

能夠改變。

三、數組高級API

3.一、判斷數組和轉換數組

instanceof // 是一個關鍵字，判斷A是不是B類型：A instanceof B。
isArray()    //HTML5中新增 ，判斷是否是數組
toString()    //把數組轉換成字符串，每一項用,分割
valueOf()    //返回數組對象自己
join(變量)    //根據每一個字符把數組元素連起來變成字符串，變量能夠有能夠沒有。不寫變量默認用逗號分隔，無縫鏈接用空字符串。

instanceof

var str1 = new String("abc");
var str2 = "abc";
console.log(str1 instanceof String); // true
console.log(str2 instanceof String); // false str2不是String對象

join

//join是把數組元素用特殊方式連接成字符串(參數決定用什麼連接，無參默認用逗號連接)
var arr = ["關羽","張飛","劉備"];
var str1 = arr.join();
var str2 = arr.join(" ");//若是用空格的話，那麼元素之間會有一個空格
var str3 = arr.join("");//用空字符串，連接元素，無縫鏈接
var str4 = arr.join("&");
console.log(str1);
console.log(str2);
console.log(str3);
console.log(str4);

arguements

只在函數中使用，表明傳入實參的數組。

arguements 是僞數組：不能修改長短的數組。(能夠修改元素，可是不能變長變短)

fn(1,2);
fn(1,2,3);
fn(1,2,3,4,5);
function fn(a,b){
    //只在函數中使用，實參的數組。
    arguments[0] = 0; // 能夠修改內容
    console.log(arguments);
    //僞數組：不能修改長短的數組。(能夠修改元素，可是不能變長變短)
    arguments.push(1);  // arguments 僞數組沒有push方法
    console.log(arguments instanceof Array); // false

    //形參個數
    console.log(fn.length);
    //實參個數
    console.log(arguments.length);
    // 形參和實參個數能夠不一樣，由於實參傳入的時候能夠形參的個數不同。

    // arguments.callee至關於函數名，這裏打印整個函數。
    console.log(arguments.callee);
}

3.二、數組增刪和換位置（原數組將被修改）

push() //在數組最後面插入項，返回數組的長度
//數組1改後的長度 = 數組1.push(元素1);

pop() //取出數組中的最後一項，返回最後一項
//被刪除的元素 = 數組1.pop();

unshift() //在數組最前面插入項，返回數組的長度
//數組1改後的長度 = 數組1.unshift(元素1);

shift() //取出數組中的第一個元素，返回第一項
//被刪除的元素 = 數組1.shift();

reverse()    //翻轉數組（原數組講被反轉，返回值也是被反轉後的數組）
//反轉後的數組 = 數組1.reverse();

sort(); //給數組排序，返回排序後的數組。如何排序看參數。
//從小到大排序後的數組 = 數組1.sort(function(a,b){
// return a-b;
//});

sort

var arr2 = [7,6,15,4,13,2,1];
console.log(arr2); // 7,6,15,4,13,2,1
console.log(arr2.sort()); // 1,13,15,2,4,6,7

問題：只能經過第一位字母或數字的 unicode 編碼進行排列。

解決：sort方法不穩定，設計的時候就是這麼設計的，能夠經過回調函數進行規則設置。

console.log(arr2);
console.log(arr2.sort(function (a,b) {
    return a-b;   //升序   //b-a:降序
}));

四、迭代方法

做用：代替 for 循環。

every

every() 他的返回值是一個 boolean 類型值。而參數是一個回調函數。
參數有三個。名字隨便起，可是表示的意思仍是這樣順序的。

var arr = ["關長","張飛","趙子龍","馬超","黃忠"];

// function (element,index,array)
// element：數組元素的值
// index：索引
// array：調用這個方法的整個數組對象(通常不用)

arr.every(function(fff,www,ggg) {
    console.log(fff);
    console.log(www); 
    console.log(ggg);
    return true;
}); 
// 關長
// 0
// ["關長", "張飛", "趙龍", "馬超", "黃忠"]
// 張飛
// 1
// ["關長", "張飛", "趙龍", "馬超", "黃忠"]
// 趙龍
// 2
// ["關長", "張飛", "趙龍", "馬超", "黃忠"]
// 馬超
// 3
// ["關長", "張飛", "趙龍", "馬超", "黃忠"]
// 黃忠
// 4
// ["關長", "張飛", "趙龍", "馬超", "黃忠"]

var arr = ["青花瓷", "一路向北", "軌跡"];
    var flag = arr.every(function (ele, index) { // 只要有一個沒知足條件，就返回false
     ele.length > 2;
}); 

console.log(flag); // false

filter

filter 返回值是一個新數組。return 爲 true 的數組。

var arr = ["關長","張飛","趙子龍","馬超","黃忠"];
var arr1 = arr.filter(function (ele,index,array) {
    if(ele.length>2){
    　　return true;
    }
    return false;
});

console.log(arr1); // ["趙子龍"]

foreach

foreach 遍歷數組(無返回值，純操做數組中的元素)

var arr = ["關長","張飛","趙子龍","馬超","黃忠"];
var str = "";
arr.forEach(function (ele,index,array) {
    str+=ele;
});
console.log(str); // 關長張飛趙子龍馬超黃忠

map

map有返回值，返回什麼都添加到新數組中。

var arr = ["關長","張飛","趙子龍","馬超","黃忠"];
var arr2 = arr.map(function (ele,index,array) {
    return ele+"你好";
})

console.log(arr2); // (5) ["關長你好", "張飛你好", "趙子龍你好", "馬超你好", "黃忠你好"]

some

some有返回值，若是函數結果有一個是true，那麼some方法結果也是true。

var arr = ["關長","張飛","趙子龍","馬超","黃忠"];
var flag = arr.some(function (ele,index,array) {
    if(ele.length>2){
        return true;
    }
    return false;
})

console.log(flag); // true

push

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

注意： 新元素將添加在數組的末尾。

注意： 此方法改變數組的長度。

提示： 在數組起始位置添加元素請使用 unshift() 方法。

pop

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

注意：此方法改變數組的長度！

提示： 移除數組第一個元素，請使用 shift() 方法。

瞭解方法

concat() //把參數拼接到當前數組
//新數組 = 數組1.concat(數組2);

slice() //從當前數組中截取一個新的數組，不影響原來的數組，參數start從0開始,end從1開始
//新數組 = 數組1.slice(索引1，索引2);

splice()//刪除或替換當前數組的某些項目，參數start,deleteCount,options(要替換的項目)
//新數組 = 數組1.splice(起始索引，結束索引，替換內容);

indexOf()、lastIndexOf() //若是沒找到返回-1
//索引值 = 數組.indexOf/lastIndexOf(數組中的元素);

forEach() // 數組每一個元素都執行一次回調函數。

五、清空數組

var array = [1,2,3,4,5,6];

// 方法一：刪除數組中全部項目 
array.splice(0,array.length); 

// 方法二：length屬性能夠賦值，其它語言中length是隻讀
array.length = 0;

// 方法三：
array = []; //推薦