JavaScript數組方法

keithyau 發布于2019-08-26 11:49 / 1869人閱讀

摘要：前言從事前端到現在也有快兩年了，平時也會收集整理一些筆記放在印象筆記，不過收集過之后就在沒有看過，經大佬指點，真正掌握一個知識點，最好的方式就是用自己的話把內容講明白，就開始將以前零散的東西整合一下，和各位道友一起提高。

前言

從事前端到現在也有快兩年了，平時也會收集整理一些筆記放在印象筆記，不過收集過之后就在沒有看過，經大佬指點，真正掌握一個知識點，最好的方式就是用自己的話把內容講明白，就開始將以前零散的東西整合一下，和各位道友一起提高。

操作數組

印象中數組有很多方法，系統的整理一下

Array.map()

此方法是將數組中的每個元素調用一個提供的函數，結果作為一個新的數組返回，并沒有改變原來的數組
    let arr = [1, 2, 3, 4, 5]
    let newArr = arr.map(x => x*2)
    //arr= [1, 2, 3, 4, 5]   原數組保持不變
    //newArr = [2, 4, 6, 8, 10] 返回新數組

Array.forEach()

此方法是將數組中的每個元素執行傳進提供的函數，沒有返回值，直接改變原數組，注意和map方法區分
    let arr = [1, 2, 3, 4, 5]
    num.forEach(x => x*2)
    // arr = [2, 4, 6, 8, 10]  數組改變,注意和map區分

Array.filter()

此方法是將所有元素進行判斷，將滿足條件的元素作為一個新的數組返回
    let arr = [1, 2, 3, 4, 5]
    const isBigEnough => value => value >= 3
    let newArr = arr.filter(isBigEnough )
    //newNum = [3, 4, 5] 滿足條件的元素返回為一個新的數組

Array.every()

此方法是將所有元素進行判斷返回一個布爾值，如果所有元素都滿足判斷條件，則返回true，否則為false
    let arr = [1, 2, 3, 4, 5]
    const isLessThan4 => value => value < 4
    const isLessThan6 => value => value < 6
    arr.every(isLessThan4 ) //false
    arr.every(isLessThan6 ) //true

Array.some()

 此方法是將所有元素進行判斷返回一個布爾值，如果存在元素都滿足判斷條件，則返回true，若所有元素都不滿足判斷條件，則返回false
   let arr= [1, 2, 3, 4, 5]
    const isLessThan4 => value => value < 4
    const isLessThan6 => value => value > 6
    arr.some(isLessThan4 ) //true 
    arr.some(isLessThan6 ) //false

Array.reduce()

 此方法是所有元素調用返回函數，返回值為最后結果,傳入的值必須是函數類型
   let arr = [1, 2, 3, 4, 5]
   const add = (a, b) => a + b
   let sum = arr.reduce(add)
   //sum = 15  相當于累加的效果
   與之相對應的還有一個 Array.reduceRight() 方法，區別是這個是從右向左操作的

Array.push()

 此方法是在數組的后面添加新加元素，此方法改變了數組的長度
   let arr = [1, 2, 3, 4, 5]
   arr.push(6, 7)
   console.log(arr) //[1, 2, 3, 4, 5, 6, 7]
   console.log(arr.length) //7

Array.pop()

 此方法在數組后面刪除最后一個元素，并返回數組，此方法改變了數組的長度
    let arr = [1, 2, 3, 4, 5]
    arr.pop()
    console.log(arr) //[1, 2, 3, 4]
    console.log(arr.length) //4

Array.shift()

 此方法在數組后面刪除第一個元素，并返回數組，此方法改變了數組的長度 
    let arr = [1, 2, 3, 4, 5]
    arr.shift()
    console.log(arr) //[2, 3, 4, 5]
    console.log(arr.length) //4

Array.unshift()

 此方法是將一個或多個元素添加到數組的開頭，并返回新數組的長度
    let arr = [1, 2, 3, 4, 5]
    arr.unshift(6, 7)
    console.log(arr) //[6, 7, 2, 3, 4, 5]
    console.log(arr.length) //7

Array.isArray()

 判斷一個對象是不是數組，返回的是布爾值

Array.concat()

 此方法是一個可以將多個數組拼接成一個數組
   let arr1 = [1, 2, 3] 
       arr2 = [4, 5]
   let arr = arr1.concat(arr2)
 console.log(arr)//[1, 2, 3, 4, 5]

Array.toString()

 此方法將數組轉化為字符串
   let arr = [1, 2, 3, 4, 5];
   let str = arr.toString()
   console.log(str)// 1,2,3,4,5

