首頁 > web前端 > js教程 > 主體

es6新增數組方法是什麼

青灯夜游
發布: 2022-04-11 16:27:45
原創
10921 人瀏覽過

新增數組方法:1、from(),可將類別數組或可迭代物件轉為真正的數組;2、of(),可將一組值轉換為數組,它彌補數組構造函數Array()的不足;3、find()和findIndex(),傳回第一個符合條件的陣列元素;4、fill()等等。

es6新增數組方法是什麼

本教學操作環境: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);
    // [&#39;a&#39;, 7, &#39;c&#39;]
    // 注意,如果填充的类型为对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝对象。
    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
登入後複製

【相关推荐:javascript视频教程web前端

以上是es6新增數組方法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
es6
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板