JS語言核心——“數組”

miqt 發布于2019-08-19 18:01 / 1954人閱讀

摘要：創建數組字面量語法數組直接量或構造函數需要注意的是數組直接量的語法允許有可選的結尾的逗號，所以只有兩個元素而非三個數組元素的讀和寫需要注意的是如果是負數或非負來索引數組，數組將轉換為字符串，字符串作為屬性名來用。

1 創建數組

字面量語法（數組直接量）或構造函數

需要注意的是數組直接量的語法允許有可選的結尾的逗號，所以[,,]只有兩個元素而非三個

2 數組元素的讀和寫

需要注意的是如果是負數或非負來索引數組，數組將轉換為字符串，字符串作為屬性名來用。

var arr = [];
arr[-12] = 10;
console.log(arr[-12]); //此時這是一個屬性

數組也是對象，所以也可以定義getter和setter方法

var arr = [];
Object.defineProperties(arr, {
    name: {
        value: "Oliver",
        writable: true
    },
    getName: {
        set: function(value) {
            this.name = value;
        },
        get: function() {
            return this.name;
        }
    }
})
arr.getName = "Oli"; //寫入數據
console.log(arr.getName); //讀取數據

3 稀疏數組

定義稀疏數組：

var arr0 = [,,,];                           // 稀疏
var arr1 = [1,,2,];                         // 稀疏
var arr2 = new Array(3);                    // 稀疏
var arr3 = new Array(); arr3.length = 3;    // 稀疏
var arr4 = [1,2,3]; delete arr4[0];         // 稀疏

// 以下都是非稀疏
var arr5 = [undefined, undefined, undefined];
var arr6 = new Array(3); arr6[0] = undefined; arr6[1] = undefined; arr6[2] = undefined;

需要注意的是當在數組直擊量中省略值時不回創建稀疏數組。省略的元素在數組中是存在的，值是undefined，可以用in操作符檢測

判斷是否是稀疏數組：

index in array

forEach

如：下面哪些是稀疏數組

4 數組長度

length屬性

另外可以用Object.defineProperty()讓數組的length屬性變為只讀：

var arr = [,,,];
Object.defineProperty(arr, "length", {
    writable: false
})
arr.length = 10; //嚴格模式下報錯

也可以用preventExtensible、seal、freeze來設置權限；

var arr = [,,,];
Object.preventExtensions(arr);
console.log(arr.length); //3
arr.push("hello"); //嚴格模式下報錯

5 數組元素的添加和刪除

pop方法

push方法

shift方法

unshift方法

splice方法

delete方法

需要注意的是delete操作不會影響數組的長度

var arr = [1,2,3,4];
delete arr[2];
console.log(arr.toString()); //1,2,,4 變成了稀疏數組

6 數組遍歷

使用for循環是遍歷數組元素最常見的方法：

// let o = {
//     name: "Oliver",
//     age: 18
// };
let o = ["Oliver", 18];
var keys = Object.keys(o); //屬性名數組
var values = [];
for (var i = 0; i < keys.length; i++) {
    var key = keys[i];
    values[i] = o[key];
};
console.log(keys.toString()); //屬性名
console.log(values.toString()); //值

或for-in循環：

for (let key in arr) {
    console.log(arr[key]);
}
// for (let key in arr) {
//     if (!arr[key]) {
//         continue;
//     }
//     console.log(arr[key]);
// }

for-in循環會枚舉到繼承的屬性，需要過濾：

for (let key in arr) {
    if (!arr.hasOwnProperty(key)) {
        continue;
    }
    console.log(arr[key]);
}

最好不要用forin循環，遍歷可能是升序也可能不是。

ES5中規定了新的方法forEach()：

let arr = ["Oliver",,null,,,,undefined, 18];
arr.forEach( function(element, index) {
    console.log(element);
    console.log(index);
});
//Oliver 
//0 
//null 
//2 
//undefined 
//6 
//18 
//7

7 多維數組

所謂的多維數組在JS中就是數組的數組；

8 ES3數組方法 8.1 join()和字符串方法split()

let arr = ["Oliver",,null,,,,undefined, 18];
console.log(arr.length); //8
var result = arr.join(" ");
console.log(result); //Oliver       18
console.log(result.split(" ").length); //8
console.log(result.split(" ").toString()); //Oliver,,,,,,,18

