[重學前端基礎] Javascript之數組

前言

數組在業務中很經常使用，這篇寫寫在業務中常常涉及到的一些關於數組的技術點。

數組經常使用方法

學習數組考慮三個方面：是否改變自身、返回值、回調函數返回值

Es5:

改變數組自身：pop、push、shift、unshift、splice、sort、reverse

不改變數組自身：reduce、slice、indexOf...

reduce:

reduce回調函數中包含4個參數：累積值、當前值、當前索引、原數組；
回調函數返回的是當前循環的累積值；
函數返回的是總的結果；
當不提供初始值時，累積值會將數組第一個值看成值，當前值會將數組第二個值看成值。

應用場景：須要進行累積計算的場景

Es6:

includes、find、from、of...

find:
找到中止循環，回調函數返回true，find返回找到的值；找不到回調函數返回false，find返回undefined。

from:
將僞數組對象或可迭代對象轉化成數組；
from有3個參數：想要轉換成數組的僞數組對象或可迭代對象、每一個元素會執行的回調函數（可選）、執行回調函數mapFn時this對象；
返回新數組。

可迭代對象(部署了Iterator接口的數據結構): Set、 Map...

僞數組: 有length屬性的對象(arguments、{length: 3}...)。

數組的初始化

* var arr = []; arr.length = 8;
* new Array(8)
* Array.from({length: 8})
* arr[8] = null

以上獲得的新數組數組長度都爲8

經過下標指定的數組，數組長度爲9

數組／對象的遍歷

for、for...of、for...in、forEach、map

for...in遍歷數組：

數組索引數字會變爲字符串

會遍歷數組的私有屬性

let arr = ['you','uu','tt']
arr.b = 'haha'
<!--for(let i=0; i<arr.length; i++) {-->
<!--    console.log(arr[i])-->
<!--}-->

for(let key in arr) {
    console.log(key,arr[key])
}

類數組轉化成數組的兩種方法

//Es5寫法
Array.prototype.slice.call(arguments)
//Es6寫法
Array.from(arguments)

數組特色

索引值不存在當前數組中的狀況:

一、數組經過數字進行索引，直接經過指定索引設置數組值會改變數組長度。

二、索引能夠是字符串，索引若是能夠強制轉化成十進制數字，那麼就能夠計算在數組長度中，不然不能夠

let a = [];
a[1] = 2
a.length //2
a['foobar'] = 'youyi'
a.foobar //'youyi'
a.length//2

let b = []
b["14"] = 34
console.log(b.length) //15

數組相關題目練習

一、 {1:123, 2:231, 5:888} 轉化爲 [123, 231, null, null, 888, null, null, null]

function objectToArr(obj,len) {
 
 let arr = [];

 for(let key in obj) {
    arr[key-1] = obj[key]
 }

  if(len)  arr.length = len;
  arr = Array.from(arr, function(v, i) {return v || null})
  
   return arr
}

console.log(objectToArr({1:123, 2:231, 5:888}, 8))

//[123, 231, null, null, 888, null, null, null]

更聰明簡潔的寫法：

function objectToArr(obj,len) {
 
  return Array.from({length: len}, function(v, i) {
     return obj[i+1] || null
  })
}

console.log(objectToArr({1:123, 2:231, 5:888}, 8))

參考資料

幾個關於js數組方法reduce的經典片斷