數組、對象便利方法彙總全-包括es6新方法

一、數組便利方法合集方法

• 數據量沒有成百上千，一下方法的一般性能都不會有太大的區別
• 不會改變原數組的方法：forEach、map、filter、reduce、some、every、reduceRight、find、findIndex
• 會改變原數組的方法：fill、copyWithin

便利方法/方式	函數帶參	使用解釋	推薦使用場景	備註
for	-	根據數組下標便利	基本通用
優化的for	-	將長度提前計算出來	數組較大的時候優化效果比較明顯
for  in	-	遍歷對象返回的對象的key值 遍歷數組返回的數組的下標(key)	推薦使用於對象便利（因爲便利的是鍵名）
for  of 【es6新增】	-	只能用於數組便利，對象可以配合Object.keys()使用	數組使用還是比較推薦的	可以正確響應break、continue和return語句
forEach	3個參數 item：當前元素 value：當前元素索引 arr：當前操作數組	-	forEach() 方法用於調用數組的每個元素，並將元素傳遞給回調函數 數據量大的時候不推薦使用耗費性能高	forEach不會獲取新數組也沒有return值，自動將代碼置入try finally塊
map	3個參數同forEach方法	默認返回一個數組 這個新數組的每一個元素都是原數組元素執行了回調函數之後的返回值	高階函數 1、要修改數組值獲取新數組可使用 2、其他	map方法不改變原數組，需要重新賦值獲取
filter	3個參數同forEach方法	過濾，即對數組元素的一個條件篩選， 默認返回一個數組，原數組的元素執行了回調函數之後返回值若爲true，則會將這個元素放入返回的數組中。 若無負荷條件則返回空數組	高階函數 1、要刪除某個值獲取新數組使用 2、其他	不改變原數組，需要重新賦值獲取
reduce	第一個參數是一個回調函數（必須），第二個參數是初始值（可選） ，依次爲本輪循環的累計值、當前循環的元素（必須），該元素的下標（可選），數組本身（可選）	reduce方法，會讓數組的每一個元素都執行一次回調函數，並將上一次循環時回調函數的返回值作爲下一次循環的初始值，最後將這個結果返回。 如果沒有初始值，則reduce會將數組的第一個元素作爲循環開始的初始值，第二個元素開始執行回調函數。	reduce是高階函數（即可調用其他函數使用的方法）具體使用可深度調研	不改變原數組，返回最終操作結果
reduceRight	參數同reduce	reduceRight()方法的功能和reduce()功能是一樣的 不同的是reduceRight()從數組的末尾向前將數組中的數組項做累加	同上	不改變原數組，
every	3個參數同forEach方法	返回布爾值 當返回值全部爲true時，every方法會返回true，有一個返回值是false就爲false	判斷某個數組是否不存在某個值	不改變原數組
some	3個參數同forEach方法	返回布爾值 當有一個爲true時，停止便利some方法返回true	判斷某個數組是否存在某個值的時候	不改變原數組
find【es6新增】	第一個參數是回調函數必須，第二個參數thisValue是可選值，第一個參數裏的forEach裏面的三個參數值	find()方法返回數組中符合測試函數條件的第一個元素 如果沒有符合條件的元素返回 undefined	判斷數組內是否包含某種條件的值的元素	不改變原數組，對於空數組，函數是不會執行的
findIndex【es6新增】		find()方法返回數組中符合測試函數條件的第一個元素的索引 沒有符合返回-1	類似字符串查找的indexOf的用法，判斷數組內是否包含某種條件的值的元素。	不改變原數組
copyWithin【es6新增】	三個參數 target（必需）：從該位置開始替換數據。如果爲負值，表示倒數。 start（可選）：從該位置開始讀取數據，默認爲 0。如果爲負值，表示倒數。 end（可選）：到該位置前停止讀取數據，默認等於數組長度。如果爲負值，表示倒數。	在當前數組內部，將指定位置的成員複製到其他位置（會覆蓋原有成員），然後返回當前數組	copyWithin() 方法用於從數組的指定位置拷貝元素到數組的另一個指定位置中	會改變原數組
fill	3個參數 value[必須]：填充的值 start[可選]：開始填充位置 end[可選]：停止填充位置	使用一個固定值來替換數組中的元素。 該固定值可以是字母、數字、字符串、數組等等	fill() 方法用於將一個固定值替換數組的元素。	會改變原數組
keys() 【es6新增】	-	鍵名的便利-	對象要便利鍵名的時候使用	它們都返回一個遍歷器對象，一般配合let of使用
values 【es6新增】	-	鍵值的便利-	對象要便利鍵值的時候可使用	它們都返回一個遍歷器對象，一般配合let of使用
entries 【es6新增】	-	鍵值對的便利-	for (let [index, elem] of this.arr.entries()) {               console.log(index, elem);}	它們都返回一個遍歷器對象，一般配合let of使用
includes【es6新增】	-	判斷數中是否包含給定的值 返回布爾值	判斷數中是否包含給定的值，同indexOf類似	可判斷undefined、NaN
indexOf	-	判斷數中是否包含給定的值 有值返回該值位置，無值返回-1	判斷數中是否包含給定的值	不可判斷undefined、NaN

