ES6數組 - 新增的數組接口方法

caikeal 發布于2019-08-26 10:30 / 2756人閱讀

摘要：一返回符合條件的第一個元素方法接收個參數，第一個參數為一個回調函數，第二個參數指定回調函數里的。其中，回調函數本身接受三個參數元素的值，元素的下標，數組本身回調函數的功能邏輯是想要尋找的元素應當滿足的某種條件。

一：find() 返回符合條件的第一個元素
find方法接收2個參數，第一個參數為一個回調函數，第二個參數指定回調函數里的this。大概如下：find(function(value, index, thisArray){}, this)。
其中，回調函數本身接受三個參數：元素的值，元素的下標，數組本身；回調函數的功能邏輯是想要尋找的元素應當滿足的某種條件。一旦某個元素滿足這個條件，則立即返回當前元素，不再查找。這就意味著，find()方法會返回滿足條件的第一個元素。我們來看一下具體示例：

let obj = {level: 3};
let array = [1, 2, 3, 4, 5];
let foundItem = array.find(function (value, index, array) {
    return value > this.level;
}, obj);
console.log(foundItem); // 4

我們通過find()方法的第二個參數傳入obj，這時候回調函數里面的this.level就是obj.level為3，我們找到array里第一個大于3的元素，所以得到4.

這里有一點需要注意的是，如果你要指定find()的第二個參數，那么回調函數不能用箭頭函數。我們都知道箭頭函數的this在其定義的時候就確定，不能給其指定一個新的this，這樣是不起作用的。

二：findIndex() 返回符合條件的第一個元素下標
findIndex()和find()的參數一樣，唯一的區別是findIndex()返回的是第一個滿足條件的元素的下標：

let obj = {name: "a"};
let array = ["a", "b", "a"];
let foundIndex = array.findIndex(function (value, index, array) {
    return value === this.name;
}, obj);
console.log(foundIndex); // 0

返回第一個滿足條件的元素的下標：0。

三：fill()
fill()方法用某個值填充數組，它接受三個參數, fill(value, startIndex, endIndex)：

1: value用來填充的數值
2: startIndex 填充的開始坐標
3: endIndex 填充結束的坐標，不包含此坐標

我們來看看具體的示例：

1: 三個參數都齊全的情況

let array = [0, 1, 2, 3];
array.fill("a", 0, 2);
console.log(array); //["a", "a", 2, 3]

2: 不傳startIndex和endIndex的情況

let array = [0, 1, 2, 3];
array.fill("a");
console.log(array); //["a", "a", "a", "a"]

這種情況即是用第一個參數填充整個數組。

3: 不傳endIndex的情況

let array = [0, 1, 2, 3];
array.fill("a", 1);
console.log(array);//[0, "a", "a", "a"]

這種情況即是用第一個參數從startIndex一直填充到數組結尾。

四：copyWithin()
copyWithin()方法，顧名思義是拷貝數組自身的某些數據來填充數組本身。它也接受三個參數，copyWithin(pastedStartIndex, copyStartIndex, copyEndIndex):

1: pastedStartIndex 開始黏貼數據的坐標
2: copyStartIndex copy開始的坐標
3: copyEndIndex copy結束的坐標，但是不包括此坐標

來看看代碼示例：

1: 三個參數都齊全的情況

let array = [0, 1, 2, "D", "E", "F", "G", "H", "I"];
array.copyWithin(3, 0, 5);
console.log(array); // [0, 1, 2, 0, 1, 2, "D", "E", "I"]

我們來分析一下結果的由來：
1: copyStartIndex = 0，copyEndIndex = 5，那么被copy的元素是： 0, 1, 2, "D", "E" 。
2: pastedStartIndex = 3，那就是從原本的"D"元素所在的坐標開始一一對應地用0, 1, 2, "D", "E"覆蓋原本的元素，其他位置上的元素不變。
3: 所以得到結果：[0, 1, 2, 0, 1, 2, "D", "E", "I"]

