新增數組方法:1、from(),可將類別數組或可迭代物件轉為真正的數組;2、of(),可將一組值轉換為數組,它彌補數組構造函數Array()的不足;3、find()和findIndex(),傳回第一個符合條件的陣列元素;4、fill()等等。
本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。
1、Array.from()
Array. from 方法用於將兩類物件轉換為真正的陣列:
類似陣列的物件(array-like object)
const arr = [1,2,3,3,3,2,5]; console.log(Array.from(new Set(arr))); //[1,2,3,5] //...也可实现相同的效果 console.log([...new Set(arr)]) //[1,2,3,5]
cosnt toArray = (() => { Array.from ? Array.from : obj => [].slice.call(obj) })()
Array.from([1,2,3] , item => item *2) //[2,4,6]
function countLength(string) { return Array.from(string).length }
#2、Array.of()
Array .of 方法用於將一組值,轉換為陣列。彌補數組建構子 Array()的不足。因為參數個數的不同,會導致Array()的行為有差異//如下代码看出差异 Array.of(3); // [3] Array.of(3, 11, 8); // [3,11,8] new Array(3); // [, , ,] new Array(3, 11, 8); // [3, 11, 8] // Array.of方法可以用下面的代码模拟实现。 function ArrayOf() { return [].slice.call(arguments); }
#3、陣列實例的find() 和findIndex()
#find()
傳回第一個符合條件的陣列成員,它的參數是一個回呼函數,所有陣列成員依序執行函數,直到找出第一個滿足條件的成員,然後傳回該成員,如果沒有符合條件的成員,則傳回undefined該方法的回呼函數接收三個參數: 目前的值, 當前位置, 原始數組 #範例1[1,12,4,0,5].find((item,index , arr) => return item < 1) // 0
// find() var item = [1, 4, -5, 10].find(n => n < 0); console.log(item); // -5 // find 也支持这种复杂的查找 var points = [ { x: 10, y: 20 }, { x: 20, y: 30 }, { x: 30, y: 40 }, { x: 40, y: 50 }, { x: 50, y: 60 } ]; points.find(function matcher(point) { return point.x % 3 == 0 && point.y % 4 == 0; }); // { x: 30, y: 40 }
findIndex()
寫法用法基本上與find()方法相同,只是傳回第一個符合條件的陣列成員的位置,如果沒有則回傳-1範例1[1,2,4,15,0].findIndex((item , index ,arr) => return item > 10) //3
var points = [ { x: 10, y: 20 }, { x: 20, y: 30 }, { x: 30, y: 40 }, { x: 40, y: 50 }, { x: 50, y: 60 } ]; points.findIndex(function matcher(point) { return point.x % 3 == 0 && point.y % 4 == 0; }); // 2 points.findIndex(function matcher(point) { return point.x % 6 == 0 && point.y % 7 == 0; }); //1
4、陣列實例的fill( )
// fill方法使用给定值, 填充一个数组。 var fillArray = new Array(6).fill(1); console.log(fillArray); //[1, 1, 1, 1, 1, 1] //fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。 ["a", "b", "c"].fill(7, 1, 2); // ['a', 7, 'c'] // 注意,如果填充的类型为对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝对象。 let arr = new Array(3).fill({ name: "Mike" }); arr[0].name = "Ben"; console.log(arr); // [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]
#5、陣列實例的entries(),keys() 和values()
#三個方法都用來遍歷數組,都傳回一個遍歷器對象,可用for…of迴圈遍歷不同的是:for (let index of ["a", "b"].keys()) { console.log(index); } // 0 1 for (let elem of ["a", "b"].values()) { console.log(elem); } // a b for (let [index, elem] of ["a", "b"].entries()) { console.log(index, elem); } // 0 "a" // 1 "b" var a = [1, 2, 3]; [...a.values()]; // [1,2,3] [...a.keys()]; // [0,1,2] [...a.entries()]; // [ [0,1], [1,2], [2,3] ]
6、 includes()方法傳回一個布林值
該方法傳回一個布林值,表示某個陣列中是否包含給定的值[1, 2, 3].includes(2) // true [(1, 2, 3)].includes(4) // false
[1,23,NaN].includes(NaN) //true
function contains = ( () => { Array.prototype.includes ?(arr , val) => arr.includes(val) :(arr , val) => arr.some(item => return item === val) })()
7、陣列實例的flat(),flatMap()
// flat() [1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]] [1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5] //flatMap() [2, 3, 4].flatMap((x) => [x, x * 2]) //map执行完后是[[2, 4], [3, 6], [4, 8]] //然后在执行flat()方法得到下边的结果 // [2, 4, 3, 6, 4, 8] // flatMap()只能展开一层数组。 // 相当于 .flat() [1, 2, 3, 4].flatMap(x => [ [x * 2] ]) //map执行完后是[[[2]], [[4]], [[6]], [[8]]] //然后在执行flat()方法得到如下结果 // [[2], [4], [6], [8]]复制代码
#8、數組實例的copywithin()
在目前數組內部將指定位置的成員複製到其他位置,然後傳回目前數組,會改變原始數組接收三個參數:1、target(必要) 從該位置開始取代資料2、start(可选) 从该位置开始读取数据,默认为0,如果为负数,则表示到数
3、end(可选) 到该位置前停止读取数据,默认等于数组长度。如果是负数,表示到数
三个参数都应该是数字,如果不是,会自动转为数值
[1,2,3,4,5].copywithin(0,3); //[4,5,3,4,5] 表示从下标3位置直到结束的成员(4,5),复制到从下标0开始的位置,结果替换掉了原来的1和2
【相关推荐:javascript视频教程、web前端】
以上是es6新增數組方法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!