一、前言
看到標(biāo)題，也許會(huì)說前端扯什么數(shù)據(jù)結(jié)構(gòu)，寫出頁面完成交互不就ok了嗎？實(shí)際上編程語言也有自己的數(shù)據(jù)結(jié)構(gòu)，只是我們平時(shí)并沒有過多的去關(guān)注。以下我們將來淺談以下javascript中的數(shù)據(jù)結(jié)構(gòu)--數(shù)組
二、為什么要學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)
以我最近接觸的幾個(gè)項(xiàng)目來說，后端返回的數(shù)據(jù)稍有些復(fù)雜，需要做一些處理才能得到自己需要渲染的數(shù)據(jù)結(jié)構(gòu)。作為前端開發(fā)人員，尤其在現(xiàn)在，必須有強(qiáng)大的數(shù)據(jù)結(jié)構(gòu)算法能力，才能支撐整個(gè)業(yè)務(wù)的開發(fā)。
三、javascript數(shù)據(jù)類型
在說明數(shù)據(jù)結(jié)構(gòu)之前，我們了解以下javascript都有哪些數(shù)據(jù)結(jié)構(gòu)
原始類型：
Boolean、Null、Undefined、Number、String、Symbol
Object類型
除 Object 以外的所有類型都是不可變的（值本身無法被改變）。例如，與 C 語言不同，JavaScript 中字符串是不可變的（譯注：如，JavaScript 中對(duì)字符串的操作一定返回了一個(gè)新字符串，原始字符串并沒有被改變）。我們稱這些類型的值為“原始值”
四、數(shù)組
1.定義
數(shù)組是我們最常用也最熟悉的數(shù)據(jù)結(jié)構(gòu)，它是如何定義的：一個(gè)儲(chǔ)存元素的線性集合，元素可以通過索引開任意存取，索引通常是數(shù)字，用來計(jì)算元素之間的存儲(chǔ)位置的偏移量。
emmmmmm.......
這樣說好像和嗯晦澀難懂，簡(jiǎn)單說就是：使用單獨(dú)的變量名來存儲(chǔ)一系列的值
2.創(chuàng)造與讀寫
var number = []
var arr = [1, 2, 3]
var people = new Array()
var count = new Array(1, 2, 3)
var a = new Array(2)
var b = [1, null, 'apple'] //當(dāng)然，數(shù)組里面的值不一定都是一樣的
// length是數(shù)組長度，我們可以借助它來進(jìn)行讀
for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
}
3.常用基本方法
| 方法 | 描述 | 事例 |
|---|---|---|
| concat() | 連接兩個(gè)或更多的數(shù)組，并返回結(jié)果 | arr1.caoncat(arr2) |
| join() | 把數(shù)組的所有元素放入一個(gè)字符串。元素通過指定的分隔符進(jìn)行分隔。 | arr.join(';') |
| pop() | 刪除并返回?cái)?shù)組的最后一個(gè)元素 | arr1.pop() |
| push() | 向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長度 | arr.push(1) |
| shift() | 刪除并返回?cái)?shù)組的第一個(gè)元素 | arr1.shift() |
| unshift() | 向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長度。 | arr.unshift(1) |
| reverse() | 顛倒數(shù)組中元素的順序。 | arr1.reverse() |
| slice() | 從某個(gè)已有的數(shù)組返回選定的元素 | arr.slice(1, 2) |
| sort() | 對(duì)數(shù)組的元素進(jìn)行排序 | arr1.sort() |
| splice() | 刪除元素，并向數(shù)組添加新元素。 | arr.splice(1, 2) |
| toString() | 連接兩個(gè)或更多的數(shù)組，并返回結(jié)果 | arr1.toString() |
| valueOf() | 返回?cái)?shù)組對(duì)象的原始值 | arr.valueOf() |
| indexOf() | 返回查找數(shù)組的位置，找不到-1 | arr.indexOf(1) |
4.迭代器方法
不產(chǎn)生新數(shù)組：
// forEach
function square(num) {
console.log(num)
}
var nums = [1, 2, 3, 4, 5]
nums.square(square)
//
產(chǎn)生新數(shù)組：
map(),filter()
function square(num) {
console.log(num)
}
var nums = [1, 2, 3, 4, 5]
nums.map(square)
array.filter(function(currentValue,index,arr), thisValue)
5.經(jīng)典方法與例子
以上都是一些理論上的知識(shí)，比較簡(jiǎn)單易懂。但是實(shí)際上運(yùn)用到業(yè)務(wù)中，就需要綜合起來了。比如說數(shù)組去重、排序、甚至一些常見的面試題。無論怎么變化，我們只需要關(guān)注核心思路，怎么知道他們想等，怎么找到對(duì)應(yīng)的索引，怎么刪掉對(duì)應(yīng)的值。
小結(jié)
此篇算只能算得上一個(gè)小筆記吧，雖然可能看起來比較簡(jiǎn)單，但是數(shù)組在我們?nèi)粘ｉ_發(fā)中用的最多。所以了解好數(shù)組的一些基本操作，以及一些高級(jí)用法，將會(huì)給我們開發(fā)帶來事半功倍的效果。
