JavaScript 陣列挖掘，不只是講陣列喲-有解無憂

陣列參考型別分析：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

    </style>
</head>

<body>

    <script>
        //陣列的標準定義方法
        // let arr = new Array(1, 2, 3, 4);
        // console.log(arr);
        // console.log(arr.join('|'));

        // 陣列的字面量形式
        // let arr = [1, 2, 3, 4];
        // console.log(arr);
        // console.log(typeof arr);

        // 陣列的賦值是參考型別的
        // let arr1 = [11, 22, 33];
        // let arr2 = arr1;
        // arr1[2] = 555;
        // console.log(arr2);
        // console.log(arr1);

        // 值型別
        // let a = 1;
        // let b = a;
        // b = 99;
        // console.log(b);
        // console.log(a);

        let arr = [11, 22, 33, 44];
        console.log(arr);
        console.table(arr);

        let a = 1;
        console.table(a);
    </script>
</body>

</html>

多維陣列操作：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

    </style>
</head>

<body>

    <script>
        // let arr = [11, 22, 33];
        // console.log(arr[0]);

        // let arr = [
        //     [11, 22, 33],
        //     [44, 55, 66]
        // ];
        // console.log(arr[1][2]);

        // let lessons = [
        //     { name: 'js', click: 11 },
        //     { name: 'html', click: 22 },
        //     { name: 'css', click: 33 },
        // ];
        // console.log(lessons[2].name);

        // 值型別的使用const之后不能改動
        // const a = 1;
        // console.log(a);
        // a = 2;
        // console.log(a);

        //陣列屬于參考型別，使用const之后還是可以改動的
        const arr = [11, 22, 33];
        arr[0] = 44;
        console.log(arr);
    </script>
</body>

</html>

Array.of與陣列創建細節：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

    </style>
</head>

<body>

    <script>
        // let arr = [11, 22, 33, 44, 55];
        // console.log(arr.length);

        // 陣列索引跳躍后，系統會自動用undefined填充
        // let arr = [11];
        // arr[4] = 55;
        // console.log(arr);
        // console.log(arr.length);
        // console.log(arr[2]);

        // let arr = new Array(11, 22, 33);
        // console.log(arr.length);
        // console.table(arr);

        // 如果使用建構式方式定義陣列，那么只填寫一個數字時，默認為陣列的長度，而不是一個陣列的元素
        // let arr = new Array(6);
        // console.log(arr.length);
        // console.table(arr);

        // 使用Array.of來解決上面的問題
        let arr = Array.of(6);
        console.log(arr.length);
        console.table(arr);
    </script>
</body>

</html>

型別檢測與轉換：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

    </style>
</head>

<body>
    <div>cyy1</div>
    <div>cyy2</div>

    <script>
        // Array.isArray() 判斷是否是陣列
        // console.log(Array.isArray(1, 2, 3));
        // console.log(Array.isArray([1, 2, 3]));
        // console.log(Array.isArray({}));
        // console.log(Array.isArray(1));

        // 陣列轉字串
        // console.log([1, 2, 3].toString());
        // console.log(String([1, 2, 3]));
        // console.log(typeof [1, 2, 3].toString());
        // console.log(typeof String([1, 2, 3]));
        // console.log([1, 2, 3].join('~'));
        // console.log(location.href + '?id=' + [1, 2, 3].join('-'));

        // 字串轉陣列
        // let str = 'a,b,c,d,e,f,g';
        // console.log(str.split(','));
        // let str2 = '1234';
        // console.log(Array.from(str2));
        // 只要是含有length屬性的基本都可以使用Array.from()轉陣列

        // 當物件含有length屬性時，也可以使用Array.from()轉陣列，注意索引需要是數字
        // let obj = {
        //     name: 'cyy',
        //     age: 18
        // };
        // console.log(Array.from(obj));

        // let obj = {
        //     name: 'cyy',
        //     age: 18,
        //     length: 2
        // };
        // console.log(Array.from(obj));

        // let obj = {
        //     0: 'cyy',
        //     1: 18,
        //     length: 2
        // };
        // console.log(Array.from(obj));

        let divs = document.querySelectorAll('div');
        let res = Array.from(divs, function (item) {
            item.style.backgroundColor = 'pink';
            console.log(item.innerHTML);
            return item;
        });
        console.table(res);
    </script>
