最新公告
  • 欢迎您光临AA分享网,这里是高级程序员技术学习、分享的分享平台立即加入我们
  • 你不可错过的,10个对javascript对开发人员超有用的小技巧!!

    众所周知,JavaScript 一直在迅速变化。新的 ES2020 引入了许多很棒的功能。你可以通过很多不同的方式去编写代码。他们会达到相同的目标,但其中一些会更短、更清晰。你可以凭借一些小技巧来使代码更清晰。这里列出的对 JavaScript 开发人员有用的技巧,一定会对你有所帮助。【相关推荐:javascript视频教程】

    函数参数验证器

    JavaScript 允许你对函数参数设置默认值。通过这个特性,我们可以实现一个小技巧来验证函数参数。

    const isRequired = () => { throw new Error('param is required'); };
    const print = (num = isRequired()) => { console.log(`printing ${num}`) };
    print(2); //printing 2
    print(); // error
    print(null); //printing null

    格式化 JSON 代码

    你肯定对 JSON.stringify 非常熟悉了,但是你知道吗,你也可以通过 stringify 方法格式化你的代码。其实这很简单。

    stringify 方法有三个参数,分别是 value replacerspace。后面两个参数是可选的,所以我们平常也不会用到它们。想要缩进输出的代码,我们可以使用2个空格 ,或者4个空格。

    console.log(JSON.stringify({ name:"John", Age:23 }, null, '  '));
    >>> 
    {
      "name": "John",
      "Age": 23
    }

    对数组去重

    以往对数组去重我们会使用 filter 函数来过滤掉重复的值。但是现在我们可以使用新的 Set 特性来过滤。非常简单:

    let uniqueArray = [...new Set([1, 2, 3, 3, 3, "school", "school", 'ball', false, false, true, true])];
    >>> [1, 2, 3, "school", "ball", false, true]

    去除数组中的 Boolean(v) 为 false 的值

    有时候你想删除数组中 Boolean(v)false 的值。在 JavaScript 中只有以下 6 种:

    • undefined

    • null

    • NaN

    • 0

    • 空字符串

    • false

    去除这些值最简单的办法是使用下面的方法:

    array.filter(Boolean)

    如果你想先做一些更改然后再过滤,你可以用下面的方法。要记住,原始数组 array 是一直没变的,返回的是一个新数组。

    array
      .map(item => {
          // Do your changes and return the new item
      })
      .filter(Boolean);

    同时合并多个对象

    如果需要同时合并多个对象或者类,可以用下面这种方法。

    const user = {
      name: "John Ludwig",
      gender: "Male",
    };
    const college = {
      primary: "Mani Primary School",
      secondary: "Lass Secondary School",
    };
    const skills = {
      programming: "Extreme",
      swimming: "Average",
      sleeping: "Pro",
    };
    const summary = { ...user, ...college, ...skills };
    
    >>>
    {
      name: 'John Ludwig',
      gender: 'Male',
      primary: 'Mani Primary School',
      secondary: 'Lass Secondary School',
      programming: 'Extreme',
      swimming: 'Average',
      sleeping: 'Pro'
    }

    三个点也叫扩展操作符。

    对数字数组排序

    JavaScript 数组有一个原生的排序方法 arr.sort。这个排序方法默认把数组元素转换成字符串,并对其进行字典序排序。这个默认行为会在排序数字数组时出现问题,所以下面有一个办法来处理这个问题。

    [0, 10, 4, 9, 123, 54, 1].sort()
    >>> [0, 1, 10, 123, 4, 54, 9]
    
    [0, 10, 4, 9, 123, 54, 1].sort((a,b) => a-b);
    >>> [0, 1, 4, 9, 10, 54, 123]

    禁用右键单击

    有时候你可能想要禁止用户点击右键。虽然这个需求很少见,但是可能派的上用场。

    <body oncontextmenu="return false">
      <p></p>
    </body>

    这个简单的代码片段就可以禁止用户点击右键了。

    解构时重命名

    解构赋值是 JavaScript 的一个特性,它允许直接从数组或者对象中获取值,而不需要繁琐的声明变量再赋值。对对象来讲,我们可以通过下面这种方式来给属性名重新定义一个名字。

    const object = { number: 10 };
    // Grabbing number
    const { number } = object;
    // Grabbing number and renaming it as otherNumber
    const { number: otherNumber } = object;
    console.log(otherNumber); // 10

    获取数组中的最后一项

    如果你想获取数组中的最后一项,你可以使用 slice 函数,同时带上一个负数作为参数。

    let array = [0, 1, 2, 3, 4, 5, 6, 7] 
    console.log(array.slice(-1));
    >>>[7]
    console.log(array.slice(-2));
    >>>[6, 7]
    console.log(array.slice(-3));
    >>>[5, 6, 7]

    等待 Promises 全部执行完成

    有时候你可能需要等待几个 promise 都执行完然后进行后面的操作。你可以使用 Promise.all 来并行执行这些 promise。

    const PromiseArray = [
        Promise.resolve(100),
        Promise.reject(null),
        Promise.resolve("Data release"),
        Promise.reject(new Error('Something went wrong'))];
    Promise.all(PromiseArray)
      .then(data => console.log('all resolved! here are the resolve values:', data))
      .catch(err => console.log('got rejected! reason:', err))

    要注意,只要 Promise.all 中有一个是 rejected 状态时,其会立即停止执行并抛出异常。

    如果你想忽略 resolved 或者 rejected 状态,你可以使用 Promise.allSettled。这个是 ES2020 的一个新特性。

    const PromiseArray = [
      Promise.resolve(100),
      Promise.reject(null),
      Promise.resolve("Data release"),
      Promise.reject(new Error("Something went wrong")),
    ];
    Promise.allSettled(PromiseArray)
      .then((res) => {
        console.log("here", res);
      })
      .catch((err) => console.log(err));
    >>>
    here [
      { status: 'fulfilled', value: 100 },
      { status: 'rejected', reason: null },
      { status: 'fulfilled', value: 'Data release' },
      {
        status: 'rejected',
        reason: Error: Something went wrong
            at Object.<anonymous> 
            at Module._compile (internal/modules/cjs/loader.js:1200:30)
            at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
            at Module.load (internal/modules/cjs/loader.js:1049:32)
            at Function.Module._load (internal/modules/cjs/loader.js:937:14)
            at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
            at internal/main/run_main_module.js:17:47
      }
    ]

    想要了解更多相关知识,可访问 前端学习网站!!

    以上就是你不可错过的,10个对javascript对开发人员超有用的小技巧!!的详细内容,更多请关注其它相关文章!

    AA分享网一个高级程序员的学习、分享的IT资源分享平台
    AA分享网-企业网站源码-PHP源码-网站模板-视频教程-IT技术教程 » 你不可错过的,10个对javascript对开发人员超有用的小技巧!!

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    站壳网
    一个高级程序员模板开发平台

    发表评论

    • 74会员总数(位)
    • 2792资源总数(个)
    • 56本周发布(个)
    • 0 今日发布(个)
    • 237稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情