Array.join()

  此方法也是將數組轉化為字符串
   let arr = [1, 2, 3, 4, 5];
   let str1 = arr.toString()
   let str2 = arr.toString(",")
   let str3 = arr.toString("##")
   console.log(str1)// 12345
   console.log(str2)// 1,2,3,4,5
   console.log(str3)// 1##2##3##4##5
   通過例子可以看出和toString的區別，可以設置元素之間的間隔~

15.Array.splice(開始位置，刪除的個數，元素)

   萬能方法，可以實現增刪改
     let arr = [1, 2, 3, 4, 5];
     let arr1 = arr.splice(2, 0 "haha")
     let arr2 = arr.splice(2, 3)
     let arr1 = arr.splice(2, 1 "haha")
     console.log(arr1) //[1, 2, "haha", 3, 4, 5]新增一個元素
     console.log(arr2) //[1, 2] 刪除三個元素
     console.log(arr3) //[1, 2, "haha", 4, 5] 替換一個元素

結尾

第一次寫，都是很簡單的數組用法，千里之行始于足下，重新把基礎夯實一下，如果存在錯誤或者表達不當，還望及時告知，thx

參考

MDN語法還有很多好玩的方法可以去demo
《JavaScript高級權威指南》數組操作

云服務器 GPU云服務器 javascript數組方法數組方法數組操作方法構造方法數組

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107648.html

JavaScript專題系列文章

摘要：專題系列共計篇，主要研究日常開發中一些功能點的實現，比如防抖節流去重類型判斷拷貝最值扁平柯里遞歸亂序排序等，特點是研究專題之函數組合專題系列第十六篇，講解函數組合，并且使用柯里化和函數組合實現模式需求我們需要寫一個函數，輸入，返回。 JavaScript 專題之從零實現 jQuery 的 extend JavaScritp 專題系列第七篇，講解如何從零實現一個 jQuery 的 ext...

Maxiye 2019-08-21 17:57 評論0 收藏0
Array的javascript數據結構描述

摘要：幾乎所有的編程語言都有類似的數據結構。然而的數組卻略有不同。沒有定義中說的那樣的數據結構，作為替代。元素通過指定的分隔符進行分隔。返回該對象的源代碼。把數組轉換為本地數組，并返回結果。寫在前面的話：經常看到技術博客上寫的內容很詳細，對于一個問題，大家的博客內容似乎都是一樣的。不難發現這些技術博客已經成為各路教程的匯總地，而教程一般都是參考國外博客翻譯或者直接在經典的書籍上大片抄錄。...

iOS122 2019-08-21 10:37 評論0 收藏0
JavaScript面向對象編程——Array類型

摘要：中并沒有明確的數組數據類型。返回數組對象的原始值。專門用于篩選出數組中符合函數判斷條件的元素組成的心數組。專門用于對原數組中每個元素執行相同的函數對象規定的操作。概述一維數組數組是一個有序的數據集合，可以通過數組名稱和索引進行訪問。JavaScript中并沒有明確的數組數據類型。二維數組數組是可以嵌套的，這就意味著一個數組可以作為一個袁旭被包含在另一個數組里面。利用JavaS...

DirtyMind 2019-08-26 12:16 評論0 收藏0
array數組類型

摘要：中并沒有明確的數組數據類型。創建一維數組具有以下幾種方式二維數組數組是可以嵌套，這就意味著一個數組可以作為一個數組被包含在另外一個數組里面。利用這個特點，創建二維數組，即數組的數組。刪除數組的最后一個元素并返回刪除的元素。 Array 概述一維數組數組是一個有序的數據集合，可以通過數組名稱和索引進行訪問。JavaScript中并沒有明確的數組數據類型。創建一維數組具有以下幾種方式：...

lemanli 2019-08-26 12:16 評論0 收藏0
JavaScript標準庫系列——Object對象和Array對象（一）

摘要：目錄導語對象對象小結導語本系列文章將重點講解提供的原生庫標準庫，只要在支持語言的平臺，標準庫中的提供的對象的屬性和方法都能使用對象對象的理解講的標準庫，首先要從對象談起，因為之后的所有對象都可以看做是對象構造出來的因此，對象可以看做是一個構目錄導語 1. Object對象 2. Array對象 3. 小結導語本系列文章將重點講解JavaScript提供的原生庫——標準庫，只要...

Scholer 2019-08-21 11:25 評論0 收藏0
JavaScript學習總結（二）數組和對象部分

摘要：屬性是一個值或一組值以數組或對象的形式，是對象的成員。可以使用內置構造函數和創建包裝對象。因此下面的代碼將會使人很迷惑結果結果，此數組長度為應該盡量避免使用數組構造函數創建新數組。給數組對象添加返回數組中最大元素值的方法。對象部分 Object類型 Object 是一個無序的集合，可以存放任意類型對象，所有其他對象都繼承自這個對象。創建Object類型有兩種，一種是使用new運算符，...

Lsnsh 2019-08-21 12:27 評論0 收藏0