</body>

</html>

展開語法真的好用啊：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

    </style>
</head>

<body>


    <script>
        // let arr = [11, 22, 33];
        // let arr2 = [44, 55, 66];
        // for (const i of arr2) {
        //     arr.push(i);
        // }
        // console.table(arr);

        // console.table(arr.concat(arr2));

        // console.log([...arr, ...arr2]);

        // 不定數量求和
        // function my_sum(...args) {
        //     return args.reduce((s, v) => {
        //         return s += v;
        //     }, 0);
        // }
        // console.log(my_sum(1, 33, 55));

    </script>
</body>

</html>

點語法操作DOM節點元素：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .hide {
            display: none;
        }
    </style>
</head>

<body>

    <div>cyy1</div>
    <div>cyy2</div>

    <script>

        const divs = document.querySelectorAll('div');
        // 把DOM元素轉陣列進行操作的n種方法
        // divs.map(item => console.log(item));
        // 1、Array.from 轉陣列
        // Array.from(divs).map(item => console.log(item));
        // 2、原型鏈中的方法
        // Array.prototype.map.call(divs, item => console.log(item));
        // 3、點語法
        // [...divs].map(item => console.log(item));
        [...divs].map(item => {
            item.addEventListener('click', function () {
                this.classList.toggle('hide');
            })
        });
    </script>
</body>

</html>

使用解構賦值提高效率：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

    </style>
</head>

<body>


    <script>
        // let arr = ['cyy', 2020];
        // let name = arr[0];
        // let year = arr[1];
        // console.log(name, year);

        // 解構賦值 語法糖
        // let arr = ['cyy', 2020];
        // let [name, year] = arr;
        // console.log(name, year);

        // function get() {
        //     return ['cyy', 2020];
        // }
        // let [name, year] = get();
        // console.log(name, year);

        // 字串轉陣列
        // let str = 'cyyisis';
        // let [...arr] = str;
        // console.log(arr);
        // console.log(...str);

        // 使用逗號進行占位
        // let [, num2] = [11, 22];
        // console.log(num2);

        // 解構賦值與展開語法的組合運用
        // let [name, ...args] = ['cyy', 11, 22, 33];
        // console.log(name);
        // console.log(args);
        // let arr2 = ['cyy2', ...args];
        // console.log(arr2);

        // 解構賦值配合默認值
        // let [name, year = 2020] = ['cyy'];
        // console.log(name, year);

        // function show([name, year]) {
        //     console.log(name, year);
        // }
        // show(['cyy', 2020]);

        function show(...args) {
            console.log(args);
        }
        show([11, 22, 33]);
    </script>
</body>

</html>

添加元素的多種操作技巧：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

    </style>
</head>

<body>


    <script>
        // let arr = [11, 22];
        // arr[2] = 33;
        // arr[arr.length] = 44;
        // console.table(arr);

        // 使用點語法一次向陣列追加多個元素
        // let arr2 = [33, 44, 55];
        // console.log([...arr, ...arr2]);

        // arr.push(33);
        // arr.push(44, 55, 66);
        // console.table(arr);

        // push的回傳值是陣列的個數
        // let arr2 = [44, 66, 88];
        // let length = arr.push(99, ...arr2);
        // console.log(length);
        // console.log(arr);

        function rangeArray(start, end) {
            let arr = [];
            for (let i = start; i <= end; i++) {
                arr.push(i);
            }
            return arr;
        }
        console.log(rangeArray(1, 7));
    </script>
</body>

</html>

資料出堆疊與入堆疊及填充操作：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

    </style>
</head>

<body>


    <script>
        // push從后面追加，pop從后面彈出
        // let arr = [11, 22, 33, 44, 55];
        // let num = arr.pop();
        // console.log(num, arr);

        // unshift從前面添加，shift從前面彈出
        // let arr = [11, 22, 33, 44, 55];
        // let num = arr.unshift(55, 66);
        // console.log(num, arr);

        // let arr = [11, 22, 33, 44, 55];
        // let num = arr.shift();
        // console.log(num, arr);

        // 陣列填充以及填充的起始結束位置
        // let arr = new Array(5);
        // console.log(arr);
        // let arr = new Array(5).fill('11');
        // console.log(arr);
        // let arr = new Array(5).fill('11', 2, 4);
        // console.log(arr);
    </script>
