JavaScript30 - 4.Array Cardio 1

❤️ javascript30是一系列的視頻教程，旨在30天編寫30個前端小項目。 這些項目不須要使用其餘lib,不須要編譯，不須要模板，迴歸最純真的JavaScript；

🐶 🐶 🐶

🐚 這是這個系列的第4篇

• 1. Drum Kit
• 2.JS + CSS Clock
• 3.CSS Variables
• 4.Array Cardio 1

項目代碼同步更新在男同交友網

內容簡介

熟悉並掌握JavaScript中Array的使用，以及一些開發的小技巧；

本期先講一部分，剩餘的在第7期中繼續完成；

知識點

JS

• Array MDN-JS-Array

實踐

Array 的屬性

length

• length: 值是一個 0 到 232-1 的整數。

用處：

• 返回數組的長度
• 將數組的長度指定爲X， 進行數組截斷若 X=0 則表示數組爲空(清空數組)

🌰：

const length_test = [1, 3, 55, 66]
console.log(length_test.length)

length_test.length = 2
console.log(length_test)複製代碼

這裏附平時經常使用的清空數組的操做：

// 清空數組
let empty_test = [1,2,3,4];  

// 1.length = 0
empty_test.length = 0

// 2. empty_test = []
empty_test = []

// 3. splice
empty_test.splice(0)複製代碼

效率最好的是第二種，可是推薦使用第一種； 由於第二種新建了內存

prototype

......大部分的方法都是原型鏈上的方法。 具體的每一個方法會在後續一一實踐；

console.log(Array.prototype)複製代碼

Array 的靜態方法(類方法)

靜態方法是指那些不須要對類進行實例化，使用類名就能夠直接訪問的方法，須要注意的是靜態方法不能被實例化的對象調用。靜態方法常常用來做爲工具函數。 --MDN

• Array.isArray() : 若是對象是 Array 返回true，不然false。

// Array.isArray()
const type_test = [];
const type_test1 = {};
console.log('type_test type is array? : ', Array.isArray(type_test))
console.log('type_test1 type is array? : ', Array.isArray(type_test1))複製代碼

那麼若是遇到不支持ES6語法的瀏覽器呢？
這裏實現一種更加健壯的Array檢測方法

function isArray(value){  
  if (typeof Array.isArray === "function") {  
      return Array.isArray(value);      
  }else{  
      return Object.prototype.toString.call(value) === "[object Array]";      
  }  
}複製代碼

• (ES6) Array.from() : 能夠將一個類數組對象或可遍歷對象轉換成真正的數組。

類數組對象（擁有一個 length 屬性和若干索引屬性的任意對象）
可遍歷對象（你能夠從它身上迭代出若干個元素的對象，好比有 Map 和 Set 等）

語法：

Array.from(arrayLike[, mapFn[, thisArg]])複製代碼

• arrayLike: 想要轉換成真實數組的類數組對象或可遍歷對象。
• mapFn: 可選參數，若是指定了該參數，則最後生成的數組會通過該函數的加工處理後再返回。
• thisArg:可選參數，執行 mapFn 函數時 this 的值。

// 將可迭代對象（Set 對象）轉換成數組
Array.from(new Set(["foo", window])); 

// 使用 map 函數轉換數組元素
Array.from([1, 2, 3], x => x + x);      // [2, 4, 6]

// 生成一個數字序列
Array.from({length:5}, (v, k) => k);    // [0, 1, 2, 3, 4]複製代碼

tips: 發現了一個小玩意

// 實現字符串反轉
let str = 'abcd'
Array.from(str).reverse().join('')複製代碼

• Array.of(): 將它的任意類型的多個參數放在一個數組裏並返回
  語法：

Array.of(element0[, element1[, ...[, elementN]]])複製代碼

🌰：

Array.of(1);         // [1]
Array.of(1, 2, 3);   // [1, 2, 3]
Array.of(undefined); // [undefined]複製代碼

對於不支持的瀏覽器，能夠這樣作：

if (!Array.of) {
  Array.of = function() {
    return Array.prototype.slice.call(arguments);
  };
}複製代碼

Array 對象方法

棧和隊列.pop,.push,.shift和.unshift

• push: 法添加一個或多個元素到數組的末尾(改變原數組)，並返回數組新的長度（length 屬性值）

let sports = ["soccer", "baseball"];
let total = sports.push("football", "swimming");

console.log(sports); // ["soccer", "baseball", "football", "swimming"]
console.log(total);  // 4複製代碼

tips: 用Array.pus().apply(arr1,arr2)來替代建立一個新數組。這種方法不是用來建立一個新的數組，其只是將第一個第二個數組合並在一塊兒，同時減小內存的使用：

let array1 = [1,2,3];
let array2 = [4,5,6];
console.log(array1.push.apply(array1, array2));複製代碼

• pop: 刪除一個數組中的最後的一個元素，而且返回這個元素

let colors = ['red', 'yellow', 'white'];

console.log(colors);

let target = myFish.pop();

console.log(colors);
console.log(target);複製代碼

.pop方法和.push成對使用，它返回數組的末尾元素並將元素從數組移除。若是數組爲空，返回void 0（undefined）。使用.push和.pop咱們能輕易模擬出LIFO（後進先出或先進後出）棧 -- 有趣的JavaScript原生數組函數

簡易棧（Stack）的實現：

function Stack () {
    this._stack = []
}

Stack.prototype.next = function () {
    return this._stack.pop()
}

Stack.prototype.add = function () {
    return this._stack.push.apply(this._stack, arguments)
}

stack = new Stack()
stack.add(1,2,3)

stack.next()複製代碼

• shift: 刪除數組的第一個元素，並返回這個元素。該方法會改變數組的長度

  shift 方法移除索引爲 0 的元素(即第一個元素)，並返回被移除的元素，其餘元素的索引值隨之減 1。若是 length 屬性的值爲 0 (長度爲 0)，則返回 void 0(undefined)

// shift
let colors2 = ['red', 'yellow', 'white'];

console.log(colors2);

let target = colors2.shift();

console.log(colors2);
console.log(target2);複製代碼

• unshift: 在數組的開頭添加一個或者多個元素，並返回數組新的 length 值

let arr = [1, 2];

arr.unshift(0); //result of call is 3, the new array length
//arr is [0, 1, 2]複製代碼

用.unshift 和 .shift模擬FIFO（先進先出）隊列(Queue)

function Queue () {
    this._queue = []
}

Queue.prototype.next = function () {
    return this._queue.shift()
}

Queue.prototype.add = function () {
    return this._queue.unshift.apply(this._queue, arguments)
}

queue = new Queue()
queue.add(1,2,3)

queue.next()複製代碼

本文對你有幫助？歡迎掃碼加入前端學習小組微信羣：