8.2 reverse() 8.3 sort()以及比較函數的參數

let arr = [213, 23, 2123, 1, 4, "Oliver", "Alice", "ali", "oli"];
console.log(arr.sort().toString()); //1,2123,213,23,4 
console.log(arr.sort(compare).toString()); //1,2123,213,23,4,ali,Alice,oli,Oliver 

function compare(a, b) {
    var a = a.toString().toLowerCase();
    var b = b.toString().toLowerCase();
    if (a > b) { //從小到大
        return 1;
    } else if (a = b) {
        return 0;
    } else {
        return -1;
    }
}

8.4 返回新數組 concat() 接收可選的多個參數不改變原來的數組 8.5 返回子數組 slice() 接收可選的一個或兩個參數不改變原來的數組 8.6 插入和刪除數組 splice() 接收可選的一個起始位置、刪除的個數以及任意的要插入的元素

let arr = [213, 23,1,3,4,43];
var a = arr.splice(1,0,"hello");
console.log(arr.toString()); //213,hello,23,1,3,4,43 
console.log(a.toString()); //空 沒有元素被刪除

8.7push()和pop()，unshift()和shift() 8.8 toString()和toLocaleString() 9 ES5數組方法 9.1 forEach()

接收一個函數，該函數可以有三個參數：

數組元素

元素的索引

數組本身

語法：

array.forEach( function(element, index, array) {
    // statements
});

let arr = [1,2,3,4,5];
arr.forEach( function(element, index, array) {
    switch (arr[index]) {
        case 1:
            array[index] = element + "st";
            break;
        case 2:
            array[index] = element + "nd";
            break;
        case 3:
            array[index] = element + "rd";
            break;
        default:
            array[index] = element + "th";
            break;
    }
});
console.log(arr.toString()); //1st,2nd,3rd,4th,5th

9.2 map()

該方法將調用的數組的每個元素傳遞給指定的函數，并返回一個數組，包含該函數的返回值，也就是說，傳遞給map方法的函數必須有返回值。map方法返回的是新的數組

語法：

var newArray = array.map(function (item) {
    // body...
})

let arr = [1,2,3,4,5];
let newArray = arr.map(function (item) {
    var index = arr.indexOf(item);
    if (arr[index + 1]) {
        return item + arr[index + 1]
    }
});
console.log(newArray.join(";"));

9.3 filter()

該方法接收的函數是用來邏輯判定的，如果為真，則將該子集的成員添加到一個作為返回值中的數組中；

語法：

var newArray = array.filter(function (x) {
    // body...
});

var arr = [1, 2, 3, 4, 5, 6];
var smaller = arr.filter(function(x) {
    if (x < 4) return true;
});
console.log(smaller.toString()); //1,2,3

var doubles = arr.filter(function(a, b) {
    if ((a + b) === 5) {
        return true
    }
});
console.log(doubles.toString()); //3

filter方法會跳過稀疏數組中缺少的元素，返回的數組是稠密的，可以用來壓縮稀疏數組

var arr = [1, , undefined, , null, 6];
var anotherA = arr.filter(function(item) {
    return true;
});
console.log(anotherA.toString()); //1,,,6

也可以壓縮空缺并刪除undefined和null元素

var arr = [1, , undefined, , null, 6];
var anotherA = arr.filter(function(item) {
    return item !== undefined && item !== null;
});
console.log(anotherA.toString()); //1,6

9.4 every()和some()

every方法，當且僅當數組中的成員在判定函數中都返回true，才返回true；

some方法，至少有一個數組中的成員在判定函數中返回true，就返回true；

9.5 reduce()和reduceRight()

reduce方法

將數組進行組合，生成單個值，第二個參數為初始值(如果沒有指定初始值，那么使用數組的第一個元素作為其初始值)

語法：

var result = array.reduce(function(previous, current, index, array) {
    //body...
}, initialValue);

var arr = [1,2,3,4,5,6];
var result = arr.reduce(function (x,y) {
    return x + y;
}, 0);
console.log(result); //21

實際運用（多維數組的扁平化）：

var matrix = [
    [1, 2],
    [3, 4],
    [5, 6, 7],
    [8, 9, 10, 11]
];

var result = matrix.reduce(function(previous, current, index, array) {
    return previous.concat(current);
});

console.log(result.toString()); //1,2,3,4,5,6,7,8,9,10,11