二、對象便利

• 將對象轉化成類數組再用以上方法便利即可
• 對象便利如下

方法	推薦使用場景	備註
for in	一般對象均可便利	for (let item in this.obj) {       console.log("鍵名",item) //鍵名     console.log("鍵值",this.obj[item]) //鍵值}
Object.keys	鍵名的便利	Object.keys(this.obj
Object.values	鍵值的便利	Object.values(this.obj)
Object.entries	將對象便利成數組	Object.entries(this.obj)
Object.getOwnPropertyNames	鍵名的便利	Object.getOwnPropertyNames(this.obj)

三、代碼示例

data: {
 arr:[11,22,234],
 obj:{aa:1,bb:2,cc:3,dd:4}
 },
// 數組便利
arrFuc() {
      //1、 for
      for (let i = 0; i < this.arr.length; i++) {
        console.log(this.arr[i]); //11、22、234
      }
      //2、 for優化，長度緩存數組較大時對優化效果較明顯
      for (let j = 0, len = this.arr.length; j < len; j++) {
        console.log(this.arr[j]); //11、22、234
      }
      //3、 for in
      for (let k in this.arr) {
        console.log(this.arr[k]); //11、22、234
      }
      //4、 for of ES6引進的新方法，對象需要通過和Object.keys()搭配使用，
      // 可以正確響應break、continue和return語句
      for (let l of this.arr) {
        console.log(l); //11、22、234
      }
      //5、 forEach便利，參數：value數組中的當前項, index當前項的索引, array原始數組；
      this.arr.forEach(item => {
        console.log(item); //11、22、234
      });
      //6、 map的回調函數中支持return返回值可以return出來
      // return的是啥，相當於把數組中的這一項變爲啥（並不影響原來的數組，只是相當於把原數組克隆一份，把克隆的這一份的數組中的對應項改變了）；
      var newArr = this.arr.map((item, ind, arr) => {
        if (item == 22) {
          return 33;
        } else {
          return item;
        }
      });
      console.log("map", newArr); //map [11, 33, 234]
      //7、 filter遍歷,不會改變原始數組,返回新數組，關鍵在於正確實現一個“篩選”函數。
      var newArr2 = this.arr.filter(item => {
        return item != 22;
      }); //返回數組項不等於22的
      console.log(newArr2); //[11, 234]
      //8、 every是對數組中的每一項運行給定函數，如果該函數對每一項返回true,則返回true，否則返回false[返回布爾值]
      var everyResult = this.arr.every((item, index, array) => {
        return item > 11;
      });
      console.log("every方法", everyResult); //every方法 false
      //9、 some()是對數組中每一項運行指定函數，如果該函數對任一項返回true，則返回true【返回布爾值】
      var someResult = this.arr.some((item, index, array) => {
        return item == 11;
      });
      console.log("some方法", someResult); //some方法 true
      //10、reduce() 方法接收一個函數作爲累加器（accumulator），數組中的每個值（從左到右）開始縮減，最終爲一個值。
      // reduce接受一個函數，函數有四個參數，分別是：上一次的值，當前值，當前值的索引，數組
      console.log("reduce方法", this.arr.reduce((a, b) => a + b)); //reduce方法 267
      //10.1、reduceRight()方法的功能和reduce()功能是一樣的，不同的是reduceRight()從數組的末尾向前將數組中的數組項做累加

      //11、find()方法返回數組中符合測試函數條件的第一個元素。正確返回該數值，否則返回undefined
      console.log(
        "find方法",
        this.arr.find(ele => {
          return ele == 11;
        })
      ); //find方法 11
      console.log(
        "find方法",
        this.arr.find(ele => {
          return ele == 111;
        })
      ); //find方法 undefined
      // 11.1\findIndex()只返回符合要求的第一個數索引
      console.log(
        "findIndex",
        this.arr.findIndex((item, index, arr) => {
          console.log(item);
          return item > 20;
        }),
        this.arr
      ); //findIndex 1 (3) [11, 22, 234, __ob__: Observer]
      //12、splice(start,length,item)刪，增，替換數組元素，返回被刪除數組，無刪除則不返回【會改變原數組】
      this.arr.splice(0, 1, 555);
      console.log("splice方法", this.arr); //splice方法 (3) [555, 22, 234, __ob__: Observer]
      // 13、ES6 提供三個新的方法 —— entries()，keys()和values() —— 用於遍歷數組。它們都返回一個遍歷器對象，可以用for...of循環進行遍歷，唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷
      for (let index of this.arr.keys()) {
        console.log("keys()鍵名的遍歷", index); //keys()鍵名的遍歷 0 keys()鍵名的遍歷 1 keys()鍵名的遍歷 2
      }
      for (let elem of this.arr.values()) {
        console.log("values()鍵值的遍", elem); //values()鍵值的遍 555 values()鍵值的遍 22 values()鍵值的遍 234
      }
      for (let [index, elem] of this.arr.entries()) {
        console.log("entries()鍵值對的遍歷", index, elem); //entries()鍵值對的遍歷 0 555 entries()鍵值對的遍歷 1 22 entries()鍵值對的遍歷 2 234
      }
      //14、copyWithin，3個參數第一個參數表示替換到指定索引的位置，第二個參數表示開始複製的的位置，第三個參數是結束位置，23參數沒有默認從頭開始複製, 替換到結束
      console.log("原數組", this.arr); //原數組 (3) [555, 22, 234, __ob__: Observer]
      this.arr.copyWithin(1, 0);
      console.log("copyWithin", this.arr); //copyWithin (3) [555, 555, 22, __ob__: Observer]
      //15、fill
      console.log("fill", this.arr.fill(11111, 0, 2)); //fill (3) [11111, 11111, 22, __ob__: Observer]
      this.arr.push("undefined");
      //16、indexOf、includes
      console.log(
        "indexOf",
        this.arr.indexOf(22),
        this.arr.indexOf("undefined")
      ); //indexOf 2 3
      console.log(
        "includes",
        this.arr.includes(22),
        this.arr.includes("undefined")
      ); //includes true true
    },
    // 對象便利
    objFuc() {
      // 1、let in
      for (let item in this.obj) {
        console.log("鍵名", item); // 鍵名name,鍵名age
        console.log("鍵值", this.obj[item]); //鍵值yan,鍵值22
      }
      //2、Object.keys 鍵名的便利
      console.log(Object.keys(this.obj)); //  ["name", "age"]
      //3、Object.values 鍵值的便利
      console.log(Object.values(this.obj)); // ["yan", 22]
      //4、Object.entries 鍵值的便利
      console.log(Object.entries(this.obj)); // 0: (2) ["name", "yan"] 1: (2) ["age", 22]
      console.log(Object.getOwnPropertyNames(this.obj)); //["name", "age", "__ob__"]
      for (let item of Object.keys(this.obj)) {
        console.log(item); //name,age
      }
    }	  	

四、總結

大家有什麼其他方法也可評論裏@我，持續更新分享！