關于數組函數,眾所周知,我們可以通過Array函數做以下事情。
// 1. Initialize an array of the specified lengthconst array1 = Array(3) // [ , , ]// 2. Set the initial value of the arrayconst array2 = Array() // []const array3 = Array(undefined) // [ undefined ]const array4 = Array(1, 2, 3) // [ 1, 2, 3 ]
傳遞給Array函數的參數個數不一樣,其功能也不一樣。這常常讓我感到困惑。
幸運的是,我們可以使用Array.of來彌補Array的缺點。
// it's not initializing an array of length 3const array1 = Array.of(3) // [ 3 ]const array2 = Array.of() // []const array3 = Array.of(undefined) // [ undefined ]const array4 = Array.of(1, 2, 3) // [ 1, 2, 3 ]
在該方法中,我們可以通過 Array.from 方法將類數組對象、arguments 對象和 NodeList 對象轉換為真正的數組。
類似數組的對象
const arrayLike = { 0: 'fatfish', 1: 'medium', length: 2}const array1 = [].slice.call(arrayLike) // ['fatfish', 'medium']// A more convenient wayconst array2 = Array.from(arrayLike) // ['fatfish', 'medium']
const domsNodeList = document.querySelectorAll('div')const domsArray = Array.from(domsNodeList) // [ dom, dom, dom, ... ]
const logInfo = function () { console.log('arguments', arguments) console.log('Array.from arguments', Array.from(arguments))}logInfo('fatfish', 100)logInfo('fatfish')
我們可以使用 Array.from 方法,例如“[].map”。
const array = [ 1, 2, 3 ]const array2 = array.map((num) => num * 2) // [2, 4, 6]const array3 = Array.from(array, (num) => num * 2) // [2, 4, 6]
我們經常會寫這樣的判斷語句,當其中一個條件滿足時做某事。
const num = 1if (num === 1 || num === 2 || num === 3 || num === 4) { console.log(num) // 1}
其實可以通過include方法來簡化代碼。
const nums = [ 1, 2, 3, 4 ]const num = 1if (nums.includes(num)) { console.log(num) // 1}
如何讀取數組的尾部元素?是的,我們需要以“array.length-1”作為下標來讀取。
const array = [ 1, 2, 3, 4, 5 ]const lastEle = array[ array.length - 1 ] // 5// You can't read like thatconst lastEle = array[ - 1 ] // undefined
還有其他辦法嗎?
是的,“at”方法將是你的魔力。當然,您可以讀取數組中其他位置的元素。
const array = [ 1, 2, 3, 4, 5 ]const lastEle = array.at(-1) // 5const ele1 = array.at(0) // 1
來自 MDN:“flat() 方法創建一個新數組,其中所有子數組元素遞歸地連接到其中,直到指定的深度。”
const array = [ 1, [ 2, [ 3, [ 4, [ 5 ] ] ] ] ]// The default depth is 1const flat1 = array.flat() // [ 1, 2, [ 3, [ 4, [ 5 ] ] ] ]const flat2 = array.flat(2) // [ 1, 2, 3, [ 4, [ 5 ] ] ]const flatAll = array.flat(Infinity) // [ 1, 2, 3, 4, 5 ]
來自 MDN:“findIndex() 方法返回數組中滿足所提供的測試函數的第一個元素的索引。否則,返回-1,表示沒有元素通過測試。”
const array = [ -1, 0, 10, 10, 20, 100 ]const index1 = array.findIndex((num) => num < 0) // 0const index2 = array.findIndex((num) => num >= 10) // 2
本文鏈接:http://www.www897cc.com/showinfo-26-58895-0.html六個你必須知道的 ES6 中很酷的數組函數
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: 12 個動態 JavaScript 動畫庫增強用戶體驗
下一篇: 如何自己實現一個靜態代碼分析工具?