</body>

</html>

splice與slice實作陣列的增刪改查：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

    </style>
</head>

<body>


    <script>
        // slice不會改變原陣列
        // let arr = [11, 22, 33, 44, 55];
        // let res = arr.slice();
        // console.log(res);
        // let res2 = arr.slice(2);
        // console.log(res2);
        // // 兩個引數時，第一個代表起始（包含），第二個代表結束（不包含）
        // let res3 = arr.slice(1, 3);
        // console.log(res3);

        // splice會改變原陣列，第二個引數表示截取幾個
        // splice實作洗掉操作
        // let arr = [11, 22, 33, 44, 55];
        // // let res = arr.splice(1);
        // // console.log(res, arr);
        // let res = arr.splice(1, 3);
        // console.log(res, arr);

        // splice實作替換操作
        // let arr = [11, 22, 33, 44, 55];
        // // let res = arr.splice(1, 1, 77);
        // // console.log(res, arr);
        // let res = arr.splice(1, 1, 77, 88);
        // console.log(res, arr);

        // splice實作插入操作
        // let arr = [11, 22, 33, 44, 55];
        // // let res = arr.splice(1, 0, 77);
        // // console.log(res, arr);
        // let res = arr.splice(1, 0, 77, 88);
        // console.log(res, arr);

        // splice向后面追加
        // let arr = [11, 22, 33, 44, 55];
        // let res = arr.splice(arr.length, 0, 77);
        // console.log(res, arr);

        // splice向前面追加
        let arr = [11, 22, 33, 44, 55];
        let res = arr.splice(0, 0, 77);
        console.log(res, arr);



    </script>
</body>

</html>

陣列移動函式實體：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

    </style>
</head>

<body>


    <script>
        let arr = [11, 22, 33, 44, 55, 66, 77];
        function move(arr, from, to) {
            if (from < 0 || to >= arr.length) {
                console.error('引數錯誤~');
                return;
            }
            let item = arr.splice(from, 1); //此處的item是一個陣列，需要使用擴展福展開
            console.log(item, arr);
            arr.splice(to, 0, ...item);
            return arr;
        }
        console.log(move(arr, 2, 4));

    </script>
</body>

</html>

清空陣列的多種處理方式：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

    </style>
</head>

<body>


    <script>
        // let arr = [11, 22, 33, 44, 55, 66, 77];
        // // arr = [];
        // // arr.length = 0;
        // // arr.splice(0);
        // // arr.splice(0, arr.length);
        // // while (arr.pop()) { }
        // console.log(arr);

        // let arr = [11, 22, 33, 44, 55, 66, 77];;
        // let arr2 = arr;
        // arr = [];// 相當于給arr指向了一個新的空白地址，但是arr2仍然是原來的地址
        // console.log(arr, arr2);

        let arr = [11, 22, 33, 44, 55, 66, 77];;
        let arr2 = arr;
        arr.length = 0;// 把原來的地址清空了
        console.log(arr, arr2);

    </script>
</body>

</html>

陣列的拆分與合并操作：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

    </style>
</head>

<body>


    <script>

        // let str = "11,22,33";
        // let arr = str.split(',');
        // console.log(str.split(','));
        // let str2 = arr.join('--');
        // console.log(str2);

        // let arr = [11, 22];
        // let arr2 = [33, 44];
        // let arr3 = [55];
        // console.log(arr.concat(arr2, arr3));
        // console.log([...arr, ...arr2, ...arr3]);

        // copyWithin陣列內部的復制
        // 第一個引數時復制目標的起始位置
        // 第二個引數是被復制的元素的起始位置（包含）
        // 第三個引數時被復制的元素的結束位置（不包含）
        // let arr = [11, 22, 33, 44, 55, 66, 77];
        // console.log(arr.copyWithin(2, 3, 6));
    </script>
</body>

</html>

查找元素基本使用：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

    </style>
</head>

