es6新增的數組方法有哪些

這篇文章主要介紹“es6新增的數組方法有哪些”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“es6新增的數組方法有哪些”文章能幫助大家解決問題。

新增數組方法：1、from()，可將類數組或可迭代對象轉為真正的數組；2、of()，可將一組值轉換為數組，它彌補數組構造函數Array()的不足；3、find()和findIndex()，返回第一個符合條件的數組元素；4、fill()等等。

本教程操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

es6新增數組方法

1、Array.from()

Array.from 方法用于將兩類對象轉為真正的數組：

• 類似數組的對象（array-like object）

• 可遍歷（iterable）的對象（包括 ES6 新增的數據結構 Set 和 Map）

意味著，只要部署了Iterator接口的數據結構，Array.from都能將其轉換為數組

實際開發中，一般可以用來轉換DOM操作返回的NodeList集合，以及函數內部的arguments對象

傳一個參數時，用于將類數組轉為真正的數組

• 數組去重
  

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]

對于沒有部署該方法的瀏覽器，可使用Array.prototype.slice方法代替

cosnt toArray = (() => {
    Array.from ? Array.from : obj => [].slice.call(obj)
})()

還可以接收第二個參數，第二個參數傳入一個函數，實現類似map方法的效果，對每個元素進行處理并返回處理好的數組

Array.from([1,2,3] , item => item *2)    //[2,4,6]

• 返回字符串的長度

可以用于將字符串轉為數組，然后返回字符串的長度，因為它能夠正確處理各種Unicode字符，從而避免JS將大于/uFFFF的Unicode字符算作2個字符的自身bug

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

示例2

// 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

示例2

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()方法使用給定值， 填充一個數組

• 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"}]

這兩個方法都可以發現數組中的NaN，而ES5中的indexOf()是發現不了NaN的

5、數組實例的 entries()，keys() 和 values()

三個方法都用來遍歷數組，都返回一個遍歷器對象，可用for…of循環遍歷

不同的是：

• keys()是對鍵名的遍歷

• values()是對鍵值的遍歷

• entries()是對鍵值對的遍歷

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

還可接收第二個參數，表示搜索的起始位置，默認是0。如果第二個參數是負數，則表示到數的位置。如果第二個參數大于數組的長度，則從下標0處開始

includes 方法彌補了 indexOf 方法不夠語義化和誤判 NaN 的缺點

[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()用于將嵌套的數組“拉平”，變成一維的數組。該方法返回一個新數組，對原數據沒有影響。傳參數代表拉平幾層默認是一層

• flatMap()只能展開一層數組。方法對原數組的每個成員執行一個函數（相當于執行 Array.prototype.map()），然后對返回值組成的數組執行 flat()方法。該方法返回一個新數組，不改變原數組

  // 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

關于“es6新增的數組方法有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。