随笔- 530 文章- 2 评论- 82 阅读- 146万

掌握这几个JS技巧，做一个不加班的前端人

文章代码转自 https://juejin.cn/post/7068853819135754253 这里，其中有一些代码错误，本文已进行更正，且一些简单技巧，没有写入本文。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <script>
            // 1. 声明和初始化数组
            const array1 = Array(5).fill("");
            console.log(array1); // ['', '', '', '', '']
            const matrix = Array(5)
                .fill(0)
                .map(() => Array(5).fill(0));
            console.log(matrix);
            // 2. 找出总和、最小值和最大值
            const array2 = [5, 4, 7, 8, 9, 2];
            console.log(array2.reduce((a, b) => a + b)); // 35
            console.log(array2.reduce((a, b) => (a > b ? a : b))); // 9
            console.log(array2.reduce((a, b) => (a > b ? b : a))); // 2
            console.log(Math.max(...array2)); // 9
            console.log(Math.min(...array2)); // 2
            // 3. 对字符串、数字或对象数组进行排序
            // 排序字符串数组
            const stringArr = ["Joe", "Kapil", "Steve", "Musk"];
            stringArr.sort(); // sort 会直接改变原数组
            console.log(stringArr); // 按开头字母顺序排序，['Joe', 'Kapil', 'Musk', 'Steve']
            stringArr.reverse(); // reverse 会直接改变原数组
            console.log(stringArr); // ['Steve', 'Musk', 'Kapil', 'Joe']
            // 排序数字数组
            const array3 = [40, 100, 1, 5, 25, 10];
            console.log(array3.sort()); // [1, 10, 100, 25, 40, 5]
            console.log(array3.sort((a, b) => a - b)); //  [1, 5, 10, 25, 40, 100]
            console.log(array3.sort((a, b) => b - a)); // [100, 40, 25, 10, 5, 1];
            // 对象数组排序
            const objectArr = [
                { first_name: "Lazslo", last_name: "Jamf" },
                { first_name: "Pig", last_name: "Bodine" },
                { first_name: "Pirate", last_name: "Prentice" },
            ];
            objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name));
            console.log(JSON.stringify(objectArr)); // [{"first_name":"Pig","last_name":"Bodine"},{"first_name":"Lazslo","last_name":"Jamf"},{"first_name":"Pirate","last_name":"Prentice"}]
            // 4. 从数组中过滤出虚假值
            const array4 = [3, 0, 6, 7, "", false, undefined, null];
            console.log(array4.length); // 8
            console.log(array4.filter(Boolean)); // [3, 6, 7]
            // 5. 对各种条件使用逻辑运算符
            function doSomething(arg1) {
                arg1 = arg1 || 10;
                // 如果尚未设置，则将 arg1 设置为 10 作为默认值
                return arg1;
            }

            let foo = 10;
            console.log(foo === 10 && doSomething(666)); // 666
            // is the same thing as if (foo == 10) then doSomething();
            // 输出: 10

            console.log(foo === 5 || doSomething()); // 10
            // is the same thing as if (foo != 5) then doSomething();
            // 输出: 10
            // 6. 删除重复值
            const array6 = [5, 4, 7, 8, 9, 2, 7, 5];
            // 注意，filter 不改变原数组，返回新数组
            // 以下原理为当 当前遍历到的值的索引与数组中第一次出现该值的索引相同才返回，即第二次出现同样的值（重复值）不返回
            console.log(array6.filter((item, idx, arr) => arr.indexOf(item) === idx)); // [5, 4, 7, 8, 9, 2]
            const nonUnique = [...new Set(array6)];
            console.log(nonUnique);
            // 7. 创建计数器对象或映射
            let string = "kapilalipak";
            const table = {};
            for (let char of string) {
                table[char] = table[char] + 1 || 1;
            }
            console.log(table);
            // 输出
            // {k: 2, a: 3, p: 2, i: 2, l: 2}
            const countMap = new Map();
            for (let i = 0; i < string.length; i++) {
                if (countMap.has(string[i])) {
                    countMap.set(string[i], countMap.get(string[i]) + 1);
                } else {
                    countMap.set(string[i], 1);
                }
            }
            console.log(countMap); // Map(5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2}
            console.log(countMap.entries()); // MapIterator {'k' => 2, 'a' => 3, 'p' => 2, 'i' => 2, 'l' => 2}
            console.log(countMap.keys()); // MapIterator {'k', 'a', 'p', 'i', 'l'}
            console.log(countMap.values()); // MapIterator {2, 3, 2, 2, 2}
            console.log(countMap.size); // 5
            // 8. 三元运算符很酷
            function Fever(temp) {
                return temp > 97
                    ? "Visit Doctor!"
                    : temp < 97
                    ? "Go Out and Play!!"
                    : temp === 97
                    ? "Take Some Rest!"
                    : "";
            }
            console.log(Fever(97)); // "Take Some Rest!"
            console.log(Fever(100)); // "Visit Doctor!"
            // 17. 将十进制转换为二进制或十六进制
            // 注意  toString 不改变原字符串
            const num = 10;
            console.log(num.toString(2));
            // 输出: "1010"
            console.log(num.toString(16));
            // 输出: "a"
            console.log(num.toString(8));
            // 输出: "12"
            const num1 = 10.2345;
            // toPrecision 返回数字的长度，字符串没有这个方法
            console.log(num1.toPrecision(3)); // 10.2
            //19.单行回文检查
            function checkPalindrome(str) {
                return str == str.split("").reverse().join("");
            }
            console.log(checkPalindrome("naman")); //  true
            // 20.将Object属性转成属性数组
            // 注意 这里 是对象，与map 调用对应 api 返回的数据类型不同，这里返回都是数组
            const obj = { a: 1, b: 2, c: 3 };
            console.log(Object.entries(obj));
            console.log(Object.keys(obj));
            console.log(Object.values(obj));
        </script>
    </body>
</html>