• 前端有用JavaScript技巧


    数组去重

    //法1
    var arr = [1, 2, 3, 3, 4]; console.log(...new Set(arr)) // [1, 2, 3, 4]
    //法2 
    function SetArr(array) { return Array.from(new Set(array)); } console.log(SetArr([1, 1, 2, 2, 3, 4, 4])) // [1, 2, 3,4]
     

    s三元表达式

    语法:条件?表达式1:表达式2 。  条件的括号可要可不要的

                        let istrue = true;
    
                        let a = (istrue === true) ? '我是true啊' : "我是false啊";
                        console.log(a) //我是true啊
    
                        let b = '';
                        (istrue === false) ? b = '我是true啊': b = '我是false啊';
                        console.log(b)//我是false啊

    使用Array.isArray更好的检测数组

                        let isArray = [{
                                a: 1
                            }
                        ]
                        let isArr={a:1}
    
                        //使用instanceof
                        console.log(isArray instanceof Array)//true
                        console.log(isArr instanceof Array)//false
    
    
                        //使用新方法
                        console.log(Array.isArray(isArray))//true
                        console.log(Array.isArray(isArr))//false

    数组和布尔值

    有时我们需要过滤数组中值为 false 的值. 例如(0, undefined, null, false)

     var myArray = [1, 0 , undefined, null, false];
     myArray.filter(Boolean);
     //[1]

    合并对象

    const page = {
     current: 1,
     pageSize: 10
     }
     const form = {
     name: "",
     sex: ""
     }
     const params = {...form, ...page};
     /*
     {
     name: "",
     sex: "",
     current: 1,
     pageSize: 10
     }
     *

    Object.values()   遍历对象所有值

                        const obj = {
                            a: 1,
                            b: 2,
                            c: 3
                        }
                        // ES7写法
                       const val= Object.keys(obj).map(key => obj[key])
                       console.log(val)//[1,2,3]
    
                       //ES8写法
                       const value=Object.values(obj)
                       console.log(value)//[1,2,3]

    Object.entries()  :Object.entries()函数返回一个给定对象自身可枚举属性的键值对的数组。如下:

                        const obj = {
                            a: 1,
                            b: 2,
                            c: 3
                        }
                        console.log(Object.entries(obj));

    打印出数组:

    接下来再看obj对象的所有属性的key和value

                    obj() {
                        const obj = {
                            a: 1,
                            b: 2,
                            c: 3
                        }
                        //不使用Object.entries() :ES7
                        Object.keys(obj).forEach(key => {
                            console.log('key:' + key + ' value:' + obj[key]);
                            //key:a value:1
                            //key:b value:2
                            //key:c value:3
                        })
    
                        //使用Object.entries() :ES8
                        for (let [key, value] of Object.entries(obj)) {
                            console.log(`key: ${key} value:${value}`)
                        }
                        //key:a value:1
                        //key:b value:2
                        //key:c value:3
    
                    }

    通过 Object.fromEntries, 可以将 Array 转化为 Object:

    const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
    const obj = Object.fromEntries(arr);
    console.log(obj); // { 0: "a", 1: "b", 2: "c" }
    • flat()方法最基本的作用就是数组降维

    var arr1 = [1, 2, [3, 4]];
    arr1.flat(); 
    // [1, 2, 3, 4]
    var arr2 = [1, 2, [3, 4, [5, 6]]];
    arr2.flat();
    // [1, 2, 3, 4, [5, 6]]
    var arr3 = [1, 2, [3, 4, [5, 6]]];
    arr3.flat(2);
    // [1, 2, 3, 4, 5, 6]
    //使用 Infinity 作为深度,展开任意深度的嵌套数组
    arr3.flat(Infinity); 
    // [1, 2, 3, 4, 5, 6]

    Promise.finally()

    一个Promise调用链要么成功到达最后一个.then(),要么失败触发.catch()。在某些情况下,你想要在无论Promise运行成功还是失败,运行相同的代码,例如清除,删除对话,关闭数据库连接等。

    function doSomething() {
     doSomething1()
     .then(doSomething2)
     .then(doSomething3)
     .catch(err => {
     console.log(err);
     })
     .finally(() => {
     // finish here!
     });
    }

    ES2018引入异步迭代器(asynchronous iterators)

    async function process(array) {
     for await (let i of array) {
     doSomething(i);
     }
    }

    函数参数默认值

    function foo(height, color)
    {
     var height = height || 50;
     var color = color || 'red';
     //...
    }

     

    获取查询参数

    // 假设地址栏中查询参数是这样 "?post=1234&action=edit"
     var urlParams = new URLSearchParams(window.location.search);
     console.log(urlParams.has('post')); // true
     console.log(urlParams.get('action')); // "edit"
     console.log(urlParams.getAll('action')); // ["edit"]
     console.log(urlParams.toString()); // "?post=1234&action=edit"
     console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"

    ||与&&用法

    a() && b() :如果执行a()后返回true,则执行b()并返回b的值;如果执行a()后返回false,则整个表达式返回a()的值,b()不执行;

    a() || b() :如果执行a()后返回true,则整个表达式返回a()的值,b()不执行;如果执行a()后返回false,则执行b()并返回b()的值;

        console.log(0 && 4); //0
        console.log(1 && 4); //4
        console.log(0 || 4); //4
        console.log(1 || 4); //1
        console.log((1 && 3 || 0) && 4); //4 
        console.log(1 && 3 || 0 && 4); //3 
        console.log(0 && 3 || 1 && 4); //4 

    模板字符串

    ES6支持 模板字符串,使得字符串的拼接更加的简洁、直观。

    不使用模板字符串:

    var name = 'Your name is ' + first + ' ' + last + '.'

    使用模板字符串:

    var name = `Your name is ${first} ${last}.`

    在ES6中通过 ${}就可以完成字符串的拼接,只需要将变量放在大括号之中。

    对象属性简写

    在ES6中允许我们在设置一个对象的属性的时候不指定属性名。

    不使用ES6

    const name = 'Ming', age = '18', city = 'Shanghai';
    
    const student = {
        name: name,
        age: age,
        city: city
    };
    
    console.log(student);

    对象中必须包含属性和值,显得非常冗余。

    使用ES6

    const name = 'Ming', age = '18', city = 'Shanghai';
    
    const student = {
        name,
        age,
        city
    };
    
    console.log(student);

    对象中直接写变量,非常简洁。

    Promise对象:

    数组includes()方法:

        扩展:

    every:

    some:

    filter:

    map:

    forEach 数组遍历

     fill():

    用新元素替换掉数组内的元素,可以指定替换下标范围。

    arr.fill(value, start, end)

    find():

    传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它,并且终止搜索。

    const arr = [1, "2", 3, 3, "2"]

    console.log(arr.find(n => typeof n === "number")) // 1

    参考地址:

    http://mp.weixin.qq.com/s?__biz=MzAwNjI5MTYyMw==&mid=2651497267&idx=1&sn=00ce17c00ada4488b6833e081ea61f07&chksm=80f1aafbb78623ed4bd851b125c6e0498b9e0a35698a5896c51673044ace89564c9baf1ab7c7&mpshare=1&scene=24&srcid=#rd

     https://www.cnblogs.com/chaoyuehedy/p/6905422.html

    http://mp.weixin.qq.com/s?__biz=MzAwNjI5MTYyMw==&mid=2651496630&idx=1&sn=3ecaf7db6f4888479c0556b8792e958b&chksm=80f1a97eb7862068a20ad54333db4c21c1e292c4c4482046f1ae56bd77057fe0ade78c7f710f&scene=0#rd

     http://mp.weixin.qq.com/s?__biz=MzAwNjI5MTYyMw==&mid=2651496526&idx=1&sn=c71b32d764cf3f704934570e456579d6&chksm=80f1a986b7862090f768b90beecc920c1d2d732ce2da97f6fd9e8a402963567a389a2c2648f8&scene=0#rd

  • 相关阅读:
    前端Ajax/JS/HTML+后端SpringMVC(二)
    前端Ajax/JS/HTML+后端SpringMVC(一)
    Redis 简介及应用
    项目中使用 MyBatis(二)
    L2d插件
    [转载] 栈内存和堆内存
    Hbase排错
    matplotlib中文乱码
    cocos2dx 一些好网站
    esclipe中接入SDK时引用另一个工程或Jar
  • 原文地址:https://www.cnblogs.com/lwming/p/11154589.html
Copyright © 2020-2023  润新知