2: 沒有copyStartIndex和copyEndIndex的情況

let array = [0, 1, 2, "D", "E", "F", "G", "H", "I"];
array.copyWithin(3);
console.log(array); // [0, 1, 2, 0, 1, 2, "D", "E", "F"]

copyStartIndex的默認值為0，copyEndIndex = array.length;所以當不給以上參數時，表示拷貝整個數組。

3: 沒有copyEndIndex的情況

其實上面第二點已經說了，copyEndIndex默認值為array.length。所以copyEndIndex沒有傳的情況，就表示從copyStartIndex開始copy到整個數組結尾：

let array = [0, 1, 2, "D", "E", "F", "G", "H", "I"];
array.copyWithin(3, 4);
console.log(array); //[0, 1, 2, "E", "F", "G", "H", "I", "I"]

以上就是關于ES6給Array新增的接口方法。

GPU云服務器云服務器 java數組新增方法判斷數組的方法定義數組的方法 php操縱數組的方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106282.html

Javascript內置對象新增接口列表

網上很少有提供不同版本接口對比的文章，所以自己總結一下。 Array Method Description Modify Version concat 連接多個數組，返回數組副本，參數可以為值或數組否 ES3 join 把數組元素組合為字符串否 ES3 pop 刪除并返回最后一個元素是 ES3 push 向數組末尾添加一個或多個值，返回數組長度是 ES3 reve...

xuhong 2019-08-21 17:02 評論0 收藏0
工作中常用es6+特性

摘要：結合工作中使用情況，簡單對進行一些復習總結，包括常用的語法，等，以及短時間內要上手需要重點學習的知識點不同工作環境可能有一些差別，主要參考鏈接是阮一峰的博客以及外文博客阮老師大部分文章是直接翻譯的這個博客簡介先說一下，是一個標準化組織，他們結合工作中使用情況，簡單對es6進行一些復習總結，包括常用的語法，api等，以及短時間內要上手需要重點學習的知識點（不同工作環境可能有一些差別），...

xcold 2019-08-23 18:39 評論0 收藏0
es6 promise面試

摘要：執行函數會返回一個遍歷器對象，每一次函數里面的都相當一次遍歷器對象的方法，并且可以通過方法傳入自定義的來改變函數的行為。函數可以通過配合函數更輕松更優雅的實現異步編程和控制流管理。它和構造函數的不同點類的內部定義的所有方法，都是不可枚舉的。 let const的命令在ES6之前，聲明變量只能用var，var方式聲明變量其實是很不合理的，準確的說，是因為ES5里面沒有塊級作用域是很不合...

timger 2019-08-23 18:38 評論0 收藏0
JavaScript 語言核心筆記（持續更新）

摘要：在同一個塊內，不允許用重復聲明變量。中為新增了塊級作用域。自帶遍歷器的對象有數組字符串類數組對象對象的對象等和結構對象。返回一個遍歷器，使遍歷數組的鍵值對鍵名鍵值。目錄 1.語法 2.類型、值和變量 3.表達式和運算符 4.語句 5.數組 6.對象 7.函數 8.全局屬性和方法 9.詞法作用域、作用域鏈、閉包 10.原型鏈、繼承機制 11.this的理解 12.ES5新特性 13.E...

suosuopuo 2019-08-20 18:20 評論0 收藏0
JavaScript 設計模式（五）：迭代器模式

摘要：文章內容分兩部分前半部分為迭代器模式概念后半部分為中迭代器上半部分開始迭代器模式提供一種方法順序訪問一個聚合對象中的各個元素，而又不需要暴露該對象的內部表示。下半部分開始的迭代器迭代器等同于遍歷器。執行該函數，會返回一個遍歷器對象。 showImg(https://segmentfault.com/img/bVbuyaZ?w=800&h=600); 文章內容分兩部分：前半部分為迭...

zhou_you 2019-08-23 18:26 評論0 收藏0