隔着超薄肉丝进入小说_男女刺激性视频大片_女教师的诱波多野结衣_一级欧美过瘾大片

當前位置: 首頁 / 技術干貨 / 正文
好程序員web前端培訓分享JavaScript數據方法匯總

2020-07-29

web前端培訓 JavaScript

  好程序員web前端培訓分享JavaScript數據方法匯總,在JavaScript中,數組是一個特殊的變量,用于存儲不同的元素。它具有一些內置屬性和方法,可用于根據需要添加,刪除,迭代或操作數。并且了解JavaScript數組方法可以提升你的開發技能。

好程序員

  在本文中,我們將介紹幾種關于JavaScript的數組方法,這些方法可以幫助你正確地處理數據。

  1.some()

  2. reduce()

  3. Every()

  4. map()

  5. flat()

  6. filter()

  7. forEach()

  8. findIndex()

  9. find()

  10. sort()

  11. concat()

  12. fill()

  13. includes()

  14. reverse()

  15. flatMap()

  注意,大多數情況下,我們將簡化作為參數傳遞的函數。

  // Instead of using this waymyAwesomeArray.some(test => { if (test === "d") { return test }})// We'll use the shorter onemyAwesomeArray.some(test => test === "d")

  1、some()

  此方法為參數傳遞的函數測試數組。如果有一個元素與測試元素匹配,則返回true,否則返回false。譯者注: some() 不會對空數組進行檢測;some() 不會改變原始數組。

  const myAwesomeArray = ["a", "b", "c", "d", "e"]

  myAwesomeArray.some(test => test === "d")

  //-------> Output : true

  2、reduce()

  此方法接收一個函數作為累加器。它為數組中的每個元素依次執行回調函數,不包括數組中被刪除或者從未被賦值的元素。函數應用于累加器,數組中的每個值最后只返回一個值。譯者注:reduce() 方法接受四個參數:初始值(上一次回調的返回值),當前元素值,當前索引,原數組。

  const myAwesomeArray = [1, 2, 3, 4, 5]

  myAwesomeArray.reduce((total, value) => total * value)

  // 1 * 2 * 3 * 4 * 5

  //-------> Output = 120

  3、Every()

  此方法是對數組中每項運行給定函數,如果數組的每個元素都與測試匹配,則返回true,反之則返回false。

  const myAwesomeArray = ["a", "b", "c", "d", "e"]

  myAwesomeArray.every(test => test === "d")

  // -------> Output : falseconst myAwesomeArray2 = ["a", "a", "a", "a", "a"]

  myAwesomeArray2.every(test => test === "a")

  //-------> Output : true

  4、map()

  該方法返回一個新數組,數組中的元素為原始數組元素調用函數處理后的值。它按照原始數組元素順序依次處理元素。譯者注:map() 不會對空數組進行檢測;map() 不會改變原始數組。

  const myAwesomeArray = [5, 4, 3, 2, 1]myAwesomeArray.map(x => x * x)

  //-------> Output : 25

  // 16

  // 9

  // 4

  // 1

  5、flat()

  此方法創建一個新數組,其中包含子數組上的holden元素,并將其平整到新數組中。請注意,此方法只能進行一個級別的深度。

  const myAwesomeArray = [[1, 2], [3, 4], 5]

  myAwesomeArray.flat()

  //-------> Output : [1, 2, 3, 4, 5]

  6、filter()

  該方法接收一個函數作為參數。并返回一個新數組,該數組包含該數組的所有元素,作為參數傳遞的過濾函數對其返回true。譯者注:filter()方法是對數據中的元素進行過濾,也就是說是不能修改原數組中的數據,只能讀取原數組中的數據,callback需要返回布爾值;為true的時候,對應的元素留下來;為false的時候,對應的元素過濾掉。

  const myAwesomeArray = [ { id: 1, name: "john" },

  { id: 2, name: "Ali" }, { id: 3, name: "Mass" },

  { id: 4, name: "Mass" },]

  myAwesomeArray.filter(element => element.name === "Mass")

  //-------> Output : 0:{id: 3, name: "Mass"},

  // 1:{id: 4, name: "Mass"}

  7、forEach()

  此方法用于調用數組的每個元素。并將元素傳遞給回調函數。譯者注: forEach() 對于空數組是不會執行回調函數的。

  const myAwesomeArray = [ { id: 1, name: "john" },

  { id: 2, name: "Ali" }, { id: 3, name: "Mass" },]

  myAwesomeArray.forEach(element => console.log(element.name))

  //-------> Output : john

  // Ali

  // Mass

  8、 findIndex()

  此方法返回傳入一個測試條件(函數)符合條件的數組diyi個元素位置。它為數組中的每個元素都調用一次函數執行,當數組中的元素在測試條件時返回 true 時, findIndex() 返回符合條件的元素的索引位置,之后的值不會再調用執行函數。如果沒有符合條件的元素返回 -1譯者注:findIndex() 對于空數組,函數是不會執行的, findIndex() 并沒有改變數組的原始值。

  const myAwesomeArray = [ { id: 1, name: "john" },

  { id: 2, name: "Ali" }, { id: 3, name: "Mass" },]myAwesomeArray.findIndex(element => element.id === 3)

  // -------> Output : 2myAwesomeArray.findIndex(element => element.id === 7)

  //-------> Output : -1

  9、 find()

  此方法返回通過測試(函數內判斷)的數組的diyi個元素的值。find() 方法為數組中的每個元素都調用一次函數執行:當數組中的元素在測試條件時回 true 時, find() 返回符合條件的元素,之后的值不會再調用執行函數。如果沒有符合條件的元素返回 undefined。譯者注: find() 對于空數組,函數是不會執行的;find() 并沒有改變數組的原始值。

  const myAwesomeArray = [ { id: 1, name: "john" },

  { id: 2, name: "Ali" }, { id: 3, name: "Mass" },] myAwesomeArray.find(element => element.id === 3)

  // -------> Output : {id: 3, name: "Mass"}

  myAwesomeArray.find(element => element.id === 7)

  //-------> Output : undefined

  10、 sort()

  此方法接收一個函數作為參數。它對數組的元素進行排序并返回它。也可以使用含有參數的sort()方法進行排序。

  const myAwesomeArray = [5, 4, 3, 2, 1]

  // Sort from smallest to largestmyAwesomeArray.sort((a, b) => a - b)

  // -------> Output : [1, 2, 3, 4, 5]

  // Sort from largest to smallestmyAwesomeArray.sort((a, b) => b - a)

  //-------> Output : [5, 4, 3, 2, 1]

  11、 concat()

  此方法用于連接兩個或多個數組/值,它不會改變現有的數組。而僅僅返回被連接數組的一個新數組。

  const myAwesomeArray = [1, 2, 3, 4, 5]const

  myAwesomeArray2 = [10, 20, 30, 40, 50]

  myAwesomeArray.concat(myAwesomeArray2)

  //-------> Output : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]

  12、 fill()

  此方法的作用是使用一個固定值來替換數組中的元素。該固定值可以是字母、數字、字符串、數組等等。它還有兩個可選參數,表示填充起來的開始位置(默認為0)與結束位置(默認為array.length)。譯者注:fill() 方法用于將一個固定值替換數組的元素。

  const myAwesomeArray = [1, 2, 3, 4, 5]

  // The first argument (0) is the value

  // The second argument (1) is the starting index

  // The third argument (3) is the ending indexmyAwesomeArray.fill(0, 1, 3)

  //-------> Output : [1, 0, 0, 4, 5]

  13、 includes()

  此方法用于判斷字符串是否包含指定的子字符串。如果找到匹配的字符串則返回 true,否則返回 false。

  譯者注:includes() 方法區分大小寫。

  const myAwesomeArray = [1, 2, 3, 4, 5]myAwesomeArray.includes(3)

  // -------> Output : truemyAwesomeArray.includes(8)

  // -------> Output : false

  14、 reverse()

  此方法用于顛倒數組中元素的順序。diyi個元素成為最后一個,最后一個元素將成為diyi個。

  const myAwesomeArray = ["e", "d", "c", "b", "a"]

  myAwesomeArray.reverse()

  // -------> Output : ['a', 'b', 'c', 'd', 'e']

  15、 flatMap()

  該方法將函數應用于數組的每個元素,然后將結果壓縮為一個新數組。它在一個函數中結合了flat()和map()。

  const myAwesomeArray = [[1], [2], [3], [4], [5]]

  myAwesomeArray.flatMap(arr => arr * 10)

  //-------> Output : [10, 20, 30, 40, 50]

  // With .flat() and .map()myAwesomeArray.flat().map(arr => arr * 10)

  //-------> Output : [10, 20, 30, 40, 50]

  免責聲明:本文圖片及文字信息均由小編轉載自網絡,如有侵權請聯系我們進行刪除。

好程序員公眾號

  • · 剖析行業發展趨勢
  • · 匯聚企業項目源碼

好程序員開班動態

More+
  • HTML5大前端 <高端班>

    開班時間:2021-04-12(深圳)

    開班盛況

    開班時間:2021-05-17(北京)

    開班盛況
  • 大數據+人工智能 <高端班>

    開班時間:2021-03-22(杭州)

    開班盛況

    開班時間:2021-04-26(北京)

    開班盛況
  • JavaEE分布式開發 <高端班>

    開班時間:2021-05-10(北京)

    開班盛況

    開班時間:2021-02-22(北京)

    開班盛況
  • Python人工智能+數據分析 <高端班>

    開班時間:2021-07-12(北京)

    預約報名

    開班時間:2020-09-21(上海)

    開班盛況
  • 云計算開發 <高端班>

    開班時間:2021-07-12(北京)

    預約報名

    開班時間:2019-07-22(北京)

    開班盛況
IT培訓IT培訓
在線咨詢
IT培訓IT培訓
試聽
IT培訓IT培訓
入學教程
IT培訓IT培訓
立即報名
IT培訓

Copyright 2011-2023 北京千鋒互聯科技有限公司 .All Right 京ICP備12003911號-5 京公網安備 11010802035720號