第三章 陣列

HTML部分

<ul id="app">
    <li ></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

不改變原陣列,回傳boolean值(every / some)

    let arr = [2, 5, 6, 4, 7, 8, 21, 3, 4, 5, 6, 21, 45]; 
    //every 會執行到5,條件為false,結束迭代
    let everyArr = arr.every(x => x % 2 === 0);
    console.log('every: ', arr, everyArr)
    
    //some 會執行三次 到5的時候,條件為true,結束迭代
    let someArr = arr.some(x => x % 2 === 1)
    console.log('some: ', arr, someArr)

不改變原陣列,但是回傳一個新的陣列(map / filter )

    /*不改變原陣列,但是回傳一個新的陣列*/
    //map 迭代執行資料,并回傳一個新的物件
    let mapArr = arr.map(x => x % 2)
    console.log('map: ', arr, mapArr)

    //filter 迭代執行資料,回傳滿足條件的"原陣列中"的資料
    let filterArr = arr.filter(x => x % 2)
    console.log('filter: ', arr, filterArr) 

不改變原陣列,但是會回傳一個累加后的數(reduce)

    //reduce 迭代執行資料,回傳累加后的值
    /**
     * @param previousValue    必需:累加值,也是回傳值
     * @param currentValue     必需:迭代的當前資料
     * @param currentIndex     迭代的當前下標
     * @param array            當前元素所屬的陣列物件
     * @type {number}
     */
    let reduceArr = arr.reduce((previousValue, currentValue, currentIndex, array) => {
        console.log("reduce: ", previousValue, currentIndex, array)
        return currentValue + previousValue
    })
    console.log("reduceArr: ", reduceArr) 

創建陣列 --- 拷貝陣列 偽陣列轉真陣列(of / from)

    //of 創建陣列 [1, 2, 3, 4]
    let ofArr = Array.of(1,2,3,4);
    //拷貝一個陣列  但是為淺拷貝
    let currentArr = [{a: 1, b: 1, c: 1, d: 1},{e: 1, f: 1, g: 1, h: 1}]
    let copyArr = Array.of(...currentArr);
    copyArr[0].a = 55;
    console.log(copyArr, currentArr)

    //from 創建一個新陣列  但是也為淺拷貝
    //這里獲取的為偽陣列,然后新的querySelectorAll獲取到的就是一個真陣列
    let lis = document.getElementsByTagName("li");
    // 偽陣列支持...的展開運算子
    console.log(...lis)
    //但是少了真陣列中的一些方法
    try{
        lis.forEach(item => {
            console.log(item)
        })
    }catch (e) {
        console.error(e)
    }
    //使用of轉化
    let ofNewLis = Array.of(...lis);
    //使用from轉化
    let fromNewLis = Array.from(lis);
    console.log(lis,ofNewLis,fromNewLis)

陣列填充(fill / from)

    /**/
    // fill
    //創建一個長度為6并默認值為0的陣列
    let newArr = Array(6).fill(0)
    console.log(newArr)
    arr.fill(0,12,13);
    /*   0(引數一):填充元素
     *  12(引數二):起始填充位置(不包含)
     *  13(引數三):結束填充位置(包含)
     *  2,3引數可不填寫,則是填充所有
     */
    console.log(arr) 

陣列元素復制(copyWithin)

    let copyWithinArr = [1,2,3,4,5,6]
    /**
     * 0(第一個引數): 復制資料填充的開始位置
     * 3(第二個引數): 復制的資料起始位置 (包含)
     * (第三個引數): 復制的資料結束位置  (不包含)
     */
    // copyWithinArr.copyWithin(0,3);
    // console.log(copyWithinArr);

    copyWithinArr.copyWithin(0, 1 ,5);
    console.log(copyWithinArr);
    //程序
    // 1 2 3 4 5 6
    // 引數二 到 引數三  取出 2 3 4 5
    // 從0號位開始放
    // 2 3 4 5 5 6

    //起始 1 2 3 4 5 6
    //取出 2 3 4 5
    //結果 2 3 4 5 5 6
 /*陣列元素復制*/
    let copyWithinArr = [1,2,3,4,5,6]
    /**
     * 0(第一個引數): 復制資料填充的開始位置
     * 3(第二個引數): 復制的資料起始位置 (包含)
     * (第三個引數): 復制的資料結束位置  (不包含)
     */
    // copyWithinArr.copyWithin(0,3);
    // console.log(copyWithinArr);

    copyWithinArr.copyWithin(0, 1 ,5);
    console.log(copyWithinArr);
    //程序
    // 1 2 3 4 5 6
    // 引數二 到 引數三  取出 2 3 4 5
    // 從0號位開始放
    // 2 3 4 5 5 6

    //起始 1 2 3 4 5 6
    //取出 2 3 4 5
    //結果 2 3 4 5 5 6

搜索資料(indexOf / lastIndexOf / find / findIndex)

    let findIndex = [1,2,3,4,5,6,7,4,9];
    // indexOf:回傳找到元素的索引
    let indexOfIndex = findIndex.indexOf(4);
    console.log("indexOf:" + indexOfIndex)
    // lastIndexOf:從后面開始尋找元素的第一個,并回傳索引
    let lastOfIndex = findIndex.lastIndexOf(4);
    console.log("lastIndexOf:" + lastOfIndex)
    // includes: 存在該元素回傳true,否則回傳false
    let includeBol = findIndex.includes(4);
    console.log("includes:" + includeBol)
    // find: 查找滿足回呼條件的第一個元素,回傳查找到的資料,沒有回傳undefined
    let findItem = findIndex.find(item => {
        return item === 4;
    });
    console.log("find:" + findItem)
    // findIndex: 查找滿足回呼條件的第一個資料,回傳對應的下標,沒有回傳-1
    let findItemIndex = findIndex.findIndex(item => {
        return item === 4;
    });
    console.log("findIndex:" + findItemIndex)

標籤：JavaScript

上一篇：第二章 ECMAScript 和 TypeScript概敘

下一篇：第四章 堆疊