<body>


    <script>

        let arr = [11, 22, 33, 44, 55, 66, 77, 33];
        // console.log(arr.indexOf(33));
        // console.log(arr.lastIndexOf(33));
        // if (arr.indexOf(33) != -1) {
        //     console.log('找到了');
        // }

        // console.log(arr.includes(44));
        // if (arr.includes(44)) {
        //     console.log('找到了');
        // }

        // 第二個引數指定從哪個位置開始查找
        // console.log(arr.indexOf(33));
        // console.log(arr.indexOf(33, 3));
    </script>
</body>

</html>

includes方法原理實作：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

    </style>
</head>

<body>


    <script>

        let array = [11, 22, 33, 44, 55, 66, 77, 33];
        function includes(arr, find) {
            for (const item of arr) {
                if (item == find) return true;
            }
            return false;
        }
        console.log(includes(array, 33));
    </script>
</body>

</html>

高效的find與findIndex新增方法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

    </style>
</head>

<body>


    <script>

        let array = [11, 22, 33, 44, 55, 66, 77, 33];
        // let res = array.find(item => {
        //     return item == 22;
        // });
        // console.log(res);

        // let res = array.find(item => {
        //     return item == 2;
        // });
        // console.log(res);

        // 參考型別無法直接比較
        // find回傳值，findIndex回傳索引位置
        let lessons = [
            { name: 'cyy1' },
            { name: 'cyy2' },
            { name: 'cyy3' },
        ];
        // let res = lessons.includes({ name: 'cyy2' });
        // console.log(res);

        // let res = lessons.find(item => {
        //     return item.name == "cyy2";
        // })
        // console.log(res);

        let res = lessons.findIndex(item => {
            return item.name == "cyy2";
        })
        console.log(res);
    </script>
</body>

</html>

自定義find原型方法實作：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

    </style>
</head>

<body>


    <script>

        let array = [11, 22, 33, 44, 55, 66, 77, 33];
        function find(arr, callback) {
            for (const item of arr) {
                if (callback(item)) return true;
            }
            return false;
        };
        console.log(find(array, function (item) {
            return item == 22;
        }));

        // 使用原型鏈實作相同的效果
        Array.prototype.myFindIndex = function (callback) {
            for (const item of this) {
                if (callback(item)) return true;
            }
            return false;
        };
        console.log(array.myFindIndex(function (item) {
            return item == 222;
        }));
    </script>
</body>

</html>

陣列排序使用技巧：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

    </style>
</head>

<body>


    <script>
        // a-b從小到大
        // let arr = [11, 22, 33, 44, 55, 66, 77, 33];
        // arr.sort(function (a, b) {
        //     return a - b;
        // });
        // console.log(arr);

        // b-a從大到小
        // let arr = [11, 22, 33, 44, 55, 66, 77, 33];
        // arr.sort(function (a, b) {
        //     return b - a;
        // });
        // console.log(arr);

        let cart = [
            { name: 'iphone', price: 12000 },
            { name: 'imax', price: 18000 },
            { name: 'ipad', price: 5000 },
        ];
        cart = cart.sort(function (a, b) {
            return a.price - b.price;
        });
        console.table(cart);
    </script>
</body>

</html>

sort排序演算法原理實作：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

    </style>
</head>

<body>


    <script>
        // a-b從小到大
        let arr = [22, 44, 55, 77, 33, 66, 11];
        function sort(arr, callback) {
            for (let i in arr) {
                for (let j in arr) {
                    if (callback(arr[i], arr[j]) < 0) {
                        let temp = arr[i];
                        arr[i] = arr[j];
                        arr[j] = temp;
                    }
                }
            }
            return arr;
        }
        console.log(sort(arr, function (a, b) {
            return a - b;
        }));
        console.log(sort(arr, function (a, b) {
            return b - a;
        }));
    </script>
</body>

</html>

回圈操作中參考型別使用技巧：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>