reduceRight方法（從右到左的順序）

var matrix = [
    [1, 2],
    [3, 4],
    [5, 6, 7],
    [8, 9, 10, 11]
];

var result = matrix.reduceRight(function(previous, current, index, array) {
    return previous.concat(current);
});

console.log(result.toString()); //8,9,10,11,5,6,7,3,4,1,2

9.6 indexOf()和lastIndexOf() 10 數組類型

檢測是否數組：

Array.isArray()

Object.prototype.toString.call()

console.log(Array.isArray([])); //True
console.log(Object.prototype.toString.call([]).slice(8, -1)); //Array

11 類數組對象

創建類數組對象

//新建空的Object，a
let a = {};
//向a添加屬性
var i = 0;
while (i < 10) {
    a[i] = i;
    i++
}
//添加length屬性
a.length = i;

//完成
//當做數組遍歷它
for (var i = 0; i < a.length; i++) {
    console.log(a[i]);
};
//輸出0-9

12 作為數組的字符串

字符串可以當做數組，使用方括號語法訪問數據；但是字符串是不可變值，類似Array.prototype.push()等方法不可用。

云服務器 GPU云服務器 js核心知識數組語言語言二維數組 basic語言數組

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79086.html

task0002（一）- JavaScript數據類型及語言基礎

摘要：不過讓流行起來的原因應該是是目前所有主流瀏覽器上唯一支持的腳本語言。經過測試，數字字符串布爾日期可以直接賦值，修改不會產生影響。再考慮對象類型為或者的情況。對于結果聲明其類型。判斷對象的類型是還是，結果類型更改。轉載自我的個人博客歡迎大家批評指正 1. 第一個頁面交互這里最需要學習的老師的代碼中，每一部分功能都由函數控制，沒有創建一個全部變量。且最后有一個函數來控制執行代碼...

elarity 2019-08-22 10:59 評論0 收藏0
JavaScript 語言核心筆記（持續更新）

摘要：在同一個塊內，不允許用重復聲明變量。中為新增了塊級作用域。自帶遍歷器的對象有數組字符串類數組對象對象的對象等和結構對象。返回一個遍歷器，使遍歷數組的鍵值對鍵名鍵值。目錄 1.語法 2.類型、值和變量 3.表達式和運算符 4.語句 5.數組 6.對象 7.函數 8.全局屬性和方法 9.詞法作用域、作用域鏈、閉包 10.原型鏈、繼承機制 11.this的理解 12.ES5新特性 13.E...

suosuopuo 2019-08-20 18:20 評論0 收藏0
JS語言核心——“正則表達式的模式匹配”

摘要：正則表達式一個描述字符模式的對象正則表達式的定義構造函數正則表達式直接量一對斜杠新特性正則的擴展引用類型類型的注意要點用于模式匹配的方法不支持全局搜索忽略表達式參數中的修飾符兩個參數第一個是正則表達式，第二個是要替換的字符串接收一個正則表達正則表達式（regular expression）：一個描述字符模式的對象 1 正則表達式的定義 RegExp()構造函數正則表達式直接量（一...

李世贊 2019-08-19 18:03 評論0 收藏0
JS語言核心——“函數”

摘要：比如，以對象的方法的形式調用函數并傳入兩個參數可以傳入的參數可以是數組和類數組的。方法的該方法主要作用是將函數綁定至某個對象，方法返回一個新的函數，調用這個新的函數會把綁定的函數在對象中當做方法來調用。參數形參（parameter）：函數中定義的變量實參（argument）：運行時的函數調用時傳入的參數上下文（context）：通過對象來調用函數時，這個對象就是thi...

EsgynChina 2019-08-19 18:03 評論0 收藏0
以vue依賴統計為核心的框架(函數)，mve

摘要：試用過幾回，不滿的地方，是一個框架，必須最好按它的方式來編碼，與混編，使用文件。經過一翻網絡搜索，勉強明白了依賴更新的實現方式，便嘗試著自己去實現一個框架。如今有依賴更新這種技術的存在，我覺得找到了可能。初接觸vue，驚為天人，它的更新方式極為取巧，但也是人們保持路人的原因：似乎沒有一個嚴格的數學證明保證按它的方式能精確更新到DOM。不過腦子里推演的似乎不會發生失敗，而且每次界面都能...

Carl 2019-08-23 10:56 評論0 收藏0