【ES6入門05】：數組擴展

Lionad-Morotar 發布于2019-08-23 12:27 / 2178人閱讀

摘要：數組擴展把一組數據轉換成數組把偽數組集合轉換成真正的數組把集合轉換成數組類似映射的功能接收兩個參數，。

數組擴展 Array.of()

{
    // 把一組數據(number/string/boolean...)轉換成數組
    let arr = Array.of(3, "abc", true, {a:"a"}, 11);
    console.log(arr); // [3, "abc", true, {a: "a"}, 11]
    let empty = Array.of();
    console.log(empty); // []
}

Array.from()

{
    // 把偽數組、集合轉換成真正的數組
    // hello
    // beautiful
    // girl!
    let p = document.querySelectorAll("p");
    let pArr = Array.from(p); // 把集合轉換成數組
    pArr.forEach(function (item) {
        console.log(item.textContent);
    });
    // hello
    // beautiful
    // girl!

    // 類似map映射的功能
    // from接收兩個參數，Array.from(arr, fn)。fn的返回值組成了最終的數組
    console.log(Array.from([1, 3, 5], item => item * 2)); // [2, 6, 10]
}

Array.fill()

{
    // fill把數組元素都變為指定的值，有三個參數 arr.fill(value, start, end)
    // value：填充值
    // start：填充起始位置，可以省略
    // end：填充結束位置，可以省略，實際結束位置是end-1
    console.log([1, "a", undefined].fill(7)); // [7, 7, 7]
    console.log(["a", "b", "c", "d"].fill(7, 1, 3)); // ["a", 7, 7, "d"]
}

Array.copyWithin()

{
    // copyWithin數組元素拷貝
    // 有三個參數 arr.copyWithin(target, start, end)
    // target：目的起始位置
    // start：復制源的起始位置，可以省略，可以是負數
    // end：復制源的結束位置，可以省略，可以是負數，實際結束位置是end-1
    console.log([1, 2, 3, 4, 5, 6].copyWithin(1, 2, 4)); // [1, 3, 4, 4, 5, 6]
}

數組的遍歷

{
    // ES6引入了for...of循環，作為遍歷所有數據結構的統一方法
    let arr = [1, "aha", "why"];
    // 數組的keys方法，返回數組所有下標的集合
    for (let index of arr.keys()) {
        console.log("keys", index); // 0 1 2
    }
    // 數組的values方法，返回數組所有元素的集合
    for (let value of arr.values()) {
        console.log("values", value); // 1 "aha" "why"
    }
    // 數組的entries方法，返回數組的下標和元素的集合
    for (let [index, value] of arr.entries()) {
        console.log("entries", index, value); // 0 1  1 "aha"  2 "why"
    }
    // 以下寫法功能類似于values
    for (let value of arr) {
        console.log("value", value); // 1 "aha" "why"
    }
}

Array.find() 和 Array.findIndex()

{
    // find找出第一個滿足條件的值，就不往后找了
    console.log([1, 2, 3, 4, 5, 6].find(item => item > 3)); // 4
    console.log([1, 2, 3, 4, 5, 6].find(item => item > 8)); // undefined
    // findIndex找出第一個滿足條件的值的下標，就不往后找了
    console.log([1, 2, 3, 4, 5, 6].findIndex(item => item > 3)); // 3
    console.log([1, 2, 3, 4, 5, 6].findIndex(item => item > 8)); // -1
}

Array.includes()

{
    // 數組是否包含某個元素
    console.log([1, 2, NaN].includes(1)); // true
    console.log([1, 2, NaN].includes(NaN)); // true
}

GPU云服務器云服務器 es6字符串擴展 ES6入門 05vps mai05

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

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

ES6入門之對象的擴展

摘要：循環遍歷對象自身的和繼承的可枚舉屬性不含屬性。返回一個數組，包含對象自身的所有屬性的鍵名。目前，只有對象方法的簡寫法可以讓引擎確認，定義的是對象的方法。showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ada8456223b0e1); 1. 屬性的簡潔表示法在ES6中允許直接寫入變量和函數，作為對象的屬性和方法，使得代碼的書寫更為簡潔。...

RiverLi 2019-05-23 11:58 評論0 收藏0
ES6入門之對象的擴展

摘要：屬性的簡潔表示法在中允許直接寫入變量和函數，作為對象的屬性和方法，使得代碼的書寫更為簡潔。循環遍歷對象自身的和繼承的可枚舉屬性不含屬性。返回一個數組，包含對象自身的所有屬性的鍵名。 showImg(https://segmentfault.com/img/remote/1460000019259004?w=1282&h=1920); 1. 屬性的簡潔表示法在ES6中允許直接寫入變量...

AWang 2019-08-26 13:53 評論0 收藏0
ES6入門之對象的新增方法

showImg(https://user-gold-cdn.xitu.io/2019/5/22/16adcec448a45d82); 1. Object.is() 用來解決在ES5中兩種相等運算符的缺點。用來比較兩個值是否嚴格相等，行為和（===）基本一致。在ES5中判斷兩個值是否相等，只能用（==）相等運算符和（===）嚴格相等運算符，但是這兩貨都有缺點，前者兩邊的值都會轉換數據類型，...

zhou_you 2019-05-22 19:25 評論0 收藏0
帶你入門 JavaScript ES6 (二)

摘要：上一篇學習下一代語法一，我們學習了關于塊作用域變量或常量聲明和語法新的字符串拼接語法模版字面量數組元素或對象元素的解構賦值和對象字面量簡寫的相關知識。這便是擴展運算符的用途之一。本文同步帶你入門 JavaScript ES6 (二)，轉載請注明出處。上一篇學習下一代 JavaScript 語法: ES6 (一)，我們學習了關于塊作用域變量或常量聲明 let 和 const 語法、...

chanthuang 2019-08-21 18:26 評論0 收藏0