<body>

    <script>
        let lessons = [{
            title: 'title1',
            cate: 'html'
        }, {
            title: 'title2',
            cate: 'css'
        }, {
            title: 'title3',
            cate: 'js'
        }];

        // for (let i = 0; i > lessons.length; i++) {
        //     lessons[i].title = `cyy${lessons[i].title}`;
        // }

        // for (const value of lessons) {
        //     value.title = `cyy${value}`;
        // }

        for (const key in lessons) {
            lessons[key].title = `cyy${lessons[key].title}`;
        }
        console.table(lessons);

        // for of 操作值型別，不會改變原來的資料
        // 操作參考型別，會改變原來的資料
        // let arr = [1, 2, 3];
        // for (let a of arr) {
        //     a++;
        // }
        // console.log(arr);

        // let arr = [{
        //     n: 1
        // }, {
        //     n: 2
        // }];
        // for (let a of arr) {
        //     a.n++;
        // }
        // console.log(arr);
    </script>
</body>

</html>

forEach 回圈方法使用：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
        .disabled {
            color: #ddd;
        }
    </style>
</head>

<body>
    <ul>
        <li>html</li>
        <li>css</li>
    </ul>
    <script>
        let lessons = [{
            title: 'title1',
            cate: 'html'
        }, {
            title: 'title2',
            cate: 'css'
        }, {
            title: 'title3',
            cate: 'js'
        }];

        // lessons.forEach(function(item, index, array) {
        //     // item回圈的項,index索引,array原資料
        //     // console.log(item, index, array);
        //     // 默認this是指window物件
        //     console.log(this);
        // });

        // lessons.forEach(function(item, index, array) {
        //     // 改變了this的指向
        //     console.log(this);
        // }, {});

        // forEach也是操作參考型別能改變原來的值
        // 操作值型別無法改變
        // lessons.forEach(function(item, index, array) {
        //     item.title = item.title.substr(0, 2);
        // });
        // console.log(lessons);

        let lis = document.querySelectorAll('ul li');
        console.log(lis);
        // DOM轉陣列
        console.log(Array.from(lis));
        console.log([...lis]);
        // forEach可以直接操作DOM元素
        lis.forEach(item => {
            console.log(item);
            item.addEventListener('click', function() {
                this.classList.toggle('disabled');
            });
        });
    </script>
</body>

</html>

iterator迭代器方法玩轉陣列：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>

    </style>
</head>

<body>

    <script>
        let arr = ['html', 'css', 'js'];
        // let keys = arr.keys();
        // console.log(keys.next());
        // console.log(keys.next());
        // console.log(keys.next());
        // let {
        //     value,
        //     done
        // } = keys.next();
        // console.log(value);

        // let values = arr.values();
        // let {
        //     value,
        //     done
        // } = values.next();
        // console.log(value);

        // next進行迭代
        // let values = arr.values();
        // while (({
        //         value,
        //         done
        //     } = values.next()) && done === false) {
        //     console.log(value);
        // }

        // for of使用迭代方法操作陣列
        // for (let value of arr.values()) {
        //     console.log(value);
        // }
        // for (let key of arr.keys()) {
        //     console.log(key);
        // }

        // entries=values+keys
        // let entries = arr.entries();
        // console.log(entries); // Array Iterator {}迭代器
        // let {
        //     value,
        //     done
        // } = entries.next();
        // console.log(value);
        // console.log(done);

        let entries = arr.entries();
        console.log(entries); // Array Iterator {}迭代器
        // let {
        //     value: [a, b],
        //     done
        // } = entries.next();
        // console.log(a);
        // console.log(b);
        // console.log(done);

        // for (let value of entries) {
        //     console.log(value);
        // }
        for (let [a, b] of entries) {
            console.log(a + '--' + b);
        }
    </script>
</body>

</html>

every與some是這么用的：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>

    </style>
</head>

<body>
    <input type="text" name="title">
    <span id="msg"></span>

    <script>
        // every所有元素回傳真，則回傳真；有一個元素回傳假，則回傳假
        // let arr = ['html', 'css', 'js'];
        // let res = arr.every((item, index, arr) => {
        //     console.log(item);
        //     return true;
        // });
        // console.log(res);

        // let arr = ['html', 'css', 'js'];
        // let res = arr.every((item, index, arr) => {
        //     console.log(item);
        //     return false;
        // });
        // console.log(res);

        // const user = [{
        //     name: 'cyy1',
        //     score: 99
        // }, {
        //     name: 'cyy2',
        //     score: 66
        // }, {
        //     name: 'cyy3',
        //     score: 54
        // }, ];
        // let res = user.every((item) => {
        //     return item.score >= 60;
        // });
        // console.log(res ? '全部及格' : '有人沒及格');

        let keywords = ['html', 'css', 'js'];
        document.querySelector('[name=title]').addEventListener('keyup', function() {
            let res = keywords.some((item) => {
                return this.value.includes(item);
            });
            document.querySelector('#msg').innerHTML = res ? '' : ('必須包含關鍵詞：' + keywords.join(','));
        });
    </script>
