江苏龙网

  1. 主页 > 生活百科 > >

周末学会了 10个超级实用 Javascript 技巧

JavaScript

众所周知 ， JAVAScript 一直在快速变化 。在新的 ES2020 中 ， 有很多很棒的特性 ， 我们大都已经迫不及待尝试了 。老实说 ， 有时我们可以用不同角度来编写代码 ， 同样也能达到相同的效果 ， 而且有的还会更简短 ， 更清晰 。
下面是列出一些 JavaScript 有用的技巧 ， 相信总有一天会对你有所帮助 。
1.方法参数验证ES6 中可以为函数的参数设置默认值 ， 有了这个 ， 我们可以实现一个验证方法参数不能为空的巧妙技巧 。
const isRequired = () => {   throw new Error('param is required')}const print = (num = isRequired()) => {   console.log(`printing ${num}`) }print(2) //printing 2print() // errorprint(null) //printing null2.格式化JSON代码我们都非常熟悉JSON.stringify ， 但比较少知道的是它还可以进行格式化的输出 。
stringify 方法有三个参数：value ， replacer和space 。其中 ， 后两个是可选参数 ， 这也是我们很少知道它的原因 。要缩进JSON ， 必须使用space参数 。
console.log(JSON.stringify({name:"John",Age:23},null,'t'));>>> { "name": "John", "Age": 23}3.从数组中获取惟一的值要从数组中获得唯一的值 ， 需要使用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]4.从数组中删除虚值在某些情况下 ，  我们想从数组中删除虚值 。虚值是 JavaScript 中的值为FALSE的值 。JavaScript 中只有六个虚值 ， 它们是：

  • undefined
  • null
  • NaN
  • 0
  • '' (空字符)
  • false
过滤这些虚值的最简单方法是使用下面的函数：
myArray.filter(Boolean)如果要对数组进行一些修改 ， 然后过滤新数组 ， 则可以尝试这样的操作 。请记住 ， 原始myArray保持不变 。
myArray    .map(item => {        // Do your changes and return the new item    })    .filter(Boolean);5.合并多个对象实际需求中 ， 我们经常需要合并多个对照 ， 快速的做法可以像下面这么做：
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}6.排序数字数组JavaScript 数组带有内置的sort方法 。默认情况下 ， 此sort方法将数组元素转换为字符串 ， 并对其进行字典排序 。但这在对数字数组进行排序时 ， 会有问题 ， 解决方法就是手写一个排序方法 。
[0,10,4,9,123,54,1].sort((a,b) => a-b)>>> [0, 1, 4, 9, 10, 54, 123]7.禁用鼠标右键有些情况 ， 我们想在网页上禁用鼠标的右键 ， 可以使用下面的方式来禁用：
<body oncontextmenu="return false">  <div></div></body>这个简单的代码就可以禁用右键单击 。
8.在解构中使用别名解构赋值是一个JavaScript表达式 ， 它可以将数组中的值或对象中的属性解构缩不同的变量中 。不必使用现有的对象变量 ， 我们可以根据自己的偏好重命名它们 。
const object = { number: 10 }const { number } = object// 使用别名const { number: otherNumber } = objectconsole.log(otherNumber) //109.获取数组中的最后一项如果要获取数组的末尾元素 ， 可以使用slice方法 。


推荐阅读


上一篇：MySQL单表查询看这一篇文章就够了

下一篇：教你用 Python 爬取 Baidu 文库全格式文档