ES6數組Array整理:比ES5更推薦的使用方法和技巧

原文鏈接: https://dsx2016.com/?p=692

微信公衆號: 大師兄2016

ECMAScript

ECMA ScriptECMA-262標準化的腳本語言的名稱。

儘管JavaScriptJScriptECMAScript兼容,但包含超出ECMA Script的功能。

以下表格按照四個模塊分類:

  • ECMAScript 1st Edition (ECMA-262)對應初版和ES5之前的版本(僅本文)

  • ECMAScript 5.1 (ECMA-262)對應ES5

  • ECMAScript 2015 (6th Edition, ECMA-262)對應ES6

  • ECMAScript Laster對應ES7/ES8/ES9/ES10

篇幅所致,Array.prototype.map()簡寫爲map(),以此類推.

ES 1st ES5 ES6 ES Laster
Array.length Array.isArray() Array.from() includes()
unshift() indexOf() Array.of()  
concat() lastIndexOf() findIndex()  
join() every() find()  
pop() some() fill()  
push() forEach() copyWithin()  
reverse() map() entries()  
shift() filter() flat()  
slice() reduce() flatMap()  
sort() reduceRight() includes()  
splice()   keys()  
toLocaleString()   values()  
toString()      

刪除數組的重複項

ES6的使用,有兩種方式,都需要先使用創建Set數據結構來去除重複值

let fruits=[`banana`,`orange`,`apple`,`pear`,`grape`,`apple`];

第一種方式,使用Array.from()

let deduplicationFruits=Array.from(new Set(fruits))

第二種方式,使用...擴展運算符(推薦)

let deduplicationFruits=[...new Set(fruits)]

判斷數組中是否有給定的值

ES5的使用Array.prototype.indexOf()

let arr=[1,2,NaN]
if (arr.indexOf(1) !== -1) {
  // ...
}
// 注意
[NaN].indexOf(NaN) // -1

ES6的使用Array.prototype.includes() (推薦)

let arr=[1,2,NaN]
arr.includes(1) // true
[NaN].includes(NaN) // true

檢測是否爲數組

ES5的使用Array.isArray() (推薦),其他方法就不描述了

const arr = [];
const obj = {};
Array.isArray(arr);//true
Array.isArray(obj);//false

淺拷貝和深拷貝

淺拷貝

ES6使用...擴展運算符

注意: 此方法是淺拷貝

let arr1=[1,2,3,{a:123}];
let arr2=[...arr1] 
arr2[0]=5 // arr1[1,2,3,{a:123}] arr2[5,2,3,{a:123}];
arr2[3].a=456 // arr1[1,2,3,{a:456}] arr2[5,2,3,{a:456}];

深拷貝

使用JSON序列化,JSON.parse(JSON.stringify(arr))這種方法比較簡單,能夠滿足一般的場景.

此方法不兼容對象的複雜屬性,如set,get,Function等,只兼容JSON格式支持的數據類型.

對於正則表達式類型、函數類型等無法進行深拷貝,並且會直接丟失對應的值

let arr1=[1,2,3,{a:123}]
let arr2=JSON.parse(JSON.stringify(arr1))

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章