</body>

</html>

filter過濾元素使用：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>

    </style>
</head>

<body>

    <script>
        let lessons = [{
            title: 'title1',
            cate: 'css'
        }, {
            title: 'title2',
            cate: 'css'
        }, {
            title: 'title3',
            cate: 'html'
        }, ];
        let res = lessons.filter((item) => {
            return item.cate == 'css';
        });
        console.table(res);
    </script>
</body>

</html>

自定義過濾函式理解原理：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>

    </style>
</head>

<body>

    <script>
        // let arr = [1, 2, 3, 4];

        // function filter(arr, exception) {
        //     let newArr = [];
        //     for (let value of arr) {
        //         if (exception.includes(value) === false) {
        //             newArr.push(value);
        //         }
        //     }
        //     return newArr;
        // }
        // console.log(filter(arr, [1, 2]));

        let arr = [1, 2, 3, 4];

        function filter(arr, callback) {
            let newArr = [];
            for (let value of arr) {
                if (callback(value) === true) {
                    newArr.push(value);
                }
            }
            return newArr;
        }
        console.log(filter(arr, function(item) {
            return item > 2;
        }));
    </script>
</body>

</html>

map映射陣列與參考型別處理技巧：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>

    </style>
</head>

<body>

    <script>
        // 值型別，不改變原資料
        //   let arr = ['html', 'css'];
        //   let res = arr.map(function(item, index, arr) {
        //       return `cyy is learning --${item}`;
        //   });
        //   console.table(arr);
        //   console.table(res);


        // 參考型別，會改變原資料
        // let lessons = [{
        //     title: 'title1'
        // }, {
        //     title: 'title2'
        // }, {
        //     title: 'title3'
        // }, ];
        // lessons.map(function(item) {
        //     item.click = 1;
        // });
        // console.log(lessons);

        // 淺拷貝操作， 在操作參考型別時不會改變原資料
        // let lessons = [{
        //     title: 'title1'
        // }, {
        //     title: 'title2'
        // }, {
        //     title: 'title3'
        // }, ];
        // let res = lessons.map(function(item) {
        //     return Object.assign({
        //         click: 1
        //     }, item);
        // });
        // console.table(lessons);
        // console.table(res);

        // 或者直接回傳新陣列
        // let lessons = [{
        //     title: 'title1'
        // }, {
        //     title: 'title2'
        // }, {
        //     title: 'title3'
        // }, ];
        // let res = lessons.map(function(item) {
        //     return {
        //         title: item.title,
        //         click: 1
        //     };
        // });
        // console.table(lessons);
        // console.table(res);
    </script>
</body>

</html>

超好用的reduce方法詳解：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>

    </style>
</head>

<body>

    <script>
        // let arr = [1, 2, 3, 4, 5];
        // pre是上一次回圈的回傳值
        // arr.reduce(function(pre, value, index, arr) {
        //     console.log(pre, value);
        // });
        // arr.reduce(function(pre, value, index, arr) {
        //     console.log(pre, value);
        // }, 0);


        // 統計元素在陣列中出現的次數
        // let arr = [1, 2, 3, 4, 5, 3, 4, 1, 1, 1, 5, 6];

        // function arrayCount(arr, num) {
        //     return arr.reduce((pre, cur) => {
        //         pre += num == cur ? 1 : 0;
        //         return pre;
        //     }, 0);
        // }
        // console.log(arrayCount(arr, 1));


        // 統計最大值
        let arr = [1, 2, 3, 4, 5, 3, 4, 1, 1, 1, 5, 6];

        function arrayMax(arr) {
            return arr.reduce((pre, cur) => {
                return pre > cur ? pre : cur;
            });
        }
        console.log(arrayMax(arr));
    </script>
