深度理解JavaScript陣列特性與實踐應用
大家記得下班打卡喲,!!!
JavaScript陣列特性與實踐應用,較為深入而詳細的分析了javascript陣列的功能、屬性、使用方法及操作注意事項,寫的十分的全面細緻,具有一定的參考價值,對此有需要的朋友可以參考學習下。如有不足之處,歡迎批評指正。
JavaScript 提供了一種類似陣列特性的物件,它把陣列的下標變為字串,作為物件的屬性。雖然它比一個真正的陣列來的慢,但是使用起來很方便。
1 陣列字面量
陣列字面量是在一對方括號中包圍零個或多個用逗號分隔的值的表示式:
var empty = [];
var numbers = [
'zero', 'one', 'two', 'three'
];
console.log(empty[1]);//undefined
console.log(numbers[1]);//one
console.log(empty.length);//0
console.log(numbers.length);//4
陣列物件繼承自 Array.prototype,所以 numbers 繼承了大量有用的方法。
JavaScript 允許陣列包含任意混合型別的值:
var misc = [
'string', 11.3, false, true, null, undefined, ['nested', 'array'], {object: true}, NaN, Infinity
];//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
console.log(misc.length);//10
2 長度
陣列有一個 length 屬性,但它是沒有上界的。如果用大等於當前 length 的數字作為下標來儲存元素,那麼 length 屬性值會被增大以便容納新的元素,而不會發生陣列越界現象哦O(∩_∩)O~
length 屬性的值很詭異,它是陣列最大整數屬性名加 1,即它不一定等於陣列的元素個數:
var myArray = [];
console.log(myArray.length);//0
//myArray 只包含一個屬性,但 length 的值等於這個陣列最大整數的屬性名加 1
myArray[100000] = true;
console.log(myArray.length);//100001
//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
[] 後置運算子會把它包含的表示式轉換為字串,如果表示式有 toString() 方法,那麼就會呼叫它。這個字串被當做屬性名,如果這個字串是一個大等於當前 length 值而且小於 4294967295 的正整數,那麼這個陣列的 length 就會被重置為新的下標加 1。
可以直接設定 length 的值。設定更大的 length 值不會為陣列分配更多的空間;而把 length 設小則會導致所有下標大等於新的 length 的屬性被刪除:
//刪除元素
numbers.length = 3;
console.log(numbers);//[ "zero", "one", "two"
把下標指定為陣列的當前 length,就可以把一個新元素附加到陣列的尾部:
//新增元素
numbers[numbers.length] = 'four';
console.log(numbers);//[ "zero", "one", "two", "four" ]
使用 push() 可以更方便地實現同樣的功能:
//新增元素(push)
numbers.push('good');
console.log(numbers);//[ "zero", "one", "two", "four", "good" ]
3 刪除
JavaScript 陣列就是物件,所以可以用 delete 移除元素:
delete numbers[2];
console.log(numbers);//[ "zero", "one", <1 個空的儲存位置>, "four", "good" ]
可惜的是,這會在陣列中留下一個空洞!而我們希望的是:刪除後,被刪除元素的後續元素會自動地往前移動。
JavaScript 陣列提供了 splice() 方法,它接受下列引數:
①. 陣列的索引。
②. 要刪除的元素個數。
③. 其他引數(多個)- 把這些引數依次插入到索引位置。
//第一個引數是索引號,第二個引數是要刪除的元素個數
numbers.splice(2, 1);
console.log(numbers);// [ "zero", "one", "four", "good" ]
//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
4 列舉
JavaScript 陣列是物件,所以可以用 for in 語句來遍歷陣列的所有屬性。可是 for in 語句無法保證屬性的順序,而且可能從原型鏈中得到意外的屬性。
可以使用 for 來避免上述的問題:
var i,
myArray = numbers;
for (i = 0; i < myArray.length; i += 1) {
console.log(myArray[i]);
}//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
5 陣列與物件
如何在這兩者進行選擇?當屬性名是小而連續的整數時,使用陣列;否則使用物件。
JavaScript 的 typeof 會認為陣列是 object,這沒有意義!
我們可以定義一個函式來檢測陣列:
var is_array = function (value) {
return value && typeof value === 'object' &&
value.constructor === Array;
};//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
這個方法在不同視窗(window)或框架(frame) 裡構造的陣列會失敗。所以請用下面的這個更好的方法:
var is_array = function (value) {
return Object.prototype.toString.apply(value) === '[object Array]';
};
console.log(is_array(myArray));//true
6 方法
JavaScript 提供了一些對於陣列可用的方法,它們被儲存在 Array.prototype 中。我們可以為陣列增加一個對陣列進行計算的方法
//新增可以對陣列中的元素進行計算的方法
Array.method('reduce', function (f, value) {
var i;
for (i = 0; i < this.length; i += 1) {
value = f(this[i], value);
}
return value;
});//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
這樣所有的陣列都繼承了這個方法。它接受一個函式與初始值為引數。然後遍歷陣列,並通過函式計算出新值,最後返回這個值。
//建立數字陣列
var data = [9, 16, 32, 192, 8];
//定義加法與乘法函式
var add = function (a, b) {
return a + b;
};
var mult = function (a, b) {
return a * b;
};//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
console.log(data.reduce(add, 0));//257
console.log(data.reduce(mult, 1));//7077888
因為陣列就是物件,所以也可以直接給陣列新增方法:
data.total = function () {
return this.reduce(add, 0);
};
console.log(data.total());//257
因為字串 “total” 不是整數,所以不會改變陣列的 length 值。當屬性名是字串時,它就會成為陣列的屬性。
7 指定初始值
如果使用 [] 得到的新陣列,它將是空的。這是如果訪問它,將會得到 undefined。我們可以實現一個可以初始化陣列元素值的方法:
//為每一個元素指定初始值
Array.dim = function (dimension, initial) {
var a = [], i;
for (i = 0; i < dimension; i += 1) {
a[i] = initial;
}
return a;
};//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
//建立包含 10 個 0 的陣列
var myArray = Array.dim(10, 0);
console.log(myArray);//[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]
JavaScript 陣列的元素可以是陣列,通過這種方式來實現多維陣列功能:
//陣列的陣列
var matrix = [
[0, 1, 2], [3, 4, 5]
];
console.log(matrix[1][0]);//3
可以擴充套件 Array 方法,讓它可以初始化矩陣:
/**
*
* @param m 第一維個數
* @param n 第二維個數
* @param initial 初始值
*/
Array.matrix = function (m, n, initial) {
var a, i, j, mat = [];
for (i = 0; i < m; i += 1) {
a = [];
for (j = 0; j < n; j += 1) {
a[j] = initial;
}
mat[i] = a;
}
return mat;
};
//構造 0 填充的 4*4 矩陣
console.log(Array.matrix(4, 4, 0));
//構造單元矩陣
Array.identity = function (n) {
var i, mat = Array.matrix(n, n, 0);
for (i = 0; i < n; i += 1) {
mat[i][i] = 1;
}
return mat;
};//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
var myMatrix = Array.identity(4);
console.log(myMatrix);
console.log(myMatrix[3][3]);//1
結語
感謝您的觀看,如有不足之處,歡迎批評指正。
獲取資料
本次給大家推薦一個免費的學習群,裡面概括移動應用網站開發,css,html,webpack,vue node angular以及面試資源等。
對web開發技術感興趣的同學,歡迎加入Q群:619586920,不管你是小白還是大牛我都歡迎,還有大牛整理的一套高效率學習路線和教程與您免費分享,同時每天更新視訊資料。
最後,祝大家早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峰。
相關文章
- 詳解JavaScript陣列特性與實踐應用JavaScript陣列
- 深度學習的應用與實踐深度學習
- javascript 陣列的深度複製JavaScript陣列
- 稀疏陣列、佇列的概念與實踐陣列佇列
- 深度剖析——超融合架構應用與實踐分享架構
- 深入理解中文編碼:原理、應用與實踐
- 一文搞懂JavaScript陣列的特性JavaScript陣列
- 【深度長文】JavaScript陣列所有API全解密JavaScript陣列API解密
- 混合應用中的javascript實踐JavaScript
- JavaScript Web 應用最佳實踐分析JavaScriptWeb
- 用JavaScript實現棧與佇列JavaScript佇列
- 如何理解雅克比矩陣在深度學習中的應用?矩陣深度學習
- 深度理解vue 關於陣列和物件的更新Vue陣列物件
- 深入理解 JavaScript 物件和陣列拷貝JavaScript物件陣列
- Apache Flink 進階(三):Checkpoint 原理解析與應用實踐Apache
- JavaScript 中實現等分陣列JavaScript陣列
- javascript 偽陣列實現方法JavaScript陣列
- 愛奇藝iOS深度實踐 | SiriKit詳解應用篇iOS
- JavaScript中陣列的增刪改查以及應用方式JavaScript陣列
- JavaScript 陣列JavaScript陣列
- 深入 JavaScript 陣列:進化與效能JavaScript陣列
- JavaScript 物件與陣列參考大全JavaScript物件陣列
- Javascript - 陣列和陣列的方法JavaScript陣列
- 深度學習在小米電商業務的應用實踐深度學習
- 差分陣列原理與其字首和的應用陣列
- RAID磁碟陣列應用AI陣列
- JavaScript Event Loop 機制詳解與 Vue.js 中實踐應用JavaScriptOOPVue.js
- JavaScript 深入之類陣列物件與 argumentsJavaScript陣列物件
- JavaScript 陣列排序 與 求最大值JavaScript陣列排序
- JavaScript深度理解——作用域JavaScript
- JavaScript 陣列slice()JavaScript陣列
- JavaScript 陣列indexOf()JavaScript陣列Index
- JavaScript 陣列values()JavaScript陣列
- JavaScript 陣列fill()JavaScript陣列
- JavaScript 陣列 slice()JavaScript陣列
- JavaScript 陣列 fill()JavaScript陣列
- JavaScript 陣列 lastIndexOf()JavaScript陣列ASTIndex
- JavaScript 陣列 indexOf()JavaScript陣列Index