</body>

</html>

購物車匯總與獲取最貴商品：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>

    </style>
</head>

<body>

    <script>
        // let cart = [{
        //     name: 'good1',
        //     price: 15000
        // }, {
        //     name: 'good2',
        //     price: 1200
        // }, {
        //     name: 'good3',
        //     price: 180000
        // }, ];

        // function maxPrice(arr) {
        //     return arr.reduce((pre, cur) => {
        //         return pre.price > cur.price ? pre : cur;
        //     });
        // }
        // console.table(maxPrice(cart));

        let cart = [{
            name: 'good1',
            price: 15000
        }, {
            name: 'good2',
            price: 1200
        }, {
            name: 'good3',
            price: 180000
        }, ];

        function sum(arr) {
            return arr.reduce((total, cur) => {
                return total += cur.price;
            }, 0);
        }
        console.log(sum(cart));
    </script>
</body>

</html>

處理購物車中的重復商品：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>

    </style>
</head>

<body>

    <script>
        // let cart = [{
        //     name: 'good1',
        //     price: 15000
        // }, {
        //     name: 'good2',
        //     price: 1200
        // }, {
        //     name: 'good3',
        //     price: 180000
        // }, ];

        // 獲取價格超過10000元的商品名稱
        // function getNameByPrice(arr, price) {
        //     return arr.reduce(function(arr, cur) {
        //         if (cur.price > price) {
        //             arr.push(cur);
        //         }
        //         return arr;
        //     }, []).map(function(item) {
        //         return item.name;
        //     });
        // }

        // function getNameByPrice(arr, price) {
        //     return arr.reduce(function(arr, cur) {
        //         if (cur.price > price) {
        //             arr.push(cur);
        //         }
        //         return arr;
        //     }, []).map((item) => item.name);
        // }
        // console.log(getNameByPrice(cart, 10000));

        // let arr = [1, 3, 5, 2, 6, 5, 3, 1];
        // let res = arr.reduce(function(arr, cur) {
        //     if (arr.includes(cur) === false) {
        //         arr.push(cur);
        //     }
        //     return arr;
        // }, []);
        // console.table(res);

        let cart = [{
            name: 'good1',
            price: 15000
        }, {
            name: 'good2',
            price: 1200
        }, {
            name: 'good3',
            price: 180000
        }, {
            name: 'good1',
            price: 15000
        }, {
            name: 'good1',
            price: 15000
        }, {
            name: 'good3',
            price: 180000
        }];

        function filterGoods(arr) {
            return arr.reduce(function(arr, cur) {
                let res = arr.find(v => v.name == cur.name);
                if (!res) arr.push(cur);
                return arr;
            }, []);
        }
        console.log(filterGoods(cart));
    </script>
</body>

</html>

炫酷的文字LOGO效果元素創建：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            width: 100vw;
            height: 100vh;
            background: #7481c9;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        div {
            font-size: 6em;
            color: purple;
            font-weight: bold;
            text-transform: uppercase;
        }
        
        div>span {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }
        
        .color {
            animation-name: color;
            animation-duration: 1s;
            animation-timing-function: linear;
            animation-direction: alternate;
            animation-iteration-count: 2;
        }
        
        @keyframes color {
            50% {
                color: #ffeb3b;
                transform: scale(1.5);
            }
            100% {
                color: #ff9800;
                transform: scale(.5);
            }
        }
    </style>
</head>

<body>
    <div>CYYiscyyhahaha</div>
    <script>
        const div = document.querySelector('div');
        [...div.textContent].reduce(function(pre, cur, index) {
            if (pre == index) div.innerHTML = '';
            // console.log(pre, cur, index);
            let span = document.createElement('span');
            span.innerHTML = cur;
            div.appendChild(span);

            span.addEventListener('mouseenter', function() {
                this.classList.add('color');
            });
            span.addEventListener('animationend', function() {
                this.classList.remove('color');
            });
            return pre;
        }, 0);
    </script>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/220222.html

標籤：JavaScript

上一篇：防止網頁除錯，讓網頁一直debugger

下一篇：JavaScript 陣列挖掘，